/* ==========================================================================
   Scout — the storefront theme
   Implements the "Scout" design canvas (Home / Search / Product / Brands /
   Categories / Saved / How It Works). Loads AFTER app.css: first it rebinds
   the Lumina token layer to Scout's palette so every legacy component keeps
   working, then it styles the Scout-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 {
    --scout-bg: #FAF8F5;
    --scout-surface: #FFFFFF;
    --scout-ink: #221F1C;
    --scout-muted: #7A736A;
    --scout-faint: #A49C93;
    --scout-faintest: #B9AFA4;
    --scout-border: #EFEAE2;
    --scout-border-strong: #E2D8CB;
    --scout-accent: #A85B38;
    --scout-accent-hover: #8A4526;
    --scout-peach: #E8A87C;
    --scout-shell: #F3E9E0;
    --scout-band: #F3EEE7;
    --scout-dark: #221F1C;
    --scout-instock: #5B8A4A;
    /* Audit: readable-on-any-light-surface text + accent (>=4.5:1). */
    --scout-text-soft: #6E6760;
    --scout-accent-strong: #9A5232;
    --scout-serif: 'Source Serif 4', Georgia, serif;
    --scout-sans: 'Instrument Sans', 'Inter', system-ui, sans-serif;

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

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

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

a { color: var(--scout-accent); text-decoration: none; }
a:hover { color: var(--scout-accent-hover); }
::placeholder { color: var(--scout-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(--scout-border);
}
@media (min-width: 992px) { .sc-header { padding: 16px 64px; } }

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

.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(--scout-text-soft); }
.sc-nav a:hover { color: var(--scout-ink); }
.sc-nav a.is-active { color: var(--scout-ink); border-bottom: 2px solid var(--scout-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(--scout-ink);
    border: 1px solid var(--scout-border-strong); border-radius: 999px; padding: 8px 20px;
    white-space: nowrap;
}
.sc-pill-link:hover { border-color: var(--scout-accent); color: var(--scout-accent); }
.sc-cta {
    display: inline-block; background: var(--scout-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(--scout-accent-hover); }

.sc-heart-btn { position: relative; display: inline-flex; align-items: center; color: var(--scout-muted); }
.sc-heart-btn:hover { color: var(--scout-accent); }
.sc-heart-btn .badge-count {
    position: absolute; top: -7px; right: -9px; background: var(--scout-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(--scout-accent);
}
.sc-h1 { font-family: var(--scout-serif); font-weight: 700; font-size: clamp(30px, 4vw, 42px); margin: 0; }
.sc-h2 { font-family: var(--scout-serif); font-weight: 700; font-size: 26px; margin: 0; }
.sc-sub { font-size: 15px; color: var(--scout-muted); line-height: 1.6; }
.sc-note { font-size: 13.5px; color: var(--scout-muted); }

/* --------------------------------------------------------------------------
   Search shells (light + dark)
   -------------------------------------------------------------------------- */
.sc-search {
    display: flex; align-items: center; gap: 12px;
    background: var(--scout-surface); border: 1px solid var(--scout-border-strong);
    border-radius: 14px; padding: 6px 6px 6px 18px;
}
.sc-search:focus-within { border-color: var(--scout-accent); }
.sc-search input {
    flex: 1; border: none; outline: none; background: transparent; min-width: 0;
    font-family: var(--scout-sans); font-size: 15px; color: var(--scout-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: rgba(24, 20, 17, 0.55); border-color: rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    padding: 8px 8px 8px 22px;
}
.sc-search--hero input { color: #fff; font-size: 16px; }
.sc-search--hero:focus-within { border-color: var(--scout-peach); }

/* --------------------------------------------------------------------------
   Chips
   -------------------------------------------------------------------------- */
.sc-chip {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--scout-border); background: var(--scout-surface);
    color: var(--scout-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(--scout-accent); color: var(--scout-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(--scout-peach); color: var(--scout-peach); }

.sc-chip--filter { font-weight: 600; font-size: 13px; padding: 8px 18px; border-color: var(--scout-border-strong); }
.sc-chip--filter.is-active { background: var(--scout-dark); border-color: var(--scout-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(--scout-peach); font-size: 12.5px; font-weight: 600;
    padding: 5px 13px; border-radius: 999px; white-space: nowrap;
}
.sc-tag {
    background: var(--scout-shell); color: var(--scout-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(--scout-surface); border: 1px solid var(--scout-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(--scout-border-strong); transform: none; }

.product-card .card-media { position: relative; aspect-ratio: auto; height: 200px; background: var(--scout-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(--scout-muted);
    display: inline-flex; align-items: center; justify-content: center;
}
.product-card .fav-btn:hover, .product-card .fav-btn.is-active { color: var(--scout-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(--scout-text-soft);
}
.product-card .card-category { font-size: 12px; color: var(--scout-text-soft); }
.product-card .card-title-link {
    font-family: var(--scout-serif); font-size: 17px; font-weight: 600; color: var(--scout-ink);
    line-height: 1.35; display: inline-block; padding-block: 2px; margin-block: -2px;
}
.product-card .card-title-link:hover { color: var(--scout-accent); }

.product-card .card-why {
    font-size: 12.5px; color: var(--scout-muted); line-height: 1.5;
    border-top: 1px solid var(--scout-border); margin-top: 8px; padding-top: 8px;
}
.product-card .card-view-link { font-size: 12.5px; font-weight: 700; color: var(--scout-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: 0; align-items: center; margin-top: 4px; margin-left: -5px; }
.card-swatch {
    width: 24px; height: 24px; border-radius: 50%; padding: 0;
    border: 5px solid transparent; background-size: cover; background-clip: padding-box;
    box-shadow: inset 0 0 0 1px var(--scout-border-strong); margin-right: -6px;
}
.card-swatch:last-of-type { margin-right: 0; }
.card-swatch.is-selected { outline: 2px solid var(--scout-accent); outline-offset: -4px; }

/* --------------------------------------------------------------------------
   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(--scout-dark); color: #FAF8F5; }
.sc-dark-band .sc-eyebrow { color: var(--scout-peach); }

.sc-cta-band { background: var(--scout-dark); padding: 56px 24px; text-align: center; }
.sc-cta-band .sc-cta-title {
    font-family: var(--scout-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(--scout-dark); border-top: 1px solid rgba(250, 248, 245, 0.12); color: var(--scout-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(--scout-muted); margin-bottom: 10px;
}
.sc-footer a { color: var(--scout-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(--scout-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(--scout-faint);
}
.sc-footer .legal a { display: inline-block; margin: 0; font-size: 12.5px; color: var(--scout-faint); padding-block: 4px; margin-block: -4px; }
.sc-footer .legal a:hover { color: #FAF8F5; }

/* --------------------------------------------------------------------------
   Home hero
   -------------------------------------------------------------------------- */
.sc-hero { position: relative; min-height: 620px; display: flex; flex-direction: column; background: var(--scout-dark); }
.sc-hero > img.bg {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    filter: saturate(0.7) brightness(0.85);
}
.sc-hero .shade {
    position: absolute; inset: 0;
    background: linear-gradient(105deg, rgba(24, 20, 17, 0.86) 0%, rgba(24, 20, 17, 0.62) 46%, rgba(24, 20, 17, 0.28) 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(--scout-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(--scout-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: 40px 24px 72px;
}
.sc-hero h1 {
    font-family: var(--scout-serif); font-weight: 700; font-size: clamp(34px, 5vw, 54px);
    color: #fff; margin: 0 0 28px; line-height: 1.1; text-align: center; text-wrap: pretty;
}

/* 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(--scout-band); border-top: 1px solid var(--scout-border); border-bottom: 1px solid var(--scout-border); }

.sc-brand-row {
    display: flex; align-items: center; gap: 14px;
    background: var(--scout-surface); border: 1px solid var(--scout-border);
    border-radius: 14px; padding: 18px 20px; color: var(--scout-ink) !important;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.sc-brand-row:hover { border-color: var(--scout-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(--scout-serif); font-weight: 700; font-size: 20px;
}
.sc-brand-tile--dark { background: var(--scout-dark); color: var(--scout-peach); }
.sc-brand-tile--shell { background: var(--scout-shell); color: var(--scout-accent-hover); }

.sc-brand-card {
    display: flex; flex-direction: column; background: var(--scout-surface);
    border: 1px solid var(--scout-border); border-radius: 14px; padding: 22px 24px;
    color: var(--scout-ink) !important; height: 100%;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.sc-brand-card:hover { border-color: var(--scout-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(--scout-border); margin-top: 16px; padding-top: 12px;
    font-size: 12px; color: var(--scout-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(--scout-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(--scout-peach); color: var(--scout-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(--scout-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(--scout-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(--scout-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(--scout-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(--scout-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(--scout-peach);
}
.sc-understood-bar .meta { margin-left: auto; font-size: 12.5px; color: var(--scout-faint); }

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

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

/* Relax / notice */
.sc-notice {
    background: var(--scout-shell); border: 1px solid #E9D8C9; color: var(--scout-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(--scout-surface); border-color: var(--scout-border) !important; border-radius: 14px; }
.facets__legend, .facets legend { font-family: var(--scout-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--scout-faint); }
.facets__option { font-size: 13px; color: var(--scout-muted); }

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

.sc-gallery-main { position: relative; border-radius: 18px; overflow: hidden; background: var(--scout-surface); border: 1px solid var(--scout-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(--scout-dark); color: var(--scout-peach); font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 8px; }
.sc-flag-shell { background: var(--scout-shell); color: var(--scout-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(--scout-border); background: var(--scout-band);
}
.sc-thumbs button.is-active { border-color: var(--scout-accent); }
.sc-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sc-why-panel {
    background: var(--scout-surface); border: 1px solid var(--scout-border); border-left: 3px solid var(--scout-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(--scout-accent); }
.sc-why-panel .body { font-size: 13.5px; color: var(--scout-muted); line-height: 1.6; }

.sc-swatch-lg {
    width: 56px; height: 56px; border-radius: 11px; overflow: hidden; cursor: pointer;
    border: 2px solid var(--scout-border); flex-shrink: 0; padding: 0; background-size: cover; background-position: center;
}
.sc-swatch-lg.is-active { border-color: var(--scout-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(--scout-surface);
    border: 1px solid var(--scout-border-strong); color: var(--scout-ink);
    font-size: 13.5px; font-weight: 600; padding: 10px 12px; border-radius: 10px;
}
.sc-size-box.is-oos { background: var(--scout-bg); color: #C9C0B6; border-color: var(--scout-border); text-decoration: line-through; cursor: not-allowed; }

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

.sc-details-card { background: var(--scout-surface); border: 1px solid var(--scout-border); border-radius: 18px; padding: 28px 24px; }
@media (min-width: 992px) { .sc-details-card { padding: 32px 36px; } }
.sc-detail-cell { background: var(--scout-bg); border: 1px solid var(--scout-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(--scout-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(--scout-accent); font-weight: 600; }

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

/* --------------------------------------------------------------------------
   How-it-works cards
   -------------------------------------------------------------------------- */
.sc-step-card {
    background: var(--scout-surface); border: 1px solid var(--scout-border); border-radius: 18px;
    padding: 28px 30px; display: flex; flex-direction: column; gap: 16px; height: 100%;
}
.sc-step-card .num { font-family: var(--scout-serif); font-size: 15px; font-weight: 700; color: var(--scout-accent); }
.sc-step-card .title { font-family: var(--scout-serif); font-size: 22px; font-weight: 700; }
.sc-step-card .body { font-size: 13.5px; color: var(--scout-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(--scout-border); color: var(--scout-ink) !important;
}
@media (min-width: 992px) { .sc-example-row { grid-template-columns: 100px 1fr auto; } }
.sc-example-row:hover { background: var(--scout-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(--scout-serif); font-size: 17px; font-weight: 600; font-style: italic; }

.sc-faq { background: var(--scout-surface); border: 1px solid var(--scout-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(--scout-accent); font-weight: 600; }
.sc-faq[open] summary::after { content: '−'; }
.sc-faq .a { font-size: 13.5px; color: var(--scout-muted); line-height: 1.7; padding: 0 24px 18px; }

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

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

/* --------------------------------------------------------------------------
   Product page bridge — restyle the live pd-* machinery
   -------------------------------------------------------------------------- */
.pd-gallery-main { border-radius: 18px; border: 1px solid var(--scout-border); background: var(--scout-surface); overflow: hidden; }
.pd-thumb { border-radius: 11px; border: 2px solid var(--scout-border); overflow: hidden; }
.pd-thumb.is-active { border-color: var(--scout-accent); }
.pd-title { font-family: var(--scout-serif); font-weight: 700; letter-spacing: -0.01em; }
.btn-ink { background: var(--scout-accent); border-color: var(--scout-accent); color: #fff; border-radius: 12px; font-weight: 700; }
.btn-ink:hover { background: var(--scout-accent-hover); border-color: var(--scout-accent-hover); color: #fff; }
.fav-btn--inline { border: 1.5px solid var(--scout-border-strong); border-radius: 12px; background: var(--scout-surface); color: var(--scout-ink); }
.fav-btn--inline:hover, .fav-btn--inline.is-active { border-color: var(--scout-accent); color: var(--scout-accent); background: var(--scout-shell); }
.option-swatch { border-radius: 10px; border: 1px solid var(--scout-border-strong); font-weight: 600; }
.option-swatch.is-selected { background: var(--scout-dark); border-color: var(--scout-dark); color: #FAF8F5; }
.color-dot.is-selected { outline: 2px solid var(--scout-accent); outline-offset: 2px; }
.nav-tabs-clean .nav-link { font-weight: 600; color: var(--scout-muted); }
.nav-tabs-clean .nav-link.active { color: var(--scout-ink); border-color: var(--scout-accent); }
.breadcrumb-clean { font-size: 12.5px; }
.breadcrumb-clean a { color: var(--scout-faint); }
.breadcrumb-clean a:hover { color: var(--scout-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(--scout-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 scout-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.sc-marquee-strip { background: var(--scout-surface); border-bottom: 1px solid var(--scout-border); padding: 22px 0; overflow: hidden; }
.sc-marquee { display: flex; width: max-content; align-items: center; animation: scout-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(--scout-ink); white-space: nowrap; }
.sc-marquee a:hover { color: var(--scout-accent); }
.sc-marquee .name { font-family: var(--scout-serif); font-size: 19px; font-weight: 600; letter-spacing: 0.01em; }
.sc-marquee .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--scout-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(--scout-peach); }
.sc-sticky-header .header-icon-btn, .sc-header:not(.sc-header--overlay) .header-icon-btn { color: var(--scout-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; }

    .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(--scout-muted) !important;
}
.sc-collection-tab:hover { color: var(--scout-ink) !important; }
.sc-collection-tab.is-active { background: var(--scout-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(--scout-text-soft); }
.badge-soft--accent { color: var(--scout-accent-strong); }
.card-swatch-more { color: var(--scout-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; }