/* ==========================================================================
   Khooj — the storefront theme
   Implements the "Khooj" design canvas (Home / Search / Product / Brands /
   Categories / Saved / How It Works). Loads AFTER app.css: first it rebinds
   the Khooj token layer to Khooj's palette so every legacy component keeps
   working, then it styles the Khooj-specific structures the new views use.

   Type:    Source Serif 4 (display) · Instrument Sans (UI/body)
   Palette: paper #FAF8F5 · ink #221F1C · terracotta #A85B38 / #8A4526
            peach #E8A87C · shell #F3E9E0 · band #F3EEE7
            borders #EFEAE2 / #E2D8CB · muted #7A736A / #A49C93 / #B9AFA4
   ========================================================================== */

:root {
    --khooj-bg: #FAF8F5;
    --khooj-surface: #FFFFFF;
    --khooj-ink: #221F1C;
    --khooj-muted: #7A736A;
    --khooj-faint: #A49C93;
    --khooj-faintest: #B9AFA4;
    --khooj-border: #EFEAE2;
    --khooj-border-strong: #E2D8CB;
    --khooj-accent: #A85B38;
    --khooj-accent-hover: #8A4526;
    --khooj-peach: #E8A87C;
    --khooj-shell: #F3E9E0;
    --khooj-band: #F3EEE7;
    --khooj-dark: #221F1C;
    --khooj-instock: #5B8A4A;
    /* Audit: readable-on-any-light-surface text + accent (>=4.5:1). */
    --khooj-text-soft: #6E6760;
    --khooj-accent-strong: #9A5232;
    --khooj-serif: 'Poppins', system-ui, -apple-system, sans-serif;
    --khooj-sans: 'Poppins', system-ui, -apple-system, sans-serif;

    /* Rebind the Khooj token layer — legacy components follow along. */
    --color-background: var(--khooj-bg);
    --color-surface: var(--khooj-surface);
    --color-surface-sunken: var(--khooj-band);
    --color-text-primary: var(--khooj-ink);
    --color-text-secondary: var(--khooj-muted);
    --color-text-tertiary: var(--khooj-faint);
    --color-border: var(--khooj-border);
    --color-border-strong: var(--khooj-border-strong);
    --color-primary: var(--khooj-accent);
    --color-primary-hover: var(--khooj-accent-hover);
    --color-primary-soft: var(--khooj-shell);
    --color-primary-soft-border: #E9D8C9;
    --color-focus-ring: rgba(168, 91, 56, 0.25);
}

body {
    font-family: var(--khooj-sans);
    background: var(--khooj-bg);
    color: var(--khooj-ink);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .text-display, .font-display {
    font-family: var(--khooj-serif) !important;
    letter-spacing: -0.01em;
}

a { color: var(--khooj-accent); text-decoration: none; }
a:hover { color: var(--khooj-accent-hover); }
::placeholder { color: var(--khooj-faintest); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.sc-header {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; padding: 15px 24px;
    background: rgba(250, 248, 245, 0.92);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--khooj-border);
}
@media (min-width: 992px) { .sc-header { padding: 16px 64px; } }

.sc-wordmark { display: flex; align-items: center; gap: 8px; color: var(--khooj-ink) !important; }
.sc-wordmark strong {
    font-family: var(--khooj-serif); font-weight: 700; font-size: 25px; letter-spacing: -0.01em;
}
.sc-wordmark .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--khooj-accent); margin-top: 7px; }
.sc-wordmark .brand-logo { height: 34px; width: auto; display: block; }
.sc-wordmark .brand-logo--lg { height: 42px; }

.sc-nav { display: none; gap: 30px; font-size: 14px; font-weight: 600; }
@media (min-width: 992px) { .sc-nav { display: flex; } }
.sc-nav a { color: var(--khooj-text-soft); }
.sc-nav a:hover { color: var(--khooj-ink); }
.sc-nav a.is-active { color: var(--khooj-ink); border-bottom: 2px solid var(--khooj-accent); padding-bottom: 3px; }

.sc-header-actions { display: flex; align-items: center; gap: 12px; }
.sc-pill-link {
    font-size: 13.5px; font-weight: 600; color: var(--khooj-ink);
    border: 1px solid var(--khooj-border-strong); border-radius: 999px; padding: 8px 20px;
    white-space: nowrap;
}
.sc-pill-link:hover { border-color: var(--khooj-accent); color: var(--khooj-accent); }
.sc-cta {
    display: inline-block; background: var(--khooj-accent); color: #fff !important;
    font-size: 13px; font-weight: 700; padding: 9px 20px; border-radius: 10px;
    border: none; white-space: nowrap;
}
.sc-cta:hover { background: var(--khooj-accent-hover); }

.sc-heart-btn { position: relative; display: inline-flex; align-items: center; color: var(--khooj-muted); }
.sc-heart-btn:hover { color: var(--khooj-accent); }
.sc-heart-btn .badge-count {
    position: absolute; top: -7px; right: -9px; background: var(--khooj-accent); color: #fff;
    font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center; padding: 0 4px;
}

/* --------------------------------------------------------------------------
   Sections, eyebrows, headings
   -------------------------------------------------------------------------- */
.sc-container { max-width: 1240px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
@media (min-width: 992px) { .sc-container { padding-left: 64px; padding-right: 64px; } }

.sc-eyebrow {
    font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--khooj-accent);
}
.sc-h1 { font-family: var(--khooj-serif); font-weight: 700; font-size: clamp(30px, 4vw, 42px); margin: 0; }
.sc-h2 { font-family: var(--khooj-serif); font-weight: 700; font-size: 26px; margin: 0; }
.sc-sub { font-size: 15px; color: var(--khooj-muted); line-height: 1.6; }
.sc-note { font-size: 13.5px; color: var(--khooj-muted); }

/* --------------------------------------------------------------------------
   Search shells (light + dark)
   -------------------------------------------------------------------------- */
.sc-search {
    display: flex; align-items: center; gap: 12px;
    background: var(--khooj-surface); border: 1px solid var(--khooj-border-strong);
    border-radius: 14px; padding: 6px 6px 6px 18px;
}
.sc-search:focus-within { border-color: var(--khooj-accent); }
.sc-search input {
    flex: 1; border: none; outline: none; background: transparent; min-width: 0;
    font-family: var(--khooj-sans); font-size: 15px; color: var(--khooj-ink);
}
.sc-search .sc-cta { font-size: 14px; padding: 11px 24px; }

.sc-search--dark { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.28); }
.sc-search--dark input { color: #FAF8F5; }
.sc-search--hero {
    background: #fff; border: 1px solid #fff;
    border-radius: 999px;
    padding: 8px 8px 8px 24px;
    gap: 10px;
    box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.4);
}
.sc-search--hero .sc-search-icon { flex: none; color: #9a938a; }
.sc-search--hero input { color: var(--khooj-ink); font-size: 16px; }
.sc-search--hero input::placeholder { color: #9a938a; }
.sc-search--hero .sc-cta { border-radius: 999px; }
.sc-search--hero:focus-within { border-color: var(--khooj-peach); box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(224, 122, 63, 0.18); }

/* --------------------------------------------------------------------------
   Chips
   -------------------------------------------------------------------------- */
.sc-chip {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--khooj-border); background: var(--khooj-surface);
    color: var(--khooj-muted); font-size: 12.5px; font-weight: 500;
    padding: 7px 15px; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.sc-chip:hover { border-color: var(--khooj-accent); color: var(--khooj-accent); }

.sc-chip--ghost { background: transparent; border-color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.9); }
.sc-chip--ghost:hover { border-color: var(--khooj-peach); color: var(--khooj-peach); }

.sc-chip--filter { font-weight: 600; font-size: 13px; padding: 8px 18px; border-color: var(--khooj-border-strong); }
.sc-chip--filter.is-active { background: var(--khooj-dark); border-color: var(--khooj-dark); color: #FAF8F5; }

.sc-token {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(232, 168, 124, 0.14); border: 1px solid rgba(232, 168, 124, 0.45);
    color: var(--khooj-peach); font-size: 12.5px; font-weight: 600;
    padding: 5px 13px; border-radius: 999px; white-space: nowrap;
}
.sc-tag {
    background: var(--khooj-shell); color: var(--khooj-accent-hover);
    font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 999px; white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Product cards — restyle the existing .product-card contract
   -------------------------------------------------------------------------- */
.product-card {
    display: flex; flex-direction: column; height: 100%;
    background: var(--khooj-surface); border: 1px solid var(--khooj-border);
    border-radius: 14px; overflow: hidden; box-shadow: none;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.product-card:hover { box-shadow: 0 14px 36px rgba(34, 31, 28, 0.12); border-color: var(--khooj-border-strong); transform: none; }

.product-card .card-media { position: relative; aspect-ratio: auto; height: 200px; background: var(--khooj-band); }
.product-card .card-media img.product-visual { width: 100%; height: 200px; object-fit: cover; }

.product-card .badge, .product-card .badge-sale, .product-card [class*="badge"] { border-radius: 7px; }

.product-card .fav-btn {
    position: absolute; top: 12px; right: 12px; z-index: 3;
    width: 30px; height: 30px; border-radius: 8px; border: none;
    background: rgba(255, 255, 255, 0.94); color: var(--khooj-muted);
    display: inline-flex; align-items: center; justify-content: center;
}
.product-card .fav-btn:hover, .product-card .fav-btn.is-active { color: var(--khooj-accent); }

.product-card .card-body-area { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 16px; flex: 1; }
.product-card .card-brand {
    font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--khooj-text-soft);
}
.product-card .card-category { font-size: 12px; color: var(--khooj-text-soft); }
.product-card .card-title-link {
    font-family: var(--khooj-serif); font-size: 17px; font-weight: 600; color: var(--khooj-ink);
    line-height: 1.35; display: inline-block; padding-block: 2px; margin-block: -2px;
}
.product-card .card-title-link:hover { color: var(--khooj-accent); }

.product-card .card-why {
    font-size: 12.5px; color: var(--khooj-muted); line-height: 1.5;
    border-top: 1px solid var(--khooj-border); margin-top: 8px; padding-top: 8px;
}
.product-card .card-view-link { font-size: 12.5px; font-weight: 700; color: var(--khooj-accent); margin-top: 10px; }

/* 24x24 tap targets: the dot stays 14px (painted inside a transparent
   5px border), the button grows; negative margins keep the old 18px
   pitch so nothing moves visually. */
.card-swatches { display: flex; gap: 5px; align-items: center; margin-top: 6px; margin-left: 0; }
.card-swatch {
    width: 18px; height: 18px; border-radius: 50%; padding: 0;
    flex: none;                       /* never shrink — a shrunk dot lost its colour to the ring */
    border: 2px solid #fff;           /* white keyline so a dark dot still reads on the card */
    background-size: cover; background-position: center; background-clip: padding-box;
    box-shadow: 0 0 0 1px var(--khooj-border-strong);
}
.card-swatch:last-of-type { margin-right: 0; }
.card-swatch.is-selected { box-shadow: 0 0 0 2px var(--khooj-accent); }

/* --------------------------------------------------------------------------
   Grids
   -------------------------------------------------------------------------- */
/* Phones read one card at a time — the photo earns its full width. */
.sc-grid-4 { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 576px) { .sc-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .sc-grid-4 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .sc-grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* Full-width cards get a taller stage than the 200px grid crop. */
@media (max-width: 575.98px) {
    .sc-grid-4 .product-card .card-media,
    .sc-grid-4 .product-card .card-media img.product-visual { height: 300px; }
}

.sc-grid-3 { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .sc-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .sc-grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------------
   Dark band (search understanding, CTAs) + footer
   -------------------------------------------------------------------------- */
.sc-dark-band { background: var(--khooj-dark); color: #FAF8F5; }
.sc-dark-band .sc-eyebrow { color: var(--khooj-peach); }

.sc-cta-band { background: var(--khooj-dark); padding: 56px 24px; text-align: center; }
.sc-cta-band .sc-cta-title {
    font-family: var(--khooj-serif); font-size: 28px; font-weight: 700; color: #FAF8F5;
    max-width: 560px; margin: 0 auto 18px; line-height: 1.3;
}
.sc-cta-band .sc-search { max-width: 620px; margin: 0 auto; }
.sc-cta-band .sc-hint { font-size: 12.5px; color: rgba(250, 248, 245, 0.45); margin-top: 14px; }

.sc-footer { background: var(--khooj-dark); border-top: 1px solid rgba(250, 248, 245, 0.12); color: var(--khooj-faint); }
.sc-footer .inner { max-width: 1240px; margin: 0 auto; padding: 56px 24px 32px; }
@media (min-width: 992px) { .sc-footer .inner { padding: 56px 64px 32px; } }
.sc-footer .cols {
    display: grid; grid-template-columns: 1fr 1fr; gap: 36px 28px;
    padding-bottom: 44px; border-bottom: 1px solid rgba(250, 248, 245, 0.12);
}
@media (min-width: 992px) { .sc-footer .cols { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.1fr; gap: 48px; } }
.sc-footer .col-head {
    font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--khooj-muted); margin-bottom: 10px;
}
.sc-footer a { color: var(--khooj-faint); font-size: 13.5px; display: block; margin-bottom: 7px; padding-block: 2px; }
.sc-footer a:hover { color: #FAF8F5; }
.sc-footer a.ask { font-style: italic; }
.sc-footer a.ask:hover { color: var(--khooj-peach); }
.sc-footer .blurb { font-size: 13.5px; line-height: 1.7; max-width: 280px; }
.sc-footer .legal {
    display: flex; flex-wrap: wrap; gap: 12px 22px; justify-content: space-between; align-items: center;
    padding-top: 24px; font-size: 12.5px; color: var(--khooj-faint);
}
.sc-footer .legal a { display: inline-block; margin: 0; font-size: 12.5px; color: var(--khooj-faint); padding-block: 4px; margin-block: -4px; }
.sc-footer .legal a:hover { color: #FAF8F5; }

/* --------------------------------------------------------------------------
   Home hero
   -------------------------------------------------------------------------- */
.sc-hero { position: relative; min-height: clamp(700px, 96vh, 1000px); display: flex; flex-direction: column; background: var(--khooj-dark); }
.sc-hero > img.bg {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    object-position: center 28%;
    filter: saturate(0.72) brightness(0.9);
}
.sc-hero .shade {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(20, 17, 14, 0.74) 0%, rgba(20, 17, 14, 0.58) 46%, rgba(20, 17, 14, 0.64) 100%);
}
.sc-hero .sc-header--overlay {
    position: relative; z-index: 5; background: transparent; border-bottom: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
.sc-hero .sc-header--overlay .sc-wordmark, .sc-hero .sc-header--overlay .sc-wordmark strong { color: #fff !important; }
.sc-hero .sc-header--overlay .sc-wordmark .dot { background: var(--khooj-peach); }
.sc-hero .sc-header--overlay .sc-nav a { color: rgba(255, 255, 255, 0.75); }
.sc-hero .sc-header--overlay .sc-nav a:hover,
.sc-hero .sc-header--overlay .sc-nav a.is-active { color: #fff; border-color: var(--khooj-peach); }
.sc-hero .sc-header--overlay .sc-pill-link { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.sc-hero .sc-header--overlay .sc-pill-link:hover { border-color: #fff; color: #fff; }
.sc-hero .sc-header--overlay .sc-heart-btn { color: rgba(255, 255, 255, 0.85); }

.sc-hero .middle {
    position: relative; z-index: 4; flex: 1;
    display: flex; align-items: center; justify-content: center;
    padding: 48px 24px 64px;
}
.sc-hero .hero-copy { max-width: 760px; width: 100%; margin: 0 auto; text-align: center; }
.sc-hero h1 {
    font-family: var(--khooj-serif); font-weight: 700; font-size: clamp(27px, 3.6vw, 44px);
    color: #fff; margin: 0 0 14px; line-height: 1.12; text-align: center; text-wrap: balance;
}
.sc-hero-sub {
    max-width: 560px; margin: 0 auto 28px; text-align: center;
    color: rgba(255, 255, 255, 0.85); font-size: clamp(15px, 1.5vw, 17px);
    line-height: 1.5; text-wrap: pretty;
}
.sc-hero .hero-copy .sc-search--hero { margin-left: auto !important; margin-right: auto !important; }
.sc-hero .hero-copy .sc-scroll-row { justify-content: center !important; }

@media (max-width: 767.98px) {
    .sc-hero { min-height: clamp(620px, 94vh, 880px); }
    .sc-hero > img.bg { object-position: center 20%; }
    .sc-hero .middle { padding: 36px 20px 56px; }
    /* The hero's suggestion chips wrap and centre on phones instead of
       scrolling — a centred scroll row clipped the first chip off-screen
       with no way to swipe back to it. */
    .sc-hero .hero-copy .sc-scroll-row {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        justify-content: center !important;
        padding-bottom: 0;
        row-gap: 10px;
    }
    /* Trim the hero search pill on phones — the desktop padding and
       button made it look oversized on small screens. */
    .sc-search--hero { padding: 5px 5px 5px 16px; gap: 7px; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.38); }
    .sc-search--hero .sc-search-icon { width: 18px; height: 18px; }
    .sc-search--hero input { font-size: 16px; }
    .sc-search--hero .sc-cta { font-size: 13.5px !important; padding: 11px 18px !important; }
}

/* The sticky header that slides in after the hero scrolls away */
.sc-sticky-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    transform: translateY(-110%); transition: transform 0.35s ease;
}
.sc-sticky-header.is-visible { transform: translateY(0); }

/* --------------------------------------------------------------------------
   Brand directory
   -------------------------------------------------------------------------- */
.sc-band-section { background: var(--khooj-band); border-top: 1px solid var(--khooj-border); border-bottom: 1px solid var(--khooj-border); }

.sc-brand-row {
    display: flex; align-items: center; gap: 14px;
    background: var(--khooj-surface); border: 1px solid var(--khooj-border);
    border-radius: 14px; padding: 18px 20px; color: var(--khooj-ink) !important;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.sc-brand-row:hover { border-color: var(--khooj-accent); box-shadow: 0 12px 30px rgba(34, 31, 28, 0.10); }
.sc-brand-tile {
    width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--khooj-serif); font-weight: 700; font-size: 20px;
}
.sc-brand-tile--dark { background: var(--khooj-dark); color: var(--khooj-peach); }
.sc-brand-tile--shell { background: var(--khooj-shell); color: var(--khooj-accent-hover); }

.sc-brand-card {
    display: flex; flex-direction: column; background: var(--khooj-surface);
    border: 1px solid var(--khooj-border); border-radius: 14px; padding: 22px 24px;
    color: var(--khooj-ink) !important; height: 100%;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.sc-brand-card:hover { border-color: var(--khooj-accent); box-shadow: 0 12px 30px rgba(34, 31, 28, 0.10); }
.sc-brand-card .foot {
    display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
    border-top: 1px solid var(--khooj-border); margin-top: 16px; padding-top: 12px;
    font-size: 12px; color: var(--khooj-faint);
}

.sc-feature-tile { position: relative; display: block; border-radius: 18px; overflow: hidden; min-height: 340px; color: #fff !important; }
.sc-feature-tile { background-color: var(--khooj-dark); }
.sc-feature-tile img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.75); }
.sc-feature-tile .shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(24, 20, 17, 0.85), rgba(24, 20, 17, 0.08) 55%); }
.sc-feature-tile:hover { box-shadow: 0 18px 44px rgba(34, 31, 28, 0.22); }
.sc-feature-tile .flag {
    position: absolute; top: 18px; left: 18px; background: var(--khooj-peach); color: var(--khooj-ink);
    font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 5px 12px; border-radius: 999px;
}
.sc-feature-tile .meta { position: absolute; left: 24px; right: 24px; bottom: 22px; display: flex; flex-direction: column; gap: 8px; }
.sc-feature-tile .meta .name { font-family: var(--khooj-serif); font-size: 32px; font-weight: 700; }
.sc-feature-tile .meta .line { font-size: 13.5px; color: rgba(255, 255, 255, 0.85); }
.sc-feature-tile .meta .sc-chip--ghost { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.4); color: #fff; font-size: 12px; font-weight: 600; }

/* --------------------------------------------------------------------------
   Category tiles
   -------------------------------------------------------------------------- */
.sc-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; gap: 16px; }
@media (min-width: 992px) { .sc-cat-grid { grid-template-columns: repeat(4, 1fr); } }
.sc-cat-tile { position: relative; display: block; border-radius: 16px; overflow: hidden; color: #fff !important; }
.sc-cat-tile:hover { box-shadow: 0 16px 40px rgba(34, 31, 28, 0.2); }
.sc-cat-tile { background-color: var(--khooj-dark); }
.sc-cat-tile img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.78); }
.sc-cat-tile .fallback { position: absolute; inset: 0; background: var(--khooj-dark); }
.sc-cat-tile .shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(24, 20, 17, 0.78), rgba(24, 20, 17, 0.06) 55%); }
.sc-cat-tile .meta { position: absolute; left: 20px; right: 20px; bottom: 16px; }
.sc-cat-tile .meta .name { font-family: var(--khooj-serif); font-size: 22px; font-weight: 700; }
.sc-cat-tile .meta .row { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; }
.sc-cat-tile .meta .row .count { color: rgba(255, 255, 255, 0.82); }
.sc-cat-tile .meta .row .brands { font-size: 12px; font-weight: 700; color: var(--khooj-peach); }
.sc-cat-tile.span-2 { grid-row: span 2; }

/* --------------------------------------------------------------------------
   Search page
   -------------------------------------------------------------------------- */
.sc-understood-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sc-understood-bar .label {
    font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--khooj-peach);
}
.sc-understood-bar .meta { margin-left: auto; font-size: 12.5px; color: var(--khooj-faint); }

.sc-sort-pill {
    background: var(--khooj-surface); border: 1px solid var(--khooj-border-strong); color: var(--khooj-muted);
    font-size: 12.5px; font-weight: 600; padding: 7px 16px; border-radius: 999px; white-space: nowrap;
}
.sc-sort-pill:hover { border-color: var(--khooj-accent); color: var(--khooj-muted); }
.sc-sort-pill.is-active { background: var(--khooj-dark); border-color: var(--khooj-dark); color: #FAF8F5 !important; }

.sc-notquite {
    background: var(--khooj-band); border: 1px solid var(--khooj-border); border-radius: 18px;
    padding: 24px 28px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.sc-notquite .title { font-family: var(--khooj-serif); font-size: 20px; font-weight: 700; }

/* Relax / notice */
.sc-notice {
    background: var(--khooj-shell); border: 1px solid #E9D8C9; color: var(--khooj-accent-hover);
    border-radius: 12px; padding: 12px 18px; font-size: 13.5px;
}

/* Refine (facets) panel — restyle the legacy .facets contract */
.facets, .search-facets, [class*="facets__panel"] { background: var(--khooj-surface); border-color: var(--khooj-border) !important; border-radius: 14px; }
.facets__legend, .facets legend { font-family: var(--khooj-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--khooj-faint); }
.facets__option { font-size: 13px; color: var(--khooj-muted); }

/* --------------------------------------------------------------------------
   Product page
   -------------------------------------------------------------------------- */
.sc-crumbs { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--khooj-faint); flex-wrap: wrap; }
.sc-crumbs a { color: var(--khooj-faint); }
.sc-crumbs a:hover { color: var(--khooj-accent); }

.sc-gallery-main { position: relative; border-radius: 18px; overflow: hidden; background: var(--khooj-surface); border: 1px solid var(--khooj-border); }
.sc-gallery-main img { width: 100%; height: min(540px, 60vw); object-fit: cover; display: block; }
.sc-gallery-main .flags { position: absolute; top: 16px; left: 16px; display: flex; gap: 8px; }
.sc-flag-dark { background: var(--khooj-dark); color: var(--khooj-peach); font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 8px; }
.sc-flag-shell { background: var(--khooj-shell); color: var(--khooj-accent-hover); font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 8px; }

.sc-thumbs { display: flex; gap: 10px; margin-top: 12px; }
.sc-thumbs button {
    flex: 1; height: 88px; border-radius: 11px; overflow: hidden; padding: 0; cursor: pointer;
    border: 2px solid var(--khooj-border); background: var(--khooj-band);
}
.sc-thumbs button.is-active { border-color: var(--khooj-accent); }
.sc-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sc-why-panel {
    background: var(--khooj-surface); border: 1px solid var(--khooj-border); border-left: 3px solid var(--khooj-accent);
    border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px;
}
.sc-why-panel .head { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--khooj-accent); }
.sc-why-panel .body { font-size: 13.5px; color: var(--khooj-muted); line-height: 1.6; }

.sc-swatch-lg {
    width: 56px; height: 56px; border-radius: 11px; overflow: hidden; cursor: pointer;
    border: 2px solid var(--khooj-border); flex-shrink: 0; padding: 0; background-size: cover; background-position: center;
}
.sc-swatch-lg.is-active { border-color: var(--khooj-accent); }
.sc-swatch-lg img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sc-size-box {
    min-width: 46px; text-align: center; background: var(--khooj-surface);
    border: 1px solid var(--khooj-border-strong); color: var(--khooj-ink);
    font-size: 13.5px; font-weight: 600; padding: 10px 12px; border-radius: 10px;
}
.sc-size-box.is-oos { background: var(--khooj-bg); color: #C9C0B6; border-color: var(--khooj-border); text-decoration: line-through; cursor: not-allowed; }

.sc-visit-btn {
    flex: 1; text-align: center; background: var(--khooj-accent); color: #fff !important;
    font-size: 15px; font-weight: 700; padding: 15px 28px; border-radius: 12px; border: none;
}
.sc-visit-btn:hover { background: var(--khooj-accent-hover); }
.sc-save-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    border: 1.5px solid var(--khooj-border-strong); color: var(--khooj-ink); background: var(--khooj-surface);
    font-size: 14.5px; font-weight: 700; padding: 15px 26px; border-radius: 12px; cursor: pointer;
}
.sc-save-btn:hover { border-color: var(--khooj-accent); }
.sc-save-btn.is-active { border-color: var(--khooj-accent); color: var(--khooj-accent); background: var(--khooj-shell); }

.sc-details-card { background: var(--khooj-surface); border: 1px solid var(--khooj-border); border-radius: 18px; padding: 28px 24px; }
@media (min-width: 992px) { .sc-details-card { padding: 32px 36px; } }
.sc-detail-cell { background: var(--khooj-bg); border: 1px solid var(--khooj-border); border-radius: 12px; padding: 16px 18px; }
.sc-detail-cell .k { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--khooj-faint); }
.sc-detail-cell .v { font-size: 14px; font-weight: 600; line-height: 1.45; }

.sc-accordion-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 0 2px; cursor: pointer; }
.sc-accordion-head .plus { font-size: 18px; color: var(--khooj-accent); font-weight: 600; }

.sc-instock { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--khooj-muted); }
.sc-instock::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--khooj-instock); }

/* --------------------------------------------------------------------------
   How-it-works cards
   -------------------------------------------------------------------------- */
.sc-step-card {
    background: var(--khooj-surface); border: 1px solid var(--khooj-border); border-radius: 18px;
    padding: 28px 30px; display: flex; flex-direction: column; gap: 16px; height: 100%;
}
.sc-step-card .num { font-family: var(--khooj-serif); font-size: 15px; font-weight: 700; color: var(--khooj-accent); }
.sc-step-card .title { font-family: var(--khooj-serif); font-size: 22px; font-weight: 700; }
.sc-step-card .body { font-size: 13.5px; color: var(--khooj-muted); line-height: 1.65; }

.sc-example-row {
    display: grid; grid-template-columns: 90px 1fr; gap: 12px 24px; align-items: center;
    padding: 17px 28px; border-bottom: 1px solid var(--khooj-border); color: var(--khooj-ink) !important;
}
@media (min-width: 992px) { .sc-example-row { grid-template-columns: 100px 1fr auto; } }
.sc-example-row:hover { background: var(--khooj-bg); }
.sc-example-row .tag { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.sc-example-row .q { font-family: var(--khooj-serif); font-size: 17px; font-weight: 600; font-style: italic; }

.sc-faq { background: var(--khooj-surface); border: 1px solid var(--khooj-border); border-radius: 14px; margin-bottom: 10px; overflow: hidden; }
.sc-faq summary { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 700; }
.sc-faq summary::-webkit-details-marker { display: none; }
.sc-faq summary::after { content: '+'; font-size: 19px; color: var(--khooj-accent); font-weight: 600; }
.sc-faq[open] summary::after { content: '−'; }
.sc-faq .a { font-size: 13.5px; color: var(--khooj-muted); line-height: 1.7; padding: 0 24px 18px; }

/* --------------------------------------------------------------------------
   Legacy bridge — keep old components presentable under Khooj tokens
   -------------------------------------------------------------------------- */
.btn-accent { background: var(--khooj-accent); border-color: var(--khooj-accent); color: #fff; border-radius: 10px; font-weight: 700; }
.btn-accent:hover { background: var(--khooj-accent-hover); border-color: var(--khooj-accent-hover); color: #fff; }
.search-shell { border-radius: 14px; border-color: var(--khooj-border-strong); }
.chip { border-radius: 999px; border: 1px solid var(--khooj-border); background: var(--khooj-surface); color: var(--khooj-muted); }
.chip:hover { border-color: var(--khooj-accent); color: var(--khooj-accent); }
.eyebrow { color: var(--khooj-accent); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; }

.pagination .page-link { color: var(--khooj-ink); border-color: var(--khooj-border); }
.pagination .page-item.active .page-link { background: var(--khooj-dark); border-color: var(--khooj-dark); color: #FAF8F5; }

/* --------------------------------------------------------------------------
   Product page bridge — restyle the live pd-* machinery
   -------------------------------------------------------------------------- */
.pd-gallery-main { border-radius: 18px; border: 1px solid var(--khooj-border); background: var(--khooj-surface); overflow: hidden; }
.pd-thumb { border-radius: 11px; border: 2px solid var(--khooj-border); overflow: hidden; }
.pd-thumb.is-active { border-color: var(--khooj-accent); }
.pd-title { font-family: var(--khooj-serif); font-weight: 700; letter-spacing: -0.01em; }
.btn-ink { background: var(--khooj-accent); border-color: var(--khooj-accent); color: #fff; border-radius: 12px; font-weight: 700; }
.btn-ink:hover { background: var(--khooj-accent-hover); border-color: var(--khooj-accent-hover); color: #fff; }
.fav-btn--inline { border: 1.5px solid var(--khooj-border-strong); border-radius: 12px; background: var(--khooj-surface); color: var(--khooj-ink); }
.fav-btn--inline:hover, .fav-btn--inline.is-active { border-color: var(--khooj-accent); color: var(--khooj-accent); background: var(--khooj-shell); }
/* The heart icon collapsed to 0 width in the auto-width inline button,
   leaving an empty box beside the CTA — pin its size and stop it shrinking. */
.fav-btn--inline svg { width: 18px; height: 18px; flex: none; }
.option-swatch { border-radius: 10px; border: 1px solid var(--khooj-border-strong); font-weight: 600; }
.option-swatch.is-selected { background: var(--khooj-dark); border-color: var(--khooj-dark); color: #FAF8F5; }
.color-dot.is-selected { outline: 2px solid var(--khooj-accent); outline-offset: 2px; }
.nav-tabs-clean .nav-link { font-weight: 600; color: var(--khooj-muted); }
.nav-tabs-clean .nav-link.active { color: var(--khooj-ink); border-color: var(--khooj-accent); }
.breadcrumb-clean { font-size: 12.5px; }
.breadcrumb-clean a { color: var(--khooj-faint); }
.breadcrumb-clean a:hover { color: var(--khooj-accent); }

/* Saved count — anchored to the corner of the nav link, never in the
   text flow (app.js flips it to display:flex when the count is > 0). */
.sc-nav .sc-nav-saved { position: relative; }
.sc-nav-badge {
    position: absolute; top: -9px; right: -17px;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px;
    background: var(--khooj-accent); color: #fff;
    font-size: 10px; font-weight: 700; line-height: 1;
    align-items: center; justify-content: center;
}

/* Inside the drawer the offcanvas header already says Refine —
   the panel's own title would say it twice. */
#facetsDrawer .facets__title { display: none; }

/* Brand marquee — the strip under the hero. Two copies of the same
   sequence slide by half their width for a seamless loop. */
@keyframes khooj-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.sc-marquee-strip { background: var(--khooj-surface); border-bottom: 1px solid var(--khooj-border); padding: 22px 0; overflow: hidden; }
.sc-marquee { display: flex; width: max-content; align-items: center; animation: khooj-marquee 36s linear infinite; }
.sc-marquee:hover { animation-play-state: paused; }
.sc-marquee a { display: flex; align-items: center; gap: 26px; padding: 0 26px; color: var(--khooj-ink); white-space: nowrap; }
.sc-marquee a:hover { color: var(--khooj-accent); }
.sc-marquee .name { font-family: var(--khooj-serif); font-size: 19px; font-weight: 600; letter-spacing: 0.01em; }
.sc-marquee .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--khooj-peach); flex-shrink: 0; }

/* The hamburger follows its header's ground: white over the hero
   photo, ink on the light sticky/regular headers. */
.sc-header--overlay .header-icon-btn { color: #fff; }
.sc-header--overlay .header-icon-btn:hover { color: var(--khooj-peach); }
.sc-sticky-header .header-icon-btn, .sc-header:not(.sc-header--overlay) .header-icon-btn { color: var(--khooj-ink); }

/* The footer's brand block (wordmark + blurb) owns a full row on
   small screens — squeezed into half a column it read in slivers. */
@media (max-width: 991.98px) {
    .sc-footer .cols > div:first-child { grid-column: 1 / -1; }
    .sc-footer .blurb { max-width: none; }
}

/* --------------------------------------------------------------------------
   Chip rows on phones: one swipeable line, never a stack of wrapped
   rows. Desktop keeps its wrap.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .sc-scroll-row {
        flex-wrap: nowrap !important;
        /* A centered flex row clips its overflowing START and no swipe
           can reach it — scrolling rows must start left. */
        justify-content: flex-start !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        max-width: 100%;
        padding-bottom: 4px;
    }
    .sc-scroll-row::-webkit-scrollbar { display: none; }
    .sc-scroll-row > * { flex-shrink: 0; }

    /* The "X kept" count repeats the big results heading right below, and
       as the last item in the swipeable understood row it just gets
       clipped off the right edge — drop it on phones. */
    .sc-understood-bar .meta { display: none; }

    .sc-notquite { padding: 20px; gap: 14px; }
    .sc-notquite .title { font-size: 18px; }
}

/* Bootstrap ships no .min-w-0 — the views leaned on it everywhere to
   let flex text shrink and it silently did nothing. */
.min-w-0 { min-width: 0 !important; }

/* --------------------------------------------------------------------------
   Hover states glide, never snap. One list, one timing — color, ground,
   border, shadow. Transform is deliberately absent (the sticky header
   animates its own).
   -------------------------------------------------------------------------- */
a, button,
.sc-chip, .sc-sort-pill, .sc-cta, .sc-pill-link, .sc-token, .sc-tag,
.sc-feature-tile, .sc-cat-tile, .sc-brand-row, .sc-brand-card,
.sc-save-btn, .sc-visit-btn, .fav-btn, .sc-example-row,
.sc-thumbs button, .sc-swatch-lg, .sc-size-box, .option-swatch,
.color-dot, .header-icon-btn, .card-swatch, [data-follow-brand] {
    transition: color 0.18s ease, background-color 0.18s ease,
                border-color 0.18s ease, box-shadow 0.18s ease,
                opacity 0.18s ease;
}

/* Anyone who asked their OS for less motion gets exactly that —
   including the brand marquee. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Trending | Popular pill toggle */
.sc-collection-tab {
    font-size: 13.5px; font-weight: 700; padding: 10px 26px; border-radius: 999px;
    color: var(--khooj-muted) !important;
}
.sc-collection-tab:hover { color: var(--khooj-ink) !important; }
.sc-collection-tab.is-active { background: var(--khooj-dark); color: #FAF8F5 !important; }

/* The asks band collapses its left rail on phones */
@media (max-width: 767.98px) {
    .sc-dark-band[style*="grid-template-columns"] { display: flex !important; }
}

/* --------------------------------------------------------------------------
   Accessibility pass (home audit): contrast + tap-target overrides for
   classes app.css owns. Visual design unchanged — colors only step one
   notch darker where a light gray fell under WCAG 4.5:1, and text links
   gain invisible padding to reach 24px targets.
   -------------------------------------------------------------------------- */
.price-original { color: var(--khooj-text-soft); }
.badge-soft--accent { color: var(--khooj-accent-strong); }
.card-swatch-more { color: var(--khooj-text-soft); }
a.sc-note { display: inline-block; padding-block: 2px; margin-block: -2px; }

/* Screen-reader-only text still gets a computable 21:1 — it is invisible
   either way, but contrast scanners read it. */
.visually-hidden { color: #000; }

/* Belt and braces: any real product photo scales by cover, never stretches. */
img.product-visual, img.bg { object-fit: cover; }

/* ------------------------------------------------------------------
   Qdrant inspector — a trigger under each result card opens the raw
   vector-store payload in a readable modal. Testing aid.
   ------------------------------------------------------------------ */
.qdrant-trigger {
    /* Sit above the card's stretched title-link overlay (z-index 1). */
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 14px 12px;
    padding: 6px 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--khooj-accent);
    font-size: 10.5px;
}
.qdrant-trigger:hover { color: var(--khooj-accent-hover, var(--khooj-ink)); }
.qdrant-trigger .qdrant-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #3ddc84; box-shadow: 0 0 0 3px rgba(61, 220, 132, 0.18);
}

.qdrant-modal {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.qdrant-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(20, 18, 16, 0.55);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.qdrant-modal__dialog {
    position: relative;
    width: min(680px, 100%);
    max-height: min(80vh, 760px);
    display: flex; flex-direction: column;
    background: #1d1c1a;
    border: 1px solid #333029;
    border-radius: 16px;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    animation: qdrantPop .16s ease;
}
@keyframes qdrantPop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.qdrant-modal__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid #333029;
}
.qdrant-modal__title {
    color: #f0ac7d; font-weight: 700; font-size: 12px;
    letter-spacing: 0.08em; text-transform: uppercase;
    font-family: 'SFMono-Regular', Consolas, monospace;
}
.qdrant-modal__close {
    border: 0; background: none; color: #a9a39a; cursor: pointer;
    font-size: 24px; line-height: 1; padding: 0 2px;
}
.qdrant-modal__close:hover { color: #fff; }
.qdrant-modal__body {
    margin: 0; padding: 18px 20px; overflow: auto;
    color: #e9e6e1;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 13px; line-height: 1.65;
    white-space: pre; tab-size: 2;
}

/* ===== Search type-ahead suggestions ===== */
.sc-search { position: relative; }
.sc-suggest {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
    background: var(--khooj-surface); border: 1px solid var(--khooj-border);
    border-radius: 12px; box-shadow: 0 12px 36px rgba(20, 17, 14, 0.15);
    overflow: hidden auto; max-height: min(52vh, 380px); padding: 4px;
    text-align: left;
}
.sc-suggest[hidden] { display: none; }
.sc-suggest-item {
    display: flex; align-items: center; gap: 10px; padding: 6px 9px;
    text-decoration: none; color: var(--khooj-ink); border-radius: 9px;
}
.sc-suggest-item + .sc-suggest-item { border-top: 1px solid color-mix(in srgb, var(--khooj-border) 55%, transparent); }
.sc-suggest-item:hover, .sc-suggest-item.is-active { background: var(--khooj-shell); border-top-color: transparent; }
.sc-suggest-thumb {
    width: 32px; height: 32px; border-radius: 7px; object-fit: cover; flex: none;
    background: var(--khooj-band); border: 1px solid var(--khooj-border);
}
.sc-suggest-icon {
    width: 28px; height: 28px; border-radius: 7px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: var(--khooj-shell); color: var(--khooj-accent);
}
.sc-suggest-icon svg { width: 14px; height: 14px; }
.sc-suggest-body { min-width: 0; flex: 1; }
.sc-suggest-label {
    display: block; font-size: 13px; font-weight: 600; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-suggest-meta { display: block; font-size: 11px; color: var(--khooj-muted); margin-top: 0; line-height: 1.3; }
.sc-suggest-kind {
    flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--khooj-faint);
}
/* The completion stands out; the part already typed stays quiet — so the
   eye lands on what each suggestion adds ("embroidered" in "embroidered
   shirt", "for men" in "shoes for men"). */
.sc-suggest-label .sc-hl { font-weight: 400; color: var(--khooj-muted); }
/* Icon tints by kind, so a brand reads as a brand at a glance. */
.sc-suggest-icon--category { background: color-mix(in srgb, var(--khooj-accent) 12%, var(--khooj-shell)); }
.sc-suggest-icon--brand { background: color-mix(in srgb, var(--khooj-peach, var(--khooj-accent)) 16%, var(--khooj-shell)); }
/* The refine arrow — faint until you are on the row, accent when you reach it. */
.sc-suggest-fill {
    flex: none; width: 26px; height: 26px; margin: -4px -3px -4px 0; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 0; background: none; border-radius: 7px; cursor: pointer;
    color: var(--khooj-faint); opacity: .5; transition: opacity .12s ease, color .12s ease, background .12s ease;
}
.sc-suggest-fill svg { width: 15px; height: 15px; }
.sc-suggest-item:hover .sc-suggest-fill,
.sc-suggest-item.is-active .sc-suggest-fill { opacity: 1; }
.sc-suggest-fill:hover { color: var(--khooj-accent); background: color-mix(in srgb, var(--khooj-accent) 14%, transparent); }
.sc-suggest:not([hidden]) { animation: sc-suggest-in .14s ease; }
@keyframes sc-suggest-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sc-suggest:not([hidden]) { animation: none; } }