/*
  AhanSell design system — "Industrial Premium".

  Loaded globally, AFTER app.css, and deliberately sharing nothing with it. app.css is the
  stylesheet carried over from arangfoolad.com; it still owns the look of /old and every inner
  page that has not been redesigned yet, so it must keep working untouched.

  Three rules make co-existence safe. Break any of them and /old starts drifting:

    1. Every custom property is --as-*. Zero overlap with app.css's --logo-color and friends.
    2. Every class is .as-*. No ids.
    3. NO TYPE SELECTORS. Not body, a, h1, table, img, ul — nothing. The only bare-selector
       constructs allowed in this file are :root{--as-*}, @media and @keyframes as-*.

  Three app.css rules actively fight this file, and each has a specific counter:

    - app.css:70  `button, .btn { ... }`  -> .as-btn ties on specificity and wins on source
      order, but must RE-DECLARE every property app.css sets or it inherits half of .btn.
    - app.css:92  `input[type="text"], ..., select, textarea { ... }` is (0,1,1), which BEATS a
      bare .as-input (0,1,0). Hence input.as-input / select.as-input / textarea.as-input below.
    - app.css:104 `table { ... }` + `table.styled-table th/td`. New tables use .as-table and
      must never also carry .styled-table.

  app.css also sets html{font-size:15px} globally, which cannot change without moving /old. So
  the type scale here is px-based and immune to it.

  RTL: the document is dir="rtl" already. Everything below uses logical properties
  (margin-inline-*, inset-inline-*, text-align:start), so there is no LTR override block to
  maintain. The one justified [dir] selector is the chevron flip at the bottom.
*/

/* ============================================================================
   Tokens
   ============================================================================ */
:root {
    /* identity: navy ramp anchored on app.css's existing --logo-color (#1e3765) */
    --as-navy-900: #0e1a30;
    --as-navy-800: #16294a;
    --as-navy-700: #1e3765;
    --as-navy-600: #284a86;
    --as-navy-500: #1d67a9;
    --as-navy-100: #dbe4f2;
    --as-navy-050: #eef2f9;

    /* ink */
    --as-ink: #101828;
    --as-ink-2: #475467;
    --as-ink-3: #98a2b3;
    --as-on-navy: #ffffff;
    --as-on-navy-2: rgba(255, 255, 255, .72);

    /* ground / surface */
    --as-ground: #ffffff;
    --as-ground-2: #f6f8fb;
    --as-surface: #ffffff;
    --as-line: #e4e8f0;
    --as-line-strong: #cfd6e4;

    /* accent — reserved for price status only, never for decoration */
    --as-up: #0f8a4d;
    --as-up-bg: #e7f6ee;
    --as-down: #c62445;
    --as-down-bg: #fdecf1;
    --as-flat: #667085;
    --as-flat-bg: #f2f4f7;
    --as-stale: #b25e09;
    --as-stale-bg: #fdf3e6;

    /* action */
    --as-cta: #1d67a9;
    --as-cta-hover: #175a95;
    --as-on-cta: #ffffff;
    --as-cta-ghost-border: #cfd6e4;
    --as-wa: #25d366;
    --as-focus: #1d67a9;
    --as-focus-ring: 0 0 0 3px rgba(29, 103, 169, .28);

    /* spacing, 4px base */
    --as-s1: 4px;
    --as-s2: 8px;
    --as-s3: 12px;
    --as-s4: 16px;
    --as-s5: 20px;
    --as-s6: 24px;
    --as-s8: 32px;
    --as-s10: 40px;
    --as-s12: 48px;
    --as-s16: 64px;
    --as-s20: 80px;

    /* radius — medium, not pill-shaped cards */
    --as-r-sm: 6px;
    --as-r: 10px;
    --as-r-md: 14px;
    --as-r-lg: 20px;
    --as-r-pill: 999px;

    /* shadow — low and professional */
    --as-sh-1: 0 1px 2px rgba(16, 24, 40, .06);
    --as-sh-2: 0 2px 8px -2px rgba(16, 24, 40, .08);
    --as-sh-3: 0 12px 24px -12px rgba(18, 32, 60, .18);
    --as-sh-header: 0 1px 0 rgba(16, 24, 40, .07);

    /* typography — px, immune to app.css html{font-size:15px} */
    --as-font: "Vazirmatn", "Segoe UI", Tahoma, sans-serif;
    --as-fs-11: 11px;
    --as-fs-12: 12px;
    --as-fs-13: 13px;
    --as-fs-14: 14px;
    --as-fs-15: 15px;
    --as-fs-16: 16px;
    --as-fs-18: 18px;
    --as-fs-20: 20px;
    --as-fs-24: 24px;
    --as-fs-30: 30px;
    --as-fs-38: 38px;
    --as-fs-price: 28px;
    --as-fs-price-lg: 34px;
    --as-fw-regular: 400;
    --as-fw-medium: 500;
    --as-fw-semi: 600;
    --as-fw-bold: 700;
    --as-fw-black: 800;
    --as-lh-tight: 1.25;
    --as-lh: 1.6;
    --as-lh-loose: 1.85;

    /* layout */
    --as-container: 1280px;
    --as-container-narrow: 960px;
    --as-gutter: 16px;
    --as-header-h: 64px;
    --as-bar-h: 60px;
    --as-tap: 44px;

    /* motion / depth */
    --as-t-fast: 120ms;
    --as-t: 180ms;
    --as-ease: cubic-bezier(.2, .7, .3, 1);
    --as-z-header: 100;
    --as-z-bar: 90;
    --as-z-menu: 110;
}

@media (min-width: 768px) {
    :root {
        --as-gutter: 24px;
        --as-fs-price: 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --as-t-fast: 0ms;
        --as-t: 0ms;
    }
}

/* ============================================================================
   Primitives
   ============================================================================ */
.as-container {
    max-width: var(--as-container);
    width: 100%;
    min-width: 0;
    margin-inline: auto;
    padding-inline: var(--as-gutter);
    box-sizing: border-box;
}

.as-narrow {
    max-width: var(--as-container-narrow);
}

/* Numerals must be bidi-isolated or a price reorders inside an RTL sentence.
   tabular-nums is what makes a column of prices line up digit-for-digit. */
.as-num {
    direction: ltr;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.as-section {
    padding-block: var(--as-s10);
    font-family: var(--as-font);
    color: var(--as-ink);
    line-height: var(--as-lh);
}

.as-section-alt {
    background: var(--as-ground-2);
}

.as-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--as-s3);
    margin-block-end: var(--as-s6);
}

.as-h2 {
    margin: 0;
    font-size: var(--as-fs-24);
    font-weight: var(--as-fw-bold);
    line-height: var(--as-lh-tight);
    color: var(--as-ink);
}

.as-sub {
    margin: var(--as-s2) 0 0;
    font-size: var(--as-fs-14);
    color: var(--as-ink-2);
}

.as-eyebrow {
    display: inline-block;
    font-size: var(--as-fs-12);
    font-weight: var(--as-fw-semi);
    letter-spacing: .02em;
    color: var(--as-navy-500);
}

.as-more {
    font-size: var(--as-fs-14);
    font-weight: var(--as-fw-semi);
    color: var(--as-cta);
    text-decoration: none;
}

.as-more:hover {
    color: var(--as-cta-hover);
    text-decoration: underline;
}

.as-card {
    background: var(--as-surface);
    border: 1px solid var(--as-line);
    border-radius: var(--as-r-md);
    box-shadow: var(--as-sh-1);
}

/* Buttons. Every property app.css:70 sets is re-declared here — inheriting half of .btn is
   how you end up with a two-tone button. */
.as-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--as-s2);
    min-height: var(--as-tap);
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: var(--as-r);
    background: var(--as-cta);
    color: var(--as-on-cta);
    font-family: var(--as-font);
    font-size: var(--as-fs-15);
    font-weight: var(--as-fw-semi);
    line-height: var(--as-lh-tight);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--as-t) var(--as-ease), border-color var(--as-t) var(--as-ease);
}

.as-btn:hover {
    background: var(--as-cta-hover);
    color: var(--as-on-cta);
}

.as-btn:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--as-focus-ring);
}

.as-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.as-btn-ghost {
    background: transparent;
    border-color: var(--as-cta-ghost-border);
    color: var(--as-ink);
}

.as-btn-ghost:hover {
    background: var(--as-navy-050);
    border-color: var(--as-navy-100);
    color: var(--as-ink);
}

.as-btn-navy {
    background: var(--as-navy-700);
}

.as-btn-navy:hover {
    background: var(--as-navy-800);
}

.as-btn-on-navy {
    background: var(--as-on-navy);
    color: var(--as-navy-700);
}

.as-btn-on-navy:hover {
    background: var(--as-navy-050);
    color: var(--as-navy-800);
}

.as-btn-sm {
    min-height: 36px;
    padding: 6px 14px;
    font-size: var(--as-fs-13);
}

.as-btn-block {
    width: 100%;
}

/* Inputs. The type+attribute selector in app.css:92 is (0,1,1) and would otherwise win, so
   these are written as element.class to match its specificity and take source order.
   16px minimum: anything smaller makes iOS Safari zoom the page on focus. */
input.as-input,
select.as-input,
textarea.as-input {
    width: 100%;
    min-height: var(--as-tap);
    padding: 10px 14px;
    background: var(--as-surface);
    border: 1px solid var(--as-line-strong);
    border-radius: var(--as-r);
    font-family: var(--as-font);
    font-size: var(--as-fs-16);
    line-height: var(--as-lh);
    color: var(--as-ink);
    transition: border-color var(--as-t) var(--as-ease), box-shadow var(--as-t) var(--as-ease);
}

textarea.as-input {
    min-height: 96px;
    resize: vertical;
}

input.as-input:focus,
select.as-input:focus,
textarea.as-input:focus {
    outline: 2px solid transparent;
    border-color: var(--as-focus);
    box-shadow: var(--as-focus-ring);
}

input.as-input::placeholder,
textarea.as-input::placeholder {
    color: var(--as-ink-3);
}

.as-field {
    display: flex;
    flex-direction: column;
    gap: var(--as-s1);
}

.as-label {
    font-size: var(--as-fs-13);
    font-weight: var(--as-fw-medium);
    color: var(--as-ink-2);
}

.as-error {
    margin: var(--as-s2) 0 0;
    padding: var(--as-s2) var(--as-s3);
    border-radius: var(--as-r-sm);
    background: var(--as-down-bg);
    color: var(--as-down);
    font-size: var(--as-fs-13);
}

.as-success {
    padding: var(--as-s4);
    border-radius: var(--as-r);
    background: var(--as-up-bg);
    color: var(--as-up);
    font-size: var(--as-fs-15);
    font-weight: var(--as-fw-medium);
}

/* Tables. Never combine .as-table with app.css's .styled-table. */
.as-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Under dir=rtl, Chromium counts leftward overflow inside a scroller towards the document
       scrollWidth. Paint containment keeps the page from gaining a horizontal scrollbar. */
    contain: paint;
    max-width: 100%;
}

.as-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--as-fs-14);
}

.as-table th,
.as-table td {
    padding: 10px 12px;
    text-align: start;
    border-block-end: 1px solid var(--as-line);
    white-space: nowrap;
}

.as-table th {
    background: var(--as-ground-2);
    color: var(--as-ink-2);
    font-weight: var(--as-fw-semi);
    font-size: var(--as-fs-13);
}

.as-table td {
    color: var(--as-ink);
}

.as-table tr:hover td {
    background: var(--as-navy-050);
}

.as-table-price {
    font-weight: var(--as-fw-bold);
    font-size: var(--as-fs-15);
}

.as-table-muted {
    color: var(--as-ink-3);
    font-weight: var(--as-fw-regular);
}

/* Status chips. Direction is never carried by colour alone — each chip renders an arrow
   glyph and a word too (spec section 16). */
.as-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--as-s1);
    padding: 3px 10px;
    border-radius: var(--as-r-pill);
    font-size: var(--as-fs-12);
    font-weight: var(--as-fw-semi);
    white-space: nowrap;
}

.as-chip-up {
    background: var(--as-up-bg);
    color: var(--as-up);
}

.as-chip-down {
    background: var(--as-down-bg);
    color: var(--as-down);
}

.as-chip-flat {
    background: var(--as-flat-bg);
    color: var(--as-flat);
}

.as-chip-stale {
    background: var(--as-stale-bg);
    color: var(--as-stale);
}

.as-chip-soft {
    background: var(--as-navy-050);
    color: var(--as-navy-600);
}

/* Category / filter chips */
.as-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--as-s2);
}

.as-chip-link {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 6px 14px;
    border: 1px solid var(--as-line-strong);
    border-radius: var(--as-r-pill);
    background: var(--as-surface);
    color: var(--as-ink);
    font-size: var(--as-fs-14);
    font-weight: var(--as-fw-medium);
    text-decoration: none;
    transition: border-color var(--as-t) var(--as-ease), background var(--as-t) var(--as-ease);
}

.as-chip-link:hover {
    background: var(--as-navy-050);
    border-color: var(--as-navy-100);
    color: var(--as-navy-700);
}

.as-empty {
    padding: var(--as-s8) var(--as-s4);
    border: 1px dashed var(--as-line-strong);
    border-radius: var(--as-r-md);
    background: var(--as-ground-2);
    color: var(--as-ink-2);
    font-size: var(--as-fs-14);
    text-align: center;
}

.as-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================================
   Header
   ============================================================================ */
.as-header {
    position: sticky;
    top: 0;
    z-index: var(--as-z-header);
    background: var(--as-surface);
    border-block-end: 1px solid var(--as-line);
    box-shadow: var(--as-sh-header);
    font-family: var(--as-font);
    /* Clip wide nav so it cannot inflate document scrollWidth under dir=rtl.
       overflow-y stays visible so the قیمت روز mega panel can drop below the bar. */
    overflow-x: clip;
    overflow-y: visible;
    max-width: 100%;
}

.as-header-inner {
    display: flex;
    align-items: center;
    gap: var(--as-s4);
    min-height: var(--as-header-h);
    max-width: var(--as-container);
    width: 100%;
    min-width: 0;
    margin-inline: auto;
    padding-inline: var(--as-gutter);
    box-sizing: border-box;
}

.as-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--as-s2);
    text-decoration: none;
    color: var(--as-navy-700);
    font-weight: var(--as-fw-bold);
    font-size: var(--as-fs-18);
    flex-shrink: 0;
}

.as-logo img {
    height: 34px;
    width: auto;
    display: block;
}

.as-nav {
    display: flex;
    align-items: center;
    gap: var(--as-s1);
    margin-inline-start: auto;
    flex-wrap: nowrap;
    min-width: 0;
}

.as-nav a {
    display: inline-flex;
    align-items: center;
    min-height: var(--as-tap);
    padding: 6px 8px;
    border-radius: var(--as-r-sm);
    color: var(--as-ink-2);
    font-size: var(--as-fs-13);
    font-weight: var(--as-fw-medium);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--as-t) var(--as-ease), background var(--as-t) var(--as-ease);
}

.as-nav a:hover {
    color: var(--as-navy-700);
    background: var(--as-navy-050);
}

/* ---- قیمت روز محصولات mega-menu (Digikala-style rail + pane) ------------ */
.as-mega {
    position: relative;
}

.as-mega-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: var(--as-tap);
    padding: 6px 8px;
    border: none;
    border-radius: var(--as-r-sm);
    background: transparent;
    color: var(--as-ink-2);
    font: inherit;
    font-size: var(--as-fs-13);
    font-weight: var(--as-fw-medium);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--as-t) var(--as-ease), background var(--as-t) var(--as-ease);
}

.as-mega-trigger:hover,
.as-mega:hover .as-mega-trigger,
.as-mega:focus-within .as-mega-trigger {
    color: var(--as-navy-700);
    background: var(--as-navy-050);
}

.as-mega-chevron {
    flex: none;
    opacity: .7;
    transition: transform var(--as-t) var(--as-ease);
}

.as-mega:hover .as-mega-chevron,
.as-mega:focus-within .as-mega-chevron {
    transform: rotate(180deg);
}

.as-mega-panel {
    display: none;
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 2px);
    width: min(920px, 94vw);
    min-height: 360px;
    max-height: min(520px, 78vh);
    background: var(--as-surface);
    border: 1px solid var(--as-line);
    border-radius: var(--as-r-md);
    box-shadow: var(--as-sh-3);
    z-index: var(--as-z-menu);
    overflow: hidden;
    /* Rail (inline-start) + panes (flex grow). In RTL the rail sits on the right. */
    flex-direction: row;
    align-items: stretch;
}

.as-mega:hover .as-mega-panel,
.as-mega:focus-within .as-mega-panel {
    display: flex;
}

.as-mega-rail {
    list-style: none;
    margin: 0;
    padding: var(--as-s2) 0;
    flex: 0 0 220px;
    width: 220px;
    max-height: inherit;
    min-height: 360px;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--as-navy-050);
    border-inline-end: 1px solid var(--as-line);
    box-sizing: border-box;
    z-index: 2;
}

.as-mega-cat {
    position: static;
}

.as-mega-rail-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--as-s2);
    width: 100%;
    min-height: 44px;
    padding: 8px 14px;
    color: var(--as-ink);
    font-size: var(--as-fs-13);
    font-weight: var(--as-fw-medium);
    cursor: default;
    background: transparent;
    border: none;
    text-align: start;
    box-sizing: border-box;
    transition: background var(--as-t) var(--as-ease), color var(--as-t) var(--as-ease);
}

.as-mega-rail-item svg {
    flex: none;
    color: var(--as-ink-3);
    /* Point toward the content pane (inline-end under RTL). */
    transform: scaleX(-1);
}

.as-mega-rail-title {
    flex: 1;
    min-width: 0;
}

.as-mega-cat:hover > .as-mega-rail-item,
.as-mega-cat:focus-within > .as-mega-rail-item {
    background: var(--as-surface);
    color: var(--as-navy-700);
}

.as-mega-cat:hover > .as-mega-rail-item svg,
.as-mega-cat:focus-within > .as-mega-rail-item svg {
    color: var(--as-navy-600);
}

.as-mega-panes {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 360px;
    background: var(--as-surface);
}

.as-mega-pane {
    display: none;
    position: absolute;
    inset: 0;
    padding: var(--as-s4) var(--as-s5);
    overflow-y: auto;
    background: var(--as-surface);
}

/* Default: first root's pane is visible until another root is hovered/focused. */
.as-mega-pane.is-default {
    display: block;
}

.as-mega-cat.is-default > .as-mega-rail-item {
    background: var(--as-surface);
    color: var(--as-navy-700);
}

.as-mega-panel:has(.as-mega-cat:hover) .as-mega-pane.is-default,
.as-mega-panel:has(.as-mega-cat:focus-within) .as-mega-pane.is-default {
    display: none;
}

.as-mega-panel:has(.as-mega-cat:hover) .as-mega-cat.is-default:not(:hover):not(:focus-within) > .as-mega-rail-item,
.as-mega-panel:has(.as-mega-cat:focus-within) .as-mega-cat.is-default:not(:hover):not(:focus-within) > .as-mega-rail-item {
    background: transparent;
    color: var(--as-ink);
}

/* Pair rail item N with pane N (pure CSS, Digikala hover). Up to 24 roots. */
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(1):hover) > .as-mega-panes > .as-mega-pane:nth-child(1),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(1):focus-within) > .as-mega-panes > .as-mega-pane:nth-child(1),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(2):hover) > .as-mega-panes > .as-mega-pane:nth-child(2),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(2):focus-within) > .as-mega-panes > .as-mega-pane:nth-child(2),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(3):hover) > .as-mega-panes > .as-mega-pane:nth-child(3),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(3):focus-within) > .as-mega-panes > .as-mega-pane:nth-child(3),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(4):hover) > .as-mega-panes > .as-mega-pane:nth-child(4),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(4):focus-within) > .as-mega-panes > .as-mega-pane:nth-child(4),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(5):hover) > .as-mega-panes > .as-mega-pane:nth-child(5),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(5):focus-within) > .as-mega-panes > .as-mega-pane:nth-child(5),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(6):hover) > .as-mega-panes > .as-mega-pane:nth-child(6),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(6):focus-within) > .as-mega-panes > .as-mega-pane:nth-child(6),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(7):hover) > .as-mega-panes > .as-mega-pane:nth-child(7),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(7):focus-within) > .as-mega-panes > .as-mega-pane:nth-child(7),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(8):hover) > .as-mega-panes > .as-mega-pane:nth-child(8),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(8):focus-within) > .as-mega-panes > .as-mega-pane:nth-child(8),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(9):hover) > .as-mega-panes > .as-mega-pane:nth-child(9),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(9):focus-within) > .as-mega-panes > .as-mega-pane:nth-child(9),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(10):hover) > .as-mega-panes > .as-mega-pane:nth-child(10),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(10):focus-within) > .as-mega-panes > .as-mega-pane:nth-child(10),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(11):hover) > .as-mega-panes > .as-mega-pane:nth-child(11),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(11):focus-within) > .as-mega-panes > .as-mega-pane:nth-child(11),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(12):hover) > .as-mega-panes > .as-mega-pane:nth-child(12),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(12):focus-within) > .as-mega-panes > .as-mega-pane:nth-child(12),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(13):hover) > .as-mega-panes > .as-mega-pane:nth-child(13),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(13):focus-within) > .as-mega-panes > .as-mega-pane:nth-child(13),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(14):hover) > .as-mega-panes > .as-mega-pane:nth-child(14),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(14):focus-within) > .as-mega-panes > .as-mega-pane:nth-child(14),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(15):hover) > .as-mega-panes > .as-mega-pane:nth-child(15),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(15):focus-within) > .as-mega-panes > .as-mega-pane:nth-child(15),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(16):hover) > .as-mega-panes > .as-mega-pane:nth-child(16),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(16):focus-within) > .as-mega-panes > .as-mega-pane:nth-child(16),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(17):hover) > .as-mega-panes > .as-mega-pane:nth-child(17),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(17):focus-within) > .as-mega-panes > .as-mega-pane:nth-child(17),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(18):hover) > .as-mega-panes > .as-mega-pane:nth-child(18),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(18):focus-within) > .as-mega-panes > .as-mega-pane:nth-child(18),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(19):hover) > .as-mega-panes > .as-mega-pane:nth-child(19),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(19):focus-within) > .as-mega-panes > .as-mega-pane:nth-child(19),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(20):hover) > .as-mega-panes > .as-mega-pane:nth-child(20),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(20):focus-within) > .as-mega-panes > .as-mega-pane:nth-child(20),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(21):hover) > .as-mega-panes > .as-mega-pane:nth-child(21),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(21):focus-within) > .as-mega-panes > .as-mega-pane:nth-child(21),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(22):hover) > .as-mega-panes > .as-mega-pane:nth-child(22),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(22):focus-within) > .as-mega-panes > .as-mega-pane:nth-child(22),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(23):hover) > .as-mega-panes > .as-mega-pane:nth-child(23),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(23):focus-within) > .as-mega-panes > .as-mega-pane:nth-child(23),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(24):hover) > .as-mega-panes > .as-mega-pane:nth-child(24),
.as-mega-panel:has(.as-mega-rail > .as-mega-cat:nth-child(24):focus-within) > .as-mega-panes > .as-mega-pane:nth-child(24) {
    display: block;
}

.as-mega-pane-head {
    margin-block-end: var(--as-s3);
    padding-block-end: var(--as-s2);
    border-block-end: 1px solid var(--as-line);
}

.as-mega-pane-all {
    display: inline-flex !important;
    align-items: center;
    font-size: var(--as-fs-14) !important;
    font-weight: var(--as-fw-bold) !important;
    color: var(--as-navy-700) !important;
    text-decoration: none !important;
    white-space: normal !important;
    min-height: auto !important;
    padding: 0 !important;
    background: transparent !important;
}

.as-mega-pane-all:hover {
    color: var(--as-navy-500) !important;
    text-decoration: underline !important;
}

.as-mega-pane-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--as-s4) var(--as-s5);
}

.as-mega-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.as-mega-root {
    font-weight: var(--as-fw-bold) !important;
    color: var(--as-navy-700) !important;
    white-space: normal !important;
}

.as-mega-child {
    font-size: var(--as-fs-13) !important;
    color: var(--as-ink) !important;
    white-space: normal !important;
    min-height: 32px !important;
    padding-block: 4px !important;
    font-weight: var(--as-fw-semi) !important;
}

.as-mega-grandchild {
    font-size: var(--as-fs-12) !important;
    color: var(--as-ink-2) !important;
    white-space: normal !important;
    min-height: 28px !important;
    padding-block: 2px !important;
}

.as-mega-label {
    display: block;
    cursor: default;
    pointer-events: none;
}

.as-mega-child.as-mega-label {
    font-weight: var(--as-fw-semi);
    color: var(--as-ink) !important;
    margin-block-end: 2px;
}

.as-mega-mobile {
    display: none;
}

.as-header-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--as-s2);
    min-height: 38px;
    padding: 6px 16px;
    border-radius: var(--as-r);
    background: var(--as-navy-700);
    color: var(--as-on-navy);
    font-size: var(--as-fs-14);
    font-weight: var(--as-fw-semi);
    text-decoration: none;
    flex-shrink: 0;
    transition: background var(--as-t) var(--as-ease);
}

.as-header-cta:hover {
    background: var(--as-navy-800);
    color: var(--as-on-navy);
}

/* Mobile drawer, checkbox-hack: no JS, no Blazor circuit. The checkbox resets on navigation
   because enhanced nav replaces the DOM, which is exactly the wanted behaviour. */
.as-nav-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--as-tap);
    height: var(--as-tap);
    margin-inline-start: auto;
    border: 1px solid var(--as-line-strong);
    border-radius: var(--as-r-sm);
    background: var(--as-surface);
    color: var(--as-ink);
    cursor: pointer;
    flex-shrink: 0;
}

.as-nav-toggle:focus-visible + .as-nav-btn {
    box-shadow: var(--as-focus-ring);
}

@media (max-width: 1100px) {
    .as-nav-btn {
        display: inline-flex;
    }

    .as-header-cta {
        display: none;
    }

    .as-nav {
        display: none;
        position: absolute;
        inset-inline: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--as-s2) var(--as-gutter) var(--as-s4);
        background: var(--as-surface);
        border-block-end: 1px solid var(--as-line);
        box-shadow: var(--as-sh-3);
        z-index: var(--as-z-menu);
        overflow-x: visible;
    }

    .as-nav-toggle:checked ~ .as-nav {
        display: flex;
    }

    .as-nav a {
        border-radius: 0;
        border-block-end: 1px solid var(--as-line);
        font-size: var(--as-fs-15);
    }

    /* Desktop mega hides in the drawer; nested accordion shows Digikala-like drill-down. */
    .as-mega {
        display: none;
    }

    .as-mega-mobile {
        display: block;
        border-block-end: 1px solid var(--as-line);
    }

    .as-mega-mobile > summary {
        display: flex;
        align-items: center;
        min-height: var(--as-tap);
        padding: 6px 8px;
        font-size: var(--as-fs-15);
        font-weight: var(--as-fw-medium);
        color: var(--as-ink-2);
        cursor: pointer;
        list-style: none;
    }

    .as-mega-mobile > summary::-webkit-details-marker {
        display: none;
    }

    .as-mega-mobile-body {
        display: flex;
        flex-direction: column;
        padding-inline-start: var(--as-s2);
        padding-block-end: var(--as-s2);
    }

    .as-mega-mobile-cat {
        border-block-end: 1px solid var(--as-line);
    }

    .as-mega-mobile-cat > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: var(--as-tap);
        padding: 8px 10px;
        font-size: var(--as-fs-14);
        font-weight: var(--as-fw-semi);
        color: var(--as-navy-700);
        cursor: pointer;
        list-style: none;
    }

    .as-mega-mobile-cat > summary::-webkit-details-marker {
        display: none;
    }

    .as-mega-mobile-cat > summary::after {
        content: "";
        width: 8px;
        height: 8px;
        border-inline-end: 2px solid var(--as-ink-3);
        border-block-end: 2px solid var(--as-ink-3);
        transform: rotate(45deg);
        transition: transform var(--as-t) var(--as-ease);
        flex: none;
    }

    .as-mega-mobile-cat[open] > summary::after {
        transform: rotate(225deg);
    }

    .as-mega-mobile-pane {
        display: flex;
        flex-direction: column;
        padding: 0 var(--as-s3) var(--as-s2);
        background: var(--as-navy-050);
    }

    .as-mega-mobile-pane a {
        border-block-end: 1px solid var(--as-line);
    }

    .as-header-inner {
        position: relative;
    }
}

/* ============================================================================
   Hero + search
   ============================================================================ */
.as-hero {
    background-color: var(--as-navy-800);
    background-image:
        linear-gradient(90deg, rgba(22, 41, 74, 0.35) 0%, rgba(22, 41, 74, 0.75) 45%, rgba(22, 41, 74, 0.92) 100%),
        url("/images/hero-bg-search.jpg");
    background-size: cover;
    background-position: center;
    color: var(--as-on-navy);
    padding-block: var(--as-s12) var(--as-s10);
    font-family: var(--as-font);
    box-sizing: border-box;
}

/* Digikala-style homepage slider: slide 1 (HeroSearch) fills the fixed 400px frame. */
.as-hero-slideshow > .as-hero-slide > .as-hero {
    height: 100%;
    padding-block: 0;
    display: flex;
    align-items: center;
}

.as-hero-inner {
    max-width: var(--as-container);
    margin-inline: auto;
    padding-inline: var(--as-gutter);
    width: 100%;
}

.as-hero-slideshow > .as-hero-slide > .as-hero .as-hero-inner {
    padding-block: var(--as-s5);
}

.as-hero h1 {
    margin: var(--as-s3) 0 0;
    font-size: var(--as-fs-30);
    font-weight: var(--as-fw-black);
    line-height: var(--as-lh-tight);
    color: var(--as-on-navy);
}

.as-hero-slideshow > .as-hero-slide > .as-hero h1 {
    margin-block-start: var(--as-s2);
    font-size: var(--as-fs-28);
}

.as-hero-lead {
    margin: var(--as-s3) 0 0;
    max-width: 62ch;
    font-size: var(--as-fs-16);
    color: var(--as-on-navy-2);
}

.as-hero-slideshow > .as-hero-slide > .as-hero .as-hero-lead {
    margin-block-start: var(--as-s2);
    font-size: var(--as-fs-15);
}

.as-hero-slideshow > .as-hero-slide > .as-hero .as-search {
    margin-block-start: var(--as-s4);
}

.as-hero-slideshow > .as-hero-slide > .as-hero .as-hero-meta {
    margin-block-start: var(--as-s3);
}

.as-hero-slideshow > .as-hero-slide > .as-hero .as-hero-chips {
    margin-block-start: var(--as-s3);
    max-height: 2.4em;
    overflow: hidden;
}

.as-hero .as-eyebrow {
    color: var(--as-on-navy-2);
}

.as-search {
    display: flex;
    gap: var(--as-s2);
    margin-block-start: var(--as-s6);
    max-width: 640px;
}

.as-search input.as-input {
    flex: 1;
    min-height: 50px;
    border-color: transparent;
}

.as-search .as-btn {
    min-height: 50px;
    flex-shrink: 0;
}

.as-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--as-s2) var(--as-s4);
    margin-block-start: var(--as-s4);
    font-size: var(--as-fs-13);
    color: var(--as-on-navy-2);
}

.as-hero-chips {
    margin-block-start: var(--as-s5);
}

.as-hero-chips .as-chip-link {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .22);
    color: var(--as-on-navy);
}

.as-hero-chips .as-chip-link:hover {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .34);
    color: var(--as-on-navy);
}

@media (min-width: 768px) {
    .as-hero h1 {
        font-size: var(--as-fs-38);
    }
}

@media (max-width: 560px) {
    .as-search {
        flex-direction: column;
    }
}

/* Hero slideshow — Digikala-style: full-bleed, fixed 400px frame. All slides (search +
   images) are absolutely stacked; JS toggles .is-active. Designed for 1500×400 slide art. */
.as-hero-slideshow {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    background: var(--as-navy-900);
}

.as-hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s ease;
    z-index: 0;
}

.as-hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.as-hero-slide--image {
    display: block;
}

.as-hero-slide--image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.as-hero-dots {
    position: absolute;
    inset-inline: 0;
    bottom: 14px;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 2px;
}

/* The hit box is a fixed 24px square that never resizes — only the ::after pill grows when
   active. Sizing the <button> itself (as before) shifted every dot after it in the flex row
   the moment one became active, so a quick second click could land on empty space instead of
   the next dot. The visual dot stays exactly as small as before; only the target got bigger. */
.as-hero-dot {
    position: relative;
    inline-size: 24px;
    block-size: 24px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    flex: none;
}

.as-hero-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    inline-size: 8px;
    block-size: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
    transition: background var(--as-t) var(--as-ease), inline-size var(--as-t) var(--as-ease);
}

.as-hero-dot:hover::after {
    background: rgba(255, 255, 255, .8);
}

.as-hero-dot.is-active::after {
    inline-size: 22px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}

/* Digikala-style hover arrows: full-bleed row near the bottom, invisible until hover/focus. */
.as-hero-nav {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px 28px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
}

.as-hero-slideshow:hover .as-hero-nav,
.as-hero-slideshow:focus-within .as-hero-nav {
    opacity: 1;
}

.as-hero-arrow {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: #424242;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
    cursor: pointer;
    transition: background var(--as-t) var(--as-ease), box-shadow var(--as-t) var(--as-ease), color var(--as-t) var(--as-ease);
}

.as-hero-arrow:hover {
    background: #f5f5f5;
    color: #212121;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
}

.as-hero-arrow:focus-visible {
    outline: 2px solid var(--as-navy-500);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .as-hero-slide {
        transition: none;
    }

    .as-hero-nav {
        transition: none;
    }
}

/* Digikala-like: keep a shorter full-bleed strip on phones; still rotate image slides. */
@media (max-width: 640px) {
    .as-hero-slideshow {
        height: 220px;
    }

    .as-hero-slideshow > .as-hero-slide > .as-hero .as-hero-chips {
        display: none;
    }

    .as-hero-slideshow > .as-hero-slide > .as-hero h1 {
        font-size: var(--as-fs-22);
    }

    .as-hero-slideshow > .as-hero-slide > .as-hero .as-hero-lead {
        display: none;
    }

    .as-hero-nav {
        /* Always reachable on touch — no hover. */
        opacity: 1;
        padding: 0 10px 18px;
    }

    .as-hero-arrow {
        inline-size: 36px;
        block-size: 36px;
    }

    .as-hero-arrow svg {
        width: 16px;
        height: 16px;
    }
}

/* ============================================================================
   Quick actions
   ============================================================================ */
/* Mobile-first: a single-column list so the icon/title/sub-title of each item gets the full
   card width. The 2-up grid this used to be at every width let long labels wrap to two or three
   lines on a phone; title/sub are now forced to one line with an ellipsis instead. The 4-up
   grid returns at tablet width and up, where there is room for it. */
.as-quick {
    display: flex;
    flex-direction: column;
    gap: var(--as-s2);
}

.as-quick-item {
    display: flex;
    align-items: center;
    gap: var(--as-s3);
    min-height: var(--as-tap);
    padding: var(--as-s4);
    background: var(--as-surface);
    border: 1px solid var(--as-line);
    border-radius: var(--as-r-md);
    box-shadow: var(--as-sh-1);
    color: var(--as-ink);
    text-decoration: none;
    transition: border-color var(--as-t) var(--as-ease), box-shadow var(--as-t) var(--as-ease);
}

.as-quick-item:hover {
    border-color: var(--as-navy-100);
    box-shadow: var(--as-sh-2);
    color: var(--as-navy-700);
}

.as-quick-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--as-r);
    background: var(--as-navy-050);
    color: var(--as-navy-600);
    flex-shrink: 0;
}

.as-quick-text {
    flex: 1;
    min-width: 0;
}

.as-quick-title {
    display: block;
    font-size: var(--as-fs-15);
    font-weight: var(--as-fw-semi);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.as-quick-sub {
    display: block;
    font-size: var(--as-fs-12);
    color: var(--as-ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.as-quick-chev {
    flex-shrink: 0;
    color: var(--as-ink-3);
}

@media (min-width: 768px) {
    .as-quick {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--as-s3);
    }

    .as-quick-chev {
        display: none;
    }
}

/* Category showcase — same card idiom as .as-quick-item/.as-tool/.as-factory (surface, line,
   r-md, sh-1 → sh-2 on hover), but image-led: the icon set under wwwroot/images/categories is
   a white glyph on transparent ground, so it needs a solid navy tile to read against. */
.as-cat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--as-s3);
}

.as-cat-card {
    display: flex;
    flex-direction: column;
    background: var(--as-surface);
    border: 1px solid var(--as-line);
    border-radius: var(--as-r-md);
    box-shadow: var(--as-sh-1);
    overflow: hidden;
    color: var(--as-ink);
    text-decoration: none;
    transition: border-color var(--as-t) var(--as-ease), box-shadow var(--as-t) var(--as-ease);
}

.as-cat-card:hover {
    border-color: var(--as-navy-100);
    box-shadow: var(--as-sh-2);
    color: var(--as-ink);
}

.as-cat-media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background: linear-gradient(150deg, var(--as-navy-700), var(--as-navy-900));
}

.as-cat-media img {
    width: 52%;
    height: 52%;
    object-fit: contain;
}

/* Root with no icon art yet: first letter of its name, white on the same navy tile. */
.as-cat-initial {
    color: var(--as-on-navy);
    font-size: 3.2rem;
    font-weight: var(--as-fw-bold);
    line-height: 1;
    opacity: .9;
}

.as-cat-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--as-s3) var(--as-s4) var(--as-s4);
}

.as-cat-name {
    font-size: var(--as-fs-15);
    font-weight: var(--as-fw-semi);
}

.as-cat-sub {
    font-size: var(--as-fs-12);
    color: var(--as-ink-2);
}

@media (min-width: 640px) {
    .as-cat-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .as-cat-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* ============================================================================
   Shared homepage tiles — Market Snapshot + Factories use the same chrome so the two
   bands read as one system (accent bar, surface, radius, shadow, hover).
   ============================================================================ */
.as-tile-grid {
    display: grid;
    gap: var(--as-s3);
}

.as-tile {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--as-s2);
    padding: var(--as-s4);
    padding-block-start: calc(var(--as-s4) + 3px);
    background:
        linear-gradient(165deg, var(--as-navy-050) 0%, var(--as-surface) 42%);
    border: 1px solid var(--as-line);
    border-radius: var(--as-r-md);
    box-shadow: var(--as-sh-1);
    color: var(--as-ink);
    text-decoration: none;
    transition:
        border-color var(--as-t) var(--as-ease),
        box-shadow var(--as-t) var(--as-ease),
        transform var(--as-t) var(--as-ease);
}

.as-tile:hover {
    border-color: var(--as-navy-100);
    box-shadow: var(--as-sh-2);
    color: var(--as-ink);
}

a.as-tile:hover {
    transform: translateY(-2px);
}

.as-tile-accent {
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--as-navy-700), var(--as-navy-500));
    pointer-events: none;
}

.as-tile-kicker {
    display: inline-flex;
    align-self: flex-start;
    max-width: 100%;
    padding: 3px 10px;
    border-radius: var(--as-r-pill);
    background: var(--as-navy-050);
    border: 1px solid var(--as-navy-100);
    color: var(--as-navy-700);
    font-size: var(--as-fs-12);
    font-weight: var(--as-fw-semi);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

a.as-tile-kicker:hover {
    background: var(--as-navy-100);
    color: var(--as-navy-800);
}

/* ============================================================================
   Market snapshot
   ============================================================================ */
.as-snap-grid {
    grid-template-columns: repeat(2, 1fr);
}

/* Side bar + tint only when real trend data exists (ShowChip). */
.as-snap::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: transparent;
}

.as-snap-up {
    background: linear-gradient(165deg, var(--as-up-bg) 0%, var(--as-surface) 48%);
}

.as-snap-up::before {
    background: var(--as-up);
}

.as-snap-up .as-tile-accent {
    background: linear-gradient(90deg, var(--as-up), #3bbf7a);
}

.as-snap-down {
    background: linear-gradient(165deg, var(--as-down-bg) 0%, var(--as-surface) 48%);
}

.as-snap-down::before {
    background: var(--as-down);
}

.as-snap-down .as-tile-accent {
    background: linear-gradient(90deg, var(--as-down), #e05a75);
}

.as-snap-flat::before {
    background: var(--as-flat);
}

.as-snap-flat .as-tile-accent {
    background: linear-gradient(90deg, var(--as-flat), #98a2b3);
}

.as-snap-ref {
    font-size: var(--as-fs-12);
    color: var(--as-ink-2);
    line-height: var(--as-lh);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.as-snap-price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--as-s2);
}

.as-snap-price {
    display: flex;
    align-items: baseline;
    gap: var(--as-s2);
    flex-wrap: wrap;
    min-width: 0;
}

.as-snap-value {
    font-size: var(--as-fs-price);
    font-weight: var(--as-fw-black);
    line-height: 1.1;
    color: var(--as-ink);
}

.as-snap-unit {
    font-size: var(--as-fs-12);
    color: var(--as-ink-2);
}

.as-chip-trend {
    flex-shrink: 0;
    font-size: var(--as-fs-13);
    padding: 5px 12px;
    box-shadow: var(--as-sh-1);
}

.as-snap-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--as-s2);
    margin-block-start: auto;
    padding-block-start: var(--as-s2);
    border-block-start: 1px solid var(--as-line);
    font-size: var(--as-fs-12);
    color: var(--as-ink-3);
}

.as-snap-empty {
    font-size: var(--as-fs-14);
    color: var(--as-ink-2);
}

@media (min-width: 768px) {
    .as-snap-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .as-snap-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================================================
   Popular prices — CSS-only radio tabs (no circuit, no JS)
   ============================================================================ */
.as-tabs {
    position: relative;
}

.as-tablist {
    display: flex;
    flex-wrap: wrap;
    gap: var(--as-s2);
    margin-block-end: var(--as-s4);
}

.as-tab-label {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 6px 16px;
    border: 1px solid var(--as-line-strong);
    border-radius: var(--as-r-pill);
    background: var(--as-surface);
    color: var(--as-ink-2);
    font-size: var(--as-fs-14);
    font-weight: var(--as-fw-medium);
    cursor: pointer;
    user-select: none;
    transition: background var(--as-t) var(--as-ease), color var(--as-t) var(--as-ease);
}

.as-tab-label:hover {
    background: var(--as-navy-050);
    color: var(--as-navy-700);
}

.as-tabpanel {
    display: none;
}

.as-tab-radio:focus-visible + .as-tab-label {
    box-shadow: var(--as-focus-ring);
}

/* ============================================================================
   Entry bands (Finder, Compare, promo)
   ============================================================================ */
.as-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--as-s5);
    padding: var(--as-s8);
    border-radius: var(--as-r-lg);
    background: linear-gradient(135deg, var(--as-navy-800), var(--as-navy-600));
    color: var(--as-on-navy);
}

.as-band-soft {
    background: var(--as-navy-050);
    border: 1px solid var(--as-navy-100);
    color: var(--as-ink);
}

.as-band-body {
    flex: 1 1 320px;
}

.as-band h2,
.as-band h3 {
    margin: 0;
    font-size: var(--as-fs-20);
    font-weight: var(--as-fw-bold);
    line-height: var(--as-lh-tight);
}

.as-band p {
    margin: var(--as-s2) 0 0;
    font-size: var(--as-fs-14);
    color: var(--as-on-navy-2);
}

.as-band-soft p {
    color: var(--as-ink-2);
}

.as-band-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--as-s2);
}

.as-band .as-chips {
    margin-block-start: var(--as-s4);
}

.as-band .as-chip-link {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .22);
    color: var(--as-on-navy);
}

.as-band .as-chip-link:hover {
    background: rgba(255, 255, 255, .18);
    color: var(--as-on-navy);
}

.as-band-soft .as-chip-link {
    background: var(--as-surface);
    border-color: var(--as-line-strong);
    color: var(--as-ink);
}

.as-band-soft .as-chip-link:hover {
    background: var(--as-navy-050);
    color: var(--as-navy-700);
}

/* Vertical step graphic used by FinderBand to explain the آهن‌یاب module (origin → destination →
   answer) instead of a wall of copy. Lives on .as-band's dark navy gradient, so the rail uses
   on-navy tokens rather than the ink/line ones the rest of the design system reaches for. */
.as-band-steps {
    margin-block-start: var(--as-s5);
    display: flex;
    flex-direction: column;
    max-width: 420px;
}

.as-band-step {
    display: flex;
    gap: var(--as-s3);
}

.as-band-step-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.as-band-step-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--as-on-navy);
    color: var(--as-navy-700);
    font-weight: var(--as-fw-black);
    font-size: var(--as-fs-14);
    flex-shrink: 0;
}

.as-band-step-line {
    width: 2px;
    flex: 1;
    min-height: 20px;
    margin-block: 4px;
    background: rgba(255, 255, 255, .28);
}

.as-band-step-body {
    padding-block-end: var(--as-s4);
}

.as-band-step:last-child .as-band-step-body {
    padding-block-end: 0;
}

.as-band-step-title {
    font-size: var(--as-fs-14);
    font-weight: var(--as-fw-bold);
    color: var(--as-on-navy);
}

.as-band-step-desc {
    margin-block-start: 3px;
    font-size: var(--as-fs-12);
    line-height: var(--as-lh);
    color: var(--as-on-navy-2);
}

/* ============================================================================
   Tools + factories
   ============================================================================ */
.as-tool-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--as-s3);
}

.as-tool {
    display: flex;
    gap: var(--as-s3);
    padding: var(--as-s5);
    background: var(--as-surface);
    border: 1px solid var(--as-line);
    border-radius: var(--as-r-md);
    box-shadow: var(--as-sh-1);
    color: var(--as-ink);
    text-decoration: none;
    transition: border-color var(--as-t) var(--as-ease), box-shadow var(--as-t) var(--as-ease);
}

.as-tool:hover {
    border-color: var(--as-navy-100);
    box-shadow: var(--as-sh-2);
}

.as-tool-title {
    font-size: var(--as-fs-16);
    font-weight: var(--as-fw-semi);
}

.as-tool-desc {
    margin: var(--as-s1) 0 0;
    font-size: var(--as-fs-13);
    color: var(--as-ink-2);
}

.as-factory-grid {
    grid-template-columns: repeat(2, 1fr);
}

.as-factory-name {
    font-size: var(--as-fs-15);
    font-weight: var(--as-fw-bold);
    line-height: var(--as-lh-tight);
}

.as-factory-stat {
    font-size: var(--as-fs-13);
    color: var(--as-ink-2);
}

.as-factory-meta {
    margin-block-start: auto;
    padding-block-start: var(--as-s2);
    border-block-start: 1px solid var(--as-line);
    font-size: var(--as-fs-12);
    color: var(--as-ink-3);
}

@media (min-width: 640px) {
    .as-tool-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .as-factory-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 960px) {
    .as-tool-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .as-factory-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================================================
   News + analysis — same card idiom as .as-cat-card (surface, line, r-md, sh-1 → sh-2 on
   hover), image-led like .as-cat-media but a real photo/cover instead of an icon tile.
   ============================================================================ */
.as-news-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--as-s3);
}

.as-news-card {
    display: flex;
    flex-direction: column;
    background: var(--as-surface);
    border: 1px solid var(--as-line);
    border-radius: var(--as-r-md);
    box-shadow: var(--as-sh-1);
    overflow: hidden;
    color: var(--as-ink);
    text-decoration: none;
    transition: border-color var(--as-t) var(--as-ease), box-shadow var(--as-t) var(--as-ease);
}

.as-news-card:hover {
    border-color: var(--as-navy-100);
    box-shadow: var(--as-sh-2);
    color: var(--as-ink);
}

.as-news-media {
    display: block;
    aspect-ratio: 16 / 9;
    background: linear-gradient(150deg, var(--as-navy-700), var(--as-navy-900));
}

.as-news-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.as-news-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: var(--as-s4);
}

.as-news-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--as-r-pill);
    font-size: var(--as-fs-12);
    font-weight: var(--as-fw-semi);
}

.as-news-badge-news {
    background: var(--as-navy-700);
    color: var(--as-on-navy);
}

.as-news-badge-analysis {
    background: var(--as-navy-050);
    color: var(--as-navy-600);
}

.as-news-title {
    font-size: var(--as-fs-15);
    font-weight: var(--as-fw-semi);
    line-height: var(--as-lh-tight);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.as-news-date {
    font-size: var(--as-fs-12);
    color: var(--as-ink-2);
}

@media (min-width: 640px) {
    .as-news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .as-news-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================================================
   Quote form
   ============================================================================ */
.as-quote {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--as-s8);
    align-items: start;
}

.as-quote-points {
    display: flex;
    flex-direction: column;
    gap: var(--as-s3);
    margin: var(--as-s5) 0 0;
    padding: 0;
    list-style: none;
}

.as-quote-points li {
    display: flex;
    align-items: flex-start;
    gap: var(--as-s2);
    font-size: var(--as-fs-14);
    color: var(--as-ink-2);
}

.as-quote-card {
    padding: var(--as-s6);
    background: var(--as-surface);
    border: 1px solid var(--as-line);
    border-radius: var(--as-r-md);
    box-shadow: var(--as-sh-2);
}

.as-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--as-s3);
}

.as-form-full {
    grid-column: 1 / -1;
}

.as-form-note {
    margin: var(--as-s3) 0 0;
    font-size: var(--as-fs-12);
    color: var(--as-ink-3);
    text-align: center;
}

@media (min-width: 900px) {
    .as-quote {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================================================
   FAQ
   ============================================================================ */
.as-faq {
    display: flex;
    flex-direction: column;
    gap: var(--as-s2);
}

.as-faq-item {
    background: var(--as-surface);
    border: 1px solid var(--as-line);
    border-radius: var(--as-r);
    padding: var(--as-s4) var(--as-s5);
}

.as-faq-item summary {
    cursor: pointer;
    font-size: var(--as-fs-15);
    font-weight: var(--as-fw-semi);
    color: var(--as-ink);
    list-style: none;
}

.as-faq-item summary::-webkit-details-marker {
    display: none;
}

.as-faq-item summary:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--as-focus-ring);
    border-radius: var(--as-r-sm);
}

.as-faq-answer {
    margin: var(--as-s3) 0 0;
    font-size: var(--as-fs-14);
    color: var(--as-ink-2);
    line-height: var(--as-lh-loose);
}

/* ============================================================================
   Footer
   ============================================================================ */
.as-footer {
    background: var(--as-navy-900);
    color: var(--as-on-navy-2);
    font-family: var(--as-font);
    padding-block: var(--as-s10) var(--as-s6);
}

.as-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--as-s8);
    max-width: var(--as-container);
    margin-inline: auto;
    padding-inline: var(--as-gutter);
}

.as-footer h3 {
    margin: 0 0 var(--as-s3);
    font-size: var(--as-fs-14);
    font-weight: var(--as-fw-semi);
    color: var(--as-on-navy);
}

.as-footer p {
    margin: 0;
    font-size: var(--as-fs-13);
    line-height: var(--as-lh-loose);
}

.as-footer-links {
    display: flex;
    flex-direction: column;
    gap: var(--as-s2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.as-footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    color: var(--as-on-navy-2);
    font-size: var(--as-fs-13);
    text-decoration: none;
}

.as-footer-links a:hover {
    color: var(--as-on-navy);
    text-decoration: underline;
}

.as-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--as-s2);
    margin-block-end: var(--as-s3);
    color: var(--as-on-navy);
    font-size: var(--as-fs-18);
    font-weight: var(--as-fw-bold);
    text-decoration: none;
}

.as-footer-brand img {
    height: 32px;
    width: auto;
}

.as-footer-address {
    margin-block-start: var(--as-s3);
}

.as-footer-bottom {
    max-width: var(--as-container);
    margin-inline: auto;
    margin-block-start: var(--as-s8);
    padding: var(--as-s4) var(--as-gutter) 0;
    border-block-start: 1px solid rgba(255, 255, 255, .12);
    font-size: var(--as-fs-12);
    text-align: center;
}

@media (min-width: 768px) {
    .as-footer-grid {
        grid-template-columns: 1.4fr 1fr 1fr;
    }
}

/* ============================================================================
   Mobile sticky action bar
   ============================================================================ */
.as-bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--as-z-bar);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--as-navy-800);
    box-shadow: 0 -1px 0 rgba(255, 255, 255, .08);
    padding-bottom: env(safe-area-inset-bottom);
}

.as-bar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: var(--as-tap);
    padding: var(--as-s2) var(--as-s1);
    color: var(--as-on-navy);
    font-size: var(--as-fs-11);
    font-weight: var(--as-fw-medium);
    text-decoration: none;
}

.as-bar a:hover {
    background: var(--as-navy-700);
    color: var(--as-on-navy);
}

.as-bar-wa {
    color: var(--as-wa);
}

/* The bar floats over the end of the page. The spacer goes on the footer, NOT on body —
   a body rule would be a type selector and would push /old around too. */
@media (max-width: 767px) {
    .as-footer {
        padding-bottom: calc(var(--as-bar-h) + env(safe-area-inset-bottom) + var(--as-s4));
    }
}

@media (min-width: 768px) {
    .as-bar {
        display: none;
    }
}

/* ============================================================================
   Experts band (restyled in place)
   ============================================================================ */
.as-experts {
    background: var(--as-navy-800);
    color: var(--as-on-navy);
    padding-block: var(--as-s12);
}

.as-experts .as-h2 {
    color: var(--as-on-navy);
}

.as-experts .as-sub {
    color: var(--as-on-navy-2);
}

.as-expert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--as-s4);
}

.as-expert {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--as-s2);
    padding: var(--as-s5);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--as-r-md);
    text-align: center;
}

.as-expert-photo {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, .25);
}

.as-expert-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--as-navy-600);
    color: var(--as-on-navy);
    font-size: var(--as-fs-20);
    font-weight: var(--as-fw-bold);
}

.as-expert-name {
    font-size: var(--as-fs-15);
    font-weight: var(--as-fw-semi);
    color: var(--as-on-navy);
}

.as-expert-role {
    font-size: var(--as-fs-12);
    color: var(--as-on-navy-2);
}

.as-expert-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--as-s2);
    margin-block-start: var(--as-s1);
}

.as-expert-contact a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 4px 12px;
    border-radius: var(--as-r-sm);
    background: rgba(255, 255, 255, .12);
    color: var(--as-on-navy);
    font-size: var(--as-fs-13);
    text-decoration: none;
}

.as-expert-contact a:hover {
    background: rgba(255, 255, 255, .22);
    color: var(--as-on-navy);
}

/* ============================================================================
   Directional icons — the one place a [dir] selector is justified
   ============================================================================ */
[dir="rtl"] .as-chevron {
    transform: scaleX(-1);
}

/* ============================================================================
   Category price explorer — /price/{slug}
   Filter rail + weight tool on one side, the price table on the other.
   ============================================================================ */

.as-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.as-cat-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--as-s5);
    align-items: start;
    margin-block: var(--as-s5);
}

@media (min-width: 992px) {
    .as-cat-layout {
        /* The rail is a fixed width so the table — the thing people came for — takes every
           remaining pixel instead of splitting the row evenly. */
        grid-template-columns: 286px minmax(0, 1fr);
    }

    .as-cat-rail {
        position: sticky;
        top: calc(var(--as-header-h) + 12px);
        align-self: start;
        max-height: calc(100vh - var(--as-header-h) - 24px);
        overflow-y: auto;
    }
}

.as-cat-main {
    min-width: 0; /* lets .as-table-wrap scroll instead of blowing out the grid column */
}

/* The price table is wider than a phone screen, and .as-table-wrap already scrolls it. That is
   not enough on its own here: under dir="rtl" the overflow runs LEFTWARDS, and Chromium still
   counts left overflow inside a scroll container towards the DOCUMENT's scrollable width — so the
   whole page gained a horizontal scrollbar and every fixed element (the mobile action bar) stretched
   to the inflated width. overflow/clip on any ancestor does not stop it; paint containment does,
   and the wrapper keeps scrolling normally. Scoped to this table rather than added to the shared
   .as-table-wrap, since the other tables using that class are narrow enough not to trigger it. */
.as-cat-main .as-table-wrap {
    contain: paint;
}

/* ---- rail --------------------------------------------------------------- */

/* Below the breakpoint the rail collapses behind a button: on a phone, four filter groups plus a
   weight calculator between the H1 and the prices would push the table off the first two screens. */
.as-rail-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--as-s2);
    min-height: var(--as-tap);
    width: 100%;
    padding: 0 var(--as-s4);
    border: 1px solid var(--as-line-strong);
    border-radius: var(--as-r);
    background: var(--as-surface);
    color: var(--as-ink);
    font-family: var(--as-font);
    font-size: var(--as-fs-15);
    font-weight: var(--as-fw-semi);
    cursor: pointer;
}

.as-rail-toggle:hover {
    background: var(--as-navy-050);
    border-color: var(--as-navy-100);
}

.as-rail-count {
    margin-inline-start: auto;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: var(--as-r-pill);
    background: var(--as-navy-700);
    color: var(--as-on-navy);
    font-size: var(--as-fs-12);
}

.as-rail-body {
    display: none;
    margin-block-start: var(--as-s3);
}

.as-rail-body.open {
    display: block;
}

@media (min-width: 992px) {
    .as-rail-toggle {
        display: none;
    }

    /* On desktop the rail is always open, whatever state the mobile toggle was left in. */
    .as-rail-body,
    .as-rail-body.open {
        display: block;
        margin-block-start: 0;
    }
}

.as-rail-card {
    background: var(--as-surface);
    border: 1px solid var(--as-line);
    border-radius: var(--as-r-md);
    box-shadow: var(--as-sh-1);
    padding: var(--as-s4);
    margin-block-end: var(--as-s4);
}

.as-rail-head {
    display: flex;
    align-items: center;
    gap: var(--as-s2);
    padding-block-end: var(--as-s3);
    margin-block-end: var(--as-s2);
    border-block-end: 1px solid var(--as-line);
    color: var(--as-navy-700);
}

.as-rail-head h2 {
    margin: 0;
    font-size: var(--as-fs-16);
    font-weight: var(--as-fw-bold);
    color: var(--as-ink);
}

.as-rail-clear {
    margin-inline-start: auto;
    padding: 2px 8px;
    border: 0;
    border-radius: var(--as-r-sm);
    background: transparent;
    color: var(--as-cta);
    font-family: var(--as-font);
    font-size: var(--as-fs-12);
    font-weight: var(--as-fw-medium);
    cursor: pointer;
}

.as-rail-clear:hover {
    background: var(--as-navy-050);
    text-decoration: underline;
}

.as-rail-link {
    display: block;
    margin-block-start: var(--as-s3);
    color: var(--as-cta);
    font-size: var(--as-fs-13);
    text-decoration: none;
}

.as-rail-link:hover {
    text-decoration: underline;
}

.as-rail-promo-text {
    margin: 0 0 var(--as-s3);
    color: var(--as-ink-2);
    font-size: var(--as-fs-13);
    line-height: 1.6;
}

.as-rail-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 6px 14px;
    border-radius: var(--as-r);
    background: var(--as-navy-700);
    color: var(--as-on-navy);
    font-size: var(--as-fs-13);
    font-weight: var(--as-fw-semi);
    text-decoration: none;
    transition: background var(--as-t) var(--as-ease);
}

.as-rail-cta:hover {
    background: var(--as-navy-800);
    color: var(--as-on-navy);
}

/* ---- filter groups ------------------------------------------------------ */
.as-filter-group + .as-filter-group {
    border-block-start: 1px solid var(--as-line);
}

.as-filter-head {
    display: flex;
    align-items: center;
    gap: var(--as-s2);
    width: 100%;
    min-height: 42px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--as-ink);
    font-family: var(--as-font);
    font-size: var(--as-fs-15);
    font-weight: var(--as-fw-semi);
    text-align: start;
    cursor: pointer;
}

.as-filter-badge {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: var(--as-r-pill);
    background: var(--as-navy-050);
    color: var(--as-navy-700);
    font-size: var(--as-fs-11);
    font-weight: var(--as-fw-semi);
}

.as-filter-chev {
    margin-inline-start: auto;
    color: var(--as-ink-3);
    transition: transform var(--as-t) var(--as-ease);
}

.as-filter-chev.open {
    transform: rotate(180deg);
}

.as-filter-list {
    list-style: none;
    margin: 0 0 var(--as-s3);
    padding: 0;
    /* Long factory lists (100+ brands) scroll inside the card instead of making the rail
       taller than the table beside it. */
    max-height: 268px;
    overflow-y: auto;
}

.as-filter-option {
    display: flex;
    align-items: center;
    gap: var(--as-s2);
    min-height: 34px;
    padding-inline: var(--as-s1);
    border-radius: var(--as-r-sm);
    color: var(--as-ink-2);
    font-size: var(--as-fs-14);
    cursor: pointer;
}

.as-filter-option:hover {
    background: var(--as-navy-050);
    color: var(--as-ink);
}

.as-filter-option input[type="checkbox"] {
    width: 17px;
    height: 17px;
    flex: none;
    accent-color: var(--as-navy-700);
    cursor: pointer;
}

.as-filter-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.as-filter-count {
    margin-inline-start: auto;
    color: var(--as-ink-3);
    font-size: var(--as-fs-12);
}

/* ---- table -------------------------------------------------------------- */
.as-cat-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--as-s3);
    padding-block-end: var(--as-s3);
}

.as-cat-count {
    color: var(--as-ink-2);
    font-size: var(--as-fs-14);
}

.as-cat-count b {
    color: var(--as-ink);
}

.as-cat-count-total {
    color: var(--as-ink-3);
    font-size: var(--as-fs-13);
}

.as-vat-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
    padding: 6px 12px;
    border-radius: var(--as-r);
    background: #e4f7ee;
    color: var(--as-navy-800);
    font-size: var(--as-fs-13);
    font-weight: var(--as-fw-semi);
    cursor: pointer;
    white-space: nowrap;
}

.as-vat-toggle input {
    width: 16px;
    height: 16px;
    accent-color: #1a9b5a;
}

.as-cat-search {
    flex: 1 1 220px;
    min-width: 0;
    min-height: 40px;
    padding: 0 var(--as-s3);
    border: 1px solid var(--as-line-strong);
    border-radius: var(--as-r);
    background: var(--as-surface);
    color: var(--as-ink);
    font-family: var(--as-font);
    font-size: var(--as-fs-14);
}

.as-cat-search:focus {
    outline: 2px solid var(--as-navy-100);
    border-color: var(--as-navy-600);
}

.as-only-priced {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--as-line-strong);
    border-radius: var(--as-r);
    background: var(--as-surface);
    color: var(--as-ink-2);
    font-size: var(--as-fs-13);
    font-weight: var(--as-fw-semi);
    cursor: pointer;
    white-space: nowrap;
}

.as-only-priced input {
    width: 16px;
    height: 16px;
    accent-color: var(--as-navy-700);
}

.as-only-priced:has(input:checked) {
    background: var(--as-navy-050);
    border-color: var(--as-navy-100);
    color: var(--as-navy-800);
}

.as-vat-toggle {
    margin-inline-start: 0;
    min-height: 40px;
}

.as-factory-block-count {
    margin-inline-start: var(--as-s2);
    color: var(--as-ink-3);
    font-size: var(--as-fs-12);
    font-weight: var(--as-fw-medium);
}

.as-price-table .as-cell-name {
    min-width: 200px;
    line-height: 1.7;
}

.as-price-table tbody tr:nth-child(even) td {
    background: rgba(16, 24, 40, .018);
}

.as-price-table .as-cell-ask {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid var(--as-navy-100);
    border-radius: var(--as-r-pill);
    background: var(--as-navy-050);
    white-space: nowrap;
}

.as-factory-block {
    margin-block-end: var(--as-s5);
    background: var(--as-surface);
    border: 1px solid var(--as-line);
    border-radius: var(--as-r-md);
    box-shadow: var(--as-sh-1);
    overflow: hidden;
}

.as-factory-block-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--as-s2) var(--as-s4);
    padding: var(--as-s3) var(--as-s4);
    background: var(--as-navy-050);
    border-block-end: 1px solid var(--as-line);
}

.as-factory-block-title {
    margin: 0;
    font-size: var(--as-fs-16);
    font-weight: var(--as-fw-bold);
    color: var(--as-navy-800);
}

.as-factory-block-date {
    color: var(--as-ink-2);
    font-size: var(--as-fs-13);
}

.as-factory-block .as-table-wrap {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.as-price-table {
    background: var(--as-surface);
}

.as-price-table .as-cell-name {
    white-space: normal;
    min-width: 72px;
}

.as-price-table .as-cell-name a {
    color: var(--as-ink);
    font-weight: var(--as-fw-medium);
    text-decoration: none;
}

.as-price-table .as-cell-name a:hover {
    color: var(--as-cta);
    text-decoration: underline;
}

.as-price-table .as-cell-delivery,
.as-price-table .as-cell-grade,
.as-price-table .as-cell-unit {
    color: var(--as-ink-2);
    font-size: var(--as-fs-13);
}

.as-price-table .as-cell-price {
    font-weight: var(--as-fw-bold);
    font-size: var(--as-fs-15);
}

.as-cell-ask {
    color: var(--as-cta);
    font-weight: var(--as-fw-medium);
    font-size: var(--as-fs-13);
    text-decoration: none;
}

.as-cell-ask:hover {
    text-decoration: underline;
}

.as-price-table .as-cell-date {
    color: var(--as-ink-2);
    font-size: var(--as-fs-13);
}

/* "No earlier price recorded" — deliberately quiet, and deliberately not a zero. */
.as-dash {
    color: var(--as-ink-3);
}

.as-chart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--as-line-strong);
    border-radius: var(--as-r-sm);
    background: var(--as-surface);
    color: var(--as-navy-600);
    cursor: pointer;
    transition: background var(--as-t-fast) var(--as-ease);
}

.as-chart-btn:hover:not(:disabled) {
    background: var(--as-navy-050);
    border-color: var(--as-navy-100);
}

.as-chart-btn:disabled {
    color: var(--as-ink-3);
    border-color: var(--as-line);
    cursor: not-allowed;
    opacity: .55;
}

/* ---- modal -------------------------------------------------------------- */
.as-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, .55);
    z-index: var(--as-z-menu);
}

.as-modal {
    position: fixed;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    /* inset-inline-start resolves to the RIGHT edge under dir="rtl", so the centring shift is
       positive here and negative in the LTR override below. */
    transform: translate(50%, -50%);
    width: min(920px, calc(100% - 32px));
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    background: var(--as-surface);
    border-radius: var(--as-r-lg);
    box-shadow: var(--as-sh-3);
    z-index: calc(var(--as-z-menu) + 1);
    overflow: hidden;
}

[dir="ltr"] .as-modal {
    transform: translate(-50%, -50%);
}

.as-modal-head {
    display: flex;
    align-items: center;
    gap: var(--as-s3);
    padding: var(--as-s4) var(--as-s5);
    border-block-end: 1px solid var(--as-line);
}

.as-modal-head h2 {
    margin: 0;
    font-size: var(--as-fs-16);
    font-weight: var(--as-fw-bold);
    color: var(--as-ink);
}

.as-modal-close {
    margin-inline-start: auto;
    width: 32px;
    height: 32px;
    flex: none;
    border: 0;
    border-radius: var(--as-r-sm);
    background: transparent;
    color: var(--as-ink-2);
    font-size: var(--as-fs-16);
    cursor: pointer;
}

.as-modal-close:hover {
    background: var(--as-ground-2);
    color: var(--as-ink);
}

.as-modal-body {
    padding: var(--as-s5);
    overflow-y: auto;
}

.as-modal-sub {
    margin: var(--as-s5) 0 var(--as-s2);
    font-size: var(--as-fs-15);
    font-weight: var(--as-fw-semi);
    color: var(--as-ink);
}

.as-modal-table {
    max-height: 280px;
    overflow-y: auto;
}

.as-modal-link {
    display: inline-block;
    margin-block-start: var(--as-s4);
    color: var(--as-cta);
    font-size: var(--as-fs-14);
    text-decoration: none;
}

.as-modal-link:hover {
    text-decoration: underline;
}

.as-range-btns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--as-s2);
    justify-content: center;
    margin-block-start: var(--as-s4);
}

.as-range-btn {
    min-height: 38px;
    padding: 0 var(--as-s4);
    border: 1px solid var(--as-line-strong);
    border-radius: var(--as-r-sm);
    background: var(--as-surface);
    color: var(--as-ink-2);
    font-family: var(--as-font);
    font-size: var(--as-fs-13);
    font-weight: var(--as-fw-medium);
    cursor: pointer;
}

.as-range-btn:hover {
    background: var(--as-navy-050);
}

.as-range-btn.active {
    border-color: var(--as-navy-700);
    color: var(--as-navy-700);
    background: var(--as-navy-050);
}

/* ---- chart -------------------------------------------------------------- */
.as-chart {
    margin: 0;
}

.as-chart-svg {
    display: block;
    width: 100%;
    /* height follows the viewBox ratio: a fixed height plus uniform scaling would letterbox the
       chart inside its own box. */
    height: auto;
    /* The chart's own coordinate system is left-to-right (oldest date on the left), and SVG
       resolves text-anchor start/end against the inline direction — so under the page's inherited
       dir="rtl" every axis label anchors to the opposite side and the end labels clip. This is the
       one element that must opt out of the document direction. */
    direction: ltr;
}

.as-chart-grid {
    stroke: var(--as-line);
    stroke-width: 1;
    stroke-dasharray: 3 4;
}

.as-chart-line {
    stroke: var(--as-navy-700);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.as-chart-dot {
    fill: var(--as-navy-700);
}

.as-chart-xlabel,
.as-chart-ylabel {
    fill: var(--as-ink-3);
    font-family: var(--as-font);
    font-size: 12px;
}

.as-chart-caption {
    display: flex;
    flex-wrap: wrap;
    gap: var(--as-s4);
    justify-content: center;
    margin-block-start: var(--as-s3);
    color: var(--as-ink-2);
    font-size: var(--as-fs-13);
}

/* ============================================================================
   آهن‌یاب (Finder) — four-step wizard: FinderWizard.razor.
   ============================================================================ */
.as-finder-card {
    max-width: var(--as-container-narrow);
    margin: var(--as-s8) auto 0;
    padding: var(--as-s6);
    background: var(--as-surface);
    border: 1px solid var(--as-line);
    border-radius: var(--as-r-lg);
    box-shadow: var(--as-sh-3);
}

@media (min-width: 768px) {
    .as-finder-card {
        padding: var(--as-s8);
    }
}

/* Stepper */
.as-stepper {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0 0 var(--as-s8);
    padding: 0;
}

.as-step {
    display: flex;
    align-items: center;
    gap: var(--as-s2);
    flex: 1;
    position: relative;
    color: var(--as-ink-3);
}

.as-step:not(:last-child)::after {
    content: "";
    flex: 1;
    height: 2px;
    background: var(--as-line);
    margin-inline: var(--as-s2);
}

.as-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: var(--as-r-pill);
    background: var(--as-ground-2);
    border: 1px solid var(--as-line-strong);
    font-size: var(--as-fs-13);
    font-weight: var(--as-fw-semi);
    color: var(--as-ink-2);
}

.as-step-label {
    display: none;
    font-size: var(--as-fs-13);
    font-weight: var(--as-fw-medium);
}

@media (min-width: 640px) {
    .as-step-label {
        display: inline;
    }
}

.as-step-active .as-step-num {
    background: var(--as-cta);
    border-color: var(--as-cta);
    color: var(--as-on-cta);
}

.as-step-active .as-step-label {
    color: var(--as-ink);
}

.as-step-done .as-step-num {
    background: var(--as-up-bg);
    border-color: var(--as-up);
    color: var(--as-up);
}

.as-step-done::after {
    background: var(--as-up);
    opacity: .4;
}

/* Step body */
.as-finder-step-title {
    margin: 0 0 var(--as-s4);
    font-size: var(--as-fs-20);
    font-weight: var(--as-fw-semi);
    color: var(--as-ink);
}

.as-finder-search {
    margin-block-end: var(--as-s3);
}

.as-finder-preview {
    margin-block-start: var(--as-s2);
}

.as-finder-error {
    margin-block-start: var(--as-s2);
    color: var(--as-down);
    font-size: var(--as-fs-14);
}

.as-finder-actions {
    display: flex;
    gap: var(--as-s3);
    margin-block-start: var(--as-s6);
    flex-wrap: wrap;
}

/* Generic field / form-grid — the as-* equivalent of app.css's .field-row/.form-grid, used only
   inside as-* components so the two systems never mix on one element. */
.as-field {
    display: flex;
    flex-direction: column;
    gap: var(--as-s1);
    margin-block-end: var(--as-s3);
}

.as-field label {
    font-size: var(--as-fs-13);
    font-weight: var(--as-fw-medium);
    color: var(--as-ink-2);
}

.as-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--as-s3) var(--as-s4);
}

@media (min-width: 560px) {
    .as-form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.as-finder-qty-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--as-s3);
}

.as-lead-success {
    padding: var(--as-s3) var(--as-s4);
    border-radius: var(--as-r);
    background: var(--as-up-bg);
    color: var(--as-up);
    font-weight: var(--as-fw-medium);
}

/* Suggestion lists (product / city type-ahead) */
.as-finder-suggest {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--as-line);
    border-radius: var(--as-r);
    overflow: hidden;
}

.as-finder-suggest-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: var(--as-s3) var(--as-s4);
    background: var(--as-surface);
    border: none;
    border-block-end: 1px solid var(--as-line);
    text-align: start;
    cursor: pointer;
    font-family: var(--as-font);
    transition: background var(--as-t-fast) var(--as-ease);
}

.as-finder-suggest li:last-child .as-finder-suggest-item {
    border-block-end: none;
}

.as-finder-suggest-item:hover,
.as-finder-suggest-item:focus-visible {
    background: var(--as-navy-050);
}

.as-finder-suggest-name {
    font-weight: var(--as-fw-semi);
    color: var(--as-ink);
}

.as-finder-suggest-meta {
    font-size: var(--as-fs-13);
    color: var(--as-ink-2);
}

/* Best-option card — the one visual moment the wizard is built around, so it gets the navy
   identity treatment (as.css §5.1's "premium" direction) rather than a plain white card. */
.as-best-card {
    position: relative;
    margin-block: var(--as-s6);
    padding: var(--as-s6);
    border-radius: var(--as-r-lg);
    background: linear-gradient(135deg, var(--as-navy-800), var(--as-navy-600));
    color: var(--as-on-navy);
    box-shadow: var(--as-sh-3);
}

.as-best-badge {
    display: inline-block;
    margin-block-end: var(--as-s2);
    padding: 3px 12px;
    border-radius: var(--as-r-pill);
    background: rgba(255, 255, 255, .16);
    color: var(--as-on-navy);
    font-size: var(--as-fs-12);
    font-weight: var(--as-fw-semi);
}

.as-best-card h3 {
    margin: 0 0 var(--as-s4);
    font-size: var(--as-fs-24);
}

.as-best-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--as-s4);
    margin-block-end: var(--as-s4);
}

@media (min-width: 640px) {
    .as-best-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.as-best-grid > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.as-best-grid > div > span:last-child {
    font-size: var(--as-fs-16);
    font-weight: var(--as-fw-semi);
}

.as-best-label {
    font-size: var(--as-fs-12);
    color: var(--as-on-navy-2);
}

.as-reason-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--as-s2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.as-reason-chip {
    padding: 4px 12px;
    border-radius: var(--as-r-pill);
    background: rgba(255, 255, 255, .14);
    font-size: var(--as-fs-12);
}

.as-finder-row-best td {
    background: var(--as-up-bg);
    font-weight: var(--as-fw-semi);
}

.as-finder-cta {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--as-s6);
    margin-block-start: var(--as-s6);
}

@media (min-width: 768px) {
    .as-finder-cta {
        grid-template-columns: 1.2fr 1fr;
    }
}

.as-finder-lead h3 {
    margin: 0 0 var(--as-s3);
    font-size: var(--as-fs-16);
}

/* Phone (~375px): keep stepper as number-only row, stack best-card metrics, tighten padding. */
@media (max-width: 480px) {
    .as-finder-card {
        margin-block-start: var(--as-s5);
        padding: var(--as-s4);
        border-radius: var(--as-r);
    }

    .as-stepper {
        margin-block-end: var(--as-s5);
        gap: 0;
    }

    .as-step {
        justify-content: center;
        gap: 0;
    }

    .as-step:not(:last-child)::after {
        margin-inline: 4px;
        min-width: 12px;
    }

    .as-step-num {
        width: 26px;
        height: 26px;
        font-size: var(--as-fs-12);
    }

    .as-finder-step-title {
        font-size: var(--as-fs-18);
    }

    .as-finder-qty-row {
        grid-template-columns: 1fr;
    }

    .as-best-card {
        padding: var(--as-s4);
        margin-block: var(--as-s4);
    }

    .as-best-card h3 {
        font-size: var(--as-fs-20);
        line-height: 1.35;
        word-break: break-word;
    }

    .as-best-grid {
        grid-template-columns: 1fr;
        gap: var(--as-s3);
    }

    .as-finder-actions .as-btn,
    .as-finder-lead .as-btn {
        width: 100%;
        justify-content: center;
    }
}

/* --- Blog articles: research badge, lead, HTML body, sources, tags (content engine posts) --- */
.as-news-badge-research {
    background: #e8f5ee;
    color: #1d6b43;
}

.as-article-lead {
    font-size: var(--as-fs-16);
    font-weight: var(--as-fw-semi);
    color: var(--as-ink-2);
    line-height: var(--as-lh-loose);
    margin-block: var(--as-s3) 0;
}

.as-article-body {
    font-size: var(--as-fs-16);
    line-height: var(--as-lh-loose);
    color: var(--as-ink);
}

.as-article-body h2 { font-size: 1.35em; margin-block: 1.6em 0.6em; line-height: var(--as-lh-tight); }
.as-article-body h3 { font-size: 1.15em; margin-block: 1.3em 0.5em; }
.as-article-body p { margin-block: 0 1em; }
.as-article-body ul, .as-article-body ol { padding-inline-start: 1.5em; margin-block: 0 1em; }
.as-article-body li { margin-block: 0.3em; }
.as-article-body blockquote {
    margin: 1em 0;
    padding: 0.6em 1em;
    border-inline-start: 4px solid var(--as-navy-600);
    background: var(--as-navy-050);
    border-radius: var(--as-r-md);
}
.as-article-body a { color: var(--as-navy-600); text-decoration: underline; }
.as-article-body table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin-block: 1em;
    font-size: 0.92em;
}
.as-article-body th, .as-article-body td {
    border: 1px solid #dfe4ee;
    padding: 0.5em 0.75em;
    text-align: start;
    white-space: nowrap;
}
.as-article-body th { background: var(--as-navy-050); }

.as-article-sources {
    margin-block-start: var(--as-s8);
    padding: var(--as-s4);
    border: 1px solid #dfe4ee;
    border-radius: var(--as-r-md);
    font-size: var(--as-fs-14, 0.9rem);
    line-height: var(--as-lh-loose);
}
.as-article-sources h2 { font-size: 1.1em; margin: 0 0 0.5em; }
.as-article-sources ol { margin: 0; padding-inline-start: 1.4em; }
.as-article-sources a { color: var(--as-navy-600); word-break: break-all; }

.as-article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block-start: var(--as-s5);
}
.as-article-tag {
    padding: 4px 12px;
    border-radius: var(--as-r-pill);
    background: var(--as-navy-050);
    color: var(--as-navy-600);
    font-size: var(--as-fs-12);
    text-decoration: none;
}
.as-article-tag:hover { background: var(--as-navy-600); color: var(--as-on-navy); }

/* Honeypot field of the lead forms (LeadSubmissionGuard): off-screen, not display:none, since some bots skip hidden inputs. */
.as-hp {
    position: absolute !important;
    left: -10000px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}