/* ═══════════════════════════════════════════════════════════════
   STYLO — Fashion Affiliate Platform CSS
   Palette: Warm Terracotta / Coral accent
   Fonts: Playfair Display (serif headings), Inter (body)
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS Variables ──────────────────────────────────────────────── */
:root {
    --stylo-serif: 'Playfair Display', Georgia, serif;
    --stylo-sans: 'Inter', -apple-system, system-ui, sans-serif;

    --stylo-accent: #c45a3c;
    --stylo-accent-hover: #a94d33;
    --stylo-accent-light: #fdf0ec;
    --stylo-accent-rgb: 196, 90, 60;

    --stylo-dark: #1a1a1a;
    --stylo-body: #444;
    --stylo-muted: #888;
    --stylo-border: #e8e5e0;
    --stylo-surface: #f9f7f4;
    --stylo-bg: #fff;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
}

body {
    overflow-x: clip;
    font-family: var(--stylo-sans);
    color: var(--stylo-body);
    background: var(--stylo-bg);
    -webkit-font-smoothing: antialiased;
}

.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-800 { font-weight: 800 !important; }

/* ── Utility Classes ───────────────────────────────────────────── */
.bg-stylo-surface { background: var(--stylo-surface) !important; }
.bg-stylo-accent-light { background: var(--stylo-accent-light) !important; }
.text-stylo-accent { color: var(--stylo-accent) !important; }
.border-stylo-accent { border-color: var(--stylo-accent) !important; }
.border-dashed { border-style: dashed !important; }

.btn-stylo-accent {
    background: var(--stylo-accent);
    color: #fff;
    border: none;
    font-weight: 600;
    transition: all .2s;
}
.btn-stylo-accent:hover { background: var(--stylo-accent-hover); color: #fff; }

.btn-outline-stylo-accent {
    color: var(--stylo-accent);
    border-color: var(--stylo-accent);
}
.btn-outline-stylo-accent:hover {
    background: var(--stylo-accent);
    color: #fff;
}

.btn-white {
    background: #fff;
    color: var(--stylo-dark);
    border: 1px solid var(--stylo-border);
}
.btn-white:hover { background: var(--stylo-surface); }

.col-lg-2-4 { flex: 0 0 20%; max-width: 20%; }
@media (max-width: 991px) { .col-lg-2-4 { flex: 0 0 33.333%; max-width: 33.333%; } }
@media (max-width: 575px) { .col-lg-2-4 { flex: 0 0 50%; max-width: 50%; } }

.section-title {
    font-family: var(--stylo-serif);
    font-weight: 800;
    color: var(--stylo-dark);
    font-size: 1.6rem;
}

/* ── Top Bar ───────────────────────────────────────────────────── */
.stylo-topbar {
    background: var(--stylo-dark);
    color: #fff;
    font-size: 12px;
    letter-spacing: 0.3px;
    overflow: hidden;
}
.topbar-track {
    display: flex; width: max-content;
    animation: topbar-scroll 42s linear infinite;
}
.stylo-topbar:hover .topbar-track { animation-play-state: paused; }
@keyframes topbar-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .topbar-track { animation: none; }
    .stylo-topbar { overflow-x: auto; }
}
.topbar-run { display: flex; align-items: center; gap: 42px; padding: 7px 21px; }
.topbar-item {
    display: inline-flex; align-items: center; gap: 7px;
    white-space: nowrap; color: rgba(255,255,255,.82);
}
.topbar-item i { color: var(--stylo-accent); font-size: 13px; }

/* Intent-window campaign bar — shown in place of the scrolling strip while a
   campaign is live. Same dark bar, themed by the event's accent (--tb-accent). */
.topbar-campaign { display: flex; justify-content: center; padding: 7px 21px; }
.topbar-campaign-inner {
    display: inline-flex; align-items: center; gap: 16px;
    flex-wrap: wrap; justify-content: center; max-width: 1200px;
}
.tb-camp-text { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: #fff; }
.tb-camp-text > i { color: var(--tb-accent); font-size: 15px; }
.tb-camp-count {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
    color: var(--tb-accent); padding: 2px 9px; border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    background: color-mix(in srgb, var(--tb-accent) 20%, transparent);
}
.tb-camp-live { color: #fff; }
.tb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tb-accent); animation: tbPulse 1.4s ease-in-out infinite; }
@keyframes tbPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }
.tb-camp-cta {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap;
    color: #fff; background: var(--tb-accent);
    padding: 4px 13px; border-radius: 999px;
    transition: transform .18s ease, filter .18s ease;
}
.tb-camp-cta:hover { transform: translateY(-1px); filter: brightness(1.08); color: #fff; }
.tb-camp-cta i { font-size: 12px; transition: transform .2s ease; }
.tb-camp-cta:hover i { transform: translateX(3px); }
@media (max-width: 575.98px) { .tb-camp-count { display: none; } .tb-camp-text { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .tb-dot { animation: none; } }

/* Phones don't get the announcement strip at all — campaign bar or evergreen
   scroller, it is the same band of chrome above the header on every page, and
   the screen is short enough that it costs real room before the logo and the
   search field. Both variants render as .stylo-topbar, so one rule covers
   whichever is live. */
@media (max-width: 767.98px) { .stylo-topbar { display: none; } }

/* ── Header / Navbar ───────────────────────────────────────────── */
.stylo-header {
    background: var(--stylo-bg);
    border-bottom: 1px solid var(--stylo-border);
    z-index: 1030;
    box-shadow: var(--shadow-sm);
}

.stylo-logo {
    font-family: var(--stylo-serif);
    font-weight: 900;
    font-size: 28px;
    color: var(--stylo-dark);
}
.stylo-logo .dot { color: var(--stylo-accent); }

/* Zainera brand lockup — gradient Z mark + serif wordmark + tagline. The mark
   is an SVG asset; the word is Playfair with the site's warm terracotta gradient
   clipped to the glyphs, so it reads on both the light header and dark footer. */
.zn-logo { display: inline-flex; align-items: center; gap: 12px; line-height: 1; }

/* Finished logo image (full lockup). Header sits on white so the transparent
   PNG drops straight in; the footer is dark, so it's shown as a white silhouette. */
.zn-logoimg { display: block; height: 56px; width: auto; transition: transform .35s cubic-bezier(.34,1.4,.5,1); }
.zn-logo:hover .zn-logoimg { transform: scale(1.03); }
.zn-logo--footer .zn-logoimg { height: 48px; filter: brightness(0) invert(1); opacity: .92; }
@media (max-width: 991.98px) { .zn-logoimg { height: 48px; } }
@media (max-width: 575.98px) { .zn-logoimg { height: 40px; } }
.zn-mark { display: block; flex: none; width: 50px; height: 50px; transition: transform .4s cubic-bezier(.34,1.4,.5,1); }
.zn-logo:hover .zn-mark { transform: rotate(-6deg) scale(1.06); }
.zn-lock { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.zn-word {
    font-family: var(--stylo-serif);
    font-weight: 800;
    font-size: 36px;
    line-height: .92;
    letter-spacing: .3px;
    background: linear-gradient(100deg, #7a2e18 0%, #c45a3c 48%, #e69a5c 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    transition: filter .25s ease;
}
.zn-logo:hover .zn-word { filter: saturate(1.12) brightness(1.04); }
/* tagline — small caps flanked by hairlines, echoing the reference lockup */
.zn-tag {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--stylo-sans);
    font-size: 9px; font-weight: 700; letter-spacing: 2.6px; text-transform: uppercase;
    color: var(--stylo-accent); opacity: .85; white-space: nowrap;
}
.zn-tag::before, .zn-tag::after {
    content: ''; height: 1px; width: 16px;
    background: linear-gradient(90deg, transparent, rgba(var(--stylo-accent-rgb), .6));
}
.zn-tag::after { background: linear-gradient(90deg, rgba(var(--stylo-accent-rgb), .6), transparent); }
/* footer sits on dark — lift the tagline colour */
.zn-logo--footer .zn-mark { width: 46px; height: 46px; }
.zn-logo--footer .zn-word { font-size: 30px; }
.zn-logo--footer .zn-tag { color: #e69a5c; opacity: .9; }
/* the header is tight vertically — drop the tagline on small screens */
@media (max-width: 991.98px) { .zn-tag { display: none; } }
@media (max-width: 575.98px) { .zn-word { font-size: 25px; } .zn-mark { width: 36px; height: 36px; } }

/* Nav departments */
.nav-dept { /* position set below */ }
.nav-dept-link {
    display: flex;
    align-items: center;
    padding: 14px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--stylo-dark);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: all .2s;
}
.nav-dept-link:hover,
.nav-dept:hover .nav-dept-link { color: var(--stylo-accent); border-bottom-color: var(--stylo-accent); }

/* Mega dropdown */
/* The dropdown used to be anchored to its nav item and centred on it, so on a
   right-hand item it reached past the viewport and gave the whole page a
   horizontal scroll. It now spans the header instead, like a standard mega
   menu, and can never exceed the width available. */
.stylo-header { position: relative; }
.nav-dept { position: static; }

.mega-dropdown {
    position: absolute;
    top: 100%;
    left: 1rem;
    right: 1rem;
    transform: none;
    min-width: 0;
    background: #fff;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s, visibility .25s;
    z-index: 1050;
}
.nav-dept:hover .mega-dropdown { opacity: 1; visibility: visible; }

.mega-col-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--stylo-dark);
    margin-bottom: 12px;
}
.mega-col-title a { color: inherit; text-decoration: none; }
.mega-col-title a:hover { color: var(--stylo-accent); }

.mega-links li { margin-bottom: 6px; }
.mega-links a {
    font-size: 13px;
    color: var(--stylo-body);
    text-decoration: none;
    transition: color .15s;
}
.mega-links a:hover { color: var(--stylo-accent); }
.mega-view-all {
    font-weight: 600;
    color: var(--stylo-accent) !important;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Search */
.stylo-search-input {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
    border-color: var(--stylo-border);
    font-size: 14px;
}
.stylo-search-input:focus { border-color: var(--stylo-accent); box-shadow: 0 0 0 3px rgba(var(--stylo-accent-rgb), 0.12); }

.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--stylo-border);
    border-top: 0;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-md);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1100;
}

.ac-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none;
    color: var(--stylo-dark);
    transition: background .15s;
}
.ac-item:hover { background: var(--stylo-surface); }
.ac-item img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; }

.stylo-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--stylo-dark);
    text-decoration: none;
    transition: background .2s;
    font-size: 18px;
}
.stylo-icon-btn:hover { background: var(--stylo-surface); color: var(--stylo-accent); }
.badge-dot {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--stylo-accent);
}

/* ── Hero Section ──────────────────────────────────────────────── */
.stylo-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    /* A clean, even warm gradient — no localized washes/blobs, so nothing reads
       as a smudge. Texture comes from the static ring motif in .hero-rings. */
    background: linear-gradient(150deg, #faf7f3 0%, #f5eee4 48%, #fdf0ea 100%);
    /* Tightened from 64px: with the header above it the hero was pushing 635px
       before anything else appeared. */
    padding: 34px 0 30px;
}
.stylo-hero > .container { position: relative; z-index: 2; }
@media (max-width: 767px) { .stylo-hero { padding: 26px 0 24px; } }

/* ── Hero backdrop — clean, static & on-brand ───────────────────────
   The warm painterly mesh (on .stylo-hero) + a soft central glow for depth +
   faint concentric ring arcs that echo the logo's circle, held to the edges by
   a mask so the copy stays clean. Fully STATIC — no moving/animated background.
   Decorative only (pointer-events off). */
.hero-decor { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-glow {
    position: absolute; inset: 0; opacity: .5;
    background: radial-gradient(42% 110% at 50% 2%, rgba(255, 255, 255, .55), transparent 55%);
}
/* Concentric ring arcs echoing the logo's circle — a static brand motif, kept
   to the two outer corners by a mask so the centre (copy + search) stays clean. */
.hero-rings {
    position: absolute; inset: 0; opacity: .7;
    background:
        repeating-radial-gradient(circle at -6% 30%, transparent 0 70px, rgba(var(--stylo-accent-rgb), .09) 70px 72px),
        repeating-radial-gradient(circle at 106% 78%, transparent 0 70px, rgba(230, 154, 92, .10) 70px 72px);
    -webkit-mask-image: radial-gradient(68% 82% at 50% 46%, transparent 30%, #000 96%);
            mask-image: radial-gradient(68% 82% at 50% 46%, transparent 30%, #000 96%);
}
.hero-title {
    font-family: var(--stylo-serif);
    font-weight: 900;
    font-size: clamp(1.75rem, 4vw, 2.9rem);
    line-height: 1.12;
    color: var(--stylo-dark);
    margin-bottom: 8px;
}
.hero-subtitle {
    font-size: clamp(13.5px, 1.6vw, 15.5px);
    color: var(--stylo-body);
    max-width: 560px;
    margin: 0 auto 18px;
    line-height: 1.55;
}
.hero-search-input {
    border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
    border: 2px solid var(--stylo-border);
    padding: 14px 20px;
    font-size: 16px;
}
.hero-search-input:focus {
    border-color: var(--stylo-accent);
    box-shadow: 0 0 0 4px rgba(var(--stylo-accent-rgb), 0.1);
}

.trending-tag {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 7px 8px 7px 14px;
    border-radius: 999px;
}
.trending-tag:hover { background: var(--stylo-accent); color: #fff; }

/* ── Category Cards ────────────────────────────────────────────── */
.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 12px;
    border-radius: var(--radius-md);
    background: #fff;
    border: 1px solid var(--stylo-border);
    transition: all .25s;
}
.category-card:hover {
    border-color: var(--stylo-accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}
.category-icon {
    width: 64px; height: 64px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--stylo-surface);
    margin-bottom: 12px;
    color: var(--stylo-accent);
}
.category-icon img { width: 36px; height: 36px; object-fit: contain; }
/* Department kicker — L2 names repeat across departments, so the card names the parent */
.category-dept {
    font-size: 10px; font-weight: 700; letter-spacing: .8px;
    text-transform: uppercase; color: var(--stylo-accent);
    margin-bottom: 2px;
}
.category-label { font-weight: 700; font-size: 13px; color: var(--stylo-dark); margin: 0; }
.category-count { font-size: 11px; color: var(--stylo-muted); }

/* ── Product Card ──────────────────────────────────────────────── */
.product-card {
    background: #fff;
    border-radius: var(--radius-md);
    border: 1px solid var(--stylo-border);
    overflow: hidden;
    transition: all .3s;
}
.product-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.product-img-wrapper {
    position: relative;
    aspect-ratio: 3/4;
    background: var(--stylo-surface);
    overflow: hidden;
}
.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}
.product-card:hover .product-img { transform: scale(1.06); }
.product-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--stylo-surface);
}

.product-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    z-index: 2;
}
.badge-sale { background: #dc3545; color: #fff; }
.badge-new { background: var(--stylo-accent); color: #fff; }
.badge-bestseller { background: var(--stylo-dark); color: #fff; }

.btn-wishlist {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all .25s;
    z-index: 2;
    font-size: 14px;
}
.product-card:hover .btn-wishlist { opacity: 1; }
.btn-wishlist .bi-heart-fill { display: none; color: #dc3545; }
.btn-wishlist.active .bi-heart { display: none; }
.btn-wishlist.active .bi-heart-fill { display: inline; }

/* Price-alert bell (sits under the save heart) */
.btn-pricealert {
    position: absolute; top: 46px; right: 8px;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,0.9); border: none;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: translateY(-4px); transition: all .25s; z-index: 2; font-size: 13px;
    color: var(--stylo-accent);
}
.product-card:hover .btn-pricealert { opacity: 1; transform: none; }
.btn-pricealert:hover { background: var(--stylo-accent); color: #fff; }
.btn-pricealert .bi-bell-fill { display: none; }
.btn-pricealert:hover .bi-bell { display: none; }
.btn-pricealert:hover .bi-bell-fill { display: inline; }

.product-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px;
    text-align: center;
    transform: translateY(100%);
    transition: transform .3s;
    z-index: 2;
}
.product-card:hover .product-actions { transform: translateY(0); }

.product-info { padding: 12px; }
.product-brand {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--stylo-accent);
    font-weight: 600;
    margin-bottom: 4px;
}
.product-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--stylo-dark);
    line-height: 1.4;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-rating { color: #f0a500; font-size: 11px; margin-bottom: 6px; }
.product-rating .bi { margin-right: 1px; }
.review-count { color: var(--stylo-muted); font-size: 11px; margin-left: 4px; }

.product-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.price-current { font-weight: 800; font-size: 16px; color: var(--stylo-dark); }
.price-original { text-decoration: line-through; color: var(--stylo-muted); font-size: 12px; }
.price-discount { color: #dc3545; font-weight: 700; font-size: 12px; }

.product-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--stylo-surface);
    font-size: 10px;
    color: var(--stylo-body);
}

/* ── Filter Sidebar ────────────────────────────────────────────── */
/* On desktop the filter sidebar stays fixed in view while the product grid
   scrolls past it; it releases naturally when the row ends near the footer. A
   capped height + internal scroll keeps long filter lists from breaking the
   stick. */
@media (min-width: 992px) {
    .filter-sidebar {
        position: sticky;
        top: 84px;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 6px;
        scrollbar-width: thin;
    }
    .filter-sidebar::-webkit-scrollbar { width: 6px; }
    .filter-sidebar::-webkit-scrollbar-thumb { background: var(--stylo-border); border-radius: 3px; }

    /* Some pages wrap the sidebar (offcanvas for the search page, a d-none
       d-lg-block block on category pages). Any such wrapper must fill the tall
       column so the sticky filter-sidebar inside it can actually travel — a
       sticky element only moves within a parent taller than itself. */
    .filter-aside > div:not(.filter-sidebar),
    .filter-aside > div:not(.filter-sidebar) > .offcanvas-body { height: 100%; }
}
.filter-group { margin-bottom: 16px; }
.filter-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 0;
    border: none;
    background: none;
    font-weight: 700;
    font-size: 13px;
    color: var(--stylo-dark);
    cursor: pointer;
    border-bottom: 1px solid var(--stylo-border);
}
.filter-toggle .bi-chevron-down { transition: transform .3s; font-size: 11px; }
.filter-toggle.collapsed .bi-chevron-down { transform: rotate(-90deg); }
.filter-body { padding: 10px 0; max-height: 240px; overflow-y: auto; }

.filter-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 13px;
    cursor: pointer;
    color: var(--stylo-body);
}
.filter-option input[type="checkbox"] {
    accent-color: var(--stylo-accent);
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
.filter-count { font-size: 11px; color: var(--stylo-muted); }

/* Colour filter — a bare circle never said which colour it was, and the pale
   fills disappeared against the white panel. Each row now carries the swatch,
   the name and the count, so identity never rests on the colour alone. */
.filter-parent {
    font-size: 10.5px;
    color: var(--stylo-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-left: 4px;
}

.color-swatches {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.color-swatch-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--stylo-dark);
    border: 1px solid transparent;
    transition: background .15s, border-color .15s;
    min-width: 0;
}
.color-swatch-row:hover  { background: var(--stylo-light); color: var(--stylo-dark); }
.color-swatch-row.active { border-color: var(--stylo-accent); background: var(--stylo-accent-light); }

.color-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
    font-size: 11px;
    color: #fff;
}
/* Pale fills get a real outline of their own. */
.color-swatch.is-pale        { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .28); color: #333; }
.color-swatch-row.active .color-swatch { box-shadow: 0 0 0 2px var(--stylo-accent); }

.color-swatch-name {
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.color-swatch-count {
    margin-left: auto;
    font-size: 10.5px;
    color: var(--stylo-muted);
    font-variant-numeric: tabular-nums;
}

.size-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--stylo-border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    color: var(--stylo-dark);
    text-decoration: none;
    transition: all .15s;
}
.size-chip:hover,
.size-chip.active { border-color: var(--stylo-accent); background: var(--stylo-accent-light); color: var(--stylo-accent); }
.size-chip.disabled { opacity: 0.35; text-decoration: line-through; pointer-events: none; }

.active-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px 6px 4px 12px;
    border-radius: 20px;
    background: var(--stylo-accent-light);
    color: var(--stylo-accent);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s;
}
.active-filter-pill .afp-label { display: inline-flex; align-items: center; }
.active-filter-pill .afp-x {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; margin-left: 2px;
    border-radius: 50%; color: inherit; text-decoration: none;
    transition: background .15s;
}
.active-filter-pill .afp-x:hover { background: rgba(0,0,0,.12); }

/* Filters the guided search can re-open: the label is a button (edit), the ×
   removes. A pencil appears on hover so it reads as tappable. */
.afp-editable { cursor: pointer; }
.afp-editable .afp-label::after {
    content: '\F4CB';                    /* bi-pencil */
    font-family: 'bootstrap-icons';
    font-size: 10px; margin-left: 6px; opacity: .55;
}
.afp-editable:hover { background: color-mix(in srgb, var(--stylo-accent) 22%, #fff); }
.active-filter-pill:hover { background: var(--stylo-accent); color: #fff; }

/* ── Brand Card ────────────────────────────────────────────────── */
.brand-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--stylo-border);
    background: #fff;
    transition: all .25s;
    min-height: 130px;
}
.brand-card:hover {
    border-color: var(--stylo-accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}
.brand-logo { max-height: 40px; max-width: 100%; object-fit: contain; margin-bottom: 10px; }
.brand-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--stylo-surface);
    font-family: var(--stylo-serif);
    font-weight: 800;
    font-size: 18px;
    color: var(--stylo-accent);
    margin-bottom: 10px;
}
.brand-name { font-weight: 600; font-size: 13px; color: var(--stylo-dark); }

/* ── How-it-works Card ─────────────────────────────────────────── */
.how-card {
    position: relative;
    padding: 28px 20px 20px;
    border-radius: var(--radius-md);
    background: #fff;
    border: 1px solid var(--stylo-border);
    text-align: center;
}
.how-num {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--stylo-accent);
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Wizard ─────────────────────────────────────────────────────── */
.stylo-wizard-bg {
    background: linear-gradient(180deg, var(--stylo-surface) 0%, #fff 100%);
}
.wizard-option {
    border: 2px solid var(--stylo-border);
    border-radius: var(--radius-md) !important;
    transition: all .2s;
}
.wizard-option:hover {
    border-color: var(--stylo-accent) !important;
    background: var(--stylo-accent-light) !important;
    color: var(--stylo-dark) !important;
}

/* ── Product Gallery ───────────────────────────────────────────── */
.product-thumb {
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color .15s;
    overflow: hidden;
}
.product-thumb:hover,
.product-thumb.active { border-color: var(--stylo-accent); }

/* ── Footer ────────────────────────────────────────────────────── */
.stylo-footer { background: var(--stylo-dark); color: #fff; }
.footer-newsletter { background: rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-title {
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
    color: #fff;
}
.footer-links li { margin-bottom: 8px; }
.footer-links a { color: rgba(255,255,255,0.6); text-decoration: none; font-size: 13px; transition: color .15s; }
.footer-links a:hover { color: var(--stylo-accent); }
.footer-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: #fff;
    text-decoration: none;
    transition: all .2s;
}
.footer-social:hover { background: var(--stylo-accent); color: #fff; }

/* ── Back to Top ───────────────────────────────────────────────── */
.btn-back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    padding: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    box-shadow: var(--shadow-md);
}
.btn-back-to-top.visible { display: flex; }

/* ── Pagination Override ───────────────────────────────────────── */
.pagination .page-link {
    color: var(--stylo-dark);
    border-color: var(--stylo-border);
    font-size: 13px;
    font-weight: 500;
}
.pagination .page-item.active .page-link {
    background: var(--stylo-accent);
    border-color: var(--stylo-accent);
}

/* ── Breadcrumb Override ───────────────────────────────────────── */
.breadcrumb-item a { color: var(--stylo-accent); text-decoration: none; }
.breadcrumb-item a:hover { text-decoration: underline; }

/* ── Responsive Tweaks ─────────────────────────────────────────── */
@media (max-width: 991px) {
    .stylo-hero { padding: 40px 0; }
    .hero-title { font-size: 1.8rem; }
    .product-info { padding: 8px; }
    .product-name { font-size: 12px; }
    .price-current { font-size: 14px; }
    .section-title { font-size: 1.3rem; }
}
@media (max-width: 575px) {
    .stylo-logo { font-size: 22px; }
    .product-badge { font-size: 9px; padding: 2px 6px; }
    .product-brand { font-size: 10px; }
}

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE INTELLIGENCE HUBS
   Built on the existing tokens above — no new palette introduced.
   ═══════════════════════════════════════════════════════════════ */

/* Every content section sits on the same white surface, so the separation
   comes from a hairline rule and rhythm rather than alternating fills. */
.section-pad { padding: 38px 0; }
.section-pad + .section-pad { border-top: 1px solid var(--stylo-border); }
@media (max-width: 991px) { .section-pad { padding: 30px 0; } }
@media (max-width: 575px) { .section-pad { padding: 24px 0; } }

/* ── Hero eyebrow ──────────────────────────────────────────────── */
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
    text-transform: uppercase; color: var(--stylo-accent);
    background: var(--stylo-accent-light);
    padding: 5px 13px; border-radius: 999px; margin-bottom: 10px;
}

/* ── Row 2: live pulse ticker ──────────────────────────────────── */
.pulse-bar {
    background: var(--stylo-dark); color: #fff;
    overflow: hidden; border-block: 1px solid rgba(255,255,255,.08);
}
.pulse-track { display: flex; width: max-content; animation: pulse-scroll 48s linear infinite; }
.pulse-bar:hover .pulse-track { animation-play-state: paused; }
@keyframes pulse-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .pulse-track { animation: none; }
    .pulse-bar { overflow-x: auto; }
}
.pulse-run { display: flex; align-items: center; gap: 34px; padding: 11px 17px; }
.pulse-live {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 10px; font-weight: 800; letter-spacing: 1.4px;
    color: var(--stylo-accent); white-space: nowrap;
}
.pulse-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--stylo-accent); animation: pulse-blink 1.8s ease-in-out infinite;
}
@keyframes pulse-blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.pulse-item {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; color: rgba(255,255,255,.62); white-space: nowrap;
}
.pulse-item i { color: var(--stylo-accent); font-size: 14px; }
.pulse-item strong { color: #fff; font-weight: 700; }

/* ── Hub headers ───────────────────────────────────────────────── */
.hub-header {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 20px; margin-bottom: 20px;
}
.hub-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 800; letter-spacing: 1.3px;
    text-transform: uppercase; color: var(--stylo-accent);
}
.hub-title {
    font-family: var(--stylo-serif); font-weight: 800;
    font-size: clamp(22px, 3vw, 31px); color: var(--stylo-dark);
    margin: 6px 0 4px;
}
.hub-subtitle { font-size: 13px; color: var(--stylo-muted); margin: 0; }
.hub-cta {
    flex-shrink: 0; font-size: 13px; font-weight: 700;
    color: var(--stylo-dark); text-decoration: none;
    border: 1px solid var(--stylo-border); border-radius: 999px;
    padding: 9px 18px; transition: all .2s; white-space: nowrap;
}
.hub-cta:hover { background: var(--stylo-dark); color: #fff; border-color: var(--stylo-dark); }
@media (max-width: 575px) {
    .hub-header { flex-direction: column; align-items: flex-start; }
}

/* ── Hub panels ────────────────────────────────────────────────── */
.hub-panel {
    background: #fff;
    border-radius: var(--radius-lg); padding: 18px;
    box-shadow: 0 1px 2px rgba(17, 17, 17, .04), 0 12px 30px rgba(17, 17, 17, .05);
}
/* Fewer lines: the panel floats on a soft shadow, so the cards and analytic
   tiles inside drop their borders. Tiles keep a faint surface tint so they
   still read as grouped. Scoped to hubs so search-page cards are untouched. */
.hub-panel .product-card { border-color: transparent; }
.hub-panel .an-card { border: none; background: var(--stylo-surface); }
.hub-panel .an-card:hover { background: #f2efe9; }

/* The audience tabs make the rail column taller, so the analytics column spreads
   to fill the same height instead of leaving a gap — the two line up top and
   bottom. Applies to both Fashion and Beauty (mirrored layouts). */
.hub-fashion     .hub-panel-fill .an-grid,
.hub-beauty      .hub-panel-fill .an-grid,
.hub-accessories .hub-panel-fill .an-grid,
.hub-shopping    .hub-panel-fill .an-grid { flex: 1 1 auto; align-content: space-between; }

/* The picked audience already shows as the lit tab below the rail, so the little
   chip above the products is redundant here — drop it. */
.hub-fashion     .facet-active,
.hub-beauty      .facet-active,
.hub-accessories .facet-active,
.hub-shopping    .facet-active { display: none; }

/* ── Audience tabs under the trend rail ────────────────────────── */
/* The panel that holds the rail becomes a flex column and the rail grows to fill,
   so the tabs pin to the very bottom and line up with the analytics panel beside
   them — whichever column is shorter, no empty space is left below the tabs. */
.hub-panel:has(.rail-tabs) { display: flex; flex-direction: column; }
.hub-panel:has(.rail-tabs) > [data-facet-rail] {
    flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center;
}
/* Four standalone boxes (cards) rather than one joined pill track — same grid,
   same margin, same footprint, so the panel alignment is unchanged. Each is its
   own bordered card that lifts in 3D on hover; the active card fills dark. */
.rail-tabs {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
    margin-top: 14px;
    perspective: 820px;                 /* the 3D scene the boxes tilt inside */
}
/* Four labelled tabs will not fit a 320px screen. The icons carry the meaning
   on their own at that width, and the four targets stay full size. */
@media (max-width: 359.98px) {
    .rail-tabs { gap: 6px; }
    .rail-tab { padding: 12px 4px; font-size: 11px; }
    .rail-tab .rail-tab-label { display: none; }
}
.rail-tab {
    position: relative; overflow: visible;   /* let the lifted card + its depth show */
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 12px 8px;
    border: 1px solid var(--stylo-border); border-radius: 14px;
    background: #fff; box-shadow: 0 1px 3px rgba(17, 17, 17, .06);
    cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--stylo-muted);
    transform-style: preserve-3d; transform: translateZ(0);
    transition: color .3s ease, border-color .3s ease,
                transform .5s cubic-bezier(.2, .8, .2, 1.2),
                box-shadow .5s ease, background-color .35s ease;
}
.rail-tab i { font-size: 15px; z-index: 1; transition: transform .42s cubic-bezier(.34, 1.5, .5, 1), color .3s; }
.rail-tab .rail-tab-label { z-index: 1; transition: transform .5s cubic-bezier(.2, .8, .2, 1.2); }
.rail-tab::before {
    content: ''; position: absolute; inset: 0; z-index: 0; border-radius: 13px;
    background: var(--stylo-dark);
    transform: scale(.72); opacity: 0;
    transition: transform .34s cubic-bezier(.34, 1.42, .6, 1), opacity .24s ease;
}
/* 3D lift on hover — the box rises off the panel, tips toward you, and its icon
   floats forward on the z-axis. Only transforms move, so nothing reflows: the
   grid, the panel alignment and both columns stay exactly where they were. */
.rail-tab:hover { z-index: 3; }
.rail-tab:hover:not(.is-on) {
    color: var(--stylo-dark); border-color: rgba(var(--stylo-accent-rgb), .5);
    transform: translateY(-5px) rotateX(12deg) scale(1.035);
    box-shadow: 0 18px 30px -10px rgba(17, 17, 17, .22),
                0 6px 12px -4px rgba(17, 17, 17, .12);
}
.rail-tab:hover:not(.is-on) i { transform: translateZ(24px) translateY(-1px) scale(1.16); color: var(--stylo-accent); }
.rail-tab:hover:not(.is-on) .rail-tab-label { transform: translateZ(14px); }
.rail-tab.is-on {
    color: #fff; border-color: var(--stylo-dark);
    box-shadow: 0 8px 20px -6px rgba(17, 17, 17, .30);
}
.rail-tab.is-on i { color: #fff; transform: scale(1.16); }
.rail-tab.is-on::before { transform: scale(1); opacity: 1; }
/* the active card gets a gentle 3D nudge on hover, keeping its dark fill */
.rail-tab.is-on:hover { transform: translateY(-3px) scale(1.02); }
.rail-tab:active { transform: scale(.97); }
.rail-tab:hover:not(.is-on):active { transform: translateY(-3px) rotateX(8deg) scale(.99); }
@media (prefers-reduced-motion: reduce) {
    .rail-tab, .rail-tab i, .rail-tab::before, .rail-tab .rail-tab-label { transition: none; }
    .rail-tab:hover:not(.is-on),
    .rail-tab:hover:not(.is-on) i,
    .rail-tab:hover:not(.is-on) .rail-tab-label,
    .rail-tab.is-on:hover { transform: none; }
}
.panel-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 14px;
}
.panel-title {
    font-size: 14px; font-weight: 800; color: var(--stylo-dark);
    margin: 0; display: flex; align-items: center; gap: 8px;
}
.panel-title i { color: var(--stylo-accent); }
.panel-note { font-size: 11px; color: var(--stylo-muted); }

/* ── Row 3: department cards ───────────────────────────────────── */
.dept-card {
    display: flex; align-items: center; gap: 13px;
    padding: 16px; height: 100%;
    background: #fff; border: 1px solid var(--stylo-border);
    border-radius: var(--radius-md); text-decoration: none;
    transition: all .22s;
}
.dept-card:hover {
    border-color: var(--stylo-accent); box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.dept-icon {
    width: 46px; height: 46px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--stylo-accent-light);
    color: var(--stylo-accent); font-size: 19px;
}
.dept-icon img { width: 26px; height: 26px; object-fit: contain; }
.dept-body { min-width: 0; flex: 1; }
.dept-name {
    font-size: 14px; font-weight: 700; color: var(--stylo-dark);
    margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dept-count { font-size: 11px; color: var(--stylo-muted); }
.dept-arrow { color: var(--stylo-border); font-size: 14px; transition: all .22s; }
.dept-card:hover .dept-arrow { color: var(--stylo-accent); transform: translateX(3px); }

/* ── Theme tiles (beauty / accessories) ────────────────────────── */
.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; height: 100%; }
.theme-tile {
    position: relative; display: block; overflow: hidden;
    border-radius: var(--radius-md); min-height: 148px;
    background: var(--stylo-surface); text-decoration: none;
    transition: transform .25s;
}
.theme-tile:hover { transform: translateY(-3px); }
.theme-tile-sm { min-height: 128px; }
.theme-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.theme-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.76) 0%, rgba(0,0,0,.18) 60%, transparent 100%);
}
.theme-body {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 12px; display: flex; flex-direction: column; gap: 2px;
}
.theme-label { font-size: 14px; font-weight: 800; color: #fff; }
.theme-count { font-size: 11px; color: rgba(255,255,255,.72); }

/* Data tile — no image, shows a breakdown instead */
.theme-tile-data {
    background: var(--stylo-dark); border: 1px solid var(--stylo-dark);
}
.theme-tile-data .theme-body { position: static; padding: 14px; }
.material-list { display: flex; flex-direction: column; gap: 7px; margin-top: 9px; }
.material-row {
    display: flex; flex-direction: column; gap: 3px;
    font-size: 11px; color: rgba(255,255,255,.75); text-decoration: none;
}
.material-row:hover { color: #fff; }
.material-bar { display: block; height: 3px; background: rgba(255,255,255,.14); border-radius: 2px; }
.material-bar span { display: block; height: 100%; background: var(--stylo-accent); border-radius: 2px; }

/* ── Row 7: shopping intelligence ──────────────────────────────── */
.hub-shopping { background: #fff; }
.deal-card {
    display: flex; flex-direction: column; height: 100%;
    background: #fff; border: 1px solid var(--stylo-border);
    border-radius: var(--radius-lg); padding: 20px;
}
.deal-card-hot {
    background: var(--stylo-dark); border-color: var(--stylo-dark);
    justify-content: space-between;
}
.deal-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 800; letter-spacing: 1.2px;
    text-transform: uppercase; color: var(--stylo-accent);
}
.deal-figure {
    font-family: var(--stylo-serif); font-size: 36px; font-weight: 800;
    color: var(--stylo-dark); line-height: 1.1; margin-top: 8px;
}
.deal-card-hot .deal-figure { color: #fff; }
.deal-caption { font-size: 12px; color: var(--stylo-muted); margin-bottom: 14px; }
.deal-card-hot .deal-caption { color: rgba(255,255,255,.6); }

.band-list, .coupon-list { display: flex; flex-direction: column; gap: 1px; margin-top: auto; }
.band-row, .coupon-row {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 7px 8px; border-radius: var(--radius-sm);
    font-size: 12px; text-decoration: none; color: var(--stylo-body);
    transition: background .18s;
}
.band-row:hover, .coupon-row:hover { background: var(--stylo-surface); color: var(--stylo-accent); }
.band-label { font-weight: 600; }
.band-count { color: var(--stylo-muted); font-variant-numeric: tabular-nums; }
.coupon-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px; font-weight: 700; color: var(--stylo-accent);
    background: var(--stylo-accent-light); padding: 3px 8px;
    border-radius: 4px; white-space: nowrap;
}
.coupon-title { color: var(--stylo-muted); font-size: 11.5px; text-align: right; }
.deal-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--stylo-accent); color: #fff; text-decoration: none;
    font-size: 13px; font-weight: 700; border-radius: 999px;
    padding: 11px 20px; transition: background .2s;
}
.deal-btn:hover { background: var(--stylo-accent-hover); color: #fff; }

/* ── Brand card count ──────────────────────────────────────────── */
.brand-count { display: block; font-size: 10px; color: var(--stylo-muted); margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════
   CAROUSEL
   ═══════════════════════════════════════════════════════════════ */
.carousel { position: relative; }
.carousel-track {
    overflow-x: auto; padding: 2px 0 10px; width: 100%;
    container-type: inline-size;
    scrollbar-width: none; -ms-overflow-style: none;
    cursor: grab;
    /* No scroll-behavior here: it would animate every per-frame scrollLeft
       write from the drift loop and cancel the motion out entirely. Arrow
       jumps pass behavior:'smooth' explicitly instead. */
}
.carousel { --gap: 16px; }
.carousel-belt { display: flex; gap: var(--gap); width: max-content; }
.carousel-set,
.carousel-loop { display: flex; gap: var(--gap); }

/* Two rows: each copy becomes a grid that fills downward then across, so the
   same horizontal scroll still moves one column at a time. Used where the rail
   sits beside a tall panel — one row left a hole under it. */
.carousel[data-rows="2"] .carousel-set,
.carousel[data-rows="2"] .carousel-loop {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    align-items: stretch;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.carousel-track.is-dragging * { pointer-events: none; }
.carousel-track:focus-visible { outline: 2px solid var(--stylo-accent); outline-offset: 3px; border-radius: var(--radius-md); }
/* --show is the number of cards a track should reveal; the fraction is what
   signals "there is more to the right". Sizing from the track rather than a
   fixed pixel width keeps the cards large on wide panels and never clips them
   on narrow ones. */
.rail-item {
    flex: 0 0 280px;            /* fallback where container queries are absent */
    min-width: 0;
}
/* The belt is width:max-content, so a plain percentage here would resolve
   against the belt itself and never settle. cqi measures the track instead. */
@supports (container-type: inline-size) {
    .rail-item {
        flex-basis: calc((100cqi - (var(--show) - 1) * var(--gap)) / var(--show));
    }
    /* Grid items ignore flex-basis, so the column width is set directly. */
    .carousel[data-rows="2"] .carousel-set,
    .carousel[data-rows="2"] .carousel-loop {
        grid-auto-columns: calc((100cqi - (var(--show) - 1) * var(--gap)) / var(--show));
    }
}
.carousel[data-rows="2"] .rail-item { flex: none; }
@media (max-width: 1199px) { .carousel { --show: 3.2 !important; } }
@media (max-width: 991px)  { .carousel { --show: 2.6 !important; --gap: 12px; } }
@media (max-width: 767px)  { .carousel { --show: 2.2 !important; } }
@media (max-width: 575px)  { .carousel { --show: 1.6 !important; --gap: 10px; } }

.carousel-arrow {
    position: absolute; top: 38%; transform: translateY(-50%);
    z-index: 3; width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #fff; color: var(--stylo-dark);
    border: 1px solid var(--stylo-border); box-shadow: var(--shadow-md);
    font-size: 16px; cursor: pointer;
    opacity: 0; transition: opacity .2s, background .2s, color .2s;
}
.carousel:hover .carousel-arrow,
.carousel:focus-within .carousel-arrow { opacity: 1; }
.carousel-arrow:hover:not(:disabled) { background: var(--stylo-dark); color: #fff; border-color: var(--stylo-dark); }
.carousel-arrow:disabled { opacity: 0 !important; pointer-events: none; }
/* Arrows sit inside the track. Hanging them outside pushed past the container
   at the lg breakpoint and gave the page 35px of horizontal overflow. */
.carousel-prev { left: 8px; }
.carousel-next { right: 8px; }
@media (max-width: 991px) {
    .carousel-arrow { opacity: 1; width: 32px; height: 32px; font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════════════
   CHARTS
   Single-series marks carry the accent hue; text stays on text
   tokens. Fills animate in when scrolled into view.
   ═══════════════════════════════════════════════════════════════ */
.chart { --chart-accent: var(--stylo-accent); }

/* ── Horizontal bars ───────────────────────────────────────────── */
.chart-bars { display: flex; flex-direction: column; gap: 9px; }
.cbar-row {
    display: grid; grid-template-columns: minmax(62px, 88px) 1fr auto;
    align-items: center; gap: 10px;
}
.cbar-label { display: flex; align-items: center; gap: 7px; min-width: 0; }
.cbar-swatch {
    width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.16);
}
.cbar-name {
    font-size: 12px; color: var(--stylo-body);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cbar-track {
    position: relative; height: 10px; border-radius: 0 5px 5px 0;
    background: var(--stylo-surface);
}
.cbar-fill {
    position: absolute; inset: 0 auto 0 0; width: 0;
    background: var(--chart-accent);
    border-radius: 0 5px 5px 0;                 /* square at baseline, rounded data-end */
    transition: width .85s cubic-bezier(.22,.61,.36,1);
}
.is-drawn .cbar-fill { width: var(--w); }
.cbar-row:nth-child(2) .cbar-fill { transition-delay: .05s; }
.cbar-row:nth-child(3) .cbar-fill { transition-delay: .10s; }
.cbar-row:nth-child(4) .cbar-fill { transition-delay: .15s; }
.cbar-row:nth-child(5) .cbar-fill { transition-delay: .20s; }
.cbar-row:nth-child(6) .cbar-fill { transition-delay: .25s; }
.cbar-row:nth-child(7) .cbar-fill { transition-delay: .30s; }
.cbar-row:nth-child(8) .cbar-fill { transition-delay: .35s; }
.cbar-value {
    font-size: 11px; color: var(--stylo-muted);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Colour-family swatches — identity marks, not the bar fill */
.color-black  { background: #1a1a1a; }
.color-white  { background: #fff; }
.color-grey   { background: #8b8b8b; }
.color-blue   { background: #2d5a9e; }
.color-green  { background: #4a7c3f; }
.color-red    { background: #b5342c; }
.color-pink   { background: #e8a0b8; }
.color-brown  { background: #8a6240; }
.color-yellow { background: #e0b93c; }
.color-other  { background: linear-gradient(135deg, #c45a3c 0%, #7a9ec4 100%); }

/* ── Ordinal stacked bar (discount depth) ──────────────────────── */
.cord-track {
    display: flex; gap: 2px;                     /* 2px surface gap, never a stroke */
    height: 13px; margin-bottom: 13px;
}
.cord-seg {
    width: 0; border-radius: 2px;
    transition: width .9s cubic-bezier(.22,.61,.36,1);
}
.is-drawn .cord-seg { width: var(--w); }
.cord-seg:nth-child(2) { transition-delay: .07s; }
.cord-seg:nth-child(3) { transition-delay: .14s; }
.cord-seg:nth-child(4) { transition-delay: .21s; }

/* Validated ordinal ramp: monotone light -> dark, single hue */
.cord-step-1 { background: #dfa48e; }
.cord-step-2 { background: #cb7757; }
.cord-step-3 { background: #ae4a2a; }
.cord-step-4 { background: #75311d; }

.cord-legend { display: flex; flex-direction: column; gap: 5px; }
.cord-key { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.cord-dot { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.cord-key-label { color: var(--stylo-body); flex: 1; }
.cord-key-value { color: var(--stylo-muted); font-variant-numeric: tabular-nums; }

/* ── Area chart ────────────────────────────────────────────────── */
.chart-area svg { display: block; width: 100%; height: auto; overflow: visible; }
.cgrid { stroke: var(--stylo-border); stroke-width: 1; }
.caxis {
    fill: var(--stylo-muted); font-size: 11px;
    font-family: var(--stylo-sans); font-variant-numeric: tabular-nums;
}
.carea-fill { opacity: 0; transition: opacity .8s ease .45s; }
.is-drawn .carea-fill { opacity: 1; }

.carea-line {
    fill: none; stroke: var(--stylo-accent); stroke-width: 2;
    stroke-linejoin: round; stroke-linecap: round;
    stroke-dasharray: 2600; stroke-dashoffset: 2600;
    transition: stroke-dashoffset 1.6s cubic-bezier(.33,.1,.2,1);
}
.is-drawn .carea-line { stroke-dashoffset: 0; }

.carea-peak-dot, .carea-dot {
    fill: var(--stylo-accent); stroke: #fff; stroke-width: 2;   /* surface ring */
    opacity: 0; transition: opacity .35s ease 1.25s;
}
.is-drawn .carea-peak-dot, .is-drawn .carea-dot { opacity: 1; }
.carea-peak-dot { fill: #fff; stroke: var(--stylo-accent); }

/* Soft beat on the latest point — the series is live, and this says so */
.carea-dot-halo { fill: none; stroke: var(--stylo-accent); stroke-width: 2; opacity: 0; }
.is-drawn .carea-dot-halo { animation: carea-beat 2.4s ease-out 1.4s infinite; }
@keyframes carea-beat {
    0%   { transform: scale(1);   opacity: .5; }
    70%  { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
}
.carea-dot-halo { transform-box: fill-box; transform-origin: center; }

/* Per-week hover: crosshair + dot, driven by the hit column */
.carea-cross {
    stroke: var(--stylo-accent); stroke-width: 1; stroke-opacity: .35;
    opacity: 0; transition: opacity .12s;
}
.carea-hover-dot {
    fill: var(--stylo-accent); stroke: #fff; stroke-width: 2;
    opacity: 0; transition: opacity .12s;
}
.carea-hit { cursor: crosshair; }
.carea-hit:hover .carea-cross,
.carea-hit:hover .carea-hover-dot { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .carea-fill, .carea-line, .carea-dot, .carea-peak-dot { transition: none !important; }
    .is-drawn .carea-dot-halo { animation: none; }
}

/* ── Growth panel ──────────────────────────────────────────────── */
.growth-panel {
    background: #fff; border: 1px solid var(--stylo-border);
    border-radius: var(--radius-lg); padding: 20px 22px;
}
.growth-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 16px; margin-bottom: 6px;
}
.growth-note { font-size: 12px; color: var(--stylo-muted); margin: 3px 0 0; }
.growth-figure { text-align: right; }
.growth-value {
    display: block; font-size: 30px; font-weight: 700;
    color: var(--stylo-dark); line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.growth-label { font-size: 11px; color: var(--stylo-muted); }

/* Material chart sits on the dark tile, so its marks and text invert */
.theme-tile-data .chart { --chart-accent: #dfa48e; }
.theme-tile-data .cbar-row { grid-template-columns: minmax(50px, 66px) 1fr auto; gap: 7px; }
.theme-tile-data .cbar-name { color: rgba(255,255,255,.82); font-size: 11px; }
.theme-tile-data .cbar-value { color: rgba(255,255,255,.5); font-size: 10px; }
.theme-tile-data .cbar-track { background: rgba(255,255,255,.12); }

@media (prefers-reduced-motion: reduce) {
    .cbar-fill, .cord-seg, .carea-fill, .carea-line, .carea-dot { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   CHART FORMS — one per card, so no two panels read alike
   ═══════════════════════════════════════════════════════════════ */

/* ── Donut: share of catalog by colour family ──────────────────── */
.chart-donut { display: flex; align-items: center; gap: 16px; }
.donut-wrap { position: relative; flex: 0 0 122px; }
.chart-donut svg { display: block; width: 122px; height: 122px; }
.donut-track { fill: none; stroke: var(--stylo-surface); stroke-width: 13; }
.donut-seg {
    fill: none; stroke-width: 13; stroke-linecap: butt;
    opacity: 0; transition: opacity .5s ease;
}
.is-drawn .donut-seg { opacity: 1; }
.donut-wrap { animation: none; }
.is-drawn .donut-wrap { animation: donut-sweep 1s cubic-bezier(.22,.61,.36,1); }
@keyframes donut-sweep { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }

.donut-center {
    position: absolute; inset: 0; display: flex;
    flex-direction: column; align-items: center; justify-content: center;
}
.donut-total {
    font-size: 24px; font-weight: 700; color: var(--stylo-dark);
    line-height: 1; font-variant-numeric: tabular-nums;
}
.donut-caption { font-size: 10px; color: var(--stylo-muted); margin-top: 2px; }

.donut-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; }
.donut-key { display: flex; align-items: center; gap: 7px; padding: 2.5px 0; font-size: 11.5px; }
.donut-dot {
    width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.16);
}
.donut-key-label { color: var(--stylo-body); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.donut-key-value { color: var(--stylo-muted); font-variant-numeric: tabular-nums; }

/* Colour families are the data, so the stroke carries the literal colour */
.color-stroke-black  { stroke: #1a1a1a; }
.color-stroke-white  { stroke: #efeae2; }
.color-stroke-grey   { stroke: #8b8b8b; }
.color-stroke-blue   { stroke: #2d5a9e; }
.color-stroke-green  { stroke: #4a7c3f; }
.color-stroke-red    { stroke: #b5342c; }
.color-stroke-pink   { stroke: #e8a0b8; }
.color-stroke-brown  { stroke: #8a6240; }
.color-stroke-yellow { stroke: #e0b93c; }
.color-stroke-other  { stroke: #b9b2a8; }

/* ── Lollipop: style share ─────────────────────────────────────── */
.chart-lollipop { display: flex; flex-direction: column; gap: 10px; }
.lolli-row {
    display: grid; grid-template-columns: minmax(64px, 84px) 1fr auto;
    align-items: center; gap: 10px;
}
.lolli-name {
    font-size: 12px; color: var(--stylo-body);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lolli-track { position: relative; height: 12px; }
.lolli-track::before {
    content: ''; position: absolute; left: 0; right: 0; top: 50%;
    height: 1px; background: var(--stylo-border);   /* hairline, solid, recessive */
}
.lolli-stem {
    position: absolute; left: 0; top: 50%; height: 2px; width: 0;
    transform: translateY(-50%); background: var(--stylo-accent);
    border-radius: 1px;
    transition: width .8s cubic-bezier(.22,.61,.36,1) var(--d, 0ms);
}
.is-drawn .lolli-stem { width: var(--w); }
.lolli-dot {
    position: absolute; top: 50%; left: 0; width: 9px; height: 9px;
    margin-left: -4.5px; border-radius: 50%;
    background: var(--stylo-accent);
    box-shadow: 0 0 0 2px #fff;                     /* 2px surface ring */
    transform: translateY(-50%) scale(0);
    transition: left .8s cubic-bezier(.22,.61,.36,1) var(--d, 0ms),
                transform .3s cubic-bezier(.34,1.56,.64,1) var(--d, 0ms);
}
.is-drawn .lolli-dot { left: var(--w); transform: translateY(-50%) scale(1); }
.lolli-value { font-size: 11px; color: var(--stylo-muted); font-variant-numeric: tabular-nums; }

/* ── Radial: material distribution (dark tile) ─────────────────── */
.chart-radial { display: flex; align-items: center; gap: 10px; }
.chart-radial svg { flex: 0 0 84px; width: 84px; height: 84px; }
.radial-track { fill: none; stroke: rgba(255,255,255,.13); stroke-width: 7; stroke-linecap: round; }
.radial-arc {
    fill: none; stroke: #dfa48e; stroke-width: 7; stroke-linecap: round;
    stroke-dashoffset: var(--len);
    transition: stroke-dashoffset .9s cubic-bezier(.22,.61,.36,1) var(--d, 0ms);
}
.is-drawn .radial-arc { stroke-dashoffset: 0; }
.radial-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; }
.radial-legend li { display: flex; justify-content: space-between; gap: 6px; padding: 1.5px 0; font-size: 10.5px; }
.radial-name { color: rgba(255,255,255,.82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.radial-value { color: rgba(255,255,255,.48); font-variant-numeric: tabular-nums; }

/* ── Gauge: discount depth ─────────────────────────────────────── */
.chart-gauge { display: flex; flex-direction: column; }
.gauge-wrap { position: relative; margin: 0 auto 10px; width: 100%; max-width: 190px; }
.chart-gauge svg { display: block; width: 100%; height: auto; }
.gauge-track { fill: none; stroke: var(--stylo-surface); stroke-width: 13; stroke-linecap: round; }
.gauge-seg {
    fill: none; stroke-width: 13; stroke-linecap: butt;
    opacity: 0; transition: opacity .55s ease var(--d, 0ms);
}
.is-drawn .gauge-seg { opacity: 1; }
.gauge-center {
    position: absolute; left: 0; right: 0; bottom: 4px;
    display: flex; flex-direction: column; align-items: center;
}
.gauge-value {
    font-size: 21px; font-weight: 700; color: var(--stylo-dark);
    line-height: 1; font-variant-numeric: tabular-nums;
}
.gauge-caption { font-size: 10px; color: var(--stylo-muted); }

/* Validated ordinal ramp: single hue, monotone light -> dark */
.gauge-step-1 { stroke: #dfa48e; }  .gauge-step-1.gauge-dot { background: #dfa48e; }
.gauge-step-2 { stroke: #cb7757; }  .gauge-step-2.gauge-dot { background: #cb7757; }
.gauge-step-3 { stroke: #ae4a2a; }  .gauge-step-3.gauge-dot { background: #ae4a2a; }
.gauge-step-4 { stroke: #75311d; }  .gauge-step-4.gauge-dot { background: #75311d; }

.gauge-legend { list-style: none; margin: 0; padding: 0; }
.gauge-key { display: flex; align-items: center; gap: 7px; padding: 2.5px 0; font-size: 11.5px; }
.gauge-dot { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.gauge-key-label { color: var(--stylo-body); flex: 1; }
.gauge-key-value { color: var(--stylo-muted); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
    .donut-seg, .gauge-seg, .lolli-stem, .lolli-dot, .radial-arc { transition: none !important; }
    .is-drawn .donut-wrap { animation: none; }
}

/* ── Spark columns: coupon redemptions ─────────────────────────── */
.chart-columns { margin: 10px 0 14px; }
.ccol-plot {
    position: relative; overflow: hidden;
    display: flex; align-items: stretch; gap: 5px;
    height: 62px; padding-bottom: 1px;
    border-bottom: 1px solid var(--stylo-border);   /* hairline baseline */
}
/* stretch + full-height slot: a percentage height only resolves against a
   parent with a definite height, otherwise every column collapses to zero */
.ccol-slot { flex: 1; height: 100%; display: flex; align-items: flex-end; max-width: 24px; }
.ccol-bar {
    width: 100%; height: 0;
    background: var(--stylo-accent); opacity: .42;
    border-radius: 4px 4px 0 0;                     /* rounded cap, square foot */
    transition: height .75s cubic-bezier(.22,.61,.36,1) var(--d, 0ms);
}
.ccol-bar.is-top { opacity: 1; }                    /* emphasis on the leader */
.is-drawn .ccol-bar { height: var(--h); }

/* Scan sweep — chrome, never an encoding */
.ccol-scan {
    position: absolute; top: 0; bottom: 0; width: 42%;
    background: linear-gradient(90deg, transparent, rgba(var(--stylo-accent-rgb), .13), transparent);
    transform: translateX(-120%);
    animation: ccol-sweep 3.4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes ccol-sweep {
    0%   { transform: translateX(-120%); }
    60%  { transform: translateX(280%); }
    100% { transform: translateX(280%); }
}

.ccol-foot {
    display: flex; justify-content: space-between; gap: 8px;
    font-size: 10.5px; color: var(--stylo-muted); margin-top: 6px;
}
.ccol-top { color: var(--stylo-body); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
    .ccol-scan { animation: none; }
    .ccol-bar { transition: none !important; }
}


/* ── Hub column balance ────────────────────────────────────────── */
/* A carousel card keeps its 3/4 crop, but widening the card must not drag the
   whole panel down with it — the height is capped so the rail stays level with
   the chart column beside it. */
/* An explicit height, not max-height: combined with aspect-ratio the browser
   derives the *width* from the capped height instead, which left the image
   sitting narrower than its card. */
.carousel .product-img-wrapper { aspect-ratio: auto; height: 268px; }
@media (max-width: 991px) { .carousel .product-img-wrapper { height: 232px; } }
@media (max-width: 575px) { .carousel .product-img-wrapper { height: 205px; } }

/* Both columns of a hub end at the same line: the rail panel fills its column,
   and the stacked charts opposite it grow to meet it. */
.hub .row > [class*="col-"]:not(.hub-col-stack) > .hub-panel { height: 100%; }
/* No height:100% here — on a flex item whose row height is auto it resolves to
   auto and cancels the stretch that makes the columns match. */
.hub-col-stack {
    display: flex; flex-direction: column; gap: 16px;
}
.hub-col-stack > .hub-panel { margin-bottom: 0; }
.hub-col-stack > .hub-panel:last-child { flex: 1; }
/* Distribute the spare space onto the chart rather than leaving a gap under it */
.hub-col-stack > .hub-panel:last-child .chart-lollipop { height: 100%; justify-content: space-between; }

/* Accessory tiles share a row, so they share a height. */
.hub-accessories .theme-tile { height: 100%; }


/* ── Header fit at the lg breakpoint ───────────────────────────── */
/* Between 992 and 1199px the logo, six departments, the search box and the
   action icons together exceed the viewport, which pushed the whole page into a
   horizontal scroll. The nav tightens and the search box is allowed to shrink
   instead of holding its 480px. */
@media (min-width: 992px) and (max-width: 1199px) {
    .nav-dept-link { padding: 14px 9px; font-size: 12px; }
    .stylo-logo { font-size: 23px; }
    .stylo-search-wrapper { max-width: 300px !important; margin-inline: .75rem !important; }
    /* the action group is the last thing to give — tighten it before the nav wraps */
    .zn-header-actions { gap: .6rem !important; }
    .stylo-header .zn-logo { margin-right: 1rem !important; }
}
@media (min-width: 992px) and (max-width: 1399px) {
    .stylo-search-wrapper { min-width: 0; }
}
.stylo-header .container-fluid > .d-flex { min-width: 0; }
.stylo-search-wrapper { min-width: 0; }
/* The nav is the only part that may absorb the squeeze; the logo and the action
   icons keep their size so the header never collapses onto two rows. */
.stylo-header #desktopNav { min-width: 0; flex-shrink: 1; }
.stylo-header .zn-logo,
.zn-header-actions { flex-shrink: 0; }

/* ── Smart Search pill ─────────────────────────────────────────────
   Icon + label. The label is hidden below md, sits on one line at md and
   at xl+, and stacks onto two lines in the 992–1199px window where the
   six departments and the action icons are competing for the same row. */
.zn-smart-btn {
    align-items: center;
    gap: 6px;
    line-height: 1.2;
    white-space: nowrap;
}
.zn-smart-btn > i { font-size: 15px; line-height: 1; }
.zn-smart-label > span { display: inline; }

@media (min-width: 992px) and (max-width: 1199.98px) {
    .zn-smart-btn {
        padding: 3px 12px !important;
        gap: 5px;
        font-size: 11.5px;
    }
    .zn-smart-btn > i { font-size: 14px; }
    /* two deliberate lines rather than width-dependent wrapping */
    .zn-smart-label { display: inline-flex; flex-direction: column; align-items: flex-start; }
    .zn-smart-label > span { display: block; line-height: 1.12; }
}

/* ═══════════════════════════════════════════════════════════════
   CATEGORICAL PALETTE
   Eight fixed slots, taken in order. Validated on the white surface:
   worst adjacent CVD ΔE 9.1, normal-vision ΔE 19.6. The three lighter
   hues sit under 3:1, so every chart using them ships direct labels.
   ═══════════════════════════════════════════════════════════════ */
.cat-slot-1 { --cat: #2a78d6; }
.cat-slot-2 { --cat: #eb6834; }
.cat-slot-3 { --cat: #1baf7a; }
.cat-slot-4 { --cat: #eda100; }
.cat-slot-5 { --cat: #e87ba4; }
.cat-slot-6 { --cat: #008300; }
.cat-slot-7 { --cat: #4a3aa7; }
.cat-slot-8 { --cat: #e34948; }

/* ── Categorical columns ───────────────────────────────────────── */
.chart-cat-cols { padding-top: 4px; }
.ccat-plot { display: flex; align-items: flex-end; gap: 8px; height: 190px; }
.ccat-slot {
    flex: 1; min-width: 0; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
}
.ccat-val {
    font-size: 10.5px; color: var(--stylo-muted);
    font-variant-numeric: tabular-nums; margin-bottom: 4px;
}
.ccat-bar {
    width: 100%; max-width: 24px; height: 0;
    background: var(--cat); border-radius: 4px 4px 0 0;
    transition: height .8s cubic-bezier(.22,.61,.36,1) var(--d, 0ms);
}
.is-drawn .ccat-bar { height: var(--h); }
.ccat-name {
    font-size: 10px; color: var(--stylo-body); margin-top: 7px;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Department cards: staggered entrance ──────────────────────── */
.dept-grid .dept-card {
    opacity: 0; transform: translateY(10px);
    transition: opacity .5s ease var(--d, 0ms), transform .5s cubic-bezier(.22,.61,.36,1) var(--d, 0ms),
                border-color .22s, box-shadow .22s;
}
.dept-grid.is-drawn .dept-card { opacity: 1; transform: translateY(0); }
.dept-grid.is-drawn .dept-card:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
    .tmap-tile, .ccat-bar, .dept-grid .dept-card { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   GUIDED SEARCH (advisor)
   ═══════════════════════════════════════════════════════════════ */
body.advisor-open { overflow: hidden; }

.advisor { position: fixed; inset: 0; z-index: 1080; display: flex;
           align-items: center; justify-content: center; padding: 20px; }
.advisor[hidden] { display: none; }
.advisor-scrim { position: absolute; inset: 0; background: rgba(20,16,14,.55);
                 backdrop-filter: blur(3px); animation: adv-fade .25s ease; }
@keyframes adv-fade { from { opacity: 0; } }

.advisor-panel {
    position: relative; width: 100%; max-width: 720px; max-height: 88vh;
    display: flex; flex-direction: column; overflow: hidden;
    background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    animation: adv-rise .35s cubic-bezier(.22,.61,.36,1);
}
@keyframes adv-rise { from { opacity: 0; transform: translateY(18px) scale(.98); } }

.advisor-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 16px; padding: 20px 22px 14px;
}
.advisor-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 800; letter-spacing: 1.3px;
    text-transform: uppercase; color: var(--stylo-accent);
}
.advisor-title {
    font-family: var(--stylo-serif); font-size: 22px; font-weight: 800;
    color: var(--stylo-dark); margin: 5px 0 0;
}
.advisor-x {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--stylo-border); background: #fff;
    color: var(--stylo-body); cursor: pointer; transition: all .2s;
}
.advisor-x:hover { background: var(--stylo-dark); color: #fff; border-color: var(--stylo-dark); }

.advisor-progress { display: flex; align-items: center; gap: 12px; padding: 0 22px 12px; }
.advisor-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--stylo-surface); overflow: hidden; }
.advisor-bar span { display: block; height: 100%; width: 0; border-radius: 2px;
                    background: var(--stylo-accent); transition: width .45s cubic-bezier(.22,.61,.36,1); }
.advisor-count { font-size: 11px; color: var(--stylo-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.advisor-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 22px 12px; }
.advisor-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; color: var(--stylo-body); cursor: pointer;
    background: var(--stylo-accent-light); border: 1px solid transparent;
    border-radius: 999px; padding: 5px 11px; transition: all .18s;
}
.advisor-chip:hover { border-color: var(--stylo-accent); color: var(--stylo-accent); }
.advisor-chip i { font-size: 10px; opacity: .6; }

.advisor-body { flex: 1; overflow-y: auto; padding: 4px 22px 22px; }
.advisor-loading { display: flex; align-items: center; gap: 10px;
                   color: var(--stylo-muted); font-size: 13px; padding: 28px 0; }
.advisor-spinner {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid var(--stylo-border); border-top-color: var(--stylo-accent);
    animation: adv-spin .7s linear infinite;
}
@keyframes adv-spin { to { transform: rotate(360deg); } }
.advisor-error { color: #b5342c; font-size: 13px; }

/* ── Question ──────────────────────────────────────────────────── */
.aq-title { font-size: 18px; font-weight: 700; color: var(--stylo-dark);
            margin: 8px 0 3px; display: flex; align-items: center; gap: 9px; }
.aq-title i { color: var(--stylo-accent); font-size: 17px; }
.aq-hint { font-size: 12.5px; color: var(--stylo-muted); margin: 0 0 16px; }

.aq-options { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
@media (max-width: 575px) { .aq-options { grid-template-columns: 1fr; } }
.aq-option {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 13px 15px; text-align: left; cursor: pointer;
    background: #fff; border: 1px solid var(--stylo-border);
    border-radius: var(--radius-md); transition: all .18s;
    opacity: 0; transform: translateY(6px);
    animation: adv-opt .32s cubic-bezier(.22,.61,.36,1) var(--d, 0ms) forwards;
}
@keyframes adv-opt { to { opacity: 1; transform: translateY(0); } }
.aq-option:hover {
    border-color: var(--stylo-accent); background: var(--stylo-accent-light);
    transform: translateY(-1px);
}
.aq-label { font-size: 13.5px; font-weight: 600; color: var(--stylo-dark); }
.aq-count { font-size: 11px; color: var(--stylo-muted); font-variant-numeric: tabular-nums; }

.aq-skip {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
    background: none; border: 0; cursor: pointer;
    font-size: 12.5px; color: var(--stylo-muted); transition: color .18s;
}
.aq-skip:hover { color: var(--stylo-accent); }

/* ── Result ────────────────────────────────────────────────────── */
.ar-head { margin: 6px 0 14px; }
.ar-title { font-family: var(--stylo-serif); font-size: 20px; font-weight: 800;
            color: var(--stylo-dark); margin: 0 0 3px; }
.ar-sub { font-size: 12.5px; color: var(--stylo-muted); margin: 0; }

.ar-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    background: var(--stylo-border); border: 1px solid var(--stylo-border);
    border-radius: var(--radius-md); overflow: hidden; margin-bottom: 16px;
}
@media (max-width: 575px) { .ar-stats { grid-template-columns: repeat(2, 1fr); } }
.ar-stat { background: #fff; padding: 11px 13px; display: flex; flex-direction: column; gap: 2px; }
.ar-stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--stylo-muted); }
.ar-stat-value { font-size: 14px; font-weight: 700; color: var(--stylo-dark);
                 font-variant-numeric: tabular-nums; }

.ar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 767px) { .ar-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 479px) { .ar-grid { grid-template-columns: repeat(2, 1fr); } }
.ar-card { display: flex; flex-direction: column; gap: 2px; text-decoration: none;
           border: 1px solid var(--stylo-border); border-radius: var(--radius-md);
           overflow: hidden; padding-bottom: 9px; transition: all .2s; }
.ar-card:hover { border-color: var(--stylo-accent); box-shadow: var(--shadow-sm); }
.ar-card-img { display: block; aspect-ratio: 1/1; background-size: cover;
               background-position: center; background-color: var(--stylo-surface); margin-bottom: 7px; }
.ar-card-brand { font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px;
                 color: var(--stylo-accent); font-weight: 700; padding: 0 9px; }
.ar-card-name { font-size: 11.5px; color: var(--stylo-dark); line-height: 1.35; padding: 0 9px;
                display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ar-card-price { font-size: 12px; font-weight: 700; color: var(--stylo-dark); padding: 3px 9px 0; }
.ar-card-price s { font-weight: 400; color: var(--stylo-muted); font-size: 10.5px; }
.ar-card-price b { color: #b5342c; font-size: 10.5px; }

.ar-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

@media (prefers-reduced-motion: reduce) {
    .advisor-panel, .advisor-scrim, .aq-option { animation: none !important; opacity: 1; transform: none; }
}

.ar-handoff {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; color: var(--stylo-muted); margin: 4px 0 0;
}

/* ═══════════════════════════════════════════════════════════════
   LISTING GRID
   ═══════════════════════════════════════════════════════════════ */

/* Listing pages run full-bleed, which on an ultra-wide monitor kept stretching
   the cards instead of the gutters. */
.container-fluid.px-lg-4 { max-width: 1760px; margin-inline: auto; }

/* A wider card multiplies its own height through the 3/4 crop — at 355px the
   image alone ran past 470px and barely one row fit on screen. The crop is kept
   but the height is capped, exactly as the carousels do.
   Scoped to grid columns so carousel cards keep their own sizing. */
[class*="col-"] > .product-card .product-img-wrapper { aspect-ratio: auto; height: 300px; }
@media (min-width: 1200px) { [class*="col-"] > .product-card .product-img-wrapper { height: 340px; } }
@media (min-width: 1400px) { [class*="col-"] > .product-card .product-img-wrapper { height: 380px; } }
@media (max-width: 767px)  { [class*="col-"] > .product-card .product-img-wrapper { height: 230px; } }

/* ═══════════════════════════════════════════════════════════════
   SEARCH SUGGESTIONS
   ═══════════════════════════════════════════════════════════════ */
.sg-panel {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1090;
    background: #fff; border: 1px solid var(--stylo-border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
    max-height: 420px; overflow-y: auto; padding: 6px 0;
    text-align: left;
    animation: sg-in .16s ease;
}
@keyframes sg-in { from { opacity: 0; transform: translateY(-4px); } }
.sg-panel[hidden] { display: none; }

.sg-head {
    padding: 8px 14px 5px; font-size: 10px; font-weight: 800;
    letter-spacing: 1px; text-transform: uppercase; color: var(--stylo-muted);
}
.sg-head-sep { border-top: 1px solid var(--stylo-border); margin-top: 5px; padding-top: 10px; }

.sg-correct {
    padding: 10px 14px; font-size: 13px; color: var(--stylo-body);
    background: var(--stylo-accent-light); border-bottom: 1px solid var(--stylo-border);
}
.sg-correct b { color: var(--stylo-accent); }

.sg-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px; text-decoration: none; color: var(--stylo-dark);
    font-size: 13.5px; transition: background .12s;
}
.sg-item i { color: var(--stylo-muted); font-size: 14px; width: 16px; }
.sg-term { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-term b { color: var(--stylo-accent); font-weight: 700; }
.sg-count { font-size: 11px; color: var(--stylo-muted); font-variant-numeric: tabular-nums; }
.sg-item:hover, .sg-item.is-active { background: var(--stylo-surface); }

.sg-product {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 14px; text-decoration: none; transition: background .12s;
}
.sg-product:hover, .sg-product.is-active { background: var(--stylo-surface); }
.sg-thumb {
    width: 40px; height: 48px; flex-shrink: 0; border-radius: 4px;
    background-size: cover; background-position: center; background-color: var(--stylo-surface);
}
.sg-pmeta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sg-pbrand { font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px;
             color: var(--stylo-accent); font-weight: 700; }
.sg-pname { font-size: 12px; color: var(--stylo-dark); overflow: hidden;
            text-overflow: ellipsis; white-space: nowrap; }
.sg-price { font-size: 12px; font-weight: 700; color: var(--stylo-dark); }

@media (prefers-reduced-motion: reduce) { .sg-panel { animation: none; } }

/* Suggestion row: the term hands off to guided search, the arrow goes straight
   to results. */
.sg-row { display: flex; align-items: stretch; }
.sg-row .sg-item { flex: 1; min-width: 0; }
.sg-go {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; font-weight: 700; letter-spacing: .4px;
    text-transform: uppercase; color: var(--stylo-accent);
    background: var(--stylo-accent-light); border-radius: 999px;
    padding: 3px 9px; opacity: 0; transition: opacity .15s;
}
.sg-row:hover .sg-go, .sg-item.is-active .sg-go { opacity: 1; }
.sg-direct {
    display: flex; align-items: center; justify-content: center;
    width: 38px; flex-shrink: 0; color: var(--stylo-muted);
    text-decoration: none; transition: all .15s;
}
.sg-direct:hover { color: var(--stylo-accent); background: var(--stylo-surface); }

/* type=search adds a browser clear button that sits over our own UI */
.hero-search-input::-webkit-search-decoration,
.hero-search-input::-webkit-search-cancel-button,
.stylo-search-input::-webkit-search-decoration,
.stylo-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* ── Guided search: multi-select answers ───────────────────────── */
.aq-option { position: relative; padding-left: 42px; }
.aq-check {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; border-radius: 5px;
    border: 1.5px solid var(--stylo-border); background: #fff;
    display: flex; align-items: center; justify-content: center;
    transition: all .16s;
}
.aq-check i { font-size: 12px; color: #fff; opacity: 0; transform: scale(.6); transition: all .16s; }
.aq-option.is-on { border-color: var(--stylo-accent); background: var(--stylo-accent-light); }
.aq-option.is-on .aq-check { border-color: var(--stylo-accent); background: var(--stylo-accent); }
.aq-option.is-on .aq-check i { opacity: 1; transform: scale(1); }
.aq-option.is-on .aq-label { color: var(--stylo-accent); }

.aq-confirm {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
    background: var(--stylo-accent); color: #fff; border: 0;
    border-radius: 999px; padding: 11px 22px; cursor: pointer;
    font-size: 13.5px; font-weight: 700; transition: background .18s, opacity .18s;
}
.aq-confirm:hover:not(:disabled) { background: var(--stylo-accent-hover); }
.aq-confirm:disabled { opacity: .4; cursor: not-allowed; }
.aq-skip { margin-left: 14px; }

/* ═══════════════════════════════════════════════════════════════
   STATIC PAGES + ACCOUNT
   Same tokens as the rest of the site; the fade-in reuses the
   scroll observer the charts already use.
   ═══════════════════════════════════════════════════════════════ */
.page-hero {
    background: linear-gradient(135deg, var(--stylo-surface) 0%, #f0ebe4 55%, var(--stylo-accent-light) 100%);
    padding: 44px 0 38px;
    border-bottom: 1px solid var(--stylo-border);
}
.page-crumbs { display: flex; gap: 8px; font-size: 12px; color: var(--stylo-muted); margin-bottom: 12px; }
.page-crumbs a { color: var(--stylo-accent); text-decoration: none; }
.page-crumbs a:hover { text-decoration: underline; }
.page-title {
    font-family: var(--stylo-serif); font-weight: 900;
    font-size: clamp(28px, 4vw, 42px); color: var(--stylo-dark); margin: 0 0 8px;
}
.page-lead { font-size: 15px; color: var(--stylo-body); max-width: 62ch; margin: 0; }

.page-body {
    opacity: 0; transform: translateY(12px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
}
.page-body.is-drawn { opacity: 1; transform: none; }
.page-body h2 {
    font-family: var(--stylo-serif); font-size: 21px; font-weight: 800;
    color: var(--stylo-dark); margin: 30px 0 10px; padding-top: 22px;
    border-top: 1px solid var(--stylo-border);
}
.page-body h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.page-body p  { font-size: 14.5px; line-height: 1.75; color: var(--stylo-body); margin: 0 0 14px; }
.page-body ul { margin: 0 0 16px; padding-left: 20px; }
.page-body li { font-size: 14.5px; line-height: 1.7; color: var(--stylo-body); margin-bottom: 8px; }
.page-body a  { color: var(--stylo-accent); text-decoration: none; border-bottom: 1px solid transparent; }
.page-body a:hover { border-bottom-color: var(--stylo-accent); }
.page-body em { color: var(--stylo-muted); font-size: 13px; }
.page-body strong { color: var(--stylo-dark); }

.page-aside {
    position: sticky; top: 90px;
    background: #fff; border: 1px solid var(--stylo-border);
    border-radius: var(--radius-lg); padding: 18px;
}
.page-links { display: flex; flex-direction: column; margin-top: 10px; }
.page-links a {
    display: flex; justify-content: space-between; align-items: center;
    padding: 9px 10px; border-radius: var(--radius-sm);
    font-size: 13px; color: var(--stylo-body); text-decoration: none;
    transition: all .16s;
}
.page-links a i { font-size: 11px; opacity: 0; transition: all .16s; }
.page-links a:hover { background: var(--stylo-surface); color: var(--stylo-accent); }
.page-links a:hover i { opacity: 1; transform: translateX(2px); }
.page-links a.is-current { background: var(--stylo-accent-light); color: var(--stylo-accent); font-weight: 600; }

.sitemap-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px; margin: 18px 0 26px;
}
.sitemap-card {
    display: flex; flex-direction: column; gap: 2px; padding: 13px 15px;
    border: 1px solid var(--stylo-border); border-radius: var(--radius-md);
    text-decoration: none; transition: all .2s;
}
.sitemap-card:hover { border-color: var(--stylo-accent); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.sitemap-name  { font-size: 13.5px; font-weight: 700; color: var(--stylo-dark); }
.sitemap-count { font-size: 11px; color: var(--stylo-muted); }

/* ── Empty state ───────────────────────────────────────────────── */
.empty-state {
    text-align: center; padding: 60px 20px; max-width: 460px; margin: 0 auto;
    opacity: 0; transform: translateY(12px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
}
.empty-state.is-drawn { opacity: 1; transform: none; }
.empty-state > i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 76px; height: 76px; border-radius: 50%;
    background: var(--stylo-accent-light); color: var(--stylo-accent);
    font-size: 32px; margin-bottom: 18px;
}
.empty-state h2 { font-family: var(--stylo-serif); font-size: 24px; font-weight: 800; color: var(--stylo-dark); }
.empty-state p  { font-size: 14px; color: var(--stylo-muted); line-height: 1.7; }
.empty-actions  { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; }

/* ── Account cards ─────────────────────────────────────────────── */
.acct-card {
    display: flex; flex-direction: column; gap: 3px; height: 100%;
    background: #fff; border: 1px solid var(--stylo-border);
    border-radius: var(--radius-lg); padding: 20px;
    opacity: 0; transform: translateY(10px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1), border-color .2s;
}
.acct-card.is-drawn { opacity: 1; transform: none; }
.acct-card:hover { border-color: var(--stylo-accent); }
.acct-icon {
    width: 42px; height: 42px; border-radius: 50%; margin-bottom: 8px;
    display: flex; align-items: center; justify-content: center;
    background: var(--stylo-accent-light); color: var(--stylo-accent); font-size: 18px;
}
.acct-value { font-family: var(--stylo-serif); font-size: 30px; font-weight: 800; color: var(--stylo-dark); line-height: 1.1; }
.acct-label { font-size: 13.5px; font-weight: 700; color: var(--stylo-dark); }
.acct-sub { font-size: 11.5px; color: var(--stylo-muted); }

/* Clickable metric card (whole card is a link into its page) */
.acct-card--link { position: relative; text-decoration: none; cursor: pointer;
    box-shadow: 0 1px 2px rgba(17,17,17,.03); }
.acct-card--link:hover { border-color: var(--stylo-accent);
    transform: translateY(-3px); box-shadow: 0 14px 30px -16px rgba(var(--stylo-accent-rgb), .5); }
.acct-card--link .acct-icon { transition: background .2s, color .2s; }
.acct-card--link:hover .acct-icon { background: var(--stylo-accent); color: #fff; }
.acct-arrow { position: absolute; top: 16px; right: 16px; width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center; border-radius: 50%;
    background: var(--stylo-surface); color: var(--stylo-muted); font-size: 12px;
    transition: background .2s, color .2s, transform .2s; }
.acct-card--link:hover .acct-arrow { background: var(--stylo-accent-light); color: var(--stylo-accent); transform: translate(2px, -2px); }

/* Alerts & Reminders hub banner — the primary call to action */
.acct-cta { display: flex; align-items: center; gap: 18px; text-decoration: none;
    background: linear-gradient(135deg, var(--stylo-accent), var(--stylo-accent-hover));
    border-radius: var(--radius-lg); padding: 22px 24px; color: #fff;
    box-shadow: 0 16px 40px -20px rgba(var(--stylo-accent-rgb), .8);
    opacity: 0; transform: translateY(10px);
    transition: opacity .5s ease, transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .25s; }
.acct-cta.is-drawn { opacity: 1; transform: none; }
.acct-cta:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 22px 50px -20px rgba(var(--stylo-accent-rgb), .95); }
.acct-cta-ic { flex: none; width: 56px; height: 56px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center; font-size: 24px;
    background: rgba(255,255,255,.18); color: #fff; }
.acct-cta-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.acct-cta-title { font-family: var(--stylo-serif); font-weight: 800; font-size: 21px; line-height: 1.1; }
.acct-cta-sub { font-size: 13.5px; color: rgba(255,255,255,.9); line-height: 1.5; }
.acct-cta-sub strong { color: #fff; }
.acct-cta-btn { flex: none; display: inline-flex; align-items: center; gap: 6px;
    background: #fff; color: var(--stylo-accent); font-weight: 800; font-size: 14px;
    padding: 11px 20px; border-radius: 999px; transition: gap .18s, transform .18s; }
.acct-cta:hover .acct-cta-btn { gap: 10px; }

/* Quick actions */
.acct-actions { display: flex; flex-wrap: wrap; gap: 10px;
    opacity: 0; transform: translateY(10px);
    transition: opacity .5s ease .05s, transform .5s cubic-bezier(.22,.61,.36,1) .05s; }
.acct-actions.is-drawn { opacity: 1; transform: none; }
.acct-action { display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
    background: #fff; border: 1.5px solid var(--stylo-border); border-radius: 999px;
    padding: 10px 18px; font-size: 13.5px; font-weight: 700; color: var(--stylo-dark);
    transition: border-color .18s, color .18s, background .18s, transform .12s; }
.acct-action i { color: var(--stylo-accent); }
.acct-action:hover { border-color: var(--stylo-accent); background: var(--stylo-accent-light); transform: translateY(-1px); }
.acct-link {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 10px;
    font-size: 12.5px; font-weight: 700; color: var(--stylo-accent); text-decoration: none;
}
.acct-link:hover { gap: 8px; }

.acct-note {
    background: var(--stylo-surface); border: 1px solid var(--stylo-border);
    border-radius: var(--radius-lg); padding: 22px;
    opacity: 0; transform: translateY(10px);
    transition: opacity .5s ease .1s, transform .5s cubic-bezier(.22,.61,.36,1) .1s;
}
.acct-note.is-drawn { opacity: 1; transform: none; }
.acct-note h3 { font-size: 16px; font-weight: 800; color: var(--stylo-dark);
                display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.acct-note h3 i { color: var(--stylo-accent); }
.acct-note p  { font-size: 13.5px; color: var(--stylo-body); line-height: 1.7; margin: 0 0 10px; max-width: 70ch; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
    .page-body, .empty-state, .acct-card, .acct-note { transition: none !important; opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   INDIVIDUAL PAGES
   Each page has its own furniture; the tokens stay the site's.
   ═══════════════════════════════════════════════════════════════ */

/* ── About ─────────────────────────────────────────────────────── */
.ab-hero {
    background: linear-gradient(135deg, var(--stylo-surface) 0%, #f0ebe4 55%, var(--stylo-accent-light) 100%);
    padding: 62px 0 54px; text-align: center;
}
.ab-headline {
    font-family: var(--stylo-serif); font-weight: 900; line-height: 1.15;
    font-size: clamp(30px, 5vw, 52px); color: var(--stylo-dark); margin: 14px 0 16px;
}
.ab-sub { font-size: 16px; line-height: 1.7; color: var(--stylo-body); max-width: 62ch; margin: 0 auto; }
.ab-h2 { font-family: var(--stylo-serif); font-size: clamp(21px,2.6vw,28px); font-weight: 800;
         color: var(--stylo-dark); margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
.ab-h2 i { color: var(--stylo-accent); }
.ab-p { font-size: 14.5px; line-height: 1.78; color: var(--stylo-body); margin: 0 0 14px; }
.ab-strong { color: var(--stylo-dark); font-weight: 600; }

.ab-figures { border-bottom: 1px solid var(--stylo-border); }
.ab-figure {
    text-align: center; padding: 22px 14px; height: 100%;
    border: 1px solid var(--stylo-border); border-radius: var(--radius-lg);
    opacity: 0; transform: translateY(10px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
}
.ab-figure.is-drawn { opacity: 1; transform: none; }
.ab-figure i { color: var(--stylo-accent); font-size: 20px; }
.ab-figure-value { display: block; font-family: var(--stylo-serif); font-size: 28px;
                   font-weight: 800; color: var(--stylo-dark); margin: 6px 0 2px; }
.ab-figure-label { font-size: 12px; color: var(--stylo-muted); }

.ab-steps { display: flex; flex-direction: column; gap: 14px; }
.ab-step {
    display: flex; gap: 16px; padding: 20px;
    background: #fff; border: 1px solid var(--stylo-border); border-radius: var(--radius-lg);
    opacity: 0; transform: translateX(12px);
    transition: opacity .5s ease var(--d,0ms), transform .5s cubic-bezier(.22,.61,.36,1) var(--d,0ms);
}
.ab-step.is-drawn { opacity: 1; transform: none; }
.ab-step-num {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--stylo-accent); color: #fff; font-weight: 800; font-size: 14px;
}
.ab-step h3 { font-size: 15px; font-weight: 700; color: var(--stylo-dark); margin: 4px 0 6px;
              display: flex; align-items: center; gap: 8px; }
.ab-step h3 i { color: var(--stylo-accent); }
.ab-step p { font-size: 13.5px; line-height: 1.7; color: var(--stylo-body); margin: 0; }

.ab-money { background: var(--stylo-surface); }
.ab-money-card {
    background: #fff; border: 1px solid var(--stylo-border); border-radius: var(--radius-lg);
    padding: 30px; max-width: 78ch; margin: 0 auto;
    opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease;
}
.ab-money-card.is-drawn { opacity: 1; transform: none; }
.ab-cta { border-top: 1px solid var(--stylo-border); }

/* ── Contact ───────────────────────────────────────────────────── */
.ct-form, .ct-side {
    opacity: 0; transform: translateY(10px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
}
.ct-form.is-drawn, .ct-side.is-drawn { opacity: 1; transform: none; }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 575px) { .ct-row { grid-template-columns: 1fr; } }
.ct-field { display: block; margin-bottom: 16px; }
.ct-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--stylo-dark); margin-bottom: 6px; }
.ct-label em { color: var(--stylo-accent); font-style: normal; }
.ct-field input, .ct-field textarea {
    width: 100%; padding: 12px 14px; font-size: 14px; color: var(--stylo-dark);
    background: #fff; border: 1px solid var(--stylo-border); border-radius: var(--radius-md);
    font-family: inherit; transition: border-color .16s, box-shadow .16s;
}
.ct-field input:focus, .ct-field textarea:focus {
    outline: none; border-color: var(--stylo-accent);
    box-shadow: 0 0 0 3px rgba(var(--stylo-accent-rgb), .12);
}
.ct-field textarea { resize: vertical; min-height: 130px; }

.ct-topics { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 8px; margin: 6px 0 18px; }
.ct-topic input { position: absolute; opacity: 0; pointer-events: none; }
.ct-topic-box {
    display: flex; flex-direction: column; gap: 2px; height: 100%;
    padding: 12px; cursor: pointer;
    border: 1px solid var(--stylo-border); border-radius: var(--radius-md);
    transition: all .16s;
}
.ct-topic-box i { color: var(--stylo-muted); font-size: 15px; margin-bottom: 3px; }
.ct-topic-title { font-size: 13px; font-weight: 700; color: var(--stylo-dark); }
.ct-topic-note  { font-size: 11px; color: var(--stylo-muted); line-height: 1.4; }
.ct-topic input:checked + .ct-topic-box {
    border-color: var(--stylo-accent); background: var(--stylo-accent-light);
}
.ct-topic input:checked + .ct-topic-box i,
.ct-topic input:checked + .ct-topic-box .ct-topic-title { color: var(--stylo-accent); }
.ct-topic input:focus-visible + .ct-topic-box { box-shadow: 0 0 0 3px rgba(var(--stylo-accent-rgb), .18); }

.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ct-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 6px; }
.ct-note { font-size: 12px; color: var(--stylo-muted); }

.ct-sent, .ct-errors {
    display: flex; gap: 14px; padding: 16px 18px; border-radius: var(--radius-md); margin-bottom: 20px;
}
.ct-sent { background: #eaf6ee; border: 1px solid #bfe3cc; }
.ct-sent i { color: #2e7d32; font-size: 22px; }
.ct-sent h3 { font-size: 15px; font-weight: 700; color: #1e5b23; margin: 0 0 3px; }
.ct-sent p  { font-size: 13px; color: #2f6b35; margin: 0; }
.ct-errors { background: #fdecea; border: 1px solid #f4c7c3; color: #a3312a; }
.ct-errors i { font-size: 18px; }
.ct-errors ul { margin: 0; padding-left: 18px; font-size: 13px; }

.ct-side { background: #fff; border: 1px solid var(--stylo-border);
           border-radius: var(--radius-lg); padding: 22px; }
.ct-side-title { font-family: var(--stylo-serif); font-size: 18px; font-weight: 800;
                 color: var(--stylo-dark); margin: 0 0 14px; }
.ct-channel { display: flex; gap: 12px; padding: 12px; border-radius: var(--radius-md);
              text-decoration: none; transition: background .16s; }
.ct-channel:hover { background: var(--stylo-surface); }
.ct-channel-icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
                   display: flex; align-items: center; justify-content: center;
                   background: var(--stylo-accent-light); color: var(--stylo-accent); font-size: 15px; }
.ct-channel-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ct-channel-title { font-size: 13px; font-weight: 700; color: var(--stylo-dark); }
.ct-channel-mail  { font-size: 12px; color: var(--stylo-accent); }
.ct-channel-note  { font-size: 11.5px; color: var(--stylo-muted); line-height: 1.5; }

.ct-warning { display: flex; gap: 12px; margin-top: 16px; padding: 14px;
              background: var(--stylo-surface); border-radius: var(--radius-md); }
.ct-warning i { color: var(--stylo-accent); font-size: 16px; }
.ct-warning strong { display: block; font-size: 12.5px; color: var(--stylo-dark); margin-bottom: 3px; }
.ct-warning p { font-size: 12px; color: var(--stylo-muted); line-height: 1.6; margin: 0; }

/* ── FAQ ───────────────────────────────────────────────────────── */
.faq-group { font-family: var(--stylo-serif); font-size: 20px; font-weight: 800;
             color: var(--stylo-dark); margin: 26px 0 12px; scroll-margin-top: 90px; }
.faq-group:first-child { margin-top: 0; }
.faq-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px;
            opacity: 0; transform: translateY(8px);
            transition: opacity .5s ease, transform .5s ease; }
.faq-list.is-drawn { opacity: 1; transform: none; }
.faq-item { background: #fff; border: 1px solid var(--stylo-border); border-radius: var(--radius-md); }
.faq-item summary {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    padding: 15px 18px; cursor: pointer; list-style: none;
    font-size: 14px; font-weight: 600; color: var(--stylo-dark);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i { color: var(--stylo-accent); font-size: 14px; transition: transform .2s; }
.faq-item[open] summary i { transform: rotate(45deg); }
.faq-item[open] { border-color: var(--stylo-accent); }
.faq-item p { padding: 0 18px 16px; margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--stylo-body); }
.faq-cta { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--stylo-border); }
.faq-cta p { font-size: 12.5px; color: var(--stylo-muted); margin: 0 0 8px; }

/* ── Legal ─────────────────────────────────────────────────────── */
.legal-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 10px;
               font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
               color: var(--stylo-accent); background: #fff; border: 1px solid var(--stylo-border);
               padding: 5px 12px; border-radius: 999px; margin-bottom: 12px; }
.legal-updated { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
                 font-size: 12px; color: var(--stylo-muted); }
.legal-body h2 { scroll-margin-top: 90px; }
.legal-foot { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; padding-top: 20px;
              border-top: 1px solid var(--stylo-border); }
.legal-foot a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
                font-weight: 600; color: var(--stylo-accent); text-decoration: none; }
.legal-foot a:hover { gap: 9px; }

/* ── Careers / Press / Advertise ───────────────────────────────── */
.cr-card, .adv-card {
    height: 100%; padding: 24px; background: #fff;
    border: 1px solid var(--stylo-border); border-radius: var(--radius-lg);
    opacity: 0; transform: translateY(10px);
    transition: opacity .5s ease var(--d,0ms), transform .5s cubic-bezier(.22,.61,.36,1) var(--d,0ms), border-color .2s;
}
.cr-card.is-drawn, .adv-card.is-drawn { opacity: 1; transform: none; }
.cr-card:hover, .adv-card:hover { border-color: var(--stylo-accent); }
.cr-icon, .adv-icon { display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%; margin-bottom: 14px;
    background: var(--stylo-accent-light); color: var(--stylo-accent); font-size: 19px; }
.cr-card h3, .adv-card h3 { font-size: 16px; font-weight: 700; color: var(--stylo-dark); margin: 0 0 8px; }
.cr-card p, .adv-card p { font-size: 13.5px; line-height: 1.7; color: var(--stylo-body); margin: 0; }
.adv-price { display: inline-block; margin-top: 14px; font-size: 12px; font-weight: 700;
             color: var(--stylo-accent); background: var(--stylo-accent-light);
             padding: 5px 12px; border-radius: 999px; }

.cr-empty { display: flex; gap: 16px; padding: 26px; background: var(--stylo-surface);
            border: 1px dashed var(--stylo-border); border-radius: var(--radius-lg);
            opacity: 0; transition: opacity .5s ease; }
.cr-empty.is-drawn { opacity: 1; }
.cr-empty > i { color: var(--stylo-accent); font-size: 26px; }
.cr-empty h3 { font-size: 16px; font-weight: 700; color: var(--stylo-dark); margin: 0 0 6px; }
.cr-empty p  { font-size: 13.5px; line-height: 1.7; color: var(--stylo-body); margin: 0; }
.cr-empty a  { color: var(--stylo-accent); }

.pr-quote { margin: 0 0 26px; padding: 20px 24px; font-size: 16px; line-height: 1.7;
            color: var(--stylo-dark); background: var(--stylo-accent-light);
            border-left: 3px solid var(--stylo-accent); border-radius: 0 var(--radius-md) var(--radius-md) 0;
            opacity: 0; transition: opacity .5s ease; }
.pr-quote.is-drawn { opacity: 1; }
.pr-facts { background: #fff; border: 1px solid var(--stylo-border);
            border-radius: var(--radius-lg); padding: 20px;
            opacity: 0; transition: opacity .5s ease; }
.pr-facts.is-drawn { opacity: 1; }
.pr-fact { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0;
           border-bottom: 1px solid var(--stylo-border); font-size: 13px; }
.pr-fact:last-child { border-bottom: 0; }
.pr-fact span { color: var(--stylo-muted); }
.pr-fact strong { color: var(--stylo-dark); text-align: right; }

.adv-promise { margin-top: 30px; padding: 26px; background: var(--stylo-dark);
               border-radius: var(--radius-lg); opacity: 0; transition: opacity .5s ease; }
.adv-promise.is-drawn { opacity: 1; }
.adv-promise h2 { display: flex; align-items: center; gap: 10px; font-family: var(--stylo-serif);
                  font-size: 20px; font-weight: 800; color: #fff; margin: 0 0 10px; }
.adv-promise h2 i { color: var(--stylo-accent); }
.adv-promise p { font-size: 14px; line-height: 1.75; color: rgba(255,255,255,.75); margin: 0; max-width: 78ch; }

/* ── Sitemap groups ────────────────────────────────────────────── */
.sm-group { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
.sm-group.is-drawn { opacity: 1; transform: none; }
.sm-group h3 { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px;
               color: var(--stylo-accent); margin: 0 0 10px; }
.sm-group ul { list-style: none; margin: 0; padding: 0; }
.sm-group li { margin-bottom: 2px; }
.sm-group a { display: flex; justify-content: space-between; align-items: center;
              padding: 7px 9px; border-radius: var(--radius-sm);
              font-size: 13px; color: var(--stylo-body); text-decoration: none; transition: all .16s; }
.sm-group a i { font-size: 11px; opacity: 0; transition: all .16s; }
.sm-group a:hover { background: var(--stylo-surface); color: var(--stylo-accent); }
.sm-group a:hover i { opacity: 1; transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
    .ab-figure, .ab-step, .ab-money-card, .ct-form, .ct-side, .faq-list,
    .cr-card, .adv-card, .cr-empty, .pr-quote, .pr-facts, .adv-promise, .sm-group {
        transition: none !important; opacity: 1; transform: none;
    }
}

/* ── Product gallery ───────────────────────────────────────────── */
.pg-main {
    position: relative; display: flex; align-items: center; justify-content: center;
    background: var(--stylo-surface); border-radius: var(--radius-lg);
    overflow: hidden; aspect-ratio: 4/5; margin-bottom: 12px;
}
.pg-main img { width: 100%; height: 100%; object-fit: cover; }
.pg-badge {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    background: #b5342c; color: #fff; font-size: 12px; font-weight: 700;
    padding: 5px 12px; border-radius: 999px;
}
.pg-thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.pg-thumb {
    flex: 0 0 76px; height: 90px; padding: 0; overflow: hidden; cursor: pointer;
    background: var(--stylo-surface); border: 2px solid transparent;
    border-radius: var(--radius-md); transition: border-color .18s;
}
.pg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-thumb:hover { border-color: var(--stylo-border); }
.pg-thumb.is-active { border-color: var(--stylo-accent); }

/* ── Save / Share ──────────────────────────────────────────────── */
.pd-save.is-saved {
    background: var(--stylo-accent); border-color: var(--stylo-accent); color: #fff;
}
.pd-save.is-saved:hover { background: var(--stylo-accent-hover); border-color: var(--stylo-accent-hover); }
.pd-save:disabled { opacity: .6; }

.pd-toast {
    position: fixed; left: 50%; bottom: 28px; z-index: 1100;
    transform: translate(-50%, 14px); opacity: 0;
    background: var(--stylo-dark); color: #fff;
    font-size: 13.5px; padding: 12px 20px; border-radius: 999px;
    box-shadow: var(--shadow-lg); transition: opacity .28s, transform .28s;
    pointer-events: none;
}
.pd-toast.is-in { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .pd-toast { transition: none; } }

/* ── Newsletter ────────────────────────────────────────────────── */
.nl-form { display: flex; gap: 10px; }
.nl-field { position: relative; flex: 1; min-width: 0; }
.nl-field i {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    color: var(--stylo-muted); font-size: 15px; pointer-events: none; transition: color .18s;
}
.nl-field input {
    width: 100%; padding: 13px 16px 13px 42px;
    font-size: 14px; color: var(--stylo-dark);
    background: #fff; border: 2px solid transparent; border-radius: 999px;
    transition: border-color .18s, box-shadow .18s;
}
.nl-field input::placeholder { color: #9a958d; }
.nl-field input:focus {
    outline: none; border-color: var(--stylo-accent);
    box-shadow: 0 0 0 4px rgba(var(--stylo-accent-rgb), .22);
}
.nl-form:focus-within .nl-field i { color: var(--stylo-accent); }

.nl-btn {
    position: relative; flex-shrink: 0; min-width: 132px;
    background: var(--stylo-accent); color: #fff; border: 0; border-radius: 999px;
    padding: 13px 26px; font-size: 14px; font-weight: 700; cursor: pointer;
    transition: background .2s, transform .12s;
}
.nl-btn:hover:not(:disabled) { background: var(--stylo-accent-hover); }
.nl-btn:active:not(:disabled) { transform: scale(.97); }
.nl-btn:disabled { cursor: default; }
.nl-btn-spin, .nl-btn-tick {
    position: absolute; inset: 0; display: none;
    align-items: center; justify-content: center;
}
.nl-btn-spin::after {
    content: ''; width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
    animation: adv-spin .7s linear infinite;
}
.is-busy .nl-btn-label { visibility: hidden; }
.is-busy .nl-btn-spin  { display: flex; }
.is-done .nl-btn-label { visibility: hidden; }
.is-done .nl-btn-tick  { display: flex; font-size: 18px; }
.is-done .nl-btn { background: #2e7d32; }

/* a wrong address shakes rather than silently doing nothing */
.nl-form.is-invalid .nl-field input { border-color: #e05a4f; }
.nl-form.is-invalid { animation: nl-shake .38s; }
@keyframes nl-shake {
    0%,100% { transform: translateX(0); }
    25%     { transform: translateX(-6px); }
    75%     { transform: translateX(6px); }
}
.nl-note { margin: 8px 0 0; font-size: 11.5px; color: rgba(255,255,255,.45); }
@media (max-width: 575px) {
    .nl-form { flex-direction: column; }
    .nl-btn { min-width: 0; }
}

/* toast gains an icon and an error variant */
.pd-toast { display: flex; align-items: center; gap: 9px; }
.pd-toast i { font-size: 15px; color: #7bd88f; }
.pd-toast.is-error i { color: #ff8a80; }


/* Hero: tighter vertical rhythm so the page starts sooner */
.stylo-hero .hero-search-form + div { margin-top: .6rem !important; }
.stylo-hero .btn-lg { margin-top: 1rem !important; padding-top: .6rem; padding-bottom: .6rem; }
.hero-search-input { padding: 11px 18px; font-size: 15px; }


/* ═══════════════════════════════════════════════════════════════
   HERO SEARCH — motion
   Subtle and purposeful: the halo says "start here", the caret
   says the placeholder is being typed, and focus confirms itself.
   ═══════════════════════════════════════════════════════════════ */
.hero-search-form { position: relative; }

/* A soft STATIC halo behind the search so the field stays the focal point —
   no breathing, no rotating aura (those bled a coral smudge into the hero). */
.hero-search-glow {
    position: absolute; inset: -10px; z-index: 0; border-radius: 999px;
    background: radial-gradient(60% 120% at 50% 50%,
                rgba(var(--stylo-accent-rgb), .16) 0%, rgba(var(--stylo-accent-rgb), 0) 70%);
    opacity: .7; pointer-events: none;
}
.hero-search-form .input-group { position: relative; z-index: 1; }

.hero-search-input {
    transition: border-color .22s, box-shadow .28s, transform .22s;
}
.hero-search-form:focus-within .hero-search-input {
    transform: translateY(-1px);
    box-shadow: 0 0 0 5px rgba(var(--stylo-accent-rgb), .14), 0 10px 26px rgba(var(--stylo-accent-rgb), .14);
}

/* the typed placeholder gets a caret; keep it from looking like real input */
.hero-search-input::placeholder { color: #8d8880; transition: color .2s; }
.hero-search-form:focus-within .hero-search-input::placeholder { color: #b3ada4; }

/* Search button: icon leads, label follows */
.hero-search-btn {
    display: inline-flex; align-items: center; gap: 0;
    transition: gap .22s, background .2s, transform .12s;
}
.hero-search-btn i { transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.hero-search-btn span {
    max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
    transition: max-width .3s cubic-bezier(.22,.61,.36,1), opacity .2s;
}
/* 5rem fitted "Search"; the label is "Smart Search" now and would be clipped
   mid-word by the old cap. */
.hero-search-btn span, .hero-search-form:focus-within .hero-search-btn span,
.hero-search-btn:hover span { max-width: 9rem; opacity: 1; }
.hero-search-btn { gap: 8px; }
.hero-search-btn:hover i { transform: rotate(-12deg) scale(1.12); }
.hero-search-btn:active { transform: scale(.97); }

/* ── Hero search on phones ────────────────────────────────────────
   Two things were fighting for a 366px row: input-group-lg sizes the
   field at 1.25rem, and the button carries its "Search" label at all
   times. Between them the typed placeholder — suggest.js writes real
   search terms into it, and some are long ("Dresses For Wedding
   Guests") — was being cut off mid-word.

   The button goes icon-only, which hands ~60px back to the field, and
   the placeholder gets its own smaller size. The typed *value* stays at
   16px on purpose: below that, iOS zooms the page in on focus. */
@media (max-width: 767.98px) {
    .input-group-lg > .hero-search-input {
        font-size: 16px;
        padding: 10px 14px;
    }
    .hero-search-input::placeholder {
        font-size: 12.5px;
        /* if a term is still too long, taper it rather than slicing a letter */
        text-overflow: ellipsis;
    }
    .hero-search-btn {
        padding-left: .95rem !important;
        padding-right: .95rem !important;
        font-size: 1rem;
        gap: 0;
    }
    .hero-search-btn span { display: none; }
}

/* the suggestion panel arriving nudges the field to acknowledge it */
.sg-open .hero-search-input { border-color: var(--stylo-accent); }

/* trending chips drift in on load rather than appearing all at once */
.stylo-hero .trending-tag {
    opacity: 0; transform: translateY(6px);
    animation: hero-chip .45s cubic-bezier(.22,.61,.36,1) forwards;
}
.stylo-hero .trending-tag:nth-child(1) { animation-delay: .05s; }
.stylo-hero .trending-tag:nth-child(2) { animation-delay: .11s; }
.stylo-hero .trending-tag:nth-child(3) { animation-delay: .17s; }
.stylo-hero .trending-tag:nth-child(4) { animation-delay: .23s; }
.stylo-hero .trending-tag:nth-child(5) { animation-delay: .29s; }
.stylo-hero .trending-tag:nth-child(6) { animation-delay: .35s; }
.stylo-hero .trending-tag:nth-child(7) { animation-delay: .41s; }
.stylo-hero .trending-tag:nth-child(8) { animation-delay: .47s; }
@keyframes hero-chip { to { opacity: 1; transform: none; } }
.stylo-hero .trending-tag { transition: background .18s, color .18s, transform .18s; }
.stylo-hero .trending-tag:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
    .hero-search-glow, .hero-search-form::before { animation: none; }
    .hero-search-input, .hero-search-btn, .hero-search-btn i, .hero-search-btn span { transition: none; }
    .stylo-hero .trending-tag { animation: none; opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   FACET CHARTS AS CONTROLS
   The charts beside a rail filter it, so they read as controls
   rather than decoration.
   ═══════════════════════════════════════════════════════════════ */
.donut-key {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 5px 8px; border: 0; border-radius: var(--radius-sm);
    background: none; text-align: left; font-size: 11.5px; cursor: pointer;
    transition: background .16s, transform .16s;
}
.donut-key:hover { background: var(--stylo-surface); transform: translateX(2px); }
.donut-key.is-on { background: var(--stylo-accent-light); }
.donut-key.is-on .donut-key-label { color: var(--stylo-accent); font-weight: 700; }
.donut-legend { list-style: none; }
.donut-legend li { margin: 0; }

.ccat-slot {
    border: 0; background: none; padding: 0 2px; cursor: pointer;
    border-radius: var(--radius-sm); transition: background .16s;
}
.ccat-slot:hover { background: var(--stylo-surface); }
.ccat-slot:hover .ccat-bar { filter: brightness(1.1); }
.ccat-slot.is-on { background: var(--stylo-accent-light); }
.ccat-slot.is-on .ccat-name { color: var(--stylo-accent); font-weight: 700; }
.ccat-slot .ccat-bar { transition: height .8s cubic-bezier(.22,.61,.36,1) var(--d,0ms), filter .16s; }

/* The chip that says what the rail is currently showing */
.facet-active { margin: -4px 0 10px; }
.facet-chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--stylo-accent-light); color: var(--stylo-accent);
    border-radius: 999px; padding: 5px 8px 5px 14px;
    font-size: 12px; font-weight: 700;
    animation: facet-in .22s cubic-bezier(.22,.61,.36,1);
}
@keyframes facet-in { from { opacity: 0; transform: translateY(-4px); } }
.facet-chip button {
    display: flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border: 0; border-radius: 50%;
    background: rgba(var(--stylo-accent-rgb), .18); color: var(--stylo-accent);
    font-size: 10px; cursor: pointer; transition: background .16s;
}
.facet-chip button:hover { background: var(--stylo-accent); color: #fff; }

[data-facet-rail] { transition: opacity .2s; }
[data-facet-rail].is-loading { opacity: .35; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    .donut-key, .ccat-slot, .facet-chip, [data-facet-rail] { transition: none; animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   WAVE CHART
   Weekly intake per department. Shaded layers, smooth curves, and
   a readout that fills in on hover instead of labelling every point.
   ═══════════════════════════════════════════════════════════════ */
.chart-waves { display: flex; flex-direction: column; flex: 1; }
.chart-waves svg { display: block; width: 100%; height: auto; overflow: visible; }
.wv-grid { stroke: var(--stylo-border); stroke-width: 1; }
.wv-axis { fill: var(--stylo-muted); font-size: 11px; font-family: var(--stylo-sans); }

/* gradients take their colour from the layer's categorical slot */
.wv-stop-a { stop-color: var(--cat); stop-opacity: .34; }
.wv-stop-b { stop-color: var(--cat); stop-opacity: .02; }

.wv-layer { transition: opacity .25s; }
.wv-area {
    opacity: 0;
    transform: scaleY(.4); transform-origin: bottom;
    transition: opacity .7s ease var(--d,0ms), transform .9s cubic-bezier(.22,.61,.36,1) var(--d,0ms);
}
.is-drawn .wv-area { opacity: 1; transform: none; }
.wv-line {
    fill: none; stroke: var(--cat); stroke-width: 2;
    stroke-linejoin: round; stroke-linecap: round;
    stroke-dasharray: 1800; stroke-dashoffset: 1800;
    transition: stroke-dashoffset 1.5s cubic-bezier(.33,.1,.2,1) var(--d,0ms);
}
.is-drawn .wv-line { stroke-dashoffset: 0; }

/* isolating one layer dims the others rather than hiding them */
.is-isolating .wv-layer { opacity: .18; }
.is-isolating .wv-layer.is-lifted { opacity: 1; }

/* hover column */
.wv-hit { cursor: crosshair; }
.wv-cross { stroke: var(--stylo-dark); stroke-width: 1; stroke-opacity: .18; opacity: 0; transition: opacity .12s; }
.wv-dot { fill: var(--cat); stroke: #fff; stroke-width: 2; opacity: 0; transition: opacity .12s; }
.wv-hit.is-on .wv-cross, .wv-hit.is-on .wv-dot { opacity: 1; }

/* readout */
.wv-readout { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--stylo-border); }
.wv-week {
    display: block; font-size: 10px; font-weight: 800; letter-spacing: .9px;
    text-transform: uppercase; color: var(--stylo-muted); margin-bottom: 8px;
}
.wv-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
.wv-key {
    display: flex; align-items: center; gap: 8px;
    padding: 3px 4px; border-radius: var(--radius-sm);
    font-size: 12px; cursor: default; transition: background .16s;
}
.wv-key:hover { background: var(--stylo-surface); }
.wv-swatch { width: 9px; height: 9px; border-radius: 2px; background: var(--cat); flex-shrink: 0; }
.wv-name  { flex: 1; min-width: 0; color: var(--stylo-body);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wv-value { color: var(--stylo-dark); font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 575px) { .wv-keys { grid-template-columns: 1fr; } }

/* ── Department cards (restored, with a thumbnail) ─────────────── */
.dept-card {
    display: flex; align-items: center; gap: 12px;
    padding: 12px; height: 100%;
    background: #fff; border: 1px solid var(--stylo-border);
    border-radius: var(--radius-md); text-decoration: none;
    opacity: 0; transform: translateY(10px);
    transition: opacity .5s ease var(--d,0ms), transform .5s cubic-bezier(.22,.61,.36,1) var(--d,0ms),
                border-color .22s, box-shadow .22s;
}
.dept-grid.is-drawn .dept-card { opacity: 1; transform: none; }
.dept-grid.is-drawn .dept-card:hover {
    border-color: var(--stylo-accent); box-shadow: var(--shadow-md); transform: translateY(-2px);
}
.dept-thumb {
    width: 54px; height: 62px; flex-shrink: 0; overflow: hidden;
    border-radius: var(--radius-sm); background: var(--stylo-surface);
    display: flex; align-items: center; justify-content: center;
    color: var(--stylo-accent); font-size: 18px;
}
.dept-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s; }
.dept-card:hover .dept-thumb img { transform: scale(1.08); }
.dept-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dept-name {
    font-size: 14px; font-weight: 700; color: var(--stylo-dark);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dept-count { font-size: 11px; color: var(--stylo-muted); }
.dept-bar {
    display: block; height: 2px; margin-top: 5px; border-radius: 1px;
    background: var(--stylo-border); overflow: hidden;
}
.dept-bar span {
    display: block; height: 100%; width: 0; border-radius: 1px;
    background: var(--stylo-accent);
    transition: width .8s cubic-bezier(.22,.61,.36,1) calc(var(--d,0ms) + 220ms);
}
.dept-grid.is-drawn .dept-bar span { width: var(--w); }
.dept-arrow { color: var(--stylo-border); font-size: 13px; transition: all .22s; }
.dept-card:hover .dept-arrow { color: var(--stylo-accent); transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
    .wv-area, .wv-line, .dept-card, .dept-bar span { transition: none !important; opacity: 1; transform: none; }
    .is-drawn .wv-line { stroke-dashoffset: 0; }
    .dept-grid.is-drawn .dept-bar span { width: var(--w); }
}

/* ── Hero trending chips ───────────────────────────────────────── */
.hero-chips {
    /* One line, so the hero stays short. Centered when the chips fit, scrolls
       from the start (no clipping) when they don't; scrollbar hidden. */
    display: flex; flex-wrap: nowrap; align-items: center;
    justify-content: safe center; gap: 8px; margin-top: 14px;
    overflow-x: auto;
    scrollbar-width: none;
}
.hero-chips::-webkit-scrollbar { display: none; }
.hero-chips > * { flex: 0 0 auto; }
.hero-chips-label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 800; letter-spacing: 1.1px;
    text-transform: uppercase; color: var(--stylo-muted);
    margin-right: 2px;
}
.hero-chips-label i { color: var(--stylo-accent); font-size: 12px; }

.stylo-hero .trending-tag {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 7px 8px 7px 14px; border-radius: 999px;
    font-size: 13px; font-weight: 600; text-decoration: none;
    color: var(--stylo-dark);
    background: rgba(255,255,255,.75);
    border: 1px solid rgba(var(--stylo-accent-rgb), .18);
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    transition: background .18s, border-color .18s, color .18s, transform .18s, box-shadow .18s;
}
.stylo-hero .trending-tag i {
    font-size: 16px; color: var(--stylo-accent);
    max-width: 0; overflow: hidden; opacity: 0;
    transition: max-width .22s cubic-bezier(.22,.61,.36,1), opacity .18s;
}
.stylo-hero .trending-tag:hover {
    background: var(--stylo-accent); color: #fff; border-color: var(--stylo-accent);
    transform: translateY(-2px); box-shadow: 0 6px 16px rgba(var(--stylo-accent-rgb), .28);
}
.stylo-hero .trending-tag:hover i { max-width: 1.2rem; opacity: 1; color: #fff; }

/* ── Department section: both columns end on the same line ─────── */
/* The chart panel and the card grid are different kinds of content, so their
   natural heights differ. The column stretches; the card grid has to spend the
   spare height rather than leave it below itself. */
.dept-section .row > [class*="col-"] { display: flex; }
.dept-section .row > [class*="col-"] > * { width: 100%; }
.dept-section .dept-grid { align-content: stretch; margin-bottom: 0; }
.dept-section .dept-grid > [class*="col-"] { display: flex; }
.dept-section .dept-card { width: 100%; }

@media (max-width: 991px) {
    .dept-section .row > [class*="col-"] { display: block; }
}

/* ═══════════════════════════════════════════════════════════════
   BRAND CARDS
   ═══════════════════════════════════════════════════════════════ */
/* The brand row's duplicate copy exists only for the phone carousel's wrap;
   on desktop the row is a plain grid and the copy must not be in it. */
.brand-loop { display: none; }

.brandx {
    display: flex; flex-direction: column; height: 100%;
    background: #fff; border: 1px solid var(--stylo-border);
    border-radius: var(--radius-lg); overflow: hidden; text-decoration: none;
    opacity: 0; transform: translateY(14px);
    transition: opacity .5s ease var(--d,0ms), transform .5s cubic-bezier(.22,.61,.36,1) var(--d,0ms),
                border-color .25s, box-shadow .25s;
}
.brand-grid.is-drawn .brandx { opacity: 1; transform: none; }
.brand-grid.is-drawn .brandx:hover {
    border-color: var(--stylo-accent); box-shadow: 0 12px 28px rgba(0,0,0,.10);
    transform: translateY(-4px);
}

.brandx-media { position: relative; display: block; aspect-ratio: 4/3; overflow: hidden;
                background: var(--stylo-surface); }
.brandx-media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .6s cubic-bezier(.22,.61,.36,1), filter .3s;
    filter: saturate(.85);
}
.brandx:hover .brandx-media img { transform: scale(1.09); filter: saturate(1.05); }
.brandx-veil {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(24,18,15,.55) 0%, rgba(24,18,15,.08) 60%, transparent 100%);
    transition: background .3s;
}
.brandx:hover .brandx-veil { background: linear-gradient(to top, rgba(24,18,15,.62) 0%, rgba(24,18,15,.15) 65%, transparent 100%); }

/* the wordmark sits on the image, not in a grey circle */
.brandx-mark {
    position: absolute; left: 12px; bottom: 10px;
    font-family: var(--stylo-serif); font-weight: 900; font-size: 20px;
    color: #fff; letter-spacing: -.5px; text-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.brandx-tier {
    position: absolute; top: 10px; right: 10px;
    font-size: 9px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
    color: #fff; background: rgba(255,255,255,.2); backdrop-filter: blur(5px);
    padding: 3px 8px; border-radius: 999px;
    opacity: 0; transform: translateY(-4px); transition: all .25s;
}
.brandx:hover .brandx-tier { opacity: 1; transform: none; }

.brandx-body { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px 13px; flex: 1; }
.brandx-name { font-size: 13.5px; font-weight: 700; color: var(--stylo-dark); line-height: 1.2; }
.brandx-for {
    font-size: 10.5px; color: var(--stylo-muted); line-height: 1.35;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brandx-meta { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 8px; }
.brandx-count { font-size: 12px; font-weight: 700; color: var(--stylo-accent); font-variant-numeric: tabular-nums; }
.brandx-go {
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--stylo-surface); color: var(--stylo-dark); font-size: 11px;
    transition: background .2s, color .2s, transform .2s;
}
.brandx:hover .brandx-go { background: var(--stylo-accent); color: #fff; transform: translateX(2px); }
.brandx-bar { display: block; height: 2px; margin-top: 8px; border-radius: 1px;
              background: var(--stylo-border); overflow: hidden; }
.brandx-bar span {
    display: block; height: 100%; width: 0; border-radius: 1px; background: var(--stylo-accent);
    transition: width .9s cubic-bezier(.22,.61,.36,1) calc(var(--d,0ms) + 260ms);
}
.brand-grid.is-drawn .brandx-bar span { width: var(--w); }

@media (prefers-reduced-motion: reduce) {
    .brandx, .brandx-media img, .brandx-bar span { transition: none !important; opacity: 1; transform: none; }
    .brand-grid.is-drawn .brandx-bar span { width: var(--w); }
}

/* Lollipop and ordinal keys act as filters for the rail beside them, so they
   need a real hit target and an on-state; as plain <button>s they arrive with
   UA chrome that has to go. */
button.lolli-row,
button.cord-key {
    appearance: none;
    background: none;
    border: 1px solid transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    width: 100%;
    border-radius: var(--radius-sm);
    transition: background .15s, border-color .15s;
}
button.lolli-row:hover,
button.cord-key:hover { background: var(--stylo-light); }
button.lolli-row.is-on,
button.cord-key.is-on {
    background: var(--stylo-accent-light);
    border-color: var(--stylo-accent);
}
button.cord-key { padding: 3px 6px; }

/* ── Packed circles: beauty catalogue composition ─────────────────────────
   One hue in lightness steps, largest family darkest, so the colour repeats
   the same order the areas already show rather than inventing a meaning.
   Ramp validated light-mode: all six inside the lightness band, all chroma
   >= 0.1. The two lightest sit under 3:1 against the surface, which obliges
   visible relief — every circle is direct-labelled and the legend names all
   six, so nothing is carried by colour alone. */
.chart-pack { display: flex; flex-direction: column; gap: 12px; }
.chart-pack svg { width: 100%; height: auto; display: block; overflow: visible; }

.pk-step-1 { --pk: #87371b; --pk-ink: #fff; }
.pk-step-2 { --pk: #9f4322; --pk-ink: #fff; }
.pk-step-3 { --pk: #b7512c; --pk-ink: #fff; }
.pk-step-4 { --pk: #ca663f; --pk-ink: #fff; }
.pk-step-5 { --pk: #dc7d54; --pk-ink: #43210f; }
.pk-step-6 { --pk: #ec9269; --pk-ink: #43210f; }

.pk-disc { fill: var(--pk); }
/* Without its own transform-box the ripple scales about the SVG origin, so it
   slides off toward the corner instead of expanding where it sits — and it
   drags the node's bounding box with it, which throws off hit-testing. */
.pk-halo {
    fill: var(--pk);
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

/* The sequence: each circle settles in on its own beat with a ring breathing
   out of it, then everything drifts gently and never stops. Re-runs on every
   scroll into view. */
.pk-node {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0);
    opacity: 0;
    cursor: pointer;
}
.is-drawn .pk-node {
    animation: pk-pop .62s cubic-bezier(.34, 1.56, .64, 1) forwards;
    animation-delay: var(--d, 0ms);
}
@keyframes pk-pop { to { transform: scale(1); opacity: 1; } }

/* Endless bob, each on its own phase and period so the group never falls into
   lockstep — that is what reads as alive rather than as one block moving. */
.pk-drift { transform-box: fill-box; transform-origin: center; }
.is-drawn .pk-drift {
    animation: pk-bob var(--fdur, 5s) ease-in-out infinite;
    animation-delay: var(--fd, 0ms);
}
@keyframes pk-bob {
    0%, 100% { transform: translateY(0) }
    50%      { transform: translateY(-4px) }
}

.is-drawn .pk-halo {
    animation: pk-ripple 4.5s ease-out infinite;
    animation-delay: calc(var(--d, 0ms) + 640ms);
}
@keyframes pk-ripple {
    0%        { opacity: .32; transform: scale(1); }
    28%, 100% { opacity: 0;   transform: scale(1.4); }
}

.pk-node text {
    fill: var(--pk-ink);
    text-anchor: middle;
    pointer-events: none;
    font-family: inherit;
}
.pk-name { font-size: 11px; font-weight: 600; }
.pk-val  { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }

.pk-node:hover .pk-disc,
.pk-node:focus-visible .pk-disc { filter: brightness(1.08); }
.pk-node:hover, .pk-node:focus-visible { transform: scale(1.07); }
.pk-node:hover .pk-halo, .pk-node:focus-visible .pk-halo {
    animation-duration: .9s;
}
.pk-node.is-on .pk-disc { stroke: var(--stylo-dark); stroke-width: 2.5; }

.pk-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px 4px;
}
.pk-key {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 3px 5px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    min-width: 0;
    transition: background .15s, border-color .15s;
}
.is-drawn .pk-legend li {
    animation: pk-slide .5s ease-out backwards;
}
.is-drawn .pk-legend li:nth-child(1) { animation-delay: .95s }
.is-drawn .pk-legend li:nth-child(2) { animation-delay: 1.03s }
.is-drawn .pk-legend li:nth-child(3) { animation-delay: 1.11s }
.is-drawn .pk-legend li:nth-child(4) { animation-delay: 1.19s }
.is-drawn .pk-legend li:nth-child(5) { animation-delay: 1.27s }
.is-drawn .pk-legend li:nth-child(6) { animation-delay: 1.35s }
.is-drawn .pk-legend li:nth-child(7) { animation-delay: 1.43s }
@keyframes pk-slide {
    from { opacity: 0; transform: translateX(-8px) }
    to   { opacity: 1; transform: none }
}

.pk-key:hover  { background: var(--stylo-light); }
.pk-key.is-on  { background: var(--stylo-accent-light); border-color: var(--stylo-accent); }
.pk-dot {
    width: 9px; height: 9px; flex: 0 0 9px;
    border-radius: 50%;
    background: var(--pk);
}
.pk-key-label {
    font-size: 11.5px;
    color: var(--stylo-dark);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pk-key-value {
    margin-left: auto;
    font-size: 10.5px;
    color: var(--stylo-muted);
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .is-drawn .pk-node   { animation: none; transform: scale(1); opacity: 1; }
    .is-drawn .pk-halo,
    .is-drawn .pk-drift  { animation: none; }
    .is-drawn .pk-halo   { opacity: 0; }
    .is-drawn .pk-legend li { animation: none; }
}

/* The chart panel has to reach the rail beside it — the user asked for equal
   column heights and a short panel breaks the row. */
.hub-panel-fill {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.hub-panel-fill .chart-pack { flex: 1; justify-content: center; }
.panel-foot {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--stylo-border);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--stylo-muted);
}

/* ── Rail Intelligence: small analytical cards ────────────────────────────
   Each answers one question about the products beside them. Kept to one
   accent hue plus text tokens — seven little cards each in their own colour
   would read as a toy. Every card animates in on scroll and re-animates on
   the next visit, in step with the charts elsewhere on the page. */
.an-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    align-content: start;
}
.an-card {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 10px;
    border: 1px solid var(--stylo-border);
    border-radius: var(--radius-md, 10px);
    background: #fff;
    text-decoration: none;
    color: var(--stylo-dark);
    min-width: 0;
    opacity: 0;
    transform: translateY(10px);
}
.an-card-wide { grid-column: 1 / -1; }

.is-drawn .an-card { animation: an-in .5s ease-out forwards; }
.is-drawn .an-card:nth-child(1) { animation-delay: .00s }
.is-drawn .an-card:nth-child(2) { animation-delay: .07s }
.is-drawn .an-card:nth-child(3) { animation-delay: .14s }
.is-drawn .an-card:nth-child(4) { animation-delay: .21s }
.is-drawn .an-card:nth-child(5) { animation-delay: .28s }
.is-drawn .an-card:nth-child(6) { animation-delay: .35s }
.is-drawn .an-card:nth-child(7) { animation-delay: .42s }
@keyframes an-in { to { opacity: 1; transform: none } }

.an-eyebrow {
    display: flex; align-items: center; gap: 5px;
    font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--stylo-muted);
}
.an-eyebrow i { color: var(--stylo-accent); font-size: 11px; }
.an-big {
    font-size: 15px; font-weight: 700; line-height: 1.1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.an-big-num { font-variant-numeric: tabular-nums; }
.an-sub { font-size: 10.5px; color: var(--stylo-muted); }
.an-note {
    margin: 5px 0 0; padding-top: 5px;
    border-top: 1px solid var(--stylo-border);
    font-size: 10.5px; line-height: 1.5; color: var(--stylo-muted);
}

/* 1 — leading product */
.an-top:hover { border-color: var(--stylo-accent); }
.an-top-body { display: flex; align-items: center; gap: 9px; margin-top: 1px; }
.an-rank {
    flex: 0 0 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--stylo-accent); color: #fff;
    font-size: 14px; font-weight: 700;
}
.an-top-text { display: flex; flex-direction: column; min-width: 0; }
.an-top-brand { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--stylo-accent); }
.an-top-name  { font-size: 12px; font-weight: 600; line-height: 1.3; }
.an-top-price { font-size: 12px; font-weight: 700; }

/* 2 — category heatmap. One hue, weight carries the value, and every cell is
       labelled so the read never depends on judging a shade. */
.an-heat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 3px; }
.an-heat-cell {
    display: flex; flex-direction: column; gap: 1px;
    padding: 6px 7px 5px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    min-width: 0;
    /* light → dark with volume; the darkest cells take light ink */
    background: color-mix(in srgb, var(--ac, #87371b) calc(var(--w) * 82% + 8%), #ffffff);
    color: #43210f;
    transform: scale(.92); opacity: 0;
}
.an-heat-cell[style*="--w: 1"], .an-heat-cell[style*="--w: 0.9"],
.an-heat-cell[style*="--w: 0.8"], .an-heat-cell[style*="--w: 0.7"] { color: #fff; }
.is-drawn .an-heat-cell { animation: an-pop .45s cubic-bezier(.34,1.4,.64,1) forwards; animation-delay: calc(.15s + var(--d)); }
@keyframes an-pop { to { transform: scale(1); opacity: 1 } }
.an-heat-cell:hover { filter: brightness(1.08); }
.an-heat-name { font-size: 9.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-heat-val  { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* 3 — brand ranking bars */
.an-rank-list { display: flex; flex-direction: column; gap: 2px; margin-top: 3px; }
.an-rank-row  { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 6px; }
.an-rank-name { font-size: 9.5px; color: var(--stylo-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-rank-bar  { height: 4px; border-radius: 2px; background: var(--stylo-light); overflow: hidden; }
.an-rank-bar i {
    display: block; height: 100%; width: 0;
    border-radius: 2px; background: var(--stylo-accent);
}
.is-drawn .an-rank-bar i { animation: an-grow .8s cubic-bezier(.2,.8,.3,1) forwards; animation-delay: calc(.25s + var(--d)); }
@keyframes an-grow { to { width: var(--w) } }

/* 4 — price distribution sparkline */
.an-spark { display: flex; align-items: flex-end; gap: 3px; height: 24px; margin-top: 4px; }
.an-spark-bar {
    flex: 1; height: 0; min-height: 2px;
    border-radius: 2px 2px 0 0;
    background: color-mix(in srgb, var(--stylo-accent) 32%, #fff);
}
.an-spark-bar.is-peak { background: var(--stylo-accent); }
.is-drawn .an-spark-bar { animation: an-rise .7s cubic-bezier(.2,.8,.3,1) forwards; animation-delay: calc(.2s + var(--d)); }
@keyframes an-rise { to { height: var(--h) } }

/* 5 — discount depth by band */
.an-disc { display: flex; flex-direction: column; gap: 3px; margin-top: 3px; }
.an-disc-row { display: grid; grid-template-columns: 58px 1fr 28px; align-items: center; gap: 6px; }
.an-disc-label { font-size: 9.5px; line-height: 1.35; color: var(--stylo-muted); white-space: nowrap; }
.an-disc-track { height: 5px; border-radius: 3px; background: var(--stylo-light); overflow: hidden; }
.an-disc-track i {
    display: block; height: 100%; width: 0;
    border-radius: 3px; background: var(--stylo-accent);
}
.is-drawn .an-disc-track i { animation: an-grow .8s cubic-bezier(.2,.8,.3,1) forwards; animation-delay: calc(.25s + var(--d)); }
.an-disc-val { font-size: 10px; font-weight: 700; line-height: 1.35; text-align: right; font-variant-numeric: tabular-nums; }

/* 6 — fresh-in ring */
.an-ring-card { align-items: center; text-align: center; }
.an-ring { position: relative; width: 68px; height: 68px; margin: 2px 0; }
.an-ring svg { width: 100%; height: 100%; display: block; }
.an-ring-track { fill: none; stroke: var(--stylo-light); stroke-width: 7; }
.an-ring-fill {
    fill: none; stroke: var(--stylo-accent); stroke-width: 7; stroke-linecap: round;
    stroke-dasharray: 188.5; stroke-dashoffset: 188.5;
}
.is-drawn .an-ring-fill { animation: an-ring 1.1s cubic-bezier(.2,.8,.3,1) .3s forwards; }
@keyframes an-ring { to { stroke-dashoffset: calc(188.5 - (188.5 * var(--pct) / 100)) } }
.an-ring-num {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* 7 — on-sale meter */
.an-meter { height: 5px; border-radius: 3px; background: var(--stylo-light); overflow: hidden; margin-top: 4px; }
.an-meter i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--stylo-accent); }
.is-drawn .an-meter i { animation: an-grow .9s cubic-bezier(.2,.8,.3,1) .35s forwards; }

@media (prefers-reduced-motion: reduce) {
    .an-card, .an-heat-cell { opacity: 1; transform: none; animation: none !important; }
    .is-drawn .an-rank-bar i, .is-drawn .an-disc-track i, .is-drawn .an-meter i { animation: none; width: var(--w); }
    .is-drawn .an-spark-bar { animation: none; height: var(--h); }
    .is-drawn .an-ring-fill { animation: none; stroke-dashoffset: calc(188.5 - (188.5 * var(--pct) / 100)); }
}

/* The drop badge carries a percentage, not a rank, so it needs the room. */
.an-rank-drop { flex: 0 0 auto; padding: 0 8px; border-radius: 999px; font-size: 11px; }
.an-top-price s { color: var(--stylo-muted); font-weight: 500; margin-left: 4px; }

/* ── Colour-coded analytics cards ─────────────────────────────────────────
   The single-hue version read as one brown block. Each card now takes a slot
   from the validated categorical palette (adjacent-pair CVD ΔE >= 9.1), driving
   its eyebrow icon, its bars and any badge. Colour is a per-card identity, not
   an encoding of the numbers — every figure is written out — so a repeated hue
   never implies "the same measure". Magnitude within a card stays one hue
   (the card's own), light to dark, which is the correct sequential read. */
.an-grid-color .an-card:nth-child(8n+1) { --ac: #2a78d6; }
.an-grid-color .an-card:nth-child(8n+2) { --ac: #eb6834; }
.an-grid-color .an-card:nth-child(8n+3) { --ac: #1baf7a; }
.an-grid-color .an-card:nth-child(8n+4) { --ac: #c78400; }
.an-grid-color .an-card:nth-child(8n+5) { --ac: #d65a9c; }
.an-grid-color .an-card:nth-child(8n+6) { --ac: #4a3aa7; }
.an-grid-color .an-card:nth-child(8n+7) { --ac: #008300; }
.an-grid-color .an-card:nth-child(8n+8) { --ac: #d23b3b; }

/* Everything accent-coloured inside a colour card follows its slot. */
.an-grid-color .an-card { --stylo-accent: var(--ac); }
.an-grid-color .an-eyebrow i        { color: var(--ac); }
.an-grid-color .an-rank             { background: var(--ac); }
.an-grid-color .an-rank-bar i,
.an-grid-color .an-disc-track i,
.an-grid-color .an-meter i          { background: var(--ac); }
.an-grid-color .an-spark-bar.is-peak { background: var(--ac); }
.an-grid-color .an-spark-bar         { background: color-mix(in srgb, var(--ac) 30%, #fff); }
.an-grid-color .an-card.an-top:hover { border-color: var(--ac); }
.an-grid-color .an-big-num           { color: var(--ac); }

/* Labelled sparkline column (discount depth) — the bar lives in a fixed-height
   plot so its percentage height resolves against a real box, not the column. */
.an-spark-tall { display: flex; align-items: flex-end; gap: 6px; margin-top: 4px; }
.an-spark-col  { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.an-spark-plot { width: 100%; height: 52px; display: flex; align-items: flex-end; }
.an-spark-tall .an-spark-bar { width: 100%; height: var(--h); min-height: 3px; }
.an-spark-lab  { font-size: 9px; color: var(--stylo-muted); white-space: nowrap; }
.an-spark-num  { font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.an-disc-link  { text-decoration: none; }
.an-disc-link:hover .an-disc-label { color: var(--ac); }

/* ── Multi-colour bars inside the analytics charts ────────────────────────
   Each bar in a set takes its own slot from the validated categorical palette,
   by position. This is identity-by-position, not an encoding of the value, so
   every bar is still directly labelled with its number — the colour is there to
   make the chart read as lively rather than as one brown block. The heatmap is
   left as a single-hue ramp because there the shade IS the magnitude. */
.an-grid-color {
    --cat1: #2a78d6; --cat2: #eb6834; --cat3: #1baf7a; --cat4: #c78400;
    --cat5: #d65a9c; --cat6: #4a3aa7; --cat7: #008300; --cat8: #d23b3b;
}

/* Discount-depth columns */
.an-grid-color .an-spark-col:nth-child(1) .an-spark-bar { background: var(--cat1); }
.an-grid-color .an-spark-col:nth-child(2) .an-spark-bar { background: var(--cat2); }
.an-grid-color .an-spark-col:nth-child(3) .an-spark-bar { background: var(--cat3); }
.an-grid-color .an-spark-col:nth-child(4) .an-spark-bar { background: var(--cat4); }
.an-grid-color .an-spark-col:nth-child(5) .an-spark-bar { background: var(--cat5); }

/* Horizontal bars: "Most reductions", "Where the discounting is", "Made of" */
.an-grid-color .an-disc-row:nth-child(1) .an-disc-track i { background: var(--cat1); }
.an-grid-color .an-disc-row:nth-child(2) .an-disc-track i { background: var(--cat2); }
.an-grid-color .an-disc-row:nth-child(3) .an-disc-track i { background: var(--cat3); }
.an-grid-color .an-disc-row:nth-child(4) .an-disc-track i { background: var(--cat4); }
.an-grid-color .an-disc-row:nth-child(5) .an-disc-track i { background: var(--cat5); }

/* Brand ranking bars */
.an-grid-color .an-rank-row:nth-child(1) .an-rank-bar i { background: var(--cat1); }
.an-grid-color .an-rank-row:nth-child(2) .an-rank-bar i { background: var(--cat2); }
.an-grid-color .an-rank-row:nth-child(3) .an-rank-bar i { background: var(--cat3); }

/* The coupon-usage column chart in the shopping hub, same treatment. */
.chart-columns {
    --cat1: #2a78d6; --cat2: #eb6834; --cat3: #1baf7a; --cat4: #c78400;
    --cat5: #d65a9c; --cat6: #4a3aa7; --cat7: #008300; --cat8: #d23b3b;
}
.chart-columns .ccol-slot:nth-child(2) .ccol-bar { background: var(--cat1); }
.chart-columns .ccol-slot:nth-child(3) .ccol-bar { background: var(--cat2); }
.chart-columns .ccol-slot:nth-child(4) .ccol-bar { background: var(--cat3); }
.chart-columns .ccol-slot:nth-child(5) .ccol-bar { background: var(--cat4); }
.chart-columns .ccol-slot:nth-child(6) .ccol-bar { background: var(--cat5); }
.chart-columns .ccol-slot:nth-child(7) .ccol-bar { background: var(--cat6); }
.chart-columns .ccol-slot:nth-child(8) .ccol-bar { background: var(--cat7); }

/* Price-sweet-spot sparkline (bars are direct children of .an-spark) */
.an-grid-color .an-spark .an-spark-bar:nth-child(1) { background: var(--cat1); }
.an-grid-color .an-spark .an-spark-bar:nth-child(2) { background: var(--cat2); }
.an-grid-color .an-spark .an-spark-bar:nth-child(3) { background: var(--cat3); }
.an-grid-color .an-spark .an-spark-bar:nth-child(4) { background: var(--cat4); }
.an-grid-color .an-spark .an-spark-bar:nth-child(5) { background: var(--cat5); }
.an-grid-color .an-spark .an-spark-bar.is-peak { filter: none; }

/* ── Department cards with an in-card "what it is made of" graph ───────────── */
.deptx {
    display: flex; flex-direction: column; gap: 6px;
    padding: 11px;
    border: 1px solid var(--stylo-border);
    border-radius: var(--radius-md, 12px);
    background: #fff;
    text-decoration: none; color: var(--stylo-dark);
    opacity: 0; transform: translateY(10px);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.is-drawn .deptx { animation: an-in .5s ease-out forwards; animation-delay: var(--d, 0ms); }
.deptx:hover { border-color: var(--stylo-accent); box-shadow: 0 6px 20px rgba(0,0,0,.06); }

.deptx-head { display: flex; align-items: center; gap: 10px; }
.deptx-thumb {
    flex: 0 0 40px; width: 40px; height: 40px;
    border-radius: 9px; overflow: hidden;
    background: var(--stylo-light);
    display: grid; place-items: center;
}
.deptx-thumb img { width: 100%; height: 100%; object-fit: cover; }
.deptx-thumb i { color: var(--stylo-muted); font-size: 18px; }
.deptx-title { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.deptx-name  { font-size: 14px; font-weight: 700; line-height: 1.2; }
.deptx-count { font-size: 11px; color: var(--stylo-muted); }
.deptx-arrow { color: var(--stylo-muted); transition: transform .15s, color .15s; }
.deptx:hover .deptx-arrow { color: var(--stylo-accent); transform: translateX(3px); }

.deptx-mix,   /* legacy bar block, replaced by the mini-wave */
.deptx-row, .deptx-div, .deptx-track { }

/* ── One flowing department wave — a single premium accent ────────────────
   Double-width SVG carrying two identical periods; it drifts left by exactly
   one period forever, so the motion never stops and never jumps. Colour is the
   card's palette slot; height reflects the department's share. */
.mw {
    /* A fixed, compact mountain that fills the old empty gap without ballooning
       the card. Sits right under the header. */
    display: block;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--stylo-border);
}
.mw-wrap {
    display: block;
    width: 100%;
    height: 30px;
    position: relative;
    overflow: hidden;
}
.mw-svg {
    display: block;
    width: 100%;
    height: 30px;
    /* Rise up once when the section scrolls in — professional, not perpetual. */
    transform-origin: bottom;
    transform: scaleY(0);
    opacity: 0;
}
.is-drawn .mw-svg {
    animation: mw-rise .7s cubic-bezier(.2, .8, .3, 1) forwards;
    animation-delay: var(--d, 0ms);
}
@keyframes mw-rise { to { transform: scaleY(1); opacity: 1; } }

.mw-cap {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 10.5px;
    color: var(--stylo-muted);
}
.mw-cap-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--wc);
    flex: 0 0 7px;
}

@media (prefers-reduced-motion: reduce) {
    .mw-svg { animation: none; transform: none; opacity: 1; }
}

/* Left column extras */
.an-rank-row.an-rank-link { grid-template-columns: 58px 1fr 34px; text-decoration: none; }
.an-rank-cnt { font-size: 10px; font-weight: 700; text-align: right; color: var(--stylo-muted); font-variant-numeric: tabular-nums; }
.an-rank-link:hover .an-rank-name { color: var(--stylo-dark); }

.an-budget { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; }
.an-budget-tile {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: 8px 4px; border-radius: var(--radius-sm);
    background: var(--stylo-light); text-decoration: none;
    transition: background .15s;
}
.an-budget-tile:hover { background: color-mix(in srgb, var(--ac, var(--stylo-accent)) 16%, #fff); }
.an-budget-label { font-size: 10.5px; font-weight: 600; color: var(--stylo-dark); white-space: nowrap; }
.an-budget-cnt   { font-size: 11px; font-weight: 700; color: var(--ac, var(--stylo-accent)); font-variant-numeric: tabular-nums; }

.an-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.an-chip {
    font-size: 11px; font-weight: 600;
    padding: 4px 10px; border-radius: 999px;
    background: var(--stylo-light); color: var(--stylo-dark);
    text-decoration: none; white-space: nowrap;
    transition: background .15s, color .15s;
}
.an-chip:hover { background: var(--stylo-accent); color: #fff; }

/* Top-stores tile grid — replaces the ragged bars; always aligned. */
.an-stores { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 5px; }
.an-store {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 8px; border-radius: var(--radius-sm);
    background: var(--stylo-light); text-decoration: none; min-width: 0;
    transition: background .15s;
}
.an-store:hover { background: color-mix(in srgb, var(--ac, var(--stylo-accent)) 14%, #fff); }
.an-store-badge {
    position: relative;
    flex: 0 0 30px; width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 7px; color: #fff; font-size: 13px; font-weight: 700;
    overflow: hidden;
}
.an-store-badge.has-logo { background: #fff !important; box-shadow: inset 0 0 0 1px var(--stylo-border); }
.an-store-badge.has-logo .an-store-mono { display: none; }
.an-store-img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.an-store-1 { background: #2a78d6; }
.an-store-2 { background: #eb6834; }
.an-store-3 { background: #1baf7a; }
.an-store-4 { background: #c78400; }
.an-store-text { display: flex; flex-direction: column; min-width: 0; }
.an-store-name { font-size: 12px; font-weight: 600; color: var(--stylo-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-store-cnt  { font-size: 10px; color: var(--stylo-muted); }

/* Most-loved product card (thumbnail + rating) */
.an-thumb {
    flex: 0 0 46px; width: 46px; height: 46px;
    border-radius: 8px; overflow: hidden; background: var(--stylo-light);
    display: grid; place-items: center;
}
.an-thumb img { width: 100%; height: 100%; object-fit: cover; }
.an-top-meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.an-stars { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; color: #e0a715; }
.an-reviews { font-size: 10.5px; color: var(--stylo-muted); }

/* Just-landed strip of newest arrivals */
.an-fresh-cnt {
    margin-left: auto; font-size: 9.5px; font-weight: 700;
    color: var(--ac, var(--stylo-accent));
    background: color-mix(in srgb, var(--ac, var(--stylo-accent)) 14%, #fff);
    padding: 2px 8px; border-radius: 999px;
    text-decoration: none; transition: background .15s;
}
.an-fresh-cnt:hover { background: color-mix(in srgb, var(--ac, var(--stylo-accent)) 26%, #fff); }
/* An 18px-tall pill is a fiddly thing to hit with a thumb — on touch it gets
   the padding it needs to clear a sensible target size. */
@media (max-width: 767.98px) {
    .an-fresh-cnt { font-size: 10.5px; padding: 7px 12px; }
}
.an-fresh .an-eyebrow { width: 100%; }
.an-fresh-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 7px; }
.an-fresh-thumb {
    aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--stylo-light);
    display: block;
}
.an-fresh-thumb { position: relative; transition: box-shadow .15s, transform .15s; }
.an-fresh-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.an-fresh-thumb:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.an-fresh-thumb:hover img { transform: scale(1.06); }

/* Trending-styles chips (half card) */
.an-tagset { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.an-tag {
    font-size: 11px; font-weight: 600;
    padding: 4px 9px; border-radius: 999px;
    background: color-mix(in srgb, var(--ac, var(--stylo-accent)) 12%, #fff);
    color: color-mix(in srgb, var(--ac, var(--stylo-accent)) 85%, #000);
    text-decoration: none; white-space: nowrap;
    transition: background .15s, color .15s;
}
.an-tag:hover { background: var(--ac, var(--stylo-accent)); color: #fff; }

/* Popular-colours swatches (wide card) */
.an-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 6px; }
.an-col {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 7px; border-radius: var(--radius-sm);
    background: var(--stylo-light); text-decoration: none; min-width: 0;
    transition: background .15s;
}
.an-col:hover { background: color-mix(in srgb, var(--ac, var(--stylo-accent)) 14%, #fff); }
.an-col-dot {
    width: 15px; height: 15px; flex: 0 0 15px; border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.an-col-dot.is-pale { box-shadow: inset 0 0 0 1px rgba(0,0,0,.28); }
.an-col-name { font-size: 11px; font-weight: 600; color: var(--stylo-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-col-pct  { margin-left: auto; font-size: 10px; font-weight: 700; color: var(--stylo-muted); font-variant-numeric: tabular-nums; }

/* Shop-by-occasion chips (wide card) */
.an-occs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.an-occ {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 8px; border-radius: var(--radius-sm);
    background: var(--stylo-light); text-decoration: none; min-width: 0;
    transition: background .15s, color .15s;
}
.an-occ:hover { background: color-mix(in srgb, var(--ac, var(--stylo-accent)) 16%, #fff); }
.an-occ > i { color: var(--ac, var(--stylo-accent)); font-size: 13px; flex: 0 0 auto; }
.an-occ-name { font-size: 11px; font-weight: 600; color: var(--stylo-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-occ-cnt { margin-left: auto; font-size: 10px; font-weight: 700; color: var(--stylo-muted); font-variant-numeric: tabular-nums; }

/* Beauty rail — the budget strip that fills the space under the product row.
   One full-width card; the four tiles spread across the whole column. */
.beauty-under { margin-top: 14px; }
.beauty-under .an-card { justify-content: center; height: 100%; }

/* Beauty budget strip — four tiles across, sized to fill the space that sat
   empty under the single product row (no extra height beyond that gap). */
.an-budget-4 { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.beauty-under .an-budget-tile { padding: 22px 6px; gap: 4px; }
.beauty-under .an-budget-label { font-size: 12.5px; }
.beauty-under .an-budget-cnt { font-size: 16px; }
@media (max-width: 575.98px) { .an-budget-4 { grid-template-columns: 1fr 1fr; } }

/* Sub-category links in the filter sidebar (category pages) */
.filter-subcat {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; border-radius: var(--radius-sm);
    text-decoration: none; color: var(--stylo-dark);
    font-size: 13px;
    transition: background .15s, color .15s;
}
.filter-subcat:hover { background: var(--stylo-light); color: var(--stylo-accent); }
.filter-subcat-arrow { flex: 0 0 auto; font-size: 11px; color: var(--stylo-muted); opacity: 0; transition: opacity .15s, transform .15s; }
.filter-subcat:hover .filter-subcat-arrow { opacity: 1; transform: translateX(2px); color: var(--stylo-accent); }

/* ── Gift Reminders (personal occasions) ───────────────────────────── */
.occ-wrap { padding: 40px 0 60px; background: linear-gradient(180deg, var(--stylo-surface), #fff 40%); }
.occ-head { text-align: center; max-width: 640px; margin: 0 auto 32px; }
.occ-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--stylo-accent); }
.occ-eyebrow i { font-size: 15px; }
.occ-title { font-family: var(--stylo-serif); font-weight: 900; font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--stylo-dark); margin: 8px 0 10px; }
.occ-sub { color: var(--stylo-body); line-height: 1.6; font-size: 15px; }
.occ-card { background: #fff; border: 1px solid var(--stylo-border); border-radius: var(--radius-lg); padding: 24px; box-shadow: 0 1px 2px rgba(17,17,17,.04), 0 12px 30px rgba(17,17,17,.05); height: 100%; }
.occ-card-title { font-size: 16px; font-weight: 800; color: var(--stylo-dark); display: flex; align-items: center; gap: 8px; margin: 0 0 18px; }
.occ-card-title i { color: var(--stylo-accent); }
.occ-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--stylo-dark); margin: 12px 0 5px; }
.occ-input { width: 100%; padding: 10px 12px; border: 1.5px solid var(--stylo-border); border-radius: var(--radius-md); font-size: 14px; color: var(--stylo-dark); background: #fff; transition: border-color .18s, box-shadow .18s; }
.occ-input:focus { outline: none; border-color: var(--stylo-accent); box-shadow: 0 0 0 3px rgba(var(--stylo-accent-rgb), .12); }
.occ-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.occ-row-3 { grid-template-columns: 1.3fr .8fr 1fr; }
.occ-btn { margin-top: 18px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: none; border-radius: 999px; background: var(--stylo-accent); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; transition: background .2s, transform .12s; }
.occ-btn:hover { background: var(--stylo-accent-hover); }
.occ-btn:active { transform: scale(.98); }
.occ-note { font-size: 12.5px; color: var(--stylo-accent); margin: 10px 0 0; min-height: 1em; }
.occ-list { display: flex; flex-direction: column; gap: 10px; }
.occ-empty { color: var(--stylo-muted); font-size: 14px; text-align: center; padding: 24px 0; }
.occ-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--stylo-border); border-radius: var(--radius-md); background: var(--stylo-surface); transition: border-color .2s, box-shadow .2s; }
.occ-item:hover { border-color: rgba(var(--stylo-accent-rgb), .4); box-shadow: 0 6px 16px -8px rgba(var(--stylo-accent-rgb), .3); }
.occ-item-icon { width: 38px; height: 38px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--stylo-accent-light); color: var(--stylo-accent); font-size: 17px; }
.occ-item-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.occ-item-label { font-weight: 700; color: var(--stylo-dark); font-size: 14px; }
.occ-item-meta { font-size: 12px; color: var(--stylo-muted); }
.occ-item-meta strong { color: var(--stylo-accent); }
.occ-item-shop { font-size: 12.5px; font-weight: 700; color: var(--stylo-accent); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.occ-item-shop:hover { color: var(--stylo-accent-hover); }
.occ-item-del { flex: none; width: 30px; height: 30px; border: none; background: transparent; color: var(--stylo-muted); border-radius: 50%; cursor: pointer; transition: background .18s, color .18s; }
.occ-item-del:hover { background: #fdecec; color: #d9534f; }

/* Alerts & Reminders panel — layout, shared-email bar, columns */
.occ-container { max-width: 1000px; margin: 0 auto; padding: 0 16px; }
.occ-mailbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 560px; margin: 20px auto 0; background: #fff; border: 1px solid var(--stylo-border); border-radius: 999px; padding: 8px 8px 8px 18px; box-shadow: 0 8px 24px -14px rgba(17,17,17,.25); }
.occ-mailbar label { font-size: 12.5px; font-weight: 700; color: var(--stylo-dark); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.occ-mailbar label i { color: var(--stylo-accent); }
.occ-mailbar .occ-input { flex: 1 1 180px; width: auto; border: none; box-shadow: none; padding: 8px 4px; min-width: 140px; }
.occ-mailbar .occ-input:focus { box-shadow: none; }
.occ-pause { flex: none; border: none; background: var(--stylo-accent-light); color: var(--stylo-accent); font-weight: 700; font-size: 12.5px; padding: 9px 16px; border-radius: 999px; cursor: pointer; transition: background .18s, color .18s; }
.occ-pause:hover { background: var(--stylo-accent); color: #fff; }
.occ-cols { display: grid; grid-template-columns: 5fr 7fr; gap: 20px; align-items: start; }
.occ-cardsub { font-size: 13px; color: var(--stylo-muted); margin: -8px 0 16px; }
.occ-item.is-off { opacity: .5; }
.occ-item-thumb { width: 46px; height: 46px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 10px; overflow: hidden; background: var(--stylo-surface); border: 1px solid var(--stylo-border); color: var(--stylo-muted); }
.occ-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* on/off switch */
.occ-switch { flex: none; position: relative; width: 40px; height: 22px; cursor: pointer; }
.occ-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.occ-switch span { position: absolute; inset: 0; background: #d9d4cd; border-radius: 999px; transition: background .2s; }
.occ-switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.occ-switch input:checked + span { background: var(--stylo-accent); }
.occ-switch input:checked + span::after { transform: translateX(18px); }
/* subscribable offer chips */
.occ-offers { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.occ-offer { position: relative; text-align: left; display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border: 1.5px solid var(--stylo-border); border-radius: var(--radius-md); background: var(--stylo-surface); cursor: pointer; transition: border-color .18s, box-shadow .18s, background .18s; }
.occ-offer > i { font-size: 20px; color: var(--stylo-accent); margin-bottom: 4px; }
.occ-offer-name { font-weight: 800; font-size: 13.5px; color: var(--stylo-dark); }
.occ-offer-timing { font-size: 11.5px; color: var(--stylo-muted); }
.occ-offer-check { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--stylo-border); background: #fff; display: flex; align-items: center; justify-content: center; color: transparent; font-size: 12px; transition: all .18s; }
.occ-offer:hover { border-color: rgba(var(--stylo-accent-rgb), .5); box-shadow: 0 8px 20px -12px rgba(var(--stylo-accent-rgb), .4); }
.occ-offer.is-on { border-color: var(--stylo-accent); background: var(--stylo-accent-light); }
.occ-offer.is-on .occ-offer-check { background: var(--stylo-accent); border-color: var(--stylo-accent); color: #fff; }

/* Custom animated date picker */
.occ-datepick { position: relative; }
.occ-datefield { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
    padding: 11px 14px; border: 1.5px solid var(--stylo-border); border-radius: var(--radius-md);
    background: #fff; color: var(--stylo-muted); font-size: 14px; cursor: pointer;
    transition: border-color .18s, box-shadow .18s, background .18s; }
.occ-df-ic { color: var(--stylo-accent); font-size: 16px; transition: transform .3s cubic-bezier(.34,1.5,.5,1); }
.occ-df-text { flex: 1 1 auto; }
.occ-datepick.has-val .occ-df-text { color: var(--stylo-dark); font-weight: 700; }
.occ-df-caret { font-size: 12px; color: var(--stylo-muted); transition: transform .25s ease; }
.occ-datefield:hover { border-color: rgba(var(--stylo-accent-rgb), .5); }
.occ-datepick.is-open .occ-datefield { border-color: var(--stylo-accent); box-shadow: 0 0 0 3px rgba(var(--stylo-accent-rgb), .12); }
.occ-datepick.is-open .occ-df-caret { transform: rotate(180deg); }
.occ-datepick.is-open .occ-df-ic { transform: scale(1.15) rotate(-6deg); }

.occ-cal { position: absolute; z-index: 60; top: calc(100% + 8px); left: 0; min-width: 288px; width: 100%;
    background: #fff; border: 1px solid var(--stylo-border); border-radius: 16px; padding: 14px;
    box-shadow: 0 20px 50px -18px rgba(17,17,17,.35);
    transform-origin: top center; opacity: 0; transform: translateY(-8px) scale(.96); pointer-events: none;
    transition: opacity .22s ease, transform .24s cubic-bezier(.34,1.4,.5,1); }
.occ-cal.is-open { opacity: 1; transform: none; pointer-events: auto; }
.occ-cal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.occ-cal-nav { flex: none; width: 34px; height: 34px; border: none; border-radius: 10px; background: var(--stylo-surface);
    color: var(--stylo-dark); cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center;
    transition: background .16s, color .16s; }
.occ-cal-nav:hover { background: var(--stylo-accent); color: #fff; }
.occ-cal-title { flex: 1 1 auto; border: none; background: none; cursor: pointer; font-size: 14.5px; font-weight: 800;
    color: var(--stylo-dark); padding: 8px; border-radius: 8px; transition: background .16s; }
.occ-cal-title:hover { background: var(--stylo-accent-light); color: var(--stylo-accent); }
.occ-cal-wd { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.occ-cal-wd span { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--stylo-muted); padding: 4px 0; }
.occ-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.occ-cal-pad { aspect-ratio: 1; }
.occ-cal-day { aspect-ratio: 1; border: none; background: none; border-radius: 10px; cursor: pointer;
    font-size: 13px; font-weight: 600; color: var(--stylo-dark); transition: background .14s, color .14s, transform .12s; }
.occ-cal-day:hover { background: var(--stylo-accent-light); color: var(--stylo-accent); transform: translateY(-1px); }
.occ-cal-day.is-sel { background: var(--stylo-accent); color: #fff; animation: occPop .32s cubic-bezier(.34,1.5,.5,1); }
.occ-cal-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.occ-cal-mon { padding: 14px 0; border: 1.5px solid var(--stylo-border); background: #fff; border-radius: 10px; cursor: pointer;
    font-size: 13px; font-weight: 700; color: var(--stylo-dark); transition: all .15s; }
.occ-cal-mon:hover { border-color: var(--stylo-accent); background: var(--stylo-accent-light); color: var(--stylo-accent); }
.occ-cal-mon.is-sel { background: var(--stylo-accent); border-color: var(--stylo-accent); color: #fff; }
.occ-cal-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--stylo-border); }
.occ-cal-yr { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--stylo-dark); cursor: pointer; user-select: none; }
.occ-cal-yr input { position: absolute; opacity: 0; }
.occ-cal-yr-sw { position: relative; width: 34px; height: 19px; border-radius: 999px; background: #d9d4cd; transition: background .2s; flex: none; }
.occ-cal-yr-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .2s; }
.occ-cal-yr input:checked + .occ-cal-yr-sw { background: var(--stylo-accent); }
.occ-cal-yr input:checked + .occ-cal-yr-sw::after { transform: translateX(15px); }
.occ-cal-done { border: none; background: var(--stylo-accent); color: #fff; font-weight: 700; font-size: 13px; padding: 8px 20px; border-radius: 999px; cursor: pointer; transition: background .18s; }
.occ-cal-done:hover { background: var(--stylo-accent-hover); }
.occ-swap { animation: occSwap .22s ease; }
.occ-shake { animation: occShake .45s; }
@keyframes occPop { 0% { transform: scale(.6); } 60% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes occSwap { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes occShake { 10%,90% { transform: translateX(-2px); } 20%,80% { transform: translateX(3px); } 30%,50%,70% { transform: translateX(-5px); } 40%,60% { transform: translateX(5px); } }

@media (max-width: 767.98px) { .occ-cols { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) { .occ-item-shop { display: none; } .occ-row-3 { grid-template-columns: 1fr 1fr; } }

/* ── Save → price-drop alert popup ─────────────────────────────────── */
.alert-pop { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.alert-pop[hidden] { display: none; }
.alert-pop-backdrop { position: absolute; inset: 0; background: rgba(17,17,17,.5); opacity: 0; transition: opacity .26s ease; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.alert-pop.is-open .alert-pop-backdrop { opacity: 1; }
.alert-pop-card {
    position: relative; z-index: 1; width: 100%; max-width: 380px;
    background: #fff; border-radius: 20px; padding: 26px 24px 22px;
    box-shadow: 0 30px 70px -20px rgba(17,17,17,.5);
    transform: translateY(24px) scale(.94); opacity: 0;
    transition: transform .3s cubic-bezier(.2,.8,.2,1.2), opacity .26s ease;
}
.alert-pop.is-open .alert-pop-card { transform: translateY(0) scale(1); opacity: 1; }
.alert-pop-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: none; background: var(--stylo-surface); color: var(--stylo-muted); border-radius: 50%; cursor: pointer; transition: background .18s, color .18s; }
.alert-pop-x:hover { background: #f0ebe4; color: var(--stylo-dark); }
.alert-pop-saved { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--stylo-accent); }
.alert-pop-saved i { animation: alertHeart .5s ease; }
@keyframes alertHeart { 0% { transform: scale(0); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }
.alert-pop-prod { display: flex; align-items: center; gap: 12px; margin: 14px 0; padding: 10px; background: var(--stylo-surface); border-radius: 14px; }
.alert-pop-thumb { width: 52px; height: 52px; flex: none; border-radius: 10px; overflow: hidden; background: #fff; }
.alert-pop-thumb img { width: 100%; height: 100%; object-fit: cover; }
.alert-pop-meta { display: flex; flex-direction: column; min-width: 0; }
.alert-pop-name { font-weight: 700; font-size: 13.5px; color: var(--stylo-dark); line-height: 1.35; white-space: normal; }
.alert-pop-price { font-weight: 800; color: var(--stylo-accent); font-size: 15px; }
.alert-pop-title { font-family: var(--stylo-serif); font-weight: 800; font-size: 21px; color: var(--stylo-dark); margin: 6px 0 4px; }
.alert-pop-sub { font-size: 13px; color: var(--stylo-body); line-height: 1.5; margin: 0 0 14px; }
.alert-pop-input { width: 100%; padding: 12px 14px; border: 1.5px solid var(--stylo-border); border-radius: 12px; font-size: 14px; }
.alert-pop-input:focus { outline: none; border-color: var(--stylo-accent); box-shadow: 0 0 0 3px rgba(var(--stylo-accent-rgb), .12); }
.alert-pop-checks { display: flex; gap: 16px; margin: 12px 2px; }
.alert-pop-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--stylo-body); cursor: pointer; }
.alert-pop-check input { accent-color: var(--stylo-accent); }
.alert-pop-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: none; border-radius: 999px; background: var(--stylo-accent); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; transition: background .2s, transform .12s; }
.alert-pop-btn:hover { background: var(--stylo-accent-hover); }
.alert-pop-btn:active { transform: scale(.98); }
.alert-pop-skip { width: 100%; margin-top: 8px; border: none; background: transparent; color: var(--stylo-muted); font-size: 12.5px; cursor: pointer; padding: 6px; }
.alert-pop-skip:hover { color: var(--stylo-dark); }
.alert-pop-note { font-size: 12.5px; color: var(--stylo-accent); text-align: center; margin: 8px 0 0; min-height: 1em; }

/* Price-history chart + stats inside the popup */
.pa-chart { position: relative; height: 96px; margin: 4px 0 10px; border-radius: 12px; background: var(--stylo-surface); border: 1px solid var(--stylo-border); overflow: hidden; }
.pa-chart-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12.5px; color: var(--stylo-muted); }
.pa-spin { width: 15px; height: 15px; border: 2px solid var(--stylo-border); border-top-color: var(--stylo-accent); border-radius: 50%; animation: paSpin .7s linear infinite; }
@keyframes paSpin { to { transform: rotate(360deg); } }
.pa-svg { display: block; width: 100%; height: 100%; }
.pa-line { stroke: var(--stylo-accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pa-dot { fill: var(--stylo-accent); stroke: #fff; stroke-width: 2; }
.pa-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.pa-stat { text-align: center; background: var(--stylo-surface); border: 1px solid var(--stylo-border); border-radius: 10px; padding: 8px 4px; }
.pa-stat-l { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--stylo-muted); font-weight: 700; }
.pa-stat-v { display: block; font-size: 15px; font-weight: 800; margin-top: 2px; color: var(--stylo-dark); }
.pa-stat-v.pa-low { color: #1f9254; }
.pa-target { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 2px 4px; }
.pa-target-lbl { font-size: 13px; font-weight: 700; color: var(--stylo-dark); }
.pa-target-in { display: inline-flex; align-items: center; gap: 2px; border: 1.5px solid var(--stylo-border); border-radius: 10px; padding: 6px 10px; font-weight: 700; color: var(--stylo-muted); }
.pa-target-in:focus-within { border-color: var(--stylo-accent); box-shadow: 0 0 0 3px rgba(var(--stylo-accent-rgb), .12); }
.pa-target-in input { border: none; outline: none; width: 92px; font-size: 14px; font-weight: 700; color: var(--stylo-dark); text-align: right; background: transparent; }

@media (prefers-reduced-motion: reduce) { .alert-pop-card, .alert-pop-backdrop { transition: none; } .alert-pop-saved i { animation: none; } .pa-line { transition: none !important; } }

/* ═══ Price-history popup (wide, graphical) ═══ */
.pp { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.pp[hidden] { display: none; }
.pp-backdrop { position: absolute; inset: 0; background: rgba(30,24,20,.55); backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s; }
.pp.is-open .pp-backdrop { opacity: 1; }
.pp-card { position: relative; width: 100%; max-width: 840px; max-height: 94vh; overflow-y: auto; background: #fff; border-radius: 18px; padding: 18px 26px 18px; box-shadow: 0 30px 80px -20px rgba(20,15,12,.6); transform: translateY(14px) scale(.97); opacity: 0; transition: transform .28s cubic-bezier(.34,1.4,.5,1), opacity .25s; }
.pp.is-open .pp-card { transform: none; opacity: 1; }
.pp-x { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--stylo-dark); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; transition: transform .15s, background .15s; }
.pp-x:hover { transform: rotate(90deg); background: #000; }

/* Header */
.pp-head { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; padding-right: 40px; margin-bottom: 14px; }
.pp-head-l { flex: 1 1 300px; min-width: 0; }
.pp-name { font-family: var(--stylo-serif); font-weight: 800; font-size: 18px; line-height: 1.25; color: var(--stylo-dark); margin: 0 0 7px; }
.pp-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.pp-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; border: 1.5px solid var(--stylo-border); }
.pp-badge-store { color: var(--stylo-accent); border-color: rgba(var(--stylo-accent-rgb), .4); }
.pp-badge-deal { color: #1f9254; border-color: rgba(31,146,84,.35); background: #eef7f1; }
.pp-today { flex: 0 0 auto; min-width: 210px; border: 1.5px solid rgba(var(--stylo-accent-rgb), .3); background: linear-gradient(180deg, #fff, var(--stylo-accent-light)); border-radius: 12px; padding: 9px 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.pp-today-l { flex-basis: 100%; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--stylo-muted); }
.pp-today-price { font-family: var(--stylo-serif); font-weight: 800; font-size: 25px; color: var(--stylo-accent); line-height: 1; }
.pp-trend { font-size: 12px; font-weight: 700; color: var(--stylo-muted); display: inline-flex; align-items: center; gap: 4px; }
.pp-trend.is-down { color: #1f9254; } .pp-trend.is-up { color: #c0392b; }
.pp-best { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800; color: #1f9254; background: #eef7f1; border: 1px solid rgba(31,146,84,.3); padding: 3px 9px; border-radius: 999px; }

/* Stat cards */
.pp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.pp-stat { border: 1px solid var(--stylo-border); border-radius: 12px; padding: 10px 10px; text-align: center; background: #fff; }
.pp-stat-ic { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; margin-bottom: 5px; }
.pp-ic-high { background: #fdecec; color: #c0392b; } .pp-ic-low { background: #eef7f1; color: #1f9254; }
.pp-ic-avg { background: var(--stylo-accent-light); color: var(--stylo-accent); } .pp-ic-cur { background: #eaf1fb; color: #2f6fd6; }
.pp-stat-v { display: block; font-family: var(--stylo-serif); font-weight: 800; font-size: 18px; line-height: 1.1; }
.pp-v-high { color: #c0392b; } .pp-v-low { color: #1f9254; } .pp-v-avg { color: var(--stylo-accent); } .pp-v-cur { color: #2f6fd6; }
.pp-stat-l { display: block; font-size: 11.5px; font-weight: 700; color: var(--stylo-dark); margin-top: 3px; }
.pp-stat-d { display: block; font-size: 10px; color: var(--stylo-muted); margin-top: 1px; }

/* Chart */
.pp-chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.pp-chart-title { font-size: 14px; font-weight: 800; color: var(--stylo-dark); margin: 0; }
.pp-ranges { display: inline-flex; gap: 6px; }
.pp-range { border: 1.5px solid var(--stylo-border); background: #fff; color: var(--stylo-muted); font-size: 11.5px; font-weight: 700; padding: 5px 11px; border-radius: 8px; cursor: pointer; transition: all .15s; }
.pp-range:hover { border-color: var(--stylo-accent); color: var(--stylo-accent); }
.pp-range.is-on { background: var(--stylo-accent); border-color: var(--stylo-accent); color: #fff; }
.pp-chart { position: relative; height: 150px; margin: 6px 0 12px; }
.pp-chart-load { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--stylo-muted); font-size: 13px; }
.pp-svg { display: block; }
.pp-area { fill: url(#ppFill); }
.pp-line { fill: none; stroke: var(--stylo-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pp-dot { fill: #fff; stroke: var(--stylo-accent); stroke-width: 3; }
.pp-dot-low { stroke: #1f9254; } .pp-dot-today { fill: var(--stylo-accent); stroke: #fff; }
.pp-pill { position: absolute; transform: translate(-50%, -100%); background: var(--stylo-accent); color: #fff; font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 9px; white-space: nowrap; box-shadow: 0 6px 16px -6px rgba(0,0,0,.35); }
.pp-pill small { display: block; font-size: 9.5px; font-weight: 700; opacity: .9; letter-spacing: .5px; }
.pp-pill.is-low { background: #1f9254; }
.pp-pill::after { content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); border: 5px solid transparent; border-top-color: inherit; }
.pp-ylab { position: absolute; left: 0; font-size: 11px; color: var(--stylo-muted); transform: translateY(-50%); }
.pp-xlab { position: absolute; bottom: 0; font-size: 11px; color: var(--stylo-muted); transform: translateX(-50%); }

/* Footer / insight / actions */
.pp-foot { border: 1px solid var(--stylo-border); border-radius: 12px; padding: 12px 14px; background: var(--stylo-surface); }
.pp-insight { display: flex; gap: 11px; align-items: center; }
.pp-insight-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--stylo-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.pp-insight-txt { font-size: 13px; line-height: 1.45; color: var(--stylo-body); }
.pp-insight-txt strong { color: var(--stylo-dark); }
.pp-insight-txt .hl { color: var(--stylo-accent); font-weight: 800; }
.pp-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 11px; }
.pp-email { flex: 1 1 200px; min-width: 160px; display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--stylo-border); border-radius: 999px; padding: 0 14px; background: #fff; transition: border-color .18s, box-shadow .18s; }
.pp-email:focus-within { border-color: var(--stylo-accent); box-shadow: 0 0 0 3px rgba(var(--stylo-accent-rgb), .12); }
.pp-email-ic { color: var(--stylo-accent); font-size: 15px; flex: none; }
.pp-email-in { flex: 1 1 auto; min-width: 0; border: none; outline: none; padding: 10px 0; font-size: 14px; background: transparent; color: var(--stylo-dark); }
.pp-btn { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13.5px; padding: 10px 18px; border-radius: 999px; border: none; cursor: pointer; text-decoration: none; transition: background .18s, transform .12s, box-shadow .18s; }
.pp-btn-alert { background: var(--stylo-accent); color: #fff; }
.pp-btn-alert:hover { background: var(--stylo-accent-hover); }
.pp-btn-alert.is-set { background: #1f9254; }
.pp-btn-deal { background: var(--stylo-dark); color: #fff; margin-left: auto; }
.pp-btn-deal:hover { background: #000; color: #fff; transform: translateY(-1px); }
.pp-btn:active { transform: scale(.98); }
.pp-note { font-size: 12px; color: var(--stylo-muted); margin: 9px 0 0; min-height: 1em; display: flex; align-items: center; gap: 6px; }
.pp-note i { color: var(--stylo-accent); }
.pp-note.is-err { color: #c0392b; } .pp-note.is-err i { color: #c0392b; }

@media (max-width: 640px) {
    .pp-card { padding: 22px 18px 18px; }
    .pp-stats { grid-template-columns: repeat(2, 1fr); }
    .pp-today { min-width: 0; width: 100%; }
    .pp-btn-deal { margin-left: 0; }
    .pp-actions .pp-btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .pp-backdrop, .pp-card { transition: none; } }

/* ── Auth (shopper sign in / register) ─────────────────────────────── */
.auth-wrap { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 48px 20px; background: linear-gradient(180deg, var(--stylo-surface), #fff 45%); }
.auth-card { width: 100%; max-width: 420px; background: #fff; border: 1px solid var(--stylo-border); border-radius: var(--radius-lg); padding: 34px 32px; box-shadow: 0 1px 2px rgba(17,17,17,.04), 0 20px 45px rgba(17,17,17,.07); text-align: center; }
.auth-logo { display: inline-block; margin-bottom: 12px; }
.auth-title { font-family: var(--stylo-serif); font-weight: 900; font-size: 26px; color: var(--stylo-dark); margin: 0 0 6px; }
.auth-sub { font-size: 13.5px; color: var(--stylo-body); line-height: 1.55; margin: 0 0 20px; }
.auth-err { background: #fdecec; color: #c0392b; border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 16px; text-align: left; }
.auth-label { display: block; text-align: left; font-size: 12.5px; font-weight: 700; color: var(--stylo-dark); margin: 12px 0 5px; }
.auth-input { width: 100%; padding: 11px 13px; border: 1.5px solid var(--stylo-border); border-radius: var(--radius-md); font-size: 14px; }
.auth-input:focus { outline: none; border-color: var(--stylo-accent); box-shadow: 0 0 0 3px rgba(var(--stylo-accent-rgb), .12); }
.auth-remember { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--stylo-body); margin: 14px 0 4px; cursor: pointer; text-align: left; }
.auth-remember input { accent-color: var(--stylo-accent); }
.auth-btn { width: 100%; margin-top: 16px; padding: 12px; border: none; border-radius: 999px; background: var(--stylo-accent); color: #fff; font-weight: 700; font-size: 14.5px; cursor: pointer; transition: background .2s, transform .12s; }
.auth-btn:hover { background: var(--stylo-accent-hover); }
.auth-btn:active { transform: scale(.98); }
.auth-alt { font-size: 13px; color: var(--stylo-body); margin: 18px 0 0; }
.auth-alt a { color: var(--stylo-accent); font-weight: 700; text-decoration: none; }
.auth-alt a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════
   STYLE JOURNAL (BLOG)
   Listing + article pages. Reuses the terracotta accent + Playfair
   serif so it reads as part of the same brand.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Shared bits ── */
.blog-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12.5px; color: var(--stylo-muted); margin-bottom: 14px; }
.blog-crumbs a { color: var(--stylo-accent); text-decoration: none; }
.blog-crumbs a:hover { text-decoration: underline; }
.blog-crumbs span { color: var(--stylo-border); }

.blog-cat, .blog-card-cat, .blog-hero-tag {
    display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--stylo-accent);
}
.blog-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--stylo-muted); }
.blog-meta i { color: var(--stylo-accent); margin-right: 3px; }

/* ── Masthead ── */
.blog-masthead { padding: 46px 0 8px; }
.blog-masthead-title { font-family: var(--stylo-serif); font-weight: 800; font-size: clamp(2rem, 5vw, 3.1rem); color: var(--stylo-dark); margin: 0 0 10px; }
.blog-masthead-lead { font-size: 1.08rem; color: var(--stylo-body); max-width: 640px; margin: 0; }

/* ── Category filter ── */
.blog-filters { display: flex; flex-wrap: wrap; gap: 10px; padding: 22px 0 30px; }
.blog-chip {
    display: inline-flex; align-items: center; padding: 8px 18px; border-radius: 100px;
    font-size: 13.5px; font-weight: 600; color: var(--stylo-dark); text-decoration: none;
    background: #fff; border: 1px solid var(--stylo-border); transition: all .18s ease;
}
.blog-chip:hover { border-color: var(--stylo-accent); color: var(--stylo-accent); }
.blog-chip.is-on { background: var(--stylo-accent); border-color: var(--stylo-accent); color: #fff; }

/* ── Featured hero ── */
.blog-hero {
    display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; margin-bottom: 48px;
    background: #fff; border: 1px solid var(--stylo-border); border-radius: 18px; overflow: hidden;
    text-decoration: none; color: inherit; transition: box-shadow .25s ease, transform .25s ease;
}
.blog-hero:hover { box-shadow: 0 18px 46px rgba(0,0,0,.10); transform: translateY(-3px); }
.blog-hero-media { position: relative; min-height: 340px; }
.blog-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-hero-tag { position: absolute; top: 16px; left: 16px; background: var(--stylo-dark); color: #fff !important; padding: 6px 14px; border-radius: 100px; }
.blog-hero-body { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.blog-hero-title { font-family: var(--stylo-serif); font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2.15rem); color: var(--stylo-dark); line-height: 1.18; margin: 12px 0 14px; }
.blog-hero-excerpt { color: var(--stylo-body); font-size: 1.02rem; line-height: 1.6; margin-bottom: 20px; }
.blog-hero-cta { color: var(--stylo-accent); font-weight: 700; font-size: 14.5px; margin-top: 18px; }
.blog-hero-cta i { transition: transform .2s ease; }
.blog-hero:hover .blog-hero-cta i { transform: translateX(4px); }

/* ── Article grid + cards ── */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.blog-card {
    background: #fff; border: 1px solid var(--stylo-border); border-radius: 16px; overflow: hidden;
    display: flex; flex-direction: column; transition: box-shadow .22s ease, transform .22s ease;
}
.blog-card:hover { box-shadow: 0 14px 34px rgba(0,0,0,.09); transform: translateY(-3px); }
.blog-card-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.blog-card:hover .blog-card-media img { transform: scale(1.05); }
.blog-card-cat { position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,.94); color: var(--stylo-accent) !important; padding: 5px 12px; border-radius: 100px; backdrop-filter: blur(4px); }
.blog-card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.blog-card-title { font-family: var(--stylo-serif); font-weight: 700; font-size: 1.2rem; line-height: 1.3; margin: 0 0 10px; }
.blog-card-title a { color: var(--stylo-dark); text-decoration: none; }
.blog-card-title a:hover { color: var(--stylo-accent); }
.blog-card-excerpt { color: var(--stylo-body); font-size: .94rem; line-height: 1.55; margin-bottom: 16px; flex: 1; }

/* ── Shop CTA band ── */
.blog-shop-cta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
    margin: 56px 0 20px; padding: 36px 40px; border-radius: 18px;
    background: linear-gradient(120deg, var(--stylo-accent-light), #fff);
    border: 1px solid var(--stylo-border);
}
.blog-shop-cta-title { font-family: var(--stylo-serif); font-weight: 800; font-size: 1.6rem; color: var(--stylo-dark); margin: 0 0 6px; }
.blog-shop-cta-text { color: var(--stylo-body); margin: 0; }
.blog-shop-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ═══ ARTICLE PAGE ═══ */
.post-head { padding: 40px 0 4px; }
.post-title { font-family: var(--stylo-serif); font-weight: 800; font-size: clamp(2rem, 4.4vw, 3rem); color: var(--stylo-dark); line-height: 1.12; margin: 12px 0 16px; max-width: 900px; }
.post-standfirst { font-size: 1.2rem; line-height: 1.55; color: var(--stylo-body); max-width: 760px; margin: 0 0 22px; }
.post-byline { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13.5px; color: var(--stylo-muted); padding-bottom: 8px; border-bottom: 1px solid var(--stylo-border); }
.post-byline i { color: var(--stylo-accent); margin-right: 4px; }
.post-byline-author { font-weight: 600; color: var(--stylo-dark); }
.post-updated { color: var(--stylo-accent); }

.post-hero { margin: 26px 0 8px; }
.post-hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px; display: block; }

/* Body + rail layout */
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; padding: 34px 0 10px; align-items: start; }

/* Article typography */
.post-body { font-size: 1.075rem; line-height: 1.75; color: var(--stylo-body); max-width: 760px; }
.post-body .post-lead { font-size: 1.2rem; line-height: 1.65; color: var(--stylo-dark); margin-bottom: 26px; }
.post-body h2 { font-family: var(--stylo-serif); font-weight: 800; font-size: 1.72rem; color: var(--stylo-dark); margin: 40px 0 14px; line-height: 1.22; }
.post-body h3 { font-weight: 700; font-size: 1.24rem; color: var(--stylo-dark); margin: 28px 0 10px; }
.post-body p { margin: 0 0 18px; }
.post-body ul, .post-body ol { margin: 0 0 20px; padding-left: 24px; }
.post-body li { margin-bottom: 10px; }
.post-body a { color: var(--stylo-accent); text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }
.post-body a:hover { color: var(--stylo-accent-hover); }
.post-body strong { color: var(--stylo-dark); }

/* Callout box */
.post-callout {
    display: flex; gap: 14px; align-items: flex-start; margin: 26px 0;
    padding: 20px 22px; border-radius: 14px; background: var(--stylo-accent-light);
    border-left: 4px solid var(--stylo-accent); font-size: 1.02rem; line-height: 1.6;
}
.post-callout i { color: var(--stylo-accent); font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
.post-callout strong { color: var(--stylo-dark); }

/* Inline "shop this" cta */
.post-inline-cta { margin: 24px 0; }
.post-inline-cta a {
    display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 100px;
    background: var(--stylo-dark); color: #fff !important; font-weight: 600; text-decoration: none !important; font-size: .98rem;
    transition: background .2s ease;
}
.post-inline-cta a:hover { background: var(--stylo-accent); }
.post-inline-cta a i { transition: transform .2s ease; }
.post-inline-cta a:hover i { transform: translateX(4px); }

/* End-of-article CTA */
.post-endcta {
    margin: 40px 0 10px; padding: 32px; border-radius: 18px; text-align: center;
    background: linear-gradient(120deg, var(--stylo-accent-light), #fff); border: 1px solid var(--stylo-border);
}
.post-endcta h3 { font-family: var(--stylo-serif); font-weight: 800; font-size: 1.5rem; color: var(--stylo-dark); margin: 0 0 8px; }
.post-endcta p { color: var(--stylo-body); margin: 0 0 18px; }

/* Tags + share */
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 34px 0 8px; }
.post-tag { font-size: 12.5px; color: var(--stylo-muted); background: var(--stylo-surface); border: 1px solid var(--stylo-border); padding: 5px 12px; border-radius: 100px; }
.post-share { display: flex; align-items: center; gap: 16px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--stylo-border); }
.post-share-label { font-weight: 600; color: var(--stylo-dark); font-size: 14px; }
.post-share-links { display: flex; gap: 10px; }
.post-share-links a {
    width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--stylo-surface); color: var(--stylo-dark); border: 1px solid var(--stylo-border); transition: all .18s ease; font-size: 16px;
}
.post-share-links a:hover { background: var(--stylo-accent); color: #fff; border-color: var(--stylo-accent); transform: translateY(-2px); }

/* Sticky rail */
.post-rail { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 20px; }
.post-rail-card { background: #fff; border: 1px solid var(--stylo-border); border-radius: 16px; padding: 22px; }
.post-rail-shop { background: linear-gradient(160deg, var(--stylo-accent-light), #fff); }
.post-rail-title { font-family: var(--stylo-serif); font-weight: 700; font-size: 1.12rem; color: var(--stylo-dark); margin: 0 0 12px; }
.post-rail-title i { color: var(--stylo-accent); margin-right: 6px; }
.post-rail-shop p { font-size: .92rem; color: var(--stylo-body); margin-bottom: 16px; }
.post-rail-list { list-style: none; margin: 0; padding: 0; }
.post-rail-list li + li { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--stylo-border); }
.post-rail-list a { display: flex; gap: 12px; align-items: center; text-decoration: none; }
.post-rail-list img { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.post-rail-list span { font-size: .9rem; font-weight: 600; color: var(--stylo-dark); line-height: 1.35; }
.post-rail-list a:hover span { color: var(--stylo-accent); }

/* Related posts */
.post-related { background: var(--stylo-surface); margin-top: 56px; padding: 48px 0 60px; }
.post-related-title { font-family: var(--stylo-serif); font-weight: 800; font-size: 1.8rem; color: var(--stylo-dark); margin: 0 0 28px; }

/* Header nav blog link — plain title, matches the department links */
.nav-blog-link { font-weight: 600; }

/* ── Responsive ── */
@media (max-width: 991px) {
    .post-layout { grid-template-columns: 1fr; gap: 36px; }
    .post-rail { position: static; flex-direction: row; flex-wrap: wrap; }
    .post-rail-card { flex: 1; min-width: 260px; }
    .blog-hero { grid-template-columns: 1fr; }
    .blog-hero-media { min-height: 240px; }
}
@media (max-width: 767px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .blog-shop-cta, .blog-hero-body { padding: 26px; }
    .post-rail { flex-direction: column; }
}
@media (max-width: 560px) {
    .blog-grid { grid-template-columns: 1fr; }
    .blog-masthead { padding: 30px 0 4px; }
    .post-body { font-size: 1.02rem; }
    .post-share { flex-direction: column; align-items: flex-start; }
}

/* ── Blog pager (phones only) ─────────────────────────────────────
   Driven by blog.js. Desktop keeps the full grid, so the control never
   appears there and the hidden cards are only ever hidden on a phone. */
.blog-pager { display: none; }
.blog-card.is-paged-out { display: none !important; }

@media (max-width: 767.98px) {
    .blog-pager {
        display: flex; flex-direction: column; align-items: center; gap: 10px;
        margin-top: 24px;
    }
    .blog-pager[hidden] { display: none; }
    .blog-pager-row { display: flex; align-items: center; gap: 6px; }
    .blog-pager-pages { display: flex; gap: 6px; }

    .blog-pager-btn, .blog-page {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 38px; height: 38px; padding: 0 10px;
        border: 1px solid var(--stylo-border); border-radius: 10px;
        background: #fff; color: var(--stylo-dark);
        font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
        transition: background .15s, border-color .15s, color .15s;
    }
    .blog-pager-btn { border-radius: 50%; padding: 0; }
    .blog-pager-btn:disabled { opacity: .35; }
    .blog-page.is-on {
        background: var(--stylo-accent); border-color: var(--stylo-accent); color: #fff;
    }
    .blog-pager-note { margin: 0; font-size: 12px; color: var(--stylo-muted); }

    /* At one column the grid gap is the page's rhythm; six cards is plenty
       of scroll already, so tighten it a little. */
    .blog-grid { gap: 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   HOME — MOBILE SECTION SELECTION
   ═══════════════════════════════════════════════════════════════
   Every column on the home page stacks below 768px, so the 8/4 and 5/7
   splits turn into one queue of 44 analytics cards. The rule applied
   here: a card survives on a phone only if it is tappable and leads to a
   product or a filtered list. Cards whose value is the comparison
   graphic — ranked bars, spark bars, gauges, discount-depth rows, heat
   weights — are dropped, because at 360px the graphic is the first thing
   to become unreadable and what remains is a label the pulse bar in row
   2 has already stated.

   Nothing here changes the desktop page, and nothing is removed from the
   DOM: the markup still ships, so the content stays indexable.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

    /* ── Row 1 · Hero ─────────────────────────────────────────────
       Eight trending chips wrap to three lines and push the CTA off the
       first screen; four is a full row. The CTA's tail sentence costs a
       line of its own at this width. */
    .hero-chips a.trending-tag:nth-of-type(n+5) { display: none; }
    .hero-cta-tail { display: none; }

    /* ── Row 3 · Departments ──────────────────────────────────────
       "Deals live now" and "You save, on avg" repeat two of the six
       figures already scrolling in the pulse bar; "Shop the big names"
       repeats the featured-brands row further down; and "What everyone's
       buying" is a second product card directly under the first. What is
       left is one deal to act on and the fresh-in strip. */
    .an-c-drops,
    .an-c-avgdisc,
    .an-c-stores,
    .an-c-loved { display: none; }

    /* The department sparkline is a 30px silhouette of the division mix,
       repeated on all eight cards. The graphic goes; its caption — "Led
       by <division>" — is the fact worth keeping and costs one line. */
    .deptx .mw-wrap { display: none; }
    .deptx .mw { padding-top: 4px; }
    .dept-grid { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }

    /* ── Rows 4–6 · Fashion / Beauty / Accessories ────────────────
       The rails and the audience tabs stay; the panel beside each one is
       cut to a single card that does something the rail cannot.

       The bar-and-spark reads go because they cannot be read at this
       width. "Leading right now" / "Beauty bestseller" go for a
       different reason: each hub passes products[0] as its `top`, so
       that card is literally the first card of the rail it sits under —
       side by side on desktop it is a callout, stacked on a phone it is
       the same product twice. "Trending styles" overlaps "Shop by
       occasion", and the lone-number cards repeat the pulse bar.

       What survives: Fashion → Shop by occasion. Beauty → Build your
       routine + Just launched. Accessories → Best price drop. */
    .an-c-heatmap,
    .an-c-brand,
    .an-c-price,
    .an-c-discount,
    .an-c-material,
    .an-c-brands,
    .an-c-onsale,
    .an-c-top,
    .an-c-styles,
    .an-c-freshstat,
    .an-c-u25 { display: none; }

    /* One card left in each — the panel's own "Rail Intelligence · Live
       counts" header is labelling a single tile at that point. The rails
       keep their heads; those name the carousel. */
    .hub .hub-panel-fill > .panel-head { display: none; }

    /* Section headers: the subtitle is a catalogue statistic, one line
       per section, and the title carries the same meaning without it. */
    .hub-subtitle { display: none; }
    .hub-title { font-size: 21px; margin: 4px 0 0; }
    .hub-header { margin-bottom: 14px; gap: 12px; }

    /* Fifth accessories tile is a radial chart with no link, sitting in a
       row of four shoppable photo tiles. */
    .acc-col-data { display: none; }

    /* Nothing half-width is left in these panels now, so no orphan can
       sit next to a hole. Kept as a guard for any card added later. */
    .hub .an-grid > .an-card { grid-column: 1 / -1; }

    /* ── Row 7 · Shopping ─────────────────────────────────────────
       "Where the money is right now" comes off the phone entirely — deals
       are still one tap away from the Offers link in the header and the
       deal cards in row 3. The inner rules below stay so the section
       comes back correctly trimmed if it is ever shown here again. */
    .hub-shopping { display: none; }
    .deal-col-pulse,
    .deal-chart-coupon,
    .an-c-depth,
    .an-c-mostcuts { display: none; }

    /* ── Row 9 · Featured brands ──────────────────────────────────
       Twelve cards at two-across was six rows of images. As one
       continuously drifting row it costs a single card's height, and all
       twelve stay reachable. carousel.js moves it; touching it pauses it,
       and it stops entirely when it scrolls out of view or the visitor
       asks for reduced motion.

       No scroll-snap here: snapping fights the per-frame scrollLeft the
       drift writes, and the row would spring back every frame. */
    .brand-scroller {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* overflow-x makes overflow-y `auto`, which would clip the card's
           press shadow without a little room below */
        padding-bottom: 6px;
    }
    .brand-scroller::-webkit-scrollbar { display: none; }
    .brand-rail {
        flex-wrap: nowrap;
        /* the row's negative gutters sit outside a scroll container's
           reachable area, so they go */
        margin-left: 0; margin-right: 0;
        --bs-gutter-x: .75rem;
    }
    .brand-rail [class*="col-"] {
        flex: 0 0 auto;
        width: clamp(150px, 44vw, 200px);   /* ~2 cards, third peeking */
    }
    .brand-loop { display: flex; flex: 0 0 auto; }

    /* ── Row 11 · How Intelligent Search Works ────────────────────
       Off the phone entirely. The same wizard is one tap away from the
       hero CTA and the Smart Search button in the header, so the page
       ends on the brands rail instead of an explainer. */
    .how-section { display: none; }
}

/* Department cards go two-up on phones (col-6), so the card itself has to
   work at roughly 170px: the chevron is redundant next to a whole card
   that is a link, the thumb and type step down, and the "Led by" caption
   — which needs a line of its own at this width — is kept for the wider
   of the two mobile widths only. */
@media (max-width: 575.98px) {
    .deptx { padding: 9px; gap: 4px; }
    .deptx-head { gap: 8px; }
    .deptx-thumb { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 8px; }
    .deptx-thumb i { font-size: 15px; }
    .deptx-name { font-size: 12.5px; }
    .deptx-count { font-size: 10px; }
    .deptx-arrow { display: none; }
    .deptx .mw { display: none; }
}


/* ═══════════════════════════════════════════════════════════════
   STATIC PAGES — shared design system
   ═══════════════════════════════════════════════════════════════
   One vocabulary behind About, Contact, Careers, Press, Advertise,
   Help, the three legal pages and the sitemap.

   Three rules the first pass got wrong and this one holds to:

   1. A fashion site shows fashion. The catalogue is the asset — real
      product imagery and real retailer logos, not prose describing
      them.
   2. The page has a pulse. Sections alternate light / surface / dark
      so scrolling has rhythm instead of six identical white bands.
   3. Everything arrives. Reveals hang off the site's existing
      [data-chart-animate] observer, which adds .is-drawn on entry and
      removes it on exit — so these pages animate exactly like the home
      page, and honour prefers-reduced-motion through the same switch.
   ═══════════════════════════════════════════════════════════════ */

/* ── Reveal primitives ──────────────────────────────────────────
   Opt in with [data-chart-animate] on a container; children carrying
   .pg-rise come up in sequence. --i is the child's index. */
.pg-rise {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s cubic-bezier(.22,.61,.36,1),
                transform .6s cubic-bezier(.22,.61,.36,1);
    transition-delay: calc(var(--i, 0) * 70ms);
}
.is-drawn .pg-rise, .pg-rise.is-drawn { opacity: 1; transform: none; }

.pg-fade { opacity: 0; transition: opacity .7s ease calc(var(--i, 0) * 70ms); }
.is-drawn .pg-fade { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .pg-rise, .pg-fade { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── Hero ───────────────────────────────────────────────────────── */
.pg-hero {
    position: relative;
    padding: 56px 0 64px;
    background:
        radial-gradient(90% 120% at 88% 8%, rgba(var(--stylo-accent-rgb), .16) 0%, rgba(var(--stylo-accent-rgb), 0) 62%),
        linear-gradient(178deg, #fdf6f2 0%, #fff 82%);
    border-bottom: 1px solid var(--stylo-border);
    overflow: hidden;
}
.pg-hero > .container { position: relative; z-index: 2; }

/* Split hero: argument on the left, evidence on the right. */
.pg-hero-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; }

.pg-crumbs { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--stylo-muted); margin-bottom: 20px; }
.pg-crumbs a { color: var(--stylo-muted); text-decoration: none; }
.pg-crumbs a:hover { color: var(--stylo-accent); }

.pg-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--stylo-accent);
    background: #fff; border: 1px solid rgba(var(--stylo-accent-rgb), .22);
    padding: 6px 13px; border-radius: 999px;
    box-shadow: 0 2px 10px rgba(var(--stylo-accent-rgb), .10);
}
.pg-title {
    font-family: var(--stylo-serif); font-weight: 800;
    font-size: clamp(32px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -.6px;
    color: var(--stylo-dark);
    margin: 20px 0 0;
}
/* The accent word carries a hand-drawn underline that sweeps in. */
.pg-title em { font-style: normal; color: var(--stylo-accent); position: relative; white-space: nowrap; }
.pg-title em::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: .06em; height: .1em;
    background: rgba(var(--stylo-accent-rgb), .28); border-radius: 3px;
    transform: scaleX(0); transform-origin: left;
    transition: transform .8s cubic-bezier(.22,.61,.36,1) .45s;
}
.is-drawn .pg-title em::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .pg-title em::after { transform: scaleX(1); transition: none; } }

.pg-lead { font-size: clamp(15px, 1.35vw, 17.5px); line-height: 1.68; color: var(--stylo-body); margin: 18px 0 0; max-width: 56ch; }
.pg-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.pg-hero-note { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 12.5px; color: var(--stylo-muted); }
.pg-hero-note i { color: var(--stylo-accent); }
.pg-updated { display: inline-flex; align-items: center; gap: 7px; margin-top: 22px; font-size: 12px; color: var(--stylo-muted); }

/* ── Hero collage — real catalogue imagery ─────────────────────── */
.pg-collage {
    position: relative;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
    /* Four tiles, not six: the hero has to stay one screen tall, and a
       taller collage just leaves dead space beside the headline. */
    max-width: 460px; margin-left: auto;
}
.pg-collage-col { display: flex; flex-direction: column; gap: 14px; }
/* The second column rides lower, so the block reads as composed rather
   than as a table of pictures. */
.pg-collage-col:nth-child(2) { padding-top: 34px; }
.pg-shot {
    position: relative; display: block; overflow: hidden;
    border-radius: 16px; background: var(--stylo-surface);
    box-shadow: 0 16px 38px rgba(26,18,14,.10);
    aspect-ratio: 4 / 5;
    opacity: 0; transform: translateY(26px) scale(.97);
    transition: opacity .7s cubic-bezier(.22,.61,.36,1) calc(var(--i,0) * 90ms),
                transform .7s cubic-bezier(.22,.61,.36,1) calc(var(--i,0) * 90ms);
}
.is-drawn .pg-shot { opacity: 1; transform: none; }
.pg-shot:nth-child(even) { aspect-ratio: 1 / 1; }
.pg-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.pg-shot:hover img { transform: scale(1.06); }
.pg-shot-tag {
    position: absolute; left: 10px; bottom: 10px;
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(255,255,255,.94); backdrop-filter: blur(6px);
    border-radius: 999px; padding: 5px 11px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .3px; color: var(--stylo-dark);
}
.pg-shot-tag b { color: var(--stylo-accent); font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .pg-shot { opacity: 1; transform: none; } }

/* A floating live badge pinned over the collage */
.pg-collage-badge {
    position: absolute; left: -22px; top: 42%;
    display: flex; align-items: center; gap: 9px;
    background: #fff; border: 1px solid var(--stylo-border); border-radius: 14px;
    padding: 11px 15px; box-shadow: 0 14px 34px rgba(26,18,14,.14); z-index: 3;
}
.pg-collage-badge .pg-live-dot {
    width: 8px; height: 8px; border-radius: 50%; background: #2fa36b;
    box-shadow: 0 0 0 0 rgba(47,163,107,.5); animation: pgPulse 2s ease-out infinite;
}
@keyframes pgPulse { 70% { box-shadow: 0 0 0 9px rgba(47,163,107,0); } 100% { box-shadow: 0 0 0 0 rgba(47,163,107,0); } }
.pg-collage-badge span { font-size: 11.5px; color: var(--stylo-muted); line-height: 1.3; }
.pg-collage-badge b { display: block; font-size: 13px; color: var(--stylo-dark); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .pg-collage-badge .pg-live-dot { animation: none; } }

/* ── Stat ribbon ────────────────────────────────────────────────── */
.pg-figures {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--stylo-border); border-radius: var(--radius-lg);
    background: #fff; overflow: hidden; margin-top: 46px;
}
.pg-figure { padding: 22px 24px; border-right: 1px solid var(--stylo-border); }
.pg-figure:last-child { border-right: 0; }
.pg-figure i { color: var(--stylo-accent); font-size: 15px; }
.pg-figure b {
    display: block; margin-top: 10px;
    font-family: var(--stylo-serif); font-weight: 800; font-size: 30px; line-height: 1;
    color: var(--stylo-dark); font-variant-numeric: tabular-nums;
}
.pg-figure span { display: block; margin-top: 6px; font-size: 12px; color: var(--stylo-muted); line-height: 1.45; }
.pg-figure em { font-style: normal; display: block; margin-top: 3px; font-size: 11px; color: #b0a99f; }

/* ── Retailer logo marquee — proof, not a claim ─────────────────── */
.pg-logos { padding: 34px 0; border-bottom: 1px solid var(--stylo-border); background: #fff; overflow: hidden; }
.pg-logos-label {
    text-align: center; font-size: 10.5px; font-weight: 800; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--stylo-muted); margin-bottom: 22px;
}
.pg-logos-track { display: flex; width: max-content; animation: pg-logo-scroll 46s linear infinite; }
.pg-logos:hover .pg-logos-track { animation-play-state: paused; }
@keyframes pg-logo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.pg-logos-run { display: flex; align-items: center; gap: 46px; padding-right: 46px; }
.pg-logo {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    text-decoration: none; flex: 0 0 auto; min-width: 96px;
    filter: grayscale(1); opacity: .62; transition: filter .25s, opacity .25s;
}
.pg-logo:hover { filter: none; opacity: 1; }
.pg-logo img { height: 30px; width: auto; max-width: 120px; object-fit: contain; }
.pg-logo-name { font-family: var(--stylo-serif); font-size: 17px; font-weight: 800; color: var(--stylo-dark); white-space: nowrap; }
.pg-logo-count { font-size: 10.5px; color: var(--stylo-muted); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .pg-logos-track { animation: none; } .pg-logos { overflow-x: auto; } }

/* ── Section rhythm ─────────────────────────────────────────────── */
.pg-section { padding: 74px 0; }
.pg-section--surface { background: var(--stylo-surface); }
.pg-section--tight { padding: 46px 0; }
.pg-section--dark { background: var(--stylo-dark); color: rgba(255,255,255,.78); }
.pg-head { max-width: 62ch; margin-bottom: 40px; }
.pg-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.pg-kicker {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 10.5px; font-weight: 800; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--stylo-accent); margin-bottom: 14px;
}
.pg-kicker::before { content: ''; width: 22px; height: 2px; background: var(--stylo-accent); border-radius: 2px; }
.pg-head--center .pg-kicker::before { display: none; }
.pg-h2 {
    font-family: var(--stylo-serif); font-weight: 800;
    font-size: clamp(25px, 2.9vw, 38px); line-height: 1.14; letter-spacing: -.3px;
    color: var(--stylo-dark); margin: 0;
}
.pg-section--dark .pg-h2 { color: #fff; }
.pg-section--dark .pg-kicker { color: #e69a5c; }
.pg-section--dark .pg-kicker::before { background: #e69a5c; }
.pg-h3 { font-size: 16px; font-weight: 700; color: var(--stylo-dark); margin: 0 0 7px; }
.pg-p { font-size: 15.5px; line-height: 1.75; color: var(--stylo-body); margin: 16px 0 0; }
.pg-p--lead { font-size: 17px; line-height: 1.7; }
.pg-section--dark .pg-p { color: rgba(255,255,255,.72); }
.pg-p a { color: var(--stylo-accent); }
.pg-section--dark .pg-p a { color: #e69a5c; }
.pg-strong { font-weight: 700; color: var(--stylo-dark); }
.pg-section--dark .pg-strong { color: #fff; }

/* ── Cards ──────────────────────────────────────────────────────── */
.pg-grid { display: grid; gap: 18px; }
.pg-grid--2 { grid-template-columns: repeat(2, 1fr); }
.pg-grid--3 { grid-template-columns: repeat(3, 1fr); }
.pg-grid--4 { grid-template-columns: repeat(4, 1fr); }

.pg-card {
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    background: #fff; border: 1px solid var(--stylo-border);
    border-radius: var(--radius-lg); padding: 26px 24px;
    transition: border-color .25s, box-shadow .25s, transform .25s;
}
a.pg-card { text-decoration: none; }
/* An accent rule that draws across the top on hover */
.pg-card::before {
    content: ''; position: absolute; inset: 0 auto auto 0; height: 3px; width: 100%;
    background: linear-gradient(90deg, var(--stylo-accent), #e69a5c);
    transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.pg-card:hover::before { transform: scaleX(1); }
.pg-card:hover { border-color: rgba(var(--stylo-accent-rgb), .4); box-shadow: 0 18px 40px rgba(26,18,14,.09); transform: translateY(-3px); }
.pg-card-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 14px; margin-bottom: 18px;
    background: var(--stylo-accent-light); color: var(--stylo-accent); font-size: 20px;
    transition: background .25s, color .25s, transform .25s;
}
.pg-card:hover .pg-card-icon { background: var(--stylo-accent); color: #fff; transform: rotate(-6deg); }
.pg-card h3 { font-size: 17px; font-weight: 700; color: var(--stylo-dark); margin: 0 0 9px; }
.pg-card p { font-size: 14.5px; line-height: 1.65; color: var(--stylo-body); margin: 0; }
.pg-card-link { margin-top: 16px; font-size: 13px; font-weight: 700; color: var(--stylo-accent); display: inline-flex; align-items: center; gap: 6px; }
.pg-card-link i { transition: transform .2s; }
.pg-card:hover .pg-card-link i { transform: translateX(4px); }

/* Feature card — one tile carries more weight than its neighbours */
.pg-card--feature {
    grid-column: span 2; grid-row: span 2;
    background: linear-gradient(150deg, var(--stylo-dark) 0%, #2a2320 100%);
    border-color: var(--stylo-dark); justify-content: flex-end; min-height: 300px;
}
.pg-card--feature::before { display: none; }
.pg-card--feature h3 { color: #fff; font-family: var(--stylo-serif); font-size: 26px; line-height: 1.2; }
.pg-card--feature p { color: rgba(255,255,255,.7); font-size: 15px; max-width: 46ch; }
.pg-card--feature .pg-card-icon { background: rgba(230,154,92,.16); color: #e69a5c; }
.pg-card--feature:hover .pg-card-icon { background: #e69a5c; color: var(--stylo-dark); }
.pg-card--feature .pg-card-link { color: #e69a5c; }
.pg-card--feature:hover { border-color: #e69a5c; }

/* ── Numbered steps with a rail that draws ──────────────────────── */
.pg-steps { position: relative; padding-left: 6px; }
.pg-steps::before {
    content: ''; position: absolute; left: 27px; top: 34px; bottom: 34px; width: 2px;
    background: linear-gradient(180deg, var(--stylo-accent), rgba(var(--stylo-accent-rgb), .12));
    transform: scaleY(0); transform-origin: top;
    transition: transform 1.1s cubic-bezier(.4,0,.2,1) .2s;
}
.is-drawn .pg-steps::before { transform: scaleY(1); }
.pg-step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 22px; padding: 22px 0; }
.pg-step-num {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: #fff; border: 2px solid var(--stylo-accent); color: var(--stylo-accent);
    font-family: var(--stylo-serif); font-weight: 800; font-size: 17px;
    position: relative; z-index: 1; transition: background .3s, color .3s;
}
.pg-step:hover .pg-step-num { background: var(--stylo-accent); color: #fff; }
.pg-section--surface .pg-step-num { background: var(--stylo-surface); }
.pg-step h3 { font-size: 18px; font-weight: 700; color: var(--stylo-dark); margin: 9px 0 8px; }
.pg-step p { font-size: 15px; line-height: 1.7; color: var(--stylo-body); margin: 0; }
@media (prefers-reduced-motion: reduce) { .pg-steps::before { transform: scaleY(1); } }

/* ── Before / after contrast ────────────────────────────────────── */
.pg-compare { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.pg-compare-col { border-radius: var(--radius-lg); padding: 32px 30px; border: 1px solid var(--stylo-border); }
.pg-compare-col--before { background: #fff; }
.pg-compare-col--after { background: var(--stylo-dark); border-color: var(--stylo-dark); box-shadow: 0 22px 50px rgba(26,18,14,.18); }
.pg-compare-col h3 { font-size: 12.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; margin: 0 0 20px; }
.pg-compare-col--before h3 { color: var(--stylo-muted); }
.pg-compare-col--after h3 { color: #e69a5c; }
.pg-compare-list { list-style: none; margin: 0; padding: 0; }
.pg-compare-list li { display: flex; gap: 12px; font-size: 15px; line-height: 1.55; padding: 11px 0; }
.pg-compare-col--before li { color: var(--stylo-body); }
.pg-compare-col--after li { color: rgba(255,255,255,.86); }
.pg-compare-list i { flex: 0 0 auto; margin-top: 3px; font-size: 14px; }
.pg-compare-col--before i { color: #c9c2b8; }
.pg-compare-col--after i { color: #7bd88f; }

/* ── Accent callout ─────────────────────────────────────────────── */
.pg-callout {
    position: relative; overflow: hidden;
    border: 1px solid rgba(var(--stylo-accent-rgb), .26);
    background: linear-gradient(130deg, var(--stylo-accent-light), #fff 72%);
    border-radius: var(--radius-lg); padding: 36px 38px;
}
.pg-callout-mark { color: var(--stylo-accent); font-size: 24px; margin-bottom: 10px; display: block; }

/* ── Pull quote ─────────────────────────────────────────────────── */
.pg-quote { max-width: 60ch; }
.pg-quote p {
    font-family: var(--stylo-serif); font-weight: 700;
    font-size: clamp(21px, 2.3vw, 30px); line-height: 1.35; color: #fff; margin: 0;
}
.pg-quote span { display: block; margin-top: 18px; font-size: 13px; color: rgba(255,255,255,.5); }

/* ── FAQ — animated accordion (pages.js) ────────────────────────── */
.pg-faq { border-top: 1px solid var(--stylo-border); }
.pg-section--surface .pg-faq { border-color: #e4dfd7; }
.pg-faq-item { border-bottom: 1px solid var(--stylo-border); }
.pg-section--surface .pg-faq-item { border-color: #e4dfd7; }
.pg-faq-q {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    width: 100%; text-align: left; background: none; border: 0;
    padding: 22px 0; cursor: pointer;
    font-family: inherit; font-size: 16px; font-weight: 700; color: var(--stylo-dark);
    transition: color .2s;
}
.pg-faq-q:hover { color: var(--stylo-accent); }
.pg-faq-sign {
    flex: 0 0 auto; position: relative; width: 24px; height: 24px; border-radius: 50%;
    border: 1px solid var(--stylo-border); transition: background .25s, border-color .25s, transform .3s;
}
.pg-faq-sign::before, .pg-faq-sign::after {
    content: ''; position: absolute; left: 50%; top: 50%; background: var(--stylo-accent);
    transform: translate(-50%, -50%); transition: transform .3s cubic-bezier(.22,.61,.36,1), background .25s;
}
.pg-faq-sign::before { width: 10px; height: 1.5px; }
.pg-faq-sign::after  { width: 1.5px; height: 10px; }
.pg-faq-item.is-open .pg-faq-sign { background: var(--stylo-accent); border-color: var(--stylo-accent); transform: rotate(180deg); }
.pg-faq-item.is-open .pg-faq-sign::before { background: #fff; }
.pg-faq-item.is-open .pg-faq-sign::after  { transform: translate(-50%, -50%) scaleY(0); }

/* Height is animated by transitioning a grid track, which needs no
   measured pixel value and so survives text reflow at any width. */
.pg-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s cubic-bezier(.22,.61,.36,1); }
.pg-faq-item.is-open .pg-faq-a { grid-template-rows: 1fr; }
.pg-faq-a > div { overflow: hidden; }
.pg-faq-body {
    padding: 0 0 24px; font-size: 15px; line-height: 1.75; color: var(--stylo-body); max-width: 74ch;
    opacity: 0; transform: translateY(-6px); transition: opacity .3s ease .06s, transform .3s ease .06s;
}
.pg-faq-item.is-open .pg-faq-body { opacity: 1; transform: none; }
.pg-faq-body p { margin: 0 0 12px; }
.pg-faq-body p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
    .pg-faq-a, .pg-faq-body, .pg-faq-sign, .pg-faq-sign::before, .pg-faq-sign::after { transition: none; }
}

/* ── What-happens-next timeline (contact) ───────────────────────── */
.pg-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.pg-track-item { position: relative; padding: 0 26px 0 0; }
.pg-track-item::before {
    content: ''; position: absolute; left: 0; right: 0; top: 15px; height: 2px;
    background: var(--stylo-border);
}
/* The rail runs between the dots, not out past the ends of the row. */
.pg-track-item:first-child::before { left: 16px; }
.pg-track-item:last-child::before { right: calc(100% - 32px); }
.pg-track-dot {
    position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--stylo-accent); color: #fff; font-size: 14px;
}
.pg-track-item h3 { font-size: 15.5px; font-weight: 700; color: var(--stylo-dark); margin: 18px 0 6px; }
.pg-track-item p { font-size: 14px; line-height: 1.6; color: var(--stylo-body); margin: 0; max-width: 32ch; }

/* ── Closing CTA band ───────────────────────────────────────────── */
.pg-cta {
    position: relative; overflow: hidden; padding: 66px 0;
    background: linear-gradient(140deg, var(--stylo-dark) 0%, #2b2320 55%, #3a2a22 100%);
}
.pg-cta::after {
    content: ''; position: absolute; right: -120px; bottom: -160px;
    width: 460px; height: 460px; border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--stylo-accent-rgb), .22) 0%, rgba(var(--stylo-accent-rgb), 0) 70%);
}
.pg-cta > .container { position: relative; z-index: 1; }
.pg-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.pg-cta h2 { font-family: var(--stylo-serif); font-weight: 800; font-size: clamp(24px, 2.7vw, 34px); color: #fff; margin: 0 0 10px; line-height: 1.18; }
.pg-cta p { color: rgba(255,255,255,.62); margin: 0; font-size: 15px; max-width: 54ch; }
.pg-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1199.98px) {
    .pg-hero-split { gap: 36px; }
    .pg-collage-badge { left: -10px; }
}
@media (max-width: 991.98px) {
    .pg-hero-split { grid-template-columns: 1fr; gap: 40px; }
    .pg-collage { max-width: 520px; }
    .pg-collage-badge { left: auto; right: 8px; top: auto; bottom: -14px; }
    .pg-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .pg-card--feature { grid-column: span 2; grid-row: auto; min-height: 240px; }
    .pg-figures { grid-template-columns: repeat(2, 1fr); }
    .pg-figure:nth-child(2) { border-right: 0; }
    .pg-figure:nth-child(-n+2) { border-bottom: 1px solid var(--stylo-border); }
}
@media (max-width: 767.98px) {
    /* Bootstrap's g-5 puts a 48px gutter on the row, which becomes a -24px
       margin either side — wider than the container's 12px padding, so the row
       box hangs past the viewport. Nothing is visibly cut (the columns pad it
       back), but a box wider than the screen is one background away from
       being a real bug. Halve the gutter and it lines up exactly. */
    .pg-section .row, .pg-hero .row { --bs-gutter-x: 1.5rem; }

    .pg-hero { padding: 30px 0 36px; }
    .pg-crumbs { margin-bottom: 14px; }
    .pg-title { margin-top: 14px; }
    .pg-lead { font-size: 14.5px; margin-top: 12px; }
    .pg-hero-actions { margin-top: 20px; gap: 9px; }
    .pg-hero-split { gap: 28px; }

    .pg-collage { gap: 10px; max-width: none; }
    .pg-collage-col:nth-child(2) { padding-top: 22px; }
    /* Floated over the tiles there is no clear space at this width — it landed
       on a product and clipped at the edge. Below them it has room. */
    .pg-collage-badge {
        position: static; grid-column: 1 / -1;
        justify-self: start; margin-top: 12px; padding: 9px 13px;
    }
    .pg-collage-badge b { font-size: 12px; }
    .pg-collage-badge span { font-size: 10.5px; }

    .pg-figures { margin-top: 26px; }
    .pg-figure { padding: 15px 16px; }
    .pg-figure b { font-size: 22px; }
    .pg-figure span { font-size: 11px; }
    .pg-figure em { display: none; }

    .pg-logos { padding: 22px 0; }
    .pg-logos-run { gap: 30px; padding-right: 30px; }
    .pg-logo img { height: 24px; }
    .pg-logo-name { font-size: 15px; }

    .pg-section { padding: 40px 0; }
    .pg-section--tight { padding: 28px 0; }
    .pg-head { margin-bottom: 24px; }
    .pg-p { font-size: 14.5px; margin-top: 12px; }
    .pg-p--lead { font-size: 15.5px; }

    .pg-grid { gap: 12px; }
    .pg-grid--2, .pg-grid--3, .pg-grid--4 { grid-template-columns: 1fr; }
    .pg-card { padding: 20px 18px; }
    .pg-card--feature { grid-column: auto; min-height: 0; }
    .pg-card--feature h3 { font-size: 21px; }
    .pg-card-icon { width: 38px; height: 38px; font-size: 17px; margin-bottom: 13px; }

    .pg-steps { padding-left: 0; }
    .pg-steps::before { left: 19px; }
    .pg-step { grid-template-columns: 40px 1fr; gap: 15px; padding: 15px 0; }
    .pg-step-num { width: 38px; height: 38px; font-size: 15px; }
    .pg-step h3 { font-size: 16px; margin-top: 6px; }
    .pg-step p { font-size: 14px; }

    .pg-compare { grid-template-columns: 1fr; gap: 12px; }
    .pg-compare-col { padding: 22px 19px; }
    .pg-compare-list li { font-size: 14px; padding: 8px 0; }
    .pg-callout { padding: 24px 20px; }

    /* the timeline turns vertical, rail down the left */
    .pg-track { grid-template-columns: 1fr; gap: 0; }
    .pg-track-item { padding: 0 0 22px 42px; }
    .pg-track-item::before { left: 15px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
    .pg-track-item:last-child::before { bottom: calc(100% - 16px); right: auto; }
    .pg-track-dot { position: absolute; left: 0; top: 0; }
    .pg-track-item h3 { margin: 4px 0 5px; font-size: 15px; }
    .pg-track-item p { max-width: none; font-size: 13.5px; }

    .pg-faq-q { font-size: 15px; padding: 17px 0; }
    .pg-faq-body { font-size: 14.5px; padding-bottom: 18px; }

    .pg-cta { padding: 38px 0; }
    .pg-cta-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
    .pg-cta::after { display: none; }
}

/* ── Fact table (press) ─────────────────────────────────────────── */
.pg-facts { background: #fff; border: 1px solid var(--stylo-border); border-radius: var(--radius-lg); overflow: hidden; }
.pg-fact { display: grid; grid-template-columns: 40% 1fr; gap: 14px; padding: 15px 20px; border-bottom: 1px solid var(--stylo-border); }
.pg-fact:last-child { border-bottom: 0; }
.pg-fact dt { font-size: 12.5px; color: var(--stylo-muted); margin: 0; }
.pg-fact dd { font-size: 13.5px; font-weight: 600; color: var(--stylo-dark); margin: 0; }

/* ── Copy-ready boilerplate block (press) ───────────────────────── */
.pg-boiler {
    position: relative; background: var(--stylo-surface);
    border: 1px solid var(--stylo-border); border-left: 3px solid var(--stylo-accent);
    border-radius: var(--radius-md); padding: 24px 26px;
}
.pg-boiler p { font-size: 15.5px; line-height: 1.75; color: var(--stylo-dark); margin: 0 0 12px; }
.pg-boiler p:last-child { margin-bottom: 0; }
.pg-boiler-tag {
    display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px;
    font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--stylo-accent);
}

/* ── Priced option card (advertise) ─────────────────────────────── */
.pg-card-tag {
    position: absolute; top: 20px; right: 20px;
    font-size: 11px; font-weight: 800; letter-spacing: .4px;
    padding: 5px 11px; border-radius: 999px;
    background: var(--stylo-accent-light); color: var(--stylo-accent);
}
.pg-card--dark .pg-card-tag { background: rgba(230,154,92,.16); color: #e69a5c; }

/* ── Empty state (careers roles) ────────────────────────────────── */
.pg-empty {
    display: flex; gap: 20px; align-items: flex-start;
    background: #fff; border: 1px dashed var(--stylo-border);
    border-radius: var(--radius-lg); padding: 30px 32px;
}
.pg-empty > i { font-size: 30px; color: var(--stylo-accent); flex: 0 0 auto; }
.pg-empty h3 { font-size: 18px; font-weight: 700; color: var(--stylo-dark); margin: 0 0 8px; }
.pg-empty p { font-size: 15px; line-height: 1.7; color: var(--stylo-body); margin: 0; }

/* ── Link groups (sitemap) ──────────────────────────────────────── */
.pg-linkgroup h3 {
    font-size: 11px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase;
    color: var(--stylo-accent); margin: 0 0 14px; padding-bottom: 12px;
    border-bottom: 1px solid var(--stylo-border);
}
.pg-linkgroup ul { list-style: none; margin: 0; padding: 0; }
.pg-linkgroup li + li { margin-top: 2px; }
.pg-linkgroup a {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 0; font-size: 14.5px; color: var(--stylo-body); text-decoration: none;
    transition: color .18s, padding-left .18s;
}
.pg-linkgroup a i { font-size: 12px; opacity: 0; transform: translateX(-4px); transition: opacity .18s, transform .18s; }
.pg-linkgroup a:hover { color: var(--stylo-accent); padding-left: 5px; }
.pg-linkgroup a:hover i { opacity: 1; transform: none; }

/* ═══ LEGAL PAGES ═══════════════════════════════════════════════
   A long policy is read in two modes: scanned for the one clause that
   matters, or read through once. The contents rail serves the first and
   the measure serves the second, so the body is capped near 70ch. */
.lg-badge {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 10.5px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase;
    color: var(--stylo-accent); background: #fff;
    border: 1px solid rgba(var(--stylo-accent-rgb), .22);
    padding: 6px 13px; border-radius: 999px;
}
.lg-layout { display: grid; grid-template-columns: 260px 1fr; gap: 56px; align-items: start; }
/* Grid items default to min-width:auto, so a wide child — the policy tables —
   refuses to let its column shrink and drags the whole page past the viewport.
   This is what lets the layout narrow at all. */
.lg-layout > * { min-width: 0; }

.lg-rail { position: sticky; top: 96px; }
.lg-rail-title {
    font-size: 11px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase;
    color: var(--stylo-muted); margin: 0 0 14px;
}
.lg-toc { display: flex; flex-direction: column; border-left: 2px solid var(--stylo-border); }
.lg-toc a {
    padding: 8px 0 8px 16px; margin-left: -2px;
    border-left: 2px solid transparent;
    font-size: 13.5px; line-height: 1.45; color: var(--stylo-body); text-decoration: none;
    transition: color .18s, border-color .18s;
}
.lg-toc a:hover { color: var(--stylo-accent); }
.lg-toc a.is-on { color: var(--stylo-accent); border-left-color: var(--stylo-accent); font-weight: 600; }

.lg-help { margin-top: 26px; background: var(--stylo-surface); border: 1px solid var(--stylo-border);
           border-radius: var(--radius-md); padding: 18px; }
.lg-help p { font-size: 13px; color: var(--stylo-body); margin: 0 0 12px; line-height: 1.55; }

/* Body typography — the whole point of a legal page */
.lg-body { max-width: 72ch; font-size: 16px; line-height: 1.78; color: var(--stylo-body); }
.lg-body > *:first-child { margin-top: 0; }
.lg-body h2 {
    font-family: var(--stylo-serif); font-weight: 800; font-size: 25px; line-height: 1.25;
    color: var(--stylo-dark); margin: 48px 0 14px; scroll-margin-top: 100px;
    padding-top: 24px; border-top: 1px solid var(--stylo-border);
}
.lg-body > h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.lg-body h3 { font-size: 17px; font-weight: 700; color: var(--stylo-dark); margin: 28px 0 10px; }
.lg-body p { margin: 0 0 16px; }
.lg-body ul, .lg-body ol { margin: 0 0 18px; padding-left: 22px; }
.lg-body li { margin-bottom: 9px; }
.lg-body li::marker { color: var(--stylo-accent); }
.lg-body a { color: var(--stylo-accent); }
.lg-body strong { color: var(--stylo-dark); }
.lg-body table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 14.5px; }
.lg-body th, .lg-body td { text-align: left; padding: 11px 14px; border: 1px solid var(--stylo-border); vertical-align: top; }
.lg-body th { background: var(--stylo-surface); font-weight: 700; color: var(--stylo-dark); font-size: 13px; }
/* A placeholder the operator still has to fill in should be impossible to miss */
.lg-body .lg-fill {
    background: #fff5d6; border-bottom: 2px solid #e0b83a; border-radius: 3px;
    padding: 1px 6px; font-weight: 700; color: #7a5c00; white-space: nowrap;
}
.lg-summary {
    background: linear-gradient(130deg, var(--stylo-accent-light), #fff 72%);
    border: 1px solid rgba(var(--stylo-accent-rgb), .26);
    border-radius: var(--radius-lg); padding: 24px 26px; margin: 0 0 36px;
}
.lg-summary h2 { border: 0; padding: 0; margin: 0 0 10px; font-size: 20px; }
.lg-summary p:last-child { margin-bottom: 0; }

.lg-foot { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--stylo-border); }
.lg-foot a {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13.5px; font-weight: 600; color: var(--stylo-dark); text-decoration: none;
    border: 1px solid var(--stylo-border); border-radius: 999px; padding: 9px 17px;
    transition: border-color .2s, color .2s, background .2s;
}
.lg-foot a:hover { border-color: var(--stylo-accent); color: var(--stylo-accent); background: var(--stylo-accent-light); }

/* ── Responsive: pages added above ──────────────────────────────── */
@media (max-width: 991.98px) {
    .lg-layout { grid-template-columns: 1fr; gap: 30px; }
    /* The rail stops being a rail and becomes a jump list above the text. */
    .lg-rail { position: static; }
    .lg-toc { flex-direction: row; flex-wrap: wrap; gap: 8px; border-left: 0; }
    .lg-toc a {
        padding: 8px 14px; margin: 0; border: 1px solid var(--stylo-border); border-radius: 999px;
        font-size: 12.5px; background: #fff;
    }
    .lg-toc a.is-on { border-color: var(--stylo-accent); background: var(--stylo-accent-light); }
    .lg-help { display: none; }
}
@media (max-width: 767.98px) {
    .pg-fact { grid-template-columns: 1fr; gap: 3px; padding: 12px 15px; }
    .pg-boiler { padding: 18px 17px; }
    .pg-boiler p { font-size: 14.5px; }
    .pg-empty { flex-direction: column; gap: 12px; padding: 22px 19px; }
    .pg-empty > i { font-size: 24px; }
    .pg-card-tag { position: static; align-self: flex-start; margin-bottom: 12px; }

    .lg-body { font-size: 15.5px; line-height: 1.75; }
    .lg-body h2 { font-size: 21px; margin: 32px 0 12px; padding-top: 20px; }
    .lg-body h3 { font-size: 16px; }
    /* A three-column policy table cannot usefully shrink to 320px. The table
       becomes its own scroll container and the real table layout is restored
       on an inner element, so it scrolls itself instead of the page. */
    .lg-body table {
        display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
        max-width: 100%; font-size: 13.5px;
    }
    .lg-body table thead, .lg-body table tbody { display: table; width: 100%; min-width: 420px; }
    .lg-body table th, .lg-body table td { padding: 9px 11px; }
    .lg-summary { padding: 18px 17px; margin-bottom: 26px; }
    .lg-foot { margin-top: 32px; }
}

/* ═══════════════════════════════════════════════════════════════
   TABLETS — reclaim the side gutters
   ═══════════════════════════════════════════════════════════════
   Bootstrap's container steps in fixed jumps: 720px from 768 up, then
   960px from 992, then 1140px from 1200. So a viewport sitting just
   under a breakpoint gets the previous step and wastes the difference —
   measured across the site:

       960px  viewport → 720px container → 120px dead each side (25%)
      1199px  viewport → 960px container → 120px dead each side (20%)
      1180px  viewport → 960px container → 110px dead each side (19%)

   Those are ordinary tablet sizes — a 960px screen was showing content
   in 696px. Through the whole tablet band the container goes fluid with
   a fixed 32px margin instead, so width always tracks the screen.

   It lands where the desktop container starts: at 1199px this gives
   1135px of content and at 1200px Bootstrap's own container gives 1140px,
   so nothing jumps as you cross the breakpoint. Desktop is untouched. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm {
        max-width: 100%;
        padding-left: 32px;
        padding-right: 32px;
    }

    /* The extra room is worth spending on a column rather than on wider
       cards: at 720px two cards were already stretched, and the band now
       runs to ~1135px. The feature tile still spans two of the three. */
    .pg-grid--4 { grid-template-columns: repeat(3, 1fr); }
}

/* Between 768 and 991 the hero still stacks, so the collage no longer has
   a column to sit in — let it use the width it has rather than staying
   pinned at its narrow two-up size. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .pg-collage { max-width: 620px; margin-inline: auto; }
}

/* ── Error pages ────────────────────────────────────────────────
   404 / 403 / 419 / 429 keep the site chrome (the app is healthy in
   those cases). 500 and 503 are standalone documents — see the note
   in errors/500.blade.php. */
.er-hero { padding: 64px 0 56px; }
.er-wrap { max-width: 46rem; }
.er-code {
    display: block;
    font-family: var(--stylo-serif); font-weight: 800;
    font-size: clamp(64px, 12vw, 118px); line-height: .9; letter-spacing: -3px;
    background: linear-gradient(120deg, var(--stylo-accent) 0%, #e69a5c 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    margin-bottom: 6px;
}
@media (max-width: 767.98px) {
    .er-hero { padding: 34px 0 30px; }
    .er-code { letter-spacing: -2px; }
}

/* ── Search suggestions must escape the hero ─────────────────────────────
   .stylo-hero sets overflow:hidden (to contain .hero-decor) and
   isolation:isolate. Together those clipped the suggest panel at the hero's
   bottom edge and trapped its z-index:1090 inside the hero's stacking
   context, so the dropdown rendered behind the .pulse-bar strip below it.
   .hero-decor already self-clips (position:absolute; inset:0; overflow:hidden)
   and .hero-rings is inset:0, so nothing actually relies on the hero clipping.
   Scoped to the open state via :has() so the hero renders exactly as before
   whenever the dropdown is closed. */
.stylo-hero:has(.sg-open) {
    overflow: visible;
    isolation: auto;
}

/* ── Advisor: step back one question ─────────────────────────────────────
   Sits to the left of the title, mirroring .advisor-x on the right. Hidden
   on the first turn (nothing to go back to) and on the results screen. */
.advisor-back {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--stylo-border); background: #fff;
    color: var(--stylo-body); cursor: pointer; transition: all .2s;
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: 2px;
}
.advisor-back:hover {
    border-color: var(--stylo-accent);
    color: var(--stylo-accent);
    transform: translateX(-2px);
}
.advisor-back[hidden] { display: none; }

/* The head is a 3-up row once the arrow is present, so the title still
   centres between the two controls rather than shifting when it appears. */
.advisor-head > div { flex: 1 1 auto; }

@media (prefers-reduced-motion: reduce) {
    .advisor-back { transition: none; }
    .advisor-back:hover { transform: none; }
}

/* ── Advisor: long option lists ──────────────────────────────────────────
   The list is now drawn from the category tree, not just from what is in
   stock, so a question can carry 15-30 choices. Scroll the grid itself and
   keep the question, progress and Continue button in view, rather than
   letting a long list push Continue below the fold. */
.aq-options {
    max-height: min(46vh, 430px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--stylo-border) transparent;
}
.aq-options::-webkit-scrollbar { width: 8px; }
.aq-options::-webkit-scrollbar-track { background: transparent; }
.aq-options::-webkit-scrollbar-thumb {
    background: var(--stylo-border); border-radius: 999px;
}
.aq-options::-webkit-scrollbar-thumb:hover { background: var(--stylo-muted); }

/* Continue sits outside the scrolling grid, so it stays in view without
   needing sticky positioning (which behaves oddly on an inline-flex box). */

/* ── Advisor: which step the shopper is on ───────────────────────────────
   Sits left of the progress bar, matching .advisor-count on the right. The
   badge carries the step number only — the conversation ends when few enough
   products remain, so a fixed "of N" would be a promise we cannot keep. */
.advisor-step {
    flex-shrink: 0;
    font-size: 11px; font-weight: 700; letter-spacing: .02em;
    color: var(--stylo-accent);
    background: var(--stylo-accent-light);
    border-radius: 999px; padding: 4px 10px;
    white-space: nowrap; font-variant-numeric: tabular-nums;
}
.advisor-step[hidden] { display: none; }

@media (max-width: 575px) {
    .advisor-progress { gap: 8px; }
    .advisor-step { padding: 3px 8px; font-size: 10.5px; }
}

/* ── Advisor: options with no stock yet ──────────────────────────────────
   The list is drawn from the category tree, so branches the shop is built
   for but has not stocked appear too. Shown, clearly marked, not clickable:
   choosing one narrowed the catalogue to zero and ended the conversation. */
.aq-option.is-empty {
    opacity: .5;
    cursor: not-allowed;
    background: var(--stylo-surface);
}
.aq-option.is-empty:hover { border-color: var(--stylo-border); transform: none; }
.aq-option.is-empty .aq-count {
    font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--stylo-muted);
}

/* ── Advisor sits above the search suggestions ───────────────────────────
   .sg-panel is z-index 1090. The panel used to only appear after navigating
   away from the search box, so the two never overlapped; now that a search
   submit opens the panel in place, it has to win. */
.advisor { z-index: 1300; }   /* above .pp (1200), which comes later in the DOM */