/*
 * Advertiser catalog page.
 *
 * Everything structural is scoped to .catalog-page. This sheet used to style
 * bare .table / .badge / .btn-link / .form-control, and because it loads after
 * the shell it restyled the cart drawer and the nav on this page too.
 *
 * Multi-select filter chrome is NOT defined here — multi-select.css owns it, so
 * catalog filters look like every other multi-select and its dropdown keeps the
 * shell's --shell-z-dropdown layer instead of sliding under the topbar.
 */

.catalog-page .catalog-plain-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 6px 8px;
    border: none;
    box-shadow: none;
    background: transparent;
    color: #1a585e;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
}
.catalog-page .catalog-plain-action i {
    width: 16px;
    height: 16px;
    min-width: 16px;
    font-size: 16px;
    flex: 0 0 16px;
}
.catalog-page .catalog-plain-action:hover,
.catalog-page .catalog-plain-action:focus-visible {
    background: transparent;
    color: #123f42;
    text-decoration: none;
}

.filter-chip {
    background: var(--brand-primary-bg, #e6f5f5);
    color: var(--brand-primary, #1a585e);
    font-weight: 600;
    border: 1px solid var(--brand-primary-border, #c8ebe9);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Each chip clears just its own filter; "Clear all" still resets everything. */
.filter-chip__remove {
    color: inherit;
    text-decoration: none;
    font-size: 1rem;
    line-height: 1;
    opacity: 0.7;
}

.filter-chip__remove:hover,
.filter-chip__remove:focus-visible {
    opacity: 1;
    color: inherit;
}

.catalog-clear-all {
    color: var(--brand-primary, #1a585e);
    font-weight: 600;
}

#toggleMoreFiltersBtn[aria-expanded="true"] {
    border-color: var(--brand-primary, #1a585e);
    color: var(--brand-primary, #1a585e);
}

/* ---------------------------------------------------------------- table shell */

.catalog-page .table {
    border-radius: var(--radius-md, 12px);
}

.catalog-page .table thead th {
    /* Stick under the shell topbar while the page (the only scroller) moves. */
    position: sticky;
    /* Integer top avoids subpixel sticky jitter against the shell topbar. */
    top: var(--shell-topbar-height, 84px);
    z-index: 5;
    border-bottom: 1px solid var(--border-subtle, #e9ecef);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--brand-ink-muted, #495057);
    padding: var(--table-head-y, 14px) var(--table-cell-x, 12px);
    text-align: center;
    /* Same token Bootstrap .table-light would paint, so sticky cells and the
       resting header never flash between two greys while scrolling. */
    background-color: var(--surface-2, #f7fafb);
    background-clip: padding-box;
    /* Avoid transform/box-shadow here — both break or shake sticky headers. */
}

/* Keep .table-light in sync with the sticky paint so Bootstrap's --bs-table-bg
   cannot fight the header when it is stuck. */
.catalog-page .table.table-light {
    --bs-table-bg: var(--surface-2, #f7fafb);
    --bs-table-color: var(--brand-ink-muted, #495057);
}

.catalog-page .table tbody td {
    padding: var(--table-cell-y, 16px) var(--table-cell-x, 12px);
    /* Center cell content in the row block (Category / metrics / Country / Buy). */
    vertical-align: middle;
    border-bottom: 1px solid var(--border-subtle, #f0f0f0);
}

.catalog-th {
    white-space: nowrap;
    vertical-align: middle;
}

/* The Site column carries the domain, chips and meta lines; the rest of the
   table is numeric, so it gets the slack instead of a hard pixel floor. */
/* Category — slightly wider so two niche chips fit; still clamped in-cell.
   Column order: 1 Site, 2 Category, 3 Traffic, 4 DR, 5 DA, 6 Country, 7 Buy */
.catalog-page .catalog-table th:nth-child(2),
.catalog-page .catalog-table td:nth-child(2) {
    width: 15%;
}

/* Traffic / DR / DA carry a source mark + label + info tip — 7% clipped the
   Traffic tip (longest word) under a clipping table wrapper. */
.catalog-page .catalog-table th:nth-child(3),
.catalog-page .catalog-table td:nth-child(3) {
    width: 10%;
}

.catalog-page .catalog-table th:nth-child(4),
.catalog-page .catalog-table td:nth-child(4),
.catalog-page .catalog-table th:nth-child(5),
.catalog-page .catalog-table td:nth-child(5) {
    width: 8%;
}

.catalog-page .catalog-table th:nth-child(6),
.catalog-page .catalog-table td:nth-child(6) {
    width: 9%;
}

/* Site needs room for host + Verified + NEW + the action icons on one row.
   At 24% the row overflowed its cell and printed over Category. */
.catalog-th-site {
    width: 29%;
    min-width: 12rem;
    text-align: start;
}

.catalog-th-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    line-height: 1.2;
    max-width: 100%;
}

.catalog-th-label .glass-tip-trigger {
    margin-left: 0;
    flex: 0 0 auto;
}

.catalog-stat-cell {
    text-align: center;
    vertical-align: middle;
}

.catalog-stat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 3.25rem;
    line-height: 1.2;
}

.catalog-stat .fw-semibold {
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
}

/* DA and DR are peer metrics. DR used to take .text-info, which the brand sheet
   remaps to muted grey, so one of the pair looked disabled next to the other. */
.catalog-stat-value {
    color: var(--brand-ink, #0f172a);
}

/* ------------------------------------------------------- metric source marks */

/* Ahrefs, Moz and the analytics glyph, shown where the column is named rather
   than beside every number. The tile keeps three logos of different shapes and
   padding reading as one set.

   --metric-source-size is locked on both the tile and the <img>: percentage
   height inside sticky table heads is unreliable in Chrome, and the rasters
   are hundreds of pixels wide — without a hard cap they inflate the thead. */
.metric-source {
    --metric-source-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--metric-source-size);
    box-sizing: border-box;
    width: var(--metric-source-size);
    height: var(--metric-source-size);
    min-width: var(--metric-source-size);
    min-height: var(--metric-source-size);
    max-width: var(--metric-source-size);
    max-height: var(--metric-source-size);
    overflow: hidden;
    border-radius: 4px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.1);
    /* size only — paint containment would clip mix-blend-mode against the sticky th. */
    contain: size;
    vertical-align: middle;
}

/* Table head uses the same surface as sticky th — a white chip on #f7fafb
   read as a mismatched sticker. Drop the chip; white-backed rasters opt into
   multiply via .metric-source--blend-multiply so they dissolve into the header. */
.catalog-page .table thead th .metric-source {
    background: transparent;
    box-shadow: none;
}

.catalog-page .table thead th .metric-source--blend-multiply img {
    mix-blend-mode: multiply;
}

/* Big enough to read the mark against a 12px uppercase heading — at 17px the
   Ahrefs "a" and the Moz "M" were only recognisable if you knew them already. */
.metric-source--md {
    --metric-source-size: 20px;
}

.metric-source--sm {
    --metric-source-size: 16px;
    border-radius: 3px;
}

.metric-source img {
    display: block;
    box-sizing: border-box;
    width: var(--metric-source-size);
    height: var(--metric-source-size);
    max-width: var(--metric-source-size);
    max-height: var(--metric-source-size);
    /* Beat Bootstrap reboot `img { max-width: 100%; height: auto }` which, with
       only a percentage width, lets the 400px Ahrefs crop size the table head. */
    flex: 0 0 auto;
}

/* The Ahrefs crop is a full-bleed square, the other two carry their own
   padding, so they cannot share one fit. */
.metric-source--fit-cover img {
    object-fit: cover;
}

.metric-source--fit-contain img {
    object-fit: contain;
    padding: 1px;
}

.catalog-mobile-metrics__label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--brand-ink-muted, #64748b);
}

/* ------------------------------------------------------------------- metrics */

/* A bare "55" carries no scale, so nothing could be compared without reading
   every row. The bar gives each number something to sit against. */
.catalog-metric {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 3.5rem;
    line-height: 1.15;
}

.catalog-metric__label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand-ink-muted, #697078);
}

.catalog-metric__value {
    font-size: 0.95rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--brand-ink, #1e293b);
}

.catalog-metric__bar {
    display: block !important;
    width: 3.25rem;
    max-width: 100%;
    height: 6px;
    min-height: 6px;
    border-radius: var(--radius-pill, 999px);
    /* Slightly deeper than --border-subtle so the empty track still reads. */
    background: #d5dbe3;
    overflow: hidden;
}

.catalog-metric__fill {
    display: block !important;
    height: 100%;
    min-height: 6px;
    border-radius: inherit;
    background: var(--brand-primary-soft, #3faeb2);
    /* One hue: grading these red/amber/green would pass judgement on publisher
       inventory. Length carries the magnitude; a deeper fill marks 70+. */
}

.catalog-metric.is-standout .catalog-metric__fill {
    background: var(--brand-primary, #1a585e);
}

.catalog-metric.is-standout .catalog-metric__value {
    color: var(--brand-primary, #1a585e);
}

/* DA is a Moz metric — match Moz battery-charged blue (#24ABE2 / logo #20a8e0). */
.catalog-metric--da .catalog-metric__fill {
    background: #24abe2;
}

.catalog-metric--da.is-standout .catalog-metric__fill {
    background: #1a96c9;
}

.catalog-metric--da.is-standout .catalog-metric__value {
    color: #1782b0;
}

.catalog-metric--da .catalog-metric__bar {
    background: #e8f6fc;
}

.catalog-mobile-metrics .catalog-metric {
    align-items: flex-start;
    min-width: 0;
    width: 100%;
}

.catalog-mobile-metrics .catalog-metric__bar {
    width: 100%;
}

.catalog-metric--traffic .catalog-metric__spark {
    display: block;
    width: 5.75rem;
    height: 36px;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    background: none;
}

.catalog-metric--traffic .catalog-metric__spark svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.catalog-metric--traffic .catalog-metric__spark-line {
    fill: none;
    stroke: #0b6266;
    stroke-width: 2.35;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.catalog-metric--traffic .catalog-metric__spark-halo {
    fill: rgba(78, 205, 203, 0.35);
}

.catalog-metric--traffic .catalog-metric__spark-end {
    fill: #0b6266;
    stroke: #fff;
    stroke-width: 1.1;
}

.catalog-metric--traffic.is-standout .catalog-metric__spark {
    background: none;
}

.catalog-mobile-metrics .catalog-metric--traffic .catalog-metric__spark {
    width: 100%;
    max-width: 9rem;
    height: 38px;
}

/* ------------------------------------------------------------- identity tile */

/* Rows were a wall of monospace domains with nothing to fix the eye on. The
   initials come from the label already on screen, so a masked listing stays
   masked. */
.catalog-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--radius-sm, 8px);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    user-select: none;
}

.catalog-tile--md {
    width: 34px;
    height: 34px;
    font-size: 12px;
}

.catalog-tile--lg {
    width: 40px;
    height: 40px;
    font-size: 13px;
}

/* Six tints from the brand family, picked per listing so the same site keeps the
   same colour from page to page. */
.catalog-tile--tone1 { background: #e6f5f5; color: #1a585e; }
.catalog-tile--tone2 { background: #e0f2fe; color: #075985; }
.catalog-tile--tone3 { background: #ecfdf5; color: #0f766e; }
.catalog-tile--tone4 { background: #fef3c7; color: #92400e; }
.catalog-tile--tone5 { background: #e8eef3; color: #334155; }
.catalog-tile--tone6 { background: #ffe4e6; color: #9f1239; }

/* Closed-row homepage thumbnail. Click opens Details; the large preview still
   lives in the expand/card panel. Not a dedicated preview column. */
.catalog-tile--preview {
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(11, 98, 102, 0.18);
    background: #e8eef3;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    color: inherit;
}

.catalog-tile--preview.catalog-tile--md {
    width: 88px;
    height: 55px;
}

.catalog-tile--preview.catalog-tile--lg {
    width: 112px;
    height: 70px;
}

.catalog-tile--preview:hover,
.catalog-tile--preview:focus-visible {
    outline: 2px solid #0b6266;
    outline-offset: 1px;
}

.catalog-tile__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.catalog-tile--preview .catalog-tile__initials {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.catalog-tile--favicon,
.catalog-tile--open {
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(11, 98, 102, 0.18);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    color: inherit;
}

.catalog-tile--favicon {
    background: #fff;
}

.catalog-tile--fallback {
    background: #e6f5f5;
    border: 1px solid rgba(11, 98, 102, 0.18);
    padding: 0;
    overflow: hidden;
}

.catalog-tile--open:hover,
.catalog-tile--open:focus-visible {
    outline: 2px solid #0b6266;
    outline-offset: 1px;
}

.catalog-tile__favicon {
    object-fit: contain;
    object-position: center;
    padding: 3px;
    background: #fff;
    image-rendering: auto;
    -ms-interpolation-mode: bicubic;
}

.catalog-tile__fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    animation: none;
    transition: none;
}

.catalog-tile__fallback[hidden] {
    display: none !important;
}

.catalog-tile__fallback svg,
.catalog-tile__fallback-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: none;
    transition: none;
}

/* --------------------------------------------------------------- price block */

.catalog-price {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.1;
}

.catalog-price--center { align-items: center; }
.catalog-price--start { align-items: flex-start; }

.catalog-price__row {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: inherit;
}

.catalog-price__pay {
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--brand-ink, #1e293b);
}

.catalog-price__list {
    font-size: 0.8rem;
    text-decoration: line-through;
    color: var(--brand-ink-muted, #697078);
    font-variant-numeric: tabular-nums;
}

.catalog-price__offer {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #b91c1c;
}

/* ------------------------------------------------------------- listing meta */

.catalog-meta-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}

/* Two lines of grey prose per row ("Max 03 DoFollow links" / "Turnaround: 48h")
   added height everywhere and read slowly. */
.catalog-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border: 1px solid var(--border-subtle, #e2e8f0);
    border-radius: var(--radius-pill, 999px);
    background: var(--surface-2, #f7fafb);
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--brand-ink-muted, #697078);
    white-space: nowrap;
}

.catalog-meta-chip i {
    font-size: 9px;
    opacity: 0.75;
}

.catalog-live-apply-hint {
    white-space: nowrap;
}

.catalog-inventory-from {
    white-space: nowrap;
}

/* Country: flag over name (previous catalog layout), clamped so a long
   country cannot widen the table. Full name stays in title for truncation. */
.catalog-country {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    max-width: 9.5rem;
    margin: 0 auto;
}

.catalog-country__flag {
    font-size: 22px;
    line-height: 1;
}

.catalog-country__name {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    line-height: 1.2;
}

.catalog-card-preview {
    max-width: 220px;
}

.catalog-card-details__description {
    max-height: 12rem;
    overflow: auto;
}

/* Clip chips inside the fixed Category column — table overflow stays visible
   for sticky headers, so without this long niches paint over Traffic/DR/DA. */
.catalog-page .catalog-table td.catalog-category-cell {
    overflow: hidden;
    max-width: 0; /* force fixed-layout cell to honor column % width */
    min-width: 0;
}

.categories-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    min-width: 0;
}

.categories-wrapper .categories-column {
    align-items: center;
    align-content: center;
    justify-content: center;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.categories-wrapper .toggle-cats-btn {
    text-align: center;
}

.catalog-page .table tbody tr.site-row {
    cursor: pointer;
    /* Explicit surface so blacklist / hover washes paint every cell the same. */
    background-color: var(--surface-1, #fff);
}

/* Row hover lives in hover-system.css now. Three local tints meant the same
   gesture looked different in every table, and the blacklisted one re-stated a
   status the row already shows rather than saying "you can click this". */

.catalog-page .btn-link {
    text-decoration: none;
}

.catalog-page .btn-link:hover {
    background-color: var(--hover-2, rgba(15, 23, 42, 0.075));
    border-radius: 4px;
}

.catalog-page .badge {
    font-size: 0.75rem;
    font-weight: 500;
}

/* Row and panel chrome that used to be inline style attributes on every row.
   The blacklist tint stays a literal: --brand-danger-bg is white, so using it
   here would remove the signal entirely.

   Specificity matches the tr.site-row rule above, which sets the resting
   background the pinned Action cell inherits — otherwise that rule would paint
   over the tint and the dimmed row would lose its colour. */
.blacklisted-row {
    opacity: 0.7;
    background-color: #fff3f3;
}

.catalog-page .table tbody tr.site-row.blacklisted-row {
    background-color: #fff3f3;
}

.catalog-expand-cell {
    background-color: var(--surface-2, #f7fafb);
    padding: 12px 16px;
}

.catalog-expand-title {
    font-size: 0.875rem;
    font-weight: 600;
}

.catalog-expand-grid > [class*="col-"] {
    min-width: 0;
}

.catalog-expand-preview {
    /* Compact desktop window — same 300px cap as the 16:10 frame inside.
       A 720px col-12 stole the row and blew the screenshot up. */
    max-width: 300px;
}

.catalog-expand-pricing .form-check-label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.45rem;
}

.catalog-expand-meta .badge {
    font-weight: 500;
}

.catalog-expand-trust {
    padding-top: 0.85rem;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.catalog-expand-trust .site-trust-compact {
    font-size: 12px;
}

.catalog-details-heading {
    display: flex;
    align-items: center;
    gap: 4px;
    line-height: 1.2;
}

.catalog-details-heading .glass-tip-trigger {
    flex: 0 0 auto;
    align-self: center;
}

/* Buy used to pin itself to the resting colour on hover, so the main CTA in the
   catalog was the one button with no hover feedback. It now deepens with every
   other primary — see hover-system.css. */

.rotate-arrow {
    transform: rotate(180deg);
}

/* One page scroll only. Bootstrap .table-responsive sets overflow-x:auto,
   which creates a nested scrollport and breaks sticky headers.
   Do NOT use overflow-x:clip either — when one axis is clip the other leaves
   "visible", so the box becomes a scrollport and the sticky thead anchors to
   it instead of the viewport (that is the Buy/header shake).
   The xl table is sized to fit; keep overflow fully visible. */
.catalog-table-scroll,
.catalog-table-scroll.table-responsive {
    max-width: 100%;
    overflow: visible;
    -webkit-overflow-scrolling: auto;
    overscroll-behavior-x: none;
}

/* The shell sets overflow-x:clip on body and #main-content to stop portal
   wrapping. That makes both a scrollport, so the catalog's sticky header could
   never anchor to the viewport and jittered while the page scrolled. The table
   is sized to fit its columns, so this page can opt out of the clip. */
body:has(.catalog-page),
body:has(.catalog-page) #main-content,
body:has(.catalog-page) #content {
    overflow-x: visible;
}

/* Reserve scrollbar space on the page scroller so the sticky header does not
   shift horizontally when the scrollbar appears or disappears mid-scroll. */
body:has(.catalog-page) {
    scrollbar-gutter: stable;
}

.catalog-page .catalog-table {
    width: 100%;
    table-layout: fixed;
    margin-bottom: 0;
    /* separate is required for position:sticky on th/td in several engines. */
    border-collapse: separate;
    border-spacing: 0;
}

/* Buy column sizing — do NOT pin with position:sticky;right.
   Dual-axis sticky (header top + column right) plus a side shadow repaints
   every scroll frame and makes the Buy cells / sticky header shake vertically.
   Horizontal overflow is already clipped (.catalog-table-scroll), and the
   xl table is laid out to fit, so a sticky rail is unnecessary. */
.catalog-th-action {
    min-width: 10rem;
    width: 10.5rem;
    z-index: 6;
}

.catalog-page .table tbody td.catalog-td-action {
    background-color: inherit;
}

.catalog-page .table thead th.catalog-th-action {
    background-color: var(--surface-2, #f7fafb);
}

/* --------------------------------------------------------------- filters card */

.catalog-filters-card .form-control,
.catalog-filters-card .form-select,
.catalog-filters-card .multi-select-wrapper,
.catalog-filters-card .multi-select-input {
    min-width: 0;
    max-width: 100%;
}

/* One line, ellipsis. A wrapping placeholder made the control taller than the
   inputs beside it, so the filter labels sat at four different heights. */
.catalog-filters-card .multi-select-input .placeholder-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.catalog-filters-card .multi-select-input .selected-items {
    min-width: 0;
    flex-wrap: wrap;
}

.catalog-sort-select {
    width: auto;
    min-width: 10rem;
    max-width: 100%;
    /* Closed control matches catalog filter .form-select-sm / .multi-select-input--sm */
    min-height: 31px;
    padding: 0.25rem 2rem 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--brand-ink, #0f172a);
    background-color: var(--surface-1, #fff);
    border: 1px solid var(--border-default, #e2e8f0);
    border-radius: var(--radius-sm, 8px);
    box-shadow: none;
}

.catalog-sort-select:focus,
.catalog-sort-select:focus-visible {
    outline: none;
    border-color: var(--brand-primary-soft, #3faeb2);
    box-shadow: 0 0 0 0.2rem var(--focus-ring, rgba(63, 174, 178, 0.35));
}

@media (max-width: 1199.98px) {
    .catalog-filters-card .row > [class*="col-"] {
        min-width: 0;
    }
}

@media (max-width: 768px) {
    .catalog-page .btn-sm {
        font-size: 0.75rem;
    }

    .catalog-filters-card .card-body {
        padding-top: 0.85rem;
        padding-bottom: 0.85rem;
    }

    .catalog-mobile-list {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* ------------------------------------------------------------------ card list */

.catalog-mobile-card {
    cursor: pointer;
    border: 1px solid var(--border-subtle, #e2e8f0);
    border-radius: var(--radius-md, 12px);
    background: var(--surface-1, #fff);
    padding: 14px;
    margin-bottom: 12px;
    max-width: 100%;
    overflow: hidden;
}

.catalog-mobile-card.is-blacklisted {
    opacity: 0.75;
    background: #fff8f8;
}

/* Two cards per row from md up: at tablet widths one card per row left a lot of
   empty space beside it. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .catalog-mobile-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 12px;
        align-items: start;
    }
}

.catalog-mobile-card__host {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-left: 52px;
}

.catalog-mobile-card__host .catalog-tile {
    flex: 0 0 40px;
    position: relative;
    z-index: 4;
    align-self: flex-start;
}

/* Truncation only works if every flex ancestor can shrink below its content, so
   the column between the tile and the eye needs its own min-width: 0. */
.catalog-mobile-card__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.catalog-mobile-card__main .catalog-site-name {
    min-width: 0;
}

.catalog-mobile-card .catalog-site-title-row {
    min-height: 40px;
    align-items: center;
}

.catalog-mobile-card__main .catalog-site-url,
.catalog-mobile-card__main .catalog-site-rooted-url {
    max-width: 100%;
}

/* Add to cart is the solid CTA; price sits under it as supporting copy.
   .list-price-display / .base-price-display stay inside this wrap for cart JS. */
.catalog-card-buy {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-subtle, #f1f5f9);
}

.catalog-card-buy .buy-now {
    flex: 0 0 auto;
    width: 100%;
}

.catalog-own-listing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    max-width: 14rem;
}

/* Leftover Add to cart on an own-listing row must never stay clickable. */
[data-own-listing="1"] .buy-now {
    display: none !important;
}

.catalog-own-listing--start {
    align-items: flex-start;
}

.catalog-own-listing__badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #5b6b73;
}

.catalog-own-listing__hint {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--text-muted, #6b7280);
    text-align: inherit;
}

.catalog-own-listing--center .catalog-own-listing__hint {
    text-align: center;
}

.catalog-card-buy .catalog-own-listing {
    flex: 1 1 10rem;
    max-width: none;
}

/* Cards reuse the table row's action stack, so Buy spans the card and the quiet
   controls line up under it instead of wrapping unevenly. */
.catalog-mobile-card .catalog-row-actions {
    align-items: stretch;
}

.catalog-mobile-card .catalog-row-actions__secondary {
    justify-content: flex-start;
}

/* Two fixed columns for the four metrics. A card can be narrow while the
   viewport is wide (they sit two-up at tablet widths), and auto-fit gave a
   different column count per card width — which left an empty cell beside DA
   and squeezed "Country" into "Countr / y". Two rows of two always align. */
.catalog-mobile-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 0 0;
    border-top: 1px solid var(--border-subtle, #f1f5f9);
}

.catalog-mobile-metrics > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    min-width: 0;
}

.catalog-mobile-metrics > div > span {
    white-space: nowrap;
}

/* Values wrap rather than truncate: the metric cells are narrow in a two-up
   card, and hiding half of "United States" is worse than a second line. */
.catalog-mobile-metrics strong {
    font-size: 13px;
    color: var(--brand-ink, #0f172a);
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Shared Details control: table expand chevron and card disclosure. */
.catalog-details-toggle {
    display: inline-flex;
    align-items: center;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}

.catalog-details-toggle i {
    transition: transform 160ms ease;
}

/* Narrow desktops: hide Verified chip copy (icon stays). Details stays labelled
   because it is now the only way to expand a row. */
@media (max-width: 1499.98px) {
    .catalog-table .site-chip--verified > span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    .catalog-table .site-chip--verified {
        padding: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .catalog-details-toggle i {
        transition: none;
    }
}

/* Card details disclosure — the table keeps this content in its expand row, so
   without it every viewport below xl lost the description and sample article. */
.catalog-card-details {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-subtle, #f1f5f9);
    font-size: 12.5px;
}

.catalog-card-details__row + .catalog-card-details__row {
    margin-top: 8px;
}

.catalog-card-details dt {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: var(--brand-ink, #0f172a);
    margin-bottom: 2px;
    line-height: 1.2;
}

.catalog-card-details dt .glass-tip-trigger {
    flex: 0 0 auto;
    align-self: center;
}

.catalog-card-details dd {
    margin: 0;
    color: var(--brand-ink-muted, #697078);
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ controls */

#filterForm input[type="number"]::-webkit-inner-spin-button,
#filterForm input[type="number"]::-webkit-outer-spin-button {
    opacity: 0.5;
}

.catalog-page .form-control-sm,
.catalog-page .form-select-sm {
    font-size: 0.875rem;
    min-height: 31px;
    border-radius: var(--radius-sm, 8px);
}

.catalog-page .form-control-sm {
    padding: 0.25rem 0.5rem;
}

.catalog-page .form-select-sm {
    padding: 0.25rem 2rem 0.25rem 0.5rem;
}

/* Filter multi-selects use form-control-sm — keep the closed field on the same
   31px / radius-sm rhythm as Sort and the More drawer selects. */
.catalog-page .multi-select-input.form-control-sm {
    min-height: 31px;
    padding: 0.25rem 1.75rem 0.25rem 0.5rem;
    border-radius: var(--radius-sm, 8px);
}

/* Sensitive topics stay a single-select radio group in the DOM. The native
   circle is replaced with a square tick so the column reads as options, not
   a warning. No teal tray — each row uses a light slate chip. */
.sensitive-prices-group {
    padding: 0;
    border: 0;
    background: transparent;
}

.sensitive-price-checkbox {
    cursor: pointer;
}

.sensitive-prices-group .form-check {
    margin-bottom: 8px;
    padding: 0.55rem 0.75rem 0.55rem 2.25rem;
    border: 1px solid #e8edf2;
    border-radius: 999px;
    background: #f4f6f8;
    cursor: pointer;
}

.sensitive-prices-group .form-check-label {
    cursor: pointer;
}

.sensitive-prices-group .form-check:has(.sensitive-price-checkbox:checked) {
    border-color: #d7dee6;
    background: #eef2f6;
}

.sensitive-prices-group .form-check-input.sensitive-price-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.2em;
    border-radius: 5px;
    border: 1.5px solid #c5d4d6;
    background-color: #fff;
    background-image: none;
}

.sensitive-prices-group .form-check-input.sensitive-price-checkbox:checked {
    background-color: var(--brand-primary, #1a585e);
    border-color: var(--brand-primary, #1a585e);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.72rem;
}

.sensitive-prices-group .form-check-input.sensitive-price-checkbox:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(26, 88, 94, 0.22);
}

.catalog-addon-price {
    color: var(--brand-primary, #1a585e);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cart-fly-token {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 11000;
    width: 108px;
    display: flex;
    flex-direction: column;
    align-items: center;
    will-change: transform, opacity;
}

.cart-fly-arrow {
    display: flex;
    width: 22px;
    height: 22px;
    margin-bottom: 6px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--brand-primary-soft, #3faeb2);
    color: #fff;
    font-size: 10px;
    box-shadow: 0 6px 14px rgba(26, 88, 94, 0.22);
}

.cart-fly-window {
    width: 108px;
    overflow: hidden;
    border: 2px solid var(--brand-primary-soft, #3faeb2);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 14px 28px -12px rgba(26, 88, 94, 0.35);
}

.cart-fly-window__bar {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 14px;
    padding: 0 8px;
    background: #eef7f7;
}

.cart-fly-window__bar span {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--brand-primary-soft, #3faeb2);
}

.cart-fly-window__body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    color: var(--brand-primary-soft, #3faeb2);
    background: var(--brand-primary-tint, #f4fbfb);
    font-size: 16px;
}

.cart-fly-window__body img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-fly-token.is-mid .cart-fly-window {
    box-shadow:
        -28px 0 0 -12px rgba(63, 174, 178, 0.18),
        -48px 0 0 -14px rgba(63, 174, 178, 0.1),
        0 14px 28px -12px rgba(26, 88, 94, 0.28);
}

.catalog-page .buy-now.is-added,
.catalog-page .buy-now.is-in-cart {
    background: var(--brand-primary, #1a585e);
    border-color: var(--brand-primary, #1a585e);
}

.catalog-buy-addon-hint {
    font-size: 0.72rem;
    line-height: 1.3;
    max-width: 12rem;
    color: var(--brand-ink-muted, #697078);
}

.catalog-card-buy .catalog-buy-addon-hint {
    max-width: 100%;
}

#toggleCart.cart-pop {
    animation: catalog-cart-pop 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes catalog-cart-pop {
    0%,
    100% { transform: scale(1); }
    30% { transform: scale(1.16); }
    55% { transform: scale(0.96); }
    75% { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    #toggleCart.cart-pop {
        animation: none;
    }

    .cart-fly-token {
        display: none;
    }
}

.selected-price-info {
    font-size: 0.875rem;
    padding: 5px 0;
    border-top: 1px solid var(--border-subtle, #e9ecef);
}

/* Result-first inventory teaser */
.catalog-inventory-teaser {
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--brand-primary-border, #d9ecec);
    border-radius: var(--radius-md, 10px);
    background: linear-gradient(180deg, var(--brand-primary-tint, #f4fbfb) 0%, var(--surface-1, #ffffff) 100%);
}

.catalog-inventory-teaser__price {
    color: var(--brand-primary, #1a585e);
}

.site-preview-zoom {
    /* Compact desktop 16:10 window (Safari-safe padding-top). Hover pop stays
       720px so the full capture is still readable. aspect-ratio + only
       absolute children often collapses to 0 height in WebKit. */
    position: relative;
    width: 100%;
    max-width: min(300px, 100%);
    margin: 0 auto;
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    border: 1px solid var(--border-subtle, #e2e8f0);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
    background: var(--surface-2, #f7fafb);
}

.site-preview-zoom.catalog-card-preview {
    max-width: min(220px, 100%);
}

.site-preview-zoom[data-zoom-src] {
    cursor: zoom-in;
}

.site-preview-zoom[data-zoom-src]:hover,
.site-preview-zoom[data-zoom-src]:focus-visible {
    border-color: var(--brand-primary, #1a585e);
    box-shadow: 0 0 0 1px var(--brand-primary, #1a585e);
    outline: none;
}

.site-preview-zoom::before {
    content: '';
    display: block;
    width: 100%;
    padding-top: 62.5%; /* 10 / 16 */
}

.site-preview-zoom img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: center top;
    display: block;
    background: var(--surface-2, #f7fafb);
    transform: scale(1);
    transform-origin: center top;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hover zoom only for fine pointers (mouse). Touch / coarse pointers skip it
   so Safari/iOS cannot keep a stuck “permanent zoom” after tap. */
@media (hover: hover) and (pointer: fine) {
    .site-preview-zoom:hover img,
    .site-preview-zoom:focus-within img {
        transform: scale(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-preview-zoom img {
        transition: none;
    }

    .site-preview-zoom:hover img,
    .site-preview-zoom:focus-within img {
        transform: none;
    }
}

.site-preview-zoom.is-broken { display: none; }
/* Beat Bootstrap .d-none { display: none !important } when the capture 404s */
.site-preview-zoom.is-broken + .site-preview-fallback { display: inline-flex !important; }

.site-preview-fallback {
    position: relative;
    width: 100%;
    max-width: min(300px, 100%);
    margin: 0 auto;
}

.site-preview-fallback::before {
    content: '';
    display: block;
    width: 100%;
    padding-top: 62.5%;
}

.site-preview-fallback > i,
.site-preview-fallback > span {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 12px;
}

.site-preview-fallback > i {
    top: 28%;
    bottom: auto;
}

.site-preview-fallback > span {
    top: 52%;
    bottom: auto;
    line-height: 1.35;
}

/* Icon-only fallbacks (no caption span) stay centered. */
.site-preview-fallback > i:only-child {
    inset: 0;
}

.site-trust-compact {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-size: 11px;
    line-height: 1.3;
    color: var(--brand-ink-muted, #76797c);
    max-width: 100%;
    cursor: help;
}

.site-trust-compact__row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}

.site-trust-compact__stars {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    color: var(--brand-warning, #f59e0b);
    font-size: 11px;
}

.site-trust-compact__stars .fa-regular { color: #cbd5e1; }

.site-trust-compact__score {
    margin-left: 4px;
    color: var(--brand-ink-muted, #475569);
    font-weight: 600;
}

.site-trust-compact__count {
    color: var(--brand-ink-muted, #475569);
    font-weight: 500;
}

.site-trust-compact__empty {
    color: var(--brand-ink-muted, #94a3b8);
    font-weight: 500;
}

.site-trust-compact__sep { color: #cbd5e1; }

.site-trust-compact__rate {
    color: var(--brand-primary, #1a585e);
    font-weight: 600;
}

.site-trust-compact__rate--empty {
    color: var(--brand-ink-muted, #94a3b8);
    font-weight: 500;
}

.site-trust-compact__published {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    color: var(--brand-ink-muted, #94a3b8);
    font-size: 11px;
    font-weight: 500;
}

.site-trust-compact__published i {
    font-size: 10px;
    line-height: 1;
}

.catalog-card-details .site-trust-compact {
    margin-top: 0;
}

/* --------------------------------------------------------- bulk discount rail */

/* The deals used to be a wrapping grid, so each extra offer added height and
   twelve of them pushed the results table off the first screen. One scrolling
   row costs the same space at any count. */
.catalog-bulk-count {
    margin-left: 4px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 600;
    color: var(--brand-primary, #1a585e);
    background: var(--brand-primary-tint, #f4fbfb);
    border: 1px solid var(--brand-primary-border, #d9ecec);
}

.catalog-bulk-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.catalog-bulk-search-input {
    width: min(12.5rem, 42vw);
    min-height: 32px;
    border-color: var(--brand-primary-border, #d9ecec);
}

.catalog-bulk-search-input:focus {
    border-color: var(--brand-primary, #1a585e);
    box-shadow: 0 0 0 3px rgba(26, 88, 94, 0.12);
}

.catalog-bulk-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 12px;
    color: var(--brand-primary, #1a585e);
    background: var(--surface-1, #fff);
    border: 1px solid var(--brand-primary-border, #d9ecec);
    /* Square controls — not pill/circle arrows. */
    border-radius: var(--radius-sm, 6px);
}

.catalog-bulk-nav:disabled {
    opacity: 0.4;
    cursor: default;
}

.catalog-bulk-toggle {
    padding: 0 4px;
    font-size: 0.8125rem;
    text-decoration: none;
}

.catalog-bulk-section.is-collapsed .card-body {
    display: none;
}

/* Smooth R→L page slide: viewport clips; track translates; each panel is a 6-up grid. */
.catalog-bulk-viewport {
    overflow: hidden;
    width: 100%;
    padding: 6px 2px 4px;
}

.catalog-bulk-viewport:focus-within {
    outline: none;
}

.catalog-bulk-rail {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    will-change: transform;
    transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* First paint: only the first 6-up page is visible. Extra cards used to sit
   in one flex row and squash until JS rebuilt the panels. */
.catalog-bulk-rail:not(.is-enhanced) {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    transform: none !important;
    transition: none;
    will-change: auto;
}
.catalog-bulk-rail:not(.is-enhanced) > [data-bulk-card]:nth-child(n + 7) {
    display: none;
}
.catalog-bulk-rail:not(.is-enhanced) > [data-bulk-page-panel] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    min-width: 0;
    flex: none;
}
.catalog-bulk-rail:not(.is-enhanced) > [data-bulk-page-panel] ~ [data-bulk-page-panel] {
    display: none;
}

.catalog-bulk-rail:focus-visible {
    outline: 2px solid var(--brand-primary, #1a585e);
    outline-offset: 2px;
    border-radius: var(--radius-md, 12px);
}

.catalog-bulk-page-panel {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
    .catalog-bulk-rail {
        transition: none;
    }
}

.catalog-bulk-section .bulk-deal-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    border: 1px solid #e8f3f3;
    border-radius: var(--radius-md, 12px);
    padding: 12px;
    /* Soft mist wash — lighter than brand-primary-tint so the rail reads airy. */
    background: linear-gradient(180deg, #fbfdfe 0%, #ffffff 62%);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition:
        box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 180ms ease,
        background 180ms ease,
        opacity 180ms ease;
}

.catalog-bulk-section .bulk-deal-card.is-bulk-hidden {
    display: none;
}

.catalog-bulk-empty {
    padding: 18px 8px 8px;
    text-align: center;
}

.catalog-bulk-empty[hidden] {
    display: none !important;
}

/* Centered under the deals: ← 1 2 3 → and Page X of Y */
.catalog-bulk-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 10px;
    margin-top: 14px;
    padding-top: 4px;
}

.catalog-bulk-pager[hidden] {
    display: none !important;
}

.catalog-bulk-pages {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.catalog-bulk-page {
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--brand-primary, #1a585e);
    background: var(--surface-1, #fff);
    border: 1px solid var(--brand-primary-border, #d9ecec);
    /* Square page numbers — match nav arrows. */
    border-radius: var(--radius-sm, 6px);
}

.catalog-bulk-page.is-active {
    color: #fff;
    background: var(--brand-primary, #1a585e);
    border-color: var(--brand-primary, #1a585e);
}

.catalog-bulk-page-label {
    flex: 1 0 100%;
    text-align: center;
    font-size: 0.75rem;
    color: var(--brand-ink-muted, #697078);
    font-variant-numeric: tabular-nums;
}

/* A — stronger teal border + ring (no translateY — that shifts the rail). */
.catalog-bulk-section .bulk-deal-card:hover,
.catalog-bulk-section .bulk-deal-card:focus-within {
    border-color: rgba(26, 88, 94, 0.45);
    background: linear-gradient(165deg, #f7fcfd 0%, #eef8f9 45%, #ffffff 100%);
    box-shadow:
        0 0 0 3px rgba(26, 88, 94, 0.14),
        0 10px 22px rgba(15, 23, 42, 0.08),
        0 2px 6px rgba(26, 88, 94, 0.08);
    opacity: 1;
}

/* C — dim siblings so the hovered/focused card reads as the active offer.
   Keep search-match cards full strength (Phase 3: match > hover). */
.catalog-bulk-section:has(.bulk-deal-card:hover) .bulk-deal-card:not(:hover):not(:focus-within):not(.is-bulk-match),
.catalog-bulk-section:has(.bulk-deal-card:focus-within) .bulk-deal-card:not(:hover):not(:focus-within):not(.is-bulk-match) {
    opacity: 0.72;
}

.catalog-bulk-section .bulk-deal-card:hover .bulk-deal-card__pct,
.catalog-bulk-section .bulk-deal-card:focus-within .bulk-deal-card__pct {
    background: #d1fae5;
    border-color: #6ee7b7;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}

/* Existing CTA fill on hover — kept solid teal. */
.catalog-bulk-section .bulk-deal-card:hover .bulk-deal-card__cta,
.catalog-bulk-section .bulk-deal-card:focus-within .bulk-deal-card__cta {
    background: var(--brand-primary, #1a585e);
    border-color: var(--brand-primary, #1a585e);
    color: #fff;
    box-shadow: 0 4px 12px rgba(26, 88, 94, 0.22);
}

/* Search hit — after hover so match styles win by order + higher specificity. */
.catalog-bulk-section .bulk-deal-card.is-bulk-match {
    border-color: rgba(26, 88, 94, 0.55);
    background: linear-gradient(165deg, #eef8f9 0%, #e4f4f5 48%, #ffffff 100%);
    box-shadow:
        0 0 0 4px rgba(26, 88, 94, 0.18),
        0 10px 22px rgba(15, 23, 42, 0.1);
}

.catalog-bulk-section .bulk-deal-card.is-bulk-match:hover,
.catalog-bulk-section .bulk-deal-card.is-bulk-match:focus-within {
    border-color: rgba(26, 88, 94, 0.55);
    background: linear-gradient(165deg, #eef8f9 0%, #e4f4f5 48%, #ffffff 100%);
    box-shadow:
        0 0 0 4px rgba(26, 88, 94, 0.18),
        0 12px 24px rgba(15, 23, 42, 0.12);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .catalog-bulk-section .bulk-deal-card {
        transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
    }
}

.bulk-deal-card__head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.bulk-deal-card__identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.bulk-deal-card__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--brand-ink, #0f172a);
}

.bulk-deal-card__url {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    color: var(--brand-primary, #1a585e);
}

.bulk-deal-card__tld {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    padding: 0 6px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--brand-ink-muted, #697078);
    background: #f1f5f9;
    border-radius: var(--radius-sm, 6px);
}

.bulk-deal-card__host {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--brand-ink, #0f172a);
}

.bulk-deal-card__pct {
    flex: 0 0 auto;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 700;
    color: #047857;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: var(--radius-pill, 999px);
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.bulk-deal-card__metrics {
    display: flex;
    gap: 10px;
    font-size: 0.75rem;
    color: var(--brand-ink-muted, #697078);
}

.bulk-deal-card__metrics strong {
    color: var(--brand-ink, #0f172a);
    font-variant-numeric: tabular-nums;
}

.bulk-deal-card__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.8125rem;
}

.bulk-deal-card__was {
    color: var(--brand-ink-muted, #697078);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}

.bulk-deal-card__now {
    font-size: 1rem;
    color: #047857;
    font-variant-numeric: tabular-nums;
}

.bulk-deal-card__qty {
    color: var(--brand-ink-muted, #697078);
}

/* Pinned to the bottom so buttons line up across cards of unequal text. */
.bulk-deal-card__cta {
    margin-top: auto;
    width: 100%;
    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease,
        box-shadow 160ms ease;
}

@media (max-width: 1199.98px) {
    .catalog-bulk-page-panel {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .catalog-bulk-page-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .catalog-bulk-page-panel {
        grid-template-columns: minmax(0, 1fr);
    }

    .catalog-bulk-search-input {
        width: min(11rem, 48vw);
    }
}

.site-chip--featured {
    background: var(--brand-warning-bg, #fff7e6);
    color: #b45309;
    border: 1px solid var(--brand-warning-border, #fde68a);
}

.site-chip--sale {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.site-chip--bulk {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.site-chip--homepage {
    background: #f0fdfa;
    color: #0f766e;
    border: 1px solid #99f6e4;
}

.site-chip--social {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.site-chip--sponsored {
    background: #fff7e6;
    color: #92400e;
    border: 1px solid #fde68a;
}

.site-chip--partner {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.site-chip--prefer {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.site-chip--none {
    background: #f8fafc;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.catalog-expand-cell .site-chip--sponsored,
.catalog-expand-cell .site-chip--partner,
.catalog-expand-cell .site-chip--prefer,
.catalog-expand-cell .site-chip--none,
.catalog-card-details .site-chip--sponsored,
.catalog-card-details .site-chip--partner,
.catalog-card-details .site-chip--prefer,
.catalog-card-details .site-chip--none {
    background: transparent;
    border-color: transparent;
    border-style: none;
    padding-left: 0;
    padding-right: 0;
}

.catalog-expand-cell .site-chip--sponsored,
.catalog-card-details .site-chip--sponsored {
    color: var(--brand-warning-ink, #9a3412);
}

.catalog-expand-cell .site-chip--partner,
.catalog-card-details .site-chip--partner {
    color: var(--brand-success, #0f766e);
}

.catalog-expand-cell .site-chip--prefer,
.catalog-card-details .site-chip--prefer {
    color: var(--brand-primary-deep, #134347);
}

.catalog-expand-cell .site-chip--none,
.catalog-card-details .site-chip--none {
    color: var(--brand-ink-muted, #697078);
}

.catalog-sample-copy {
    line-height: 1;
    color: var(--brand-ink-muted, #697078);
}

.catalog-sample-copy:hover {
    color: var(--brand-ink, #1e293b);
}

/* Two chip families: status (listing state) vs descriptors (what the offer is). */
.site-chip--status {
    font-weight: 700;
    letter-spacing: 0.01em;
}

.site-chip--descriptor {
    font-weight: 600;
    border-style: dashed;
    cursor: default;
}

.catalog-homepage-hint {
    max-width: 11rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.25;
}

/* Results toolbar + empty recovery */
.catalog-results-bar {
    padding: 0.15rem 0.1rem;
}

.catalog-results-bar .btn-suggest-website {
    white-space: nowrap;
}

.catalog-article-banner {
    margin-bottom: 0.75rem;
}

.site-trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    color: #b45309;
    line-height: 1.2;
    white-space: nowrap;
}

.site-trust-chip i {
    font-size: 10px;
}

.catalog-empty-state {
    max-width: 420px;
    padding: 0.5rem 1rem 1rem;
}

.catalog-empty-art {
    display: block;
    width: 168px;
    max-width: 100%;
    height: auto;
    margin: 0 auto 0.85rem;
}

/* Live search/filter covers the results while the fragment loads so the click
   has an answer instead of looking dead. */
.catalog-results-card {
    position: relative;
}

.catalog-results-busy {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: none;
    pointer-events: none;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.12);
}

/* Belt-and-suspenders: without catalog.css a plain div is display:block and
   the "Updating results…" layer sat on top of every listing in Chrome. */
.catalog-results-busy[hidden] {
    display: none !important;
}

.catalog-results-card.is-busy .catalog-results-busy {
    display: flex;
}

.catalog-results-card.is-busy .catalog-results-busy[hidden] {
    display: flex !important;
}

/* Stale rows must not stay clickable under the veil (Buy / heart / etc.). */
.catalog-results-card.is-busy > .card-body {
    pointer-events: none;
    user-select: none;
    opacity: 0.92;
}

@media (prefers-reduced-motion: reduce) {
    .catalog-results-card.is-busy > .card-body {
        opacity: 1;
    }
}

/* ------------------------------------------------------- site column + chips */

.catalog-site-cell {
    position: relative;
    overflow: visible;
}

/* Floating enlarge for Site Details / card expand previews (fine pointer). */
.site-preview-zoom-pop {
    position: fixed;
    z-index: 1200;
    width: min(720px, calc(100vw - 32px));
    max-height: min(468px, calc(100vh - 32px));
    padding: 6px;
    border-radius: 12px;
    border: 1px solid rgba(26, 88, 94, 0.18);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px) scale(0.98);
    transition: opacity .16s ease, transform .16s ease;
    overflow: hidden;
}

.site-preview-zoom-pop.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.site-preview-zoom-pop::before {
    content: '';
    display: block;
    width: 100%;
    padding-top: 62.5%;
}

.site-preview-zoom-pop img {
    position: absolute;
    inset: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    max-width: none;
    object-fit: contain;
    object-position: center top;
    border-radius: 8px;
    background: #f8fafc;
    display: block;
}

@media (hover: none) {
    .site-preview-zoom-pop { display: none !important; }
    .site-preview-zoom[data-zoom-src] { cursor: default; }
}

@media (prefers-reduced-motion: reduce) {
    .site-preview-zoom-pop {
        transition: none;
    }
}

.catalog-site-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

/* The tile sits beside the stack rather than above it, so the domain, chips and
   meta all hang off one left edge. */
.catalog-site-stack--tiled {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 5px;
    align-items: center;
    padding-left: 52px;
}

.catalog-site-stack--tiled > .expand-arrow {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.catalog-site-stack--tiled > .catalog-tile {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    z-index: 4;
    align-self: center;
}

.catalog-site-stack--tiled > .catalog-site-stack__body {
    display: contents;
}

.catalog-site-stack--tiled .catalog-site-title-row {
    grid-column: 2;
    grid-row: 1;
    min-height: 34px;
    align-items: center;
}

.catalog-site-stack--tiled .catalog-site-identity,
.catalog-site-stack--tiled .catalog-site-deals,
.catalog-site-stack--tiled .catalog-meta-chips,
.catalog-site-stack--tiled .site-status-row {
    grid-column: 2;
}

.catalog-site-stack__body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    flex: 1 1 auto;
    width: auto;
    max-width: 100%;
}

.catalog-site-name {
    font-family: var(--font-sans, 'Poppins', system-ui, sans-serif);
    font-weight: 600;
    font-size: 13.5px;
    color: var(--brand-ink, var(--type-color, #0f172a));
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
    flex: 0 1 auto;
    max-width: 100%;
}

/* Rooted URL under the listing name — same face as the rest of the catalog. */
.catalog-site-url,
.catalog-site-rooted-url {
    font-family: var(--font-sans, 'Poppins', system-ui, sans-serif);
    font-weight: 500;
    font-size: var(--type-meta, 0.75rem);
    line-height: 1.35;
    color: var(--type-muted, var(--brand-ink-muted, #697078));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 0 1 auto;
    max-width: 100%;
    width: auto;
}

.catalog-site-rooted-url {
    margin-top: 2px;
}

/* Visit lives on the rooted URL (↗ via ::after) so paintHostElements can
   rewrite textContent without dropping the icon. */
a.catalog-site-rooted-url.site-open-link {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: auto;
    max-width: 100%;
    min-width: 0;
    text-decoration: none;
    color: var(--type-muted, var(--brand-ink-muted, #697078));
    cursor: pointer;
}

a.catalog-site-rooted-url.site-open-link:hover {
    color: var(--brand-ink, #0f172a);
    text-decoration: underline;
}

a.catalog-site-rooted-url.site-open-link::after {
    content: "↗";
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: #64748b;
}

.catalog-site-identity {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.catalog-site-status-row,
.catalog-site-tag-slot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-width: 0;
    width: auto;
    max-width: 100%;
}

.catalog-site-tag-slot {
    flex-wrap: nowrap;
    gap: 6px;
}

.catalog-site-tag-slot:empty {
    display: none;
}

.catalog-site-badges--mobile,
.catalog-site-deals--mobile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
}

.catalog-site-meta {
    font-size: 12.5px;
}

/* Host + NEW/Verified/eye/Details stay packed on one nowrap row.
   Listing tags wrap with the URL; deal chips live on .catalog-site-deals. */
.catalog-site-title-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    min-width: 0;
    width: max-content;
    max-width: 100%;
}

.catalog-site-cell,
.catalog-expand-cell,
.catalog-mobile-card,
.catalog-card-details {
    position: relative;
}

.catalog-page button.site-badge-new.catalog-new-ribbon,
button.site-badge-new.catalog-new-ribbon {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    display: block;
    width: 56px !important;
    height: 56px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    overflow: visible;
    line-height: 0;
    animation: none !important;
}

.catalog-page button.site-badge-new.catalog-new-ribbon:hover,
.catalog-page button.site-badge-new.catalog-new-ribbon:focus-visible,
.catalog-page button.site-badge-new.catalog-new-ribbon.is-open,
.catalog-page button.site-badge-new.catalog-new-ribbon.is-alerting,
button.site-badge-new.catalog-new-ribbon:hover,
button.site-badge-new.catalog-new-ribbon:focus-visible,
button.site-badge-new.catalog-new-ribbon.is-open,
button.site-badge-new.catalog-new-ribbon.is-alerting {
    background: transparent !important;
    transform: none;
}

.catalog-new-ribbon img {
    display: block;
    width: 56px;
    height: 56px;
    pointer-events: none;
}

.catalog-table .catalog-site-title-row + .catalog-site-identity {
    margin-top: 0;
}

/* NEW · Verified · eye — snug cluster immediately after the name. */
.catalog-site-controls {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
    min-height: 22px;
    margin-left: 0;
}

.catalog-site-badges,
.catalog-site-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
}

/* Compact eye matches the 20–22px chip height (not the 36px quiet-button tile). */
.catalog-site-controls .catalog-url-eye,
.catalog-site-actions .catalog-url-eye {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 20px;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
    padding: 0;
    line-height: 1;
    text-decoration: none;
    vertical-align: middle;
    font-size: 13px;
    color: #64748b;
    border: 0;
    background: transparent;
    border-radius: 4px;
}

.catalog-site-controls .catalog-url-eye:hover,
.catalog-site-actions .catalog-url-eye:hover {
    color: #334155;
    background: var(--hover-2, rgba(15, 23, 42, 0.075));
}

.catalog-site-actions .catalog-details-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    height: 20px;
    min-height: 20px;
    gap: 2px;
    padding: 0 2px;
    margin-left: 2px;
    font-size: 12px;
    line-height: 1;
    color: #64748b;
    border: 0;
    background: transparent;
    border-radius: 4px;
    text-decoration: none;
}

.catalog-site-actions .catalog-details-toggle:hover {
    color: #334155;
    background: var(--hover-2, rgba(15, 23, 42, 0.075));
}

.catalog-site-controls .site-chip,
.catalog-site-controls .site-badge-new {
    flex: 0 0 auto;
    align-self: center;
}

.catalog-site-deals {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.catalog-bulk-note {
    color: var(--brand-primary, #1a585e);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.catalog-social-icons {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--brand-ink-muted, #697078);
    line-height: 1;
    cursor: pointer;
}

.catalog-social-icons i,
.catalog-social-icons i.fa.slb-icon-svg,
.catalog-social-icons i.fa-brands.slb-icon-svg {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    flex: 0 0 22px;
    font-size: 22px;
    color: var(--brand-ink-muted, #697078);
    background: none !important;
    background-color: currentColor !important;
    -webkit-mask: var(--slb-icon) center / contain no-repeat !important;
    mask: var(--slb-icon) center / contain no-repeat !important;
}

.catalog-social-icons .fa-facebook,
.catalog-social-icons .fa-facebook-f {
    --slb-icon: url("../icons/brands/facebook-fill.svg");
}

.catalog-social-icons .fa-instagram {
    --slb-icon: url("../icons/brands/instagram-fill.svg");
}

.catalog-social-icons .fa-x-twitter {
    --slb-icon: url("../icons/brands/x-fill.svg");
}

.catalog-social-icons i svg {
    display: none !important;
}

.catalog-site-deals .site-chip--homepage {
    height: auto;
    min-height: 22px;
    padding: 0.2rem 0.65rem;
    border: 0 !important;
    box-shadow: none;
    background: var(--brand-primary-bg, #e6f5f5);
    color: var(--brand-primary, #1a585e);
}

.catalog-site-tag-slot .site-chip--sponsored,
.catalog-site-tag-slot .site-chip--partner,
.catalog-site-tag-slot .site-chip--prefer,
.catalog-site-tag-slot .site-chip--none {
    height: auto;
    min-height: 22px;
    padding: 0.2rem 0.65rem;
    border: 0 !important;
    box-shadow: none;
}

.catalog-site-tag-slot .site-chip--sponsored {
    background: #fff6e8;
    color: #9a3412;
}

.catalog-site-tag-slot .site-chip--partner {
    background: var(--brand-primary-bg, #e6f5f5);
    color: var(--brand-primary, #1a585e);
}

.catalog-site-tag-slot .site-chip--prefer {
    background: #e8f2f3;
    color: var(--brand-primary-deep, #134347);
}

.catalog-site-tag-slot .site-chip--none {
    background: #f1f5f9;
    color: var(--brand-ink-muted, #697078);
}

.catalog-social-icons.m-draw:hover svg path,
.catalog-social-icons.m-draw:hover svg circle,
.catalog-social-icons.m-draw:hover svg line,
.catalog-social-icons.m-draw:hover svg polyline,
.catalog-social-icons.m-draw:hover svg rect,
.catalog-social-icons.m-draw:hover svg ellipse,
.catalog-social-icons.m-draw:hover svg polygon,
.catalog-social-icons .m-draw:hover svg path,
.catalog-social-icons .m-draw:hover svg circle,
.catalog-social-icons .m-draw:hover svg line,
.catalog-social-icons .m-draw:hover svg polyline,
.catalog-social-icons .m-draw:hover svg rect,
.catalog-social-icons .m-draw:hover svg ellipse,
.catalog-social-icons .m-draw:hover svg polygon {
    -webkit-animation: none !important;
    animation: none !important;
}

.catalog-site-badges--mobile {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    max-width: 100%;
}

/* Compact NEW pill — red batch with continuous zoom pulse (no border/ring),
   plus a one-shot alert pop when the soft beep fires.

   Specs are locked on button.site-badge-new: live Chrome was still painting
   the old brand-teal pill when a cached sheet or reboot button style won. */
.catalog-page button.site-badge-new,
.catalog-page .site-badge-new,
button.site-badge-new,
.site-badge-new {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    padding: 0 8px;
    border: 0 !important;
    border-radius: 999px;
    background: #ef4444 !important;
    background-image: none !important;
    color: #fff !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
    cursor: help;
    user-select: none;
    outline: none;
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.35);
    animation: siteNewPulse 1.6s ease-in-out infinite;
    flex-shrink: 0;
    overflow: visible;
    -webkit-appearance: none;
    appearance: none;
}

.catalog-page button.site-badge-new:hover,
.catalog-page button.site-badge-new:focus-visible,
.catalog-page button.site-badge-new.is-open,
.catalog-page .site-badge-new:hover,
.catalog-page .site-badge-new:focus-visible,
.catalog-page .site-badge-new.is-open,
button.site-badge-new:hover,
button.site-badge-new:focus-visible,
button.site-badge-new.is-open,
.site-badge-new:hover,
.site-badge-new:focus-visible,
.site-badge-new.is-open {
    background: #dc2626 !important;
    color: #fff !important;
}

.catalog-page button.site-badge-new:focus-visible,
.catalog-page .site-badge-new:focus-visible,
button.site-badge-new:focus-visible,
.site-badge-new:focus-visible {
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.35);
}

.catalog-page button.site-badge-new.is-alerting,
.catalog-page .site-badge-new.is-alerting,
button.site-badge-new.is-alerting,
.site-badge-new.is-alerting {
    animation: siteNewAlertPop 0.75s cubic-bezier(0.22, 1, 0.36, 1) 1;
    z-index: 2;
}

@keyframes siteNewPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
}

@keyframes siteNewAlertPop {
    0% { transform: scale(1); }
    35% { transform: scale(1.22); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .catalog-page button.site-badge-new,
    .catalog-page .site-badge-new,
    .catalog-page button.site-badge-new.is-alerting,
    .catalog-page .site-badge-new.is-alerting,
    button.site-badge-new,
    .site-badge-new,
    button.site-badge-new.is-alerting,
    .site-badge-new.is-alerting {
        animation: none !important;
    }
}

.site-status-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.site-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
    transition: transform var(--motion-hover, 140ms ease), box-shadow var(--motion-hover, 140ms ease), background-color var(--motion-hover, 140ms ease);
    cursor: help;
    user-select: none;
    background: transparent;
}

button.site-chip {
    margin: 0;
    font-family: inherit;
    cursor: pointer;
}

.site-chip i {
    font-size: 11px;
    line-height: 1;
}

/* Chips no longer lift. A row can carry several, so translating each one on
   hover read as jitter — and most of them are labels, not controls. */

.site-chip--verified,
button.site-chip.site-chip--verified {
    height: auto;
    min-height: 0;
    padding: 0;
    margin: 0;
    gap: 0;
    line-height: 0;
    background: none;
    border: 0;
    box-shadow: none;
    color: #0f766e;
}

.site-chip--verified:hover,
.site-chip--verified:focus-visible {
    background: none;
    box-shadow: none;
}

.site-chip--verified i {
    color: #0d9488;
}

.site-chip--verified .catalog-verified-lottie {
    display: block;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    margin: 0 -8px;
    overflow: hidden;
}

.site-chip--verified .catalog-verified-lottie svg {
    display: block;
    width: 100%;
    height: 100%;
    transform: scale(1.42);
    transform-origin: center;
}

.site-chip--blacklist {
    background: linear-gradient(180deg, #fff5f5 0%, #fee2e2 100%);
    color: #b91c1c;
    border-color: rgba(220, 38, 38, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.site-chip--blacklist:hover,
.site-chip--blacklist:focus-visible {
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.12);
}


.no-spinner::-webkit-inner-spin-button,
.no-spinner::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.no-spinner {
    -moz-appearance: textfield;
}

.categories-column {
    /* Horizontal wrap — a vertical stack of niche pills made every row
       hundreds of pixels tall once names like "News & Politics" appeared. */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 4px;
}

.category-badge {
    background: var(--brand-primary-bg, #e6f5f5);
    color: var(--brand-primary, #1a585e);
    border: 1px solid var(--brand-primary-border, #b8e4e4);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
    box-sizing: border-box;
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.toggle-cats-btn {
    background: none;
    border: none;
    color: var(--brand-primary, #1a585e);
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0 0;
}

.toggle-cats-btn:hover {
    text-decoration: underline;
}

/* Form controls on this page only. Borders stay quiet at rest and pick up the
   brand teal on hover/focus; the shared form system owns everything else. */
.catalog-page .form-control,
.catalog-page .form-select,
.catalog-page .multi-select-input {
    transition: border-color var(--motion-hover, 140ms ease), box-shadow var(--motion-hover, 140ms ease);
}

.catalog-page .form-control:hover,
.catalog-page .form-select:hover,
.catalog-page .multi-select-input:hover {
    border-color: var(--brand-primary-soft, #3faeb2);
}

.catalog-page .form-select:hover {
    cursor: pointer;
}

.catalog-page .catalog-theme-select {
    position: relative;
    width: 100%;
    min-width: 0;
}

.catalog-page .catalog-results-bar .catalog-theme-select {
    width: auto;
}

.catalog-page .catalog-theme-select--compact {
    width: 5.5rem;
    min-width: 5.5rem;
}

.catalog-page .catalog-theme-select--sort {
    width: 13rem;
    min-width: 11.5rem;
}

.catalog-page .catalog-theme-select .single-select-input {
    width: 100%;
    color: var(--brand-ink, #0f172a);
    font-family: var(--font-sans, "Poppins", sans-serif);
    font-size: 0.875rem;
    font-weight: 500;
    border-color: #d9e7e8;
    background: #fff;
    text-align: left;
}

.catalog-page .catalog-theme-select .single-select-input:hover {
    border-color: var(--brand-primary-soft, #3faeb2);
}

.catalog-page .catalog-theme-select .single-select-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--brand-primary, #1a585e);
}

.catalog-page .catalog-theme-select .single-select-arrow {
    color: var(--brand-primary, #1a585e);
}

.catalog-page .catalog-theme-select .single-select-dropdown {
    z-index: 40;
}

.catalog-page .catalog-theme-select .single-select-option {
    font-family: var(--font-sans, "Poppins", sans-serif);
    color: var(--brand-ink, #0f172a);
}

.swal2-container .swal2-popup:has(.swal-theme-select) .swal2-html-container {
    overflow: visible;
}

.swal2-container .swal-theme-select {
    position: relative;
    width: auto;
    margin: 0.75em 2em 0;
    text-align: left;
}

.swal2-container .swal-theme-select .single-select-input {
    width: 100%;
    min-height: 2.625em;
    color: var(--brand-primary, #1a585e);
    font-family: var(--font-sans, "Poppins", sans-serif);
    font-size: 1.125em;
    font-weight: 500;
    border: 1px solid #d9e7e8;
    border-radius: var(--radius-sm, 8px);
    background: #fff;
    text-align: left;
    box-shadow: none;
}

.swal2-container .swal-theme-select .single-select-input:hover,
.swal2-container .swal-theme-select .single-select-input[aria-expanded="true"] {
    border-color: var(--brand-primary-soft, #3faeb2);
}

.swal2-container .swal-theme-select .single-select-value,
.swal2-container .swal-theme-select .single-select-arrow {
    color: var(--brand-primary, #1a585e);
}

.swal2-container .swal-theme-select .single-select-dropdown {
    z-index: 20;
}

.swal2-container .swal-theme-select .single-select-option {
    font-family: var(--font-sans, "Poppins", sans-serif);
    color: var(--brand-ink, #0f172a);
}

.catalog-results-card:focus {
    outline: none;
}

.catalog-results-card:focus-visible {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand-primary, #1a585e);
}

.catalog-pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    margin: 1.5rem 0 2.75rem;
    padding: 0.85rem 1rem 1rem;
    border-top: 1px solid var(--border-subtle, #e2e8f0);
    clear: both;
}

.catalog-pagination__meta {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--brand-ink-muted, #697078);
    text-align: center;
}

.catalog-pagination__meta strong {
    color: var(--brand-ink, #0f172a);
    font-weight: 650;
}

.catalog-pagination__page-label {
    white-space: nowrap;
}

.catalog-pagination__links {
    width: 100%;
    display: flex;
    justify-content: center;
}

.catalog-pagination__links .pagination {
    margin: 0;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem;
    row-gap: 0.35rem;
}

.catalog-pagination__links .page-link {
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans, "Poppins", sans-serif);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 0.5rem;
    color: var(--brand-primary, #1a585e);
    background: #fff;
    border: 1px solid var(--brand-primary-border, #b8e4e4);
}

.catalog-pagination__links .page-link:hover,
.catalog-pagination__links .page-link:focus {
    color: var(--brand-primary, #1a585e);
    background: var(--brand-primary-bg, #e6f5f5);
    border-color: var(--brand-primary-soft, #3faeb2);
    box-shadow: 0 0 0 0.2rem var(--focus-ring, rgba(26, 88, 94, 0.18));
}

.catalog-pagination__links .page-item.active .page-link {
    color: #fff;
    background: var(--brand-primary, #1a585e);
    border-color: var(--brand-primary, #1a585e);
}

.catalog-pagination__links .page-item.disabled .page-link {
    color: var(--brand-ink-muted, #697078);
    background: #f8fafb;
    border-color: var(--border-subtle, #e2e8f0);
    pointer-events: none;
}

.catalog-pagination__pill {
    min-width: 3.75rem !important;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--brand-primary, #1a585e) !important;
    background: var(--brand-primary-bg, #e6f5f5) !important;
    border-color: var(--brand-primary-border, #b8e4e4) !important;
}

.catalog-pagination__links .page-link svg,
.catalog-pagination__links .page-link i {
    width: 0.95rem !important;
    height: 0.95rem !important;
    max-width: 0.95rem;
    max-height: 0.95rem;
    font-size: 0.95rem;
}

.catalog-pagination__links .page-item.disabled .page-link,
.catalog-pagination__links .page-link {
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .catalog-pagination {
        margin-bottom: 3.5rem; /* room above the Help & feedback FAB */
        padding-inline: 0.25rem;
    }

    .catalog-pagination__links .page-link {
        min-width: 2rem;
        height: 2rem;
        padding: 0 0.45rem;
        font-size: 0.8125rem;
    }

    .catalog-pagination__pill {
        min-width: 3.25rem !important;
    }
}

/* ------------------------------------------------------- catalog search field */

.catalog-search-field {
    position: relative;
}

.catalog-suggest-list {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    max-height: 16rem;
    overflow: auto;
}

.catalog-suggest-list[hidden],
.catalog-suggest-list.d-none {
    display: none !important;
}

.catalog-suggest-list__item {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    border: 0;
    background: transparent;
    text-align: left;
    font-size: 12px;
    color: #0f172a;
}

.catalog-suggest-list__item:hover,
.catalog-suggest-list__item:focus-visible,
.catalog-suggest-list__item.is-active {
    background: #e6f5f5;
}

.catalog-suggest-list__host {
    color: #64748b;
    font-size: 11px;
}

.catalog-tag-quick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.catalog-tag-quick__btn {
    border: 1px solid #d5dbe3;
    background: #fff;
    color: #475569;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
}

.catalog-tag-quick__btn.is-active,
.catalog-tag-quick__btn[aria-pressed="true"] {
    background: #e6f5f5;
    border-color: #b8e4e4;
    color: #1a585e;
}

.catalog-site-trust--row {
    display: flex;
    margin-top: 4px;
}