@charset "utf-8";
.fan-selector {
    background: #fff;
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
}
.fan-selector .selector-intro {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}
.fan-selector .selector-intro .description {
    margin-top: 20px;
    color: var(--color-gray6);
    line-height: 1.7;
}
.fan-selector .results-count {
    color: var(--color-gray6);
    font-size: 14px;
}
.fan-selector .empty-result {
    color: var(--color-gray6);
    line-height: 1.7;
    padding: 32px 0;
}

/* === Lightweight filters: frame size / voltage === */
.fan-selector .selector-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 40px;
    margin: 30px 0 20px;
}
.fan-selector .selector-filter-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.fan-selector .selector-step-label {
    display: block;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-gray6);
}
.fan-selector .selector-step-label .lt-json {
    color: var(--color-gray6);
    font-style: normal;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.fan-selector .selector-hint {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--color-gray6);
    line-height: 1.6;
}
.fan-selector .lt-link {
    color: var(--color-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.fan-selector .lt-link:hover {
    color: var(--color-dominant);
}
.fan-selector .chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.fan-selector .chip {
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid var(--color-stroke);
    border-radius: 3px;
    background: #fff;
    color: var(--color-fill);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}
.fan-selector .chip:hover {
    border-color: var(--color-dominant);
}
.fan-selector .chip.is-active {
    background: #1E3A5F;
    border-color: #1E3A5F;
    color: #fff;
}
.fan-selector .chip:focus-visible {
    outline: 2px solid var(--color-dominant);
    outline-offset: 2px;
}
.fan-selector .selector-reset {
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-hover);
    cursor: pointer;
    font: inherit;
}

/* === Comparison table === */
.fan-selector .compare-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 14px;
}
.fan-selector .compare-scroll {
    overflow-x: auto;
    border: 1px solid var(--color-line);
    background: #fff;
}
.fan-selector .compare-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}
.fan-selector .compare-table th {
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-gray6);
    background: var(--bg-gray);
    padding: 13px 14px;
    border-bottom: 1px solid var(--color-line);
    white-space: nowrap;
}
.fan-selector .compare-table th.th-model {
    text-align: left;
}
.fan-selector .compare-table td {
    padding: 14px;
    border-bottom: 1px solid var(--color-line);
    font-size: 15px;
    white-space: nowrap;
}
.fan-selector .compare-table tr:last-child td {
    border-bottom: 0;
}
.fan-selector .compare-table .td-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.fan-selector .compare-table .td-model {
    text-align: left;
}
.fan-selector .compare-table .td-view {
    text-align: right;
}
.fan-selector .compare-table tr.compare-row {
    cursor: pointer;
    transition: background-color 0.12s ease;
}
.fan-selector .compare-table tr.compare-row:hover {
    background: var(--bg-gray);
}
.fan-selector .compare-model-link {
    color: var(--color-hover);
    font-weight: 600;
    text-decoration: none;
    font-size: 16px;
    line-height: 1.3;
}
.fan-selector .compare-model-link:hover {
    color: var(--color-dominant);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.fan-selector .compare-view {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-hover);
    background: #fff;
    border: 1px solid var(--color-stroke);
    border-radius: 3px;
    padding: 5px 14px;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.fan-selector .compare-view:hover {
    border-color: var(--color-dominant);
    color: var(--color-dominant);
}
.fan-selector .compare-view.muted {
    color: var(--color-gray6);
    border-color: transparent;
}

/* === Closing note: the online catalogue is a subset of the full range ===
   The comparison table can only compare the models published in the CMS, so a visitor who
   needs a frame size or an airflow that is not published reaches a dead end unless the page
   gives them a next step. This is the only call to action that turns "not listed" into a
   request for the full catalogue. */
/* === Closing note: minimum readable size (measured at 1440px) ===
   The template marked this paragraph l-font16, and lplug.css defines
   .l-font16 as clamp(12px, 0.8333333333333334vw, 32px). That fluid value only
   reaches 16px at a 1920px viewport; 0.8333vw falls to the 12px floor at 1440px
   and below, so on a laptop the note rendered at 12px - smaller than every
   other element of its own component (thead 13px, tbody 15px, results 14px).
   Immediately below 1024px the same class switches to the mobile ladder and
   jumps to 21.8px, so the size was unreadable at one width and oversized at
   another. An explicit 15px matches the table body copy at every width and
   keeps the note subordinate through colour instead of through shrinking it
   below the surrounding type. */
.fan-selector .selector-note {
    margin: 26px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--color-line);
    color: var(--color-gray6);
    font-size: 15px;
    line-height: 1.7;
}
.fan-selector .selector-note a {
    color: var(--color-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.fan-selector .selector-note a:hover,
.fan-selector .selector-note a:focus-visible {
    color: var(--color-dominant);
}

/* === Category page: Model Reference card title links to the model detail page ===
   The selector results are rendered by JavaScript, so crawlers cannot read those hrefs; this
   is the only server-rendered inbound link to the model pages, and without it those pages
   would be orphaned for search engines. The style keeps the existing h3 look and only adds
   clickable feedback. */
.model-item .name .model-name-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.model-item .name .model-name-link:hover,
.model-item .name .model-name-link:focus-visible {
    color: var(--color-dominant);
    border-bottom-color: currentColor;
}

/* === Model Reference: horizontal overflow fix (measured at 390px) ===
   The card's text column (.top > .right) is a flex item, so it kept the default
   min-width:auto and could not shrink below the min-content width of its own content. At
  390px that content needs 446px, which pushed the document to 462px and gave all four fan
  category pages a 72px horizontal scroll. Letting the column shrink lets the inner text
  wrap as it already does everywhere else; the desktop layout is unaffected because there
  the column is never asked to shrink. */
.model-item > .item > .top > .right {
    min-width: 0;
}
.model-item .model-cont > .left {
    min-width: 0;
}

@media (max-width: 760px) {
    .fan-selector .selector-filters {
        gap: 16px 24px;
        margin-top: 24px;
    }
    .fan-selector .selector-note {
        margin-top: 20px;
        padding-top: 16px;
    }
}