/* ============================================================
   CmtyOne AIO — Unified Design System
   Tenant sites: dark streetwear theme (Supreme/Palace/GolfWang)
   Platform (CmtyOne): light editorial theme
   ============================================================ */

/* ── Fonts ─────────────────────────────────────────────────── */
@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/jost-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/jost-700.woff2') format('woff2');
}

/* ── Reset & Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Accessibility: skip-to-content + global :focus-visible ──
   The skip link is offscreen until it receives focus (Tab from URL bar),
   then becomes a visible button so keyboard users can jump past nav.
   :focus-visible re-establishes a visible focus ring on inputs/buttons
   that have `outline: none` — which is most of the form/select widgets. */
.skip-link {
    position: absolute;
    top: -100px;
    left: 12px;
    z-index: 9999;
    padding: 10px 16px;
    background: var(--tenant-primary, #000);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    border-radius: 4px;
    transition: top 0.15s;
}
.skip-link:focus {
    top: 12px;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

:focus-visible {
    outline: 2px solid var(--tenant-primary, #1976d2);
    outline-offset: 2px;
    border-radius: 2px;
}
/* Allow specific styled controls (cards, thumbs) to opt out and provide
   their own focus styling, but leave the default in place everywhere
   else — including form inputs that previously had `outline: none`. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
    outline: 2px solid var(--tenant-primary, #1976d2);
    outline-offset: 2px;
}
/* Don't show the focus ring on programmatic focus of the main landmark
   (we focus it on skip-link click but it's not an interactive control). */
main:focus-visible { outline: none; }

/* Reset fieldset styles — used in polls form for radio group semantics */
.poll-fieldset { border: none; padding: 0; margin: 0; min-width: 0; }

/* Visually hidden utility for screen-reader-only content (e.g. live regions
   for vote announcements). Available globally. */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--tenant-font-body);
    line-height: 1.6;
    color: var(--tenant-text);
    background-color: var(--tenant-bg);
    overflow-x: hidden;
}
body.nav-open { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

/* ── Typography ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--tenant-font-heading);
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.5rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }

/* ── Layout ─────────────────────────────────────────────────── */
.main-content {
    min-height: calc(100vh - 200px);
}

.content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    width: 100%;
}

.page-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* ── Navigation ─────────────────────────────────────────────── */
.main-nav {
    background: var(--tenant-nav-bg);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--tenant-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background 0.3s;
    padding-top: env(safe-area-inset-top, 0px);
}

.main-nav.is-scrolled {
    background: var(--tenant-nav-bg);
    background: color-mix(in srgb, var(--tenant-nav-bg) 80%, transparent);
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    .main-nav.is-scrolled { opacity: 0.92; }
}

/* On mobile Safari the status bar uses the static theme-color meta tag,
   so keep nav fully opaque when scrolled to avoid a mismatch. */
@media (max-width: 768px) {
    .main-nav {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .main-nav.is-scrolled {
        background: var(--tenant-nav-bg);
    }
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
}

.nav-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    border-bottom: 3px solid var(--tenant-primary);
    padding-bottom: 2px;
    position: relative;
    font-family: var(--tenant-font-heading);
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--tenant-nav-text, var(--tenant-text));
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.nav-logo-img {
    height: 28px;
    width: auto;
    display: block;
}

/* The hub's mark is a wordmark, not a monogram. A tenant logo is close to
   square, so 28px tall is also about 28px wide; the wordmark at the same
   height runs 188px and takes nearly half of a phone's width. Set by height
   rather than width so it keeps its own proportions. */
.nav-logo-wordmark { height: 20px; }

@media (min-width: 768px) {
    .nav-logo-wordmark { height: 26px; }
}

.nav-beta {
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.5rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tenant-text-muted);
    opacity: 0.5;
    white-space: nowrap;
    pointer-events: none;
}

:root[data-theme="light"] .nav-logo-img {
    filter: invert(1);
}

.nav-logo-sub {
    font-family: var(--tenant-font-heading);
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--tenant-nav-text, var(--tenant-text));
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    margin-left: 0.5rem;
}

.nav-links {
    display: flex;
    gap: 1.75rem;
    align-items: center;
}

.nav-links a {
    color: var(--tenant-nav-text, var(--tenant-text));
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.25rem 0;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s;
}

.nav-links a:hover,
.nav-links a.active {
    border-bottom-color: var(--tenant-primary);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.nav-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    border-radius: 4px;
    cursor: pointer;
    color: var(--tenant-nav-text, var(--tenant-text));
    padding: 0;
    opacity: 0.7;
    transition: opacity 0.2s, border-color 0.2s;
}

.nav-theme-toggle:hover {
    opacity: 1;
    border-color: var(--tenant-text-muted);
}

.nav-social {
    flex-shrink: 0;
}

.nav-social-link {
    color: var(--tenant-nav-text, var(--tenant-text));
    display: flex;
    align-items: center;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.nav-social-link:hover { opacity: 1; }

/* Hamburger */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.nav-toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--tenant-nav-text, var(--tenant-text));
    transition: transform 0.3s, opacity 0.3s;
}

.nav-toggle.active .nav-toggle-bar:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle.active .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.active .nav-toggle-bar:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Nav search button */
.nav-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--tenant-nav-text, var(--tenant-text));
    padding: 0;
    opacity: 0.6;
    transition: opacity 0.2s;
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.nav-search-btn:hover {
    opacity: 1;
}

/* Search inside mobile menu — hidden on desktop */
.nav-search-mobile {
    display: none;
}

/* Mobile fullscreen overlay — hidden by default, lives OUTSIDE main-nav */
.nav-mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2147483647; /* above ad units; core.js moves it last in <body> to win ties */
    background: var(--tenant-nav-bg);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    gap: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.nav-mobile-overlay.active {
    display: flex;
}

.nav-mobile-overlay a {
    color: var(--tenant-nav-text, var(--tenant-text));
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0.9rem 0;
    text-decoration: none;
    transition: color 0.15s;
}

.nav-mobile-overlay a:hover,
.nav-mobile-overlay a.active {
    color: var(--tenant-primary);
}

.nav-mobile-overlay .nav-search-mobile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    color: var(--tenant-nav-text, var(--tenant-text));
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
    padding: 0.9rem 0;
}

.nav-mobile-overlay .nav-search-mobile svg {
    opacity: 0.6;
}

.nav-mobile-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: var(--tenant-nav-text, var(--tenant-text));
    cursor: pointer;
    padding: 0.5rem;
    opacity: 0.7;
    transition: opacity 0.15s;
}
.nav-mobile-close:hover { opacity: 1; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
    display: inline-block;
    padding: 0.75rem 2rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    border: 2px solid var(--tenant-primary);
    background: var(--tenant-primary);
    color: #fff;
}

.btn:hover {
    background: transparent;
    color: var(--tenant-primary);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--tenant-text);
    color: var(--tenant-text);
}

.btn-outline:hover {
    background: var(--tenant-text);
    color: var(--tenant-bg);
}
.btn-sm {
    padding: 0.4rem 1rem;
    font-size: 0.75rem;
    border-width: 1px;
    margin-bottom: 1.5rem;
}

.btn-secondary {
    background: var(--tenant-bg-surface);
    border-color: var(--tenant-border);
    color: var(--tenant-text);
}

.btn-secondary:hover {
    border-color: var(--tenant-text);
}

/* ── Breadcrumbs ────────────────────────────────────────────── */
.breadcrumb {
    font-size: 0.75rem;
    color: var(--tenant-text-muted);
    margin-bottom: 1rem;
    padding: 1rem 0 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: center;
}

.breadcrumb a { color: var(--tenant-text-muted); }
.breadcrumb a:hover { color: var(--tenant-text); }
.breadcrumb .separator { margin: 0 0.5rem; }
.breadcrumb .current { color: var(--tenant-text); }

/* ── Page Header ────────────────────────────────────────────── */
.page-header {
    text-align: center;
    margin-bottom: 2.5rem;
    padding-bottom: 1rem;
}

.page-header h1 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    letter-spacing: 0.01em;
    margin-bottom: 0.5rem;
}

.page-header p {
    color: var(--tenant-text-muted);
    font-size: 1rem;
}

@media (max-width: 768px) {
    .breadcrumb { padding-top: 0.5rem; margin-bottom: 0.25rem; font-size: 0.6rem; letter-spacing: 0.05em; opacity: 0.7; }
    .breadcrumb .separator { margin: 0 0.3rem; }
    .page-header { margin-bottom: 1rem; padding-bottom: 0.5rem; }
    .page-header h1 { font-size: 1.35rem; letter-spacing: 0.02em; }
    /* Hidden on phones: the countdown strip immediately below states the same
       season, milestone and date, so this sentence was a second copy costing
       three centred lines above the fold. The date still reaches mobile
       crawlers and readers through the <title>, the meta description, the
       visible FAQ further down and its FAQPage/Event schema, so nothing about
       "when does FW26 drop" is lost. Desktop keeps it: there is room, and the
       strip is less prominent on a wide screen. */
    .season-drop-line { display: none; }
}

/* ── Section Headers (with "VIEW ALL" link) ─────────────────── */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1.5rem;
}

.section-header h2 {
    margin-bottom: 0;
}

.section-header .section-link {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tenant-text-muted);
    transition: color 0.2s;
}

.section-header .section-link:hover {
    color: var(--tenant-primary);
}

/* ── Home Page ──────────────────────────────────────────────── */

/* Break home page out of content-wrapper constraints */
.content-wrapper:has(.home-page) {
    max-width: none;
    padding: 0;
}

.home-page {
    padding: 0;
}

/* Contained sections */
.home-section {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 6rem;
    padding: 0 2.5rem;
}

/* Section label (small text above section title) */
.section-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--tenant-primary);
    margin-bottom: 0.35rem;
}

/* Home-page section header with sub-label */
.home-section .section-header {
    align-items: flex-end;
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--tenant-border);
}

.section-header-text h2 {
    margin: 0;
    line-height: 1;
}

.home-section .section-header .section-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}
/* On phones the header's right-hand cluster ("Next Drop" + "View all") is wider than the
   space next to the title and pushed the page 15px past the viewport at 390px: let it wrap. */
@media (max-width: 768px) {
    .home-section .section-header { flex-wrap: wrap; gap: 0.5rem 1rem; }
}

/* Scroll-reveal animation */
[data-reveal-section] {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.7s cubic-bezier(0.22, 0.68, 0, 1.1),
                transform 0.7s cubic-bezier(0.22, 0.68, 0, 1.1);
}

[data-reveal-section].is-visible {
    opacity: 1;
    transform: translateY(0);
}

[data-reveal-item] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s cubic-bezier(0.22, 0.68, 0, 1.1),
                transform 0.5s cubic-bezier(0.22, 0.68, 0, 1.1);
}

[data-reveal-section].is-visible [data-reveal-item] {
    opacity: 1;
    transform: translateY(0);
}

[data-reveal-section].is-visible [data-reveal-item]:nth-child(1) { transition-delay: 0.05s; }
[data-reveal-section].is-visible [data-reveal-item]:nth-child(2) { transition-delay: 0.1s; }
[data-reveal-section].is-visible [data-reveal-item]:nth-child(3) { transition-delay: 0.15s; }
[data-reveal-section].is-visible [data-reveal-item]:nth-child(4) { transition-delay: 0.2s; }
[data-reveal-section].is-visible [data-reveal-item]:nth-child(5) { transition-delay: 0.25s; }

/* ── Hero Slider (Full-Screen) ─────────────────────────────── */
.hero-slider {
    position: relative;
    overflow: hidden;
    background: #000;
}

.hero-slider-track {
    position: relative;
    width: 100%;
    height: calc(100vh - 56px - 36px);
    height: calc(100svh - 56px - 36px);
    min-height: 500px;
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.hero-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* Full-screen overlay gradient — heavy at bottom for text contrast */
.hero-slider::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(0,0,0,0.15) 0%,
            transparent 35%,
            transparent 50%,
            rgba(0,0,0,0.55) 75%,
            rgba(0,0,0,0.85) 100%
        );
    z-index: 2;
    pointer-events: none;
}

/* Overlay content — flex-centered over hero */
.hero-overlay-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 5;
    padding: 0 4rem;
    text-align: center;
}

.hero-text-wrap {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.hero-title {
    font-size: clamp(2.5rem, 7vw, 5.5rem);
    color: #fff;
    margin-bottom: 0.5rem;
    line-height: 0.95;
    letter-spacing: -0.01em;
    text-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

.hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(255,255,255,0.75);
    margin: 0 auto;
    max-width: 500px;
    line-height: 1.5;
}

/* Hero CTA button */
.hero-cta {
    display: inline-block;
    margin-top: 2.5rem;
    padding: 1.1rem 3.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #fff;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 2px solid rgba(255,255,255,0.6);
    transition: background 0.3s, border-color 0.3s, transform 0.2s;
    text-decoration: none;
}

.hero-cta:hover {
    background: rgba(255,255,255,0.22);
    border-color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.3);
}

/* Scroll indicator line */
.hero-scroll-indicator {
    position: absolute;
    bottom: 1.5rem;
    right: 4rem;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-scroll-line {
    display: block;
    width: 1px;
    height: 48px;
    background: rgba(255,255,255,0.4);
    position: relative;
    overflow: hidden;
}

.hero-scroll-line::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    animation: heroScrollLine 2s ease-in-out infinite;
}

@keyframes heroScrollLine {
    0% { top: -100%; }
    50% { top: 100%; }
    100% { top: 100%; }
}

/* Slider dots — bottom-center, above overlay content */
.hero-slider-dots {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 10;
}

.hero-dot {
    width: 28px;
    height: 3px;
    border-radius: 3px;
    border: none;
    background: rgba(255,255,255,0.3);
    cursor: pointer;
    padding: 0;
    transition: background 0.3s, width 0.4s cubic-bezier(0.22, 0.68, 0, 1.1);
}

.hero-dot:hover {
    background: rgba(255,255,255,0.6);
}

.hero-dot.is-active {
    background: #fff;
    width: 48px;
}

/* Hero pause/play button — WCAG 2.2.2 control */
.hero-pause-btn {
    position: absolute;
    bottom: 2.5rem;
    right: 2.5rem;
    z-index: 10;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.6);
    background: rgba(0,0,0,0.4);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.hero-pause-btn:hover { background: rgba(0,0,0,0.7); }
@media (max-width: 600px) {
    .hero-pause-btn { bottom: 1rem; right: 1rem; }
}

/* Slider arrows */
.hero-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7);
    font-size: 1.25rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.2s;
    border-radius: 0;
}

.hero-slider-arrow:hover {
    background: rgba(0,0,0,0.5);
    color: #fff;
    transform: translateY(-50%) scale(1.06);
}

.hero-slider-prev { left: 1.5rem; }
.hero-slider-next { right: 1.5rem; }

/* Hero reveal animations */
[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    animation: heroReveal 0.9s cubic-bezier(0.22, 0.68, 0, 1.1) forwards;
}

[data-reveal]:nth-child(2) { animation-delay: 0.15s; }

.hero-cta[data-reveal] { animation-delay: 0.3s; }

@keyframes heroReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Scrolling Marquee ────────────────────────────────────── */
.home-upcoming-strip {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .85rem 1.25rem;
    border-bottom: 1px solid var(--tenant-border, rgba(128,128,128,.25));
    color: var(--tenant-text);
    text-decoration: none;
    font-size: .95rem;
}
.home-upcoming-strip:hover { background: var(--tenant-surface-hover, rgba(128,128,128,.08)); }
.home-upcoming-label {
    /* Was a solid rounded pill, which read as a badge stuck onto the page
       between the hero and the marquee. Accent-coloured text carries the same
       emphasis without the block of colour, and matches the season strip. */
    flex: 0 0 auto;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tenant-primary);
}
.home-upcoming-text { flex: 1 1 auto; color: var(--tenant-text-muted); }
.home-upcoming-text strong { color: var(--tenant-text); }
.home-upcoming-cta { flex: 0 0 auto; font-weight: 600; text-decoration: underline; }
@media (max-width: 520px) {
    .home-upcoming-strip { font-size: .85rem; padding: .7rem 1rem; }
    .home-upcoming-cta { display: none; }
}

.home-marquee {
    overflow: hidden;
    background: var(--tenant-primary);
    padding: 0.7rem 0;
    white-space: nowrap;
    user-select: none;
}

.home-marquee-track {
    display: inline-flex;
    align-items: center;
    gap: 0;
    animation: marqueeScroll 30s linear infinite;
    will-change: transform;
}

.home-marquee-item {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #fff;
    padding: 0 1.5rem;
    flex-shrink: 0;
}

.home-marquee-sep {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    flex-shrink: 0;
}

@keyframes marqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-33.333%); }
}

/* ── Spacer between hero/marquee and first section ────────── */
.home-page .hero-slider + .home-section,
.home-page .hero-slider + .home-top-items,
.home-page .home-marquee + .home-section,
.home-page .home-marquee + .home-top-items {
    margin-top: 5rem;
}

/* ── Vote Ticker (stock-market style) ─────────────────────── */
.home-vote-ticker {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: var(--tenant-bg-surface);
    border-top: 1px solid var(--tenant-border);
    border-bottom: 1px solid var(--tenant-border);
    position: relative;
}

.home-vote-ticker-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    font-size: 0.55rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--tenant-text-muted);
    white-space: nowrap;
    border-right: 1px solid var(--tenant-border);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    background: var(--tenant-bg-surface);
}

.home-vote-ticker-track {
    display: inline-flex;
    align-items: center;
    animation: voteTickerScroll 60s linear infinite;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

.home-vote-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    font-size: 0.65rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    border-right: 1px solid var(--tenant-border);
    color: var(--tenant-text);
}

.ticker-name {
    font-weight: 600;
}

.ticker-votes {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ticker-up {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    color: #4caf50;
}
.ticker-up iconify-icon, .ticker-down iconify-icon {
    display: inline-flex;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    vertical-align: middle;
}

.ticker-down {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    color: #ef4444;
}

.home-vote-ticker-item.is-up .ticker-name {
    color: #4caf50;
}

.home-vote-ticker-item.is-down .ticker-name {
    color: #ef4444;
}

@keyframes voteTickerScroll {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-33.333%, 0, 0); }
}

@media (max-width: 768px) {
    .ticker-label-text { display: none; }
    .home-vote-ticker-label { padding: 0.5rem 0.75rem; }
    .home-vote-ticker-item { padding: 0.5rem 0.75rem; gap: 0.35rem; }
    .home-vote-ticker-track { will-change: transform; }
}

/* ── Top Items Horizontal Scroll ────────────────────────────── */
.home-top-items {
    position: relative;
}

.top-items-scroll {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
}

.top-items-scroll::-webkit-scrollbar { display: none; }

.top-items-scroll .item-card {
    flex: 0 0 185px;
    scroll-snap-align: start;
}

/* ── Droplist Grid (Home) ───────────────────────────────────── */
.home-droplist-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.home-droplist-card {
    display: block;
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.home-droplist-card:hover {
    border-color: var(--tenant-primary);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}

.home-droplist-image-wrap {
    aspect-ratio: 1;
    overflow: hidden;
    position: relative;
    background: var(--tenant-bg-surface-alt);
}

.home-droplist-image-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        var(--tenant-bg-surface-alt) 0%,
        var(--tenant-bg-surface) 40%,
        var(--tenant-bg-surface-alt) 80%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    z-index: 1;
    transition: opacity 0.3s;
}

.home-droplist-image-wrap.is-loaded::before {
    opacity: 0;
    pointer-events: none;
}

.home-droplist-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.22, 0.68, 0, 1.1);
}

.home-droplist-card:hover .home-droplist-image-wrap img {
    transform: scale(1.08);
}

/* Item preview grid when droplist has no hero image */
.droplist-preview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
    width: 100%;
    height: 100%;
}

.droplist-preview-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.22, 0.68, 0, 1.1);
}

.droplist-preview-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.droplist-preview-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.droplist-preview-3 { grid-template-columns: 1fr 1fr; }
.droplist-preview-3 img:first-child { grid-column: span 2; }

.home-droplist-info {
    padding: 0.85rem;
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}

.home-droplist-date {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--tenant-text);
}

.home-droplist-year {
    font-size: 0.75rem;
    color: var(--tenant-text-muted);
}

.home-droplist-week {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    background: var(--tenant-primary);
    padding: 0.15rem 0.5rem;
    border-radius: 2px;
    margin-left: auto;
}

/* ── Restock CTA (full-width) ───────────────────────────────── */
.home-restock-cta {
    margin-bottom: 6rem;
    background: var(--tenant-bg-surface);
    border-top: 1px solid var(--tenant-border);
    border-bottom: 1px solid var(--tenant-border);
}

.home-restock-cta-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    padding: 5rem 2.5rem;
}

/* Pulse dot for live indicator */
.pulse-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tenant-primary);
    margin-right: 0.35rem;
    vertical-align: middle;
    position: relative;
}

.pulse-dot::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1px solid var(--tenant-primary);
    animation: pulseDot 2s ease-out infinite;
}

@keyframes pulseDot {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(2.5); opacity: 0; }
}

.home-restock-tag {
    display: inline-flex;
    align-items: center;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--tenant-primary);
    border: 1px solid var(--tenant-primary);
    padding: 0.3rem 0.75rem;
    margin-bottom: 1.25rem;
}

.home-restock-cta-text h2 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1;
    margin-bottom: 1.25rem;
}

.home-restock-cta-text h2 em {
    font-style: italic;
    color: var(--tenant-primary);
}

.home-restock-cta-text p {
    color: var(--tenant-text-muted);
    margin-bottom: 2rem;
    font-size: 1rem;
    line-height: 1.7;
}

/* ── Restock Timeline (inside CTA) ─────────────────────────── */
.home-restock-cta .restock-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding-left: 1.5rem;
    max-height: 340px;
    overflow: hidden;
}

/* Fade-out at bottom (CTA preview only) */
.home-restock-cta .restock-timeline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(transparent, var(--tenant-bg-surface));
    pointer-events: none;
    z-index: 1;
}

/* Vertical line (CTA preview) */
.home-restock-cta .restock-timeline::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 5px;
    bottom: 0;
    width: 1px;
    background: var(--tenant-border);
}

.restock-timeline-item {
    position: relative;
    padding-bottom: 1rem;
}

.restock-timeline-dot {
    position: absolute;
    left: -1.5rem;
    top: 10px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--tenant-border);
    border: 2px solid var(--tenant-bg-surface);
    z-index: 2;
    margin-left: 1px;
}

.restock-timeline-item:first-child .restock-timeline-dot {
    background: var(--tenant-primary);
}

.restock-timeline-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--tenant-border);
    transition: border-color 0.2s;
}

.restock-timeline-content:hover {
    border-color: var(--tenant-text-muted);
}

.restock-timeline-thumb {
    width: 52px;
    height: 52px;
    object-fit: cover;
    flex-shrink: 0;
    background: linear-gradient(90deg,
        var(--tenant-bg-surface-alt) 0%,
        var(--tenant-bg-surface) 40%,
        var(--tenant-bg-surface-alt) 80%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border: 1px solid var(--tenant-border);
}

.restock-timeline-thumb.is-loaded {
    animation: none;
    background: var(--tenant-bg-surface-alt);
}

.restock-timeline-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.restock-timeline-title {
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.restock-timeline-meta {
    font-size: 0.68rem;
    color: var(--tenant-text-muted);
}

.restock-timeline-region {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tenant-primary);
}

/* ── News Strip (Home — compact horizontal cards) ────────── */
.home-news-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.home-news-strip-card {
    display: flex;
    flex-direction: column;
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.3s, transform 0.3s;
}

.home-news-strip-card:hover {
    border-color: var(--tenant-primary);
    transform: translateY(-3px);
}

.home-news-strip-image {
    aspect-ratio: 16/9;
    overflow: hidden;
    position: relative;
    background: var(--tenant-bg-surface-alt);
}

.home-news-strip-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        var(--tenant-bg-surface-alt) 0%,
        var(--tenant-bg-surface) 40%,
        var(--tenant-bg-surface-alt) 80%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    z-index: 1;
    transition: opacity 0.3s;
}

.home-news-strip-image.is-loaded::before { opacity: 0; pointer-events: none; }

.home-news-strip-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.22, 0.68, 0, 1.1);
}

.home-news-strip-card:hover .home-news-strip-image img {
    transform: scale(1.06);
}

.home-news-strip-info {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.home-news-strip-date {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tenant-text-muted);
}

.home-news-strip-title {
    font-family: var(--tenant-font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-news-strip-excerpt {
    font-size: 0.75rem;
    color: var(--tenant-text-muted);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Browse Seasons Grid (Home) ────────────────────────────── */
.home-seasons-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.home-season-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.home-season-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3/4;
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    transition: border-color 0.3s;
}

.home-season-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        var(--tenant-bg-surface-alt) 0%,
        var(--tenant-bg-surface) 40%,
        var(--tenant-bg-surface-alt) 80%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    z-index: 1;
    transition: opacity 0.3s;
}

.home-season-image.is-loaded::before { opacity: 0; pointer-events: none; }

.home-season-card:hover .home-season-image {
    border-color: var(--tenant-primary);
}

.home-season-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 0.68, 0, 1.1);
}

.home-season-card:hover .home-season-image img {
    transform: scale(1.06);
}

.home-season-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.25rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    color: #fff;
}

.home-season-name {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.15rem;
}

.home-season-year {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.6;
}

/* ── Fastest Sellouts ─────────────────────────────────────── */
.home-sellouts-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
}

.home-sellout-card {
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    padding: 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    transition: border-color 0.3s, transform 0.3s;
}

.home-sellout-card:hover {
    border-color: var(--tenant-primary);
    transform: translateY(-2px);
}

.home-sellout-time {
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
}

.home-sellout-seconds {
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 1;
    color: var(--tenant-primary);
    font-variant-numeric: tabular-nums;
}

.home-sellout-unit {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tenant-text-muted);
}

.home-sellout-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-height: 2.5rem;
}

.home-sellout-name {
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-sellout-colorway {
    font-size: 0.6rem;
    color: var(--tenant-text-muted);
    line-height: 1.2;
}

.home-sellout-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    background: var(--tenant-bg-surface-alt);
}

/* ── What We Track (features) ────────────────────────────── */
/* ── Features — inverted card grid ─────────────────────────── */
/* ── What We Do — feature cards (matches site design language) ── */
.home-features-section {
    margin-bottom: 4rem;
}

.home-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.home-feature-card {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.home-feature-card:hover {
    border-color: var(--tenant-primary);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}

.home-feature-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.home-feature-icon {
    color: var(--tenant-primary);
}

.home-feature-arrow {
    color: var(--tenant-text-muted);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.2s, transform 0.2s;
}

.home-feature-card:hover .home-feature-arrow {
    opacity: 1;
    transform: translateX(0);
}

.home-feature-card h3 {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.5rem;
}

.home-feature-card p {
    font-size: 0.78rem;
    color: var(--tenant-text-muted);
    line-height: 1.55;
    margin: 0;
}

/* ── Reduced Motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    [data-reveal-section],
    [data-reveal-item],
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
    .hero-scroll-line::after { animation: none !important; }
    .pulse-dot::after { animation: none !important; }
    .home-marquee-track { animation: none !important; }
    .home-vote-ticker-track { animation: none !important; }
    .hero-slide { transition-duration: 0.01ms !important; }
}

/* ── Collections / Seasons Grid ─────────────────────────────── */
.collections-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.collection-card {
    display: block;
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, transform 0.2s;
}

.collection-card:hover {
    border-color: var(--tenant-text-muted);
    transform: translateY(-3px);
}

.collection-thumbs {
    display: grid;
    gap: 2px;
    background: var(--tenant-bg-surface-alt);
    aspect-ratio: 3 / 4;
    overflow: hidden;
}

/* 4 images: 2x2 grid */
.collection-thumbs.thumbs-4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

/* 3 images: 1 spanning top, 2 on bottom — equal row height */
.collection-thumbs.thumbs-3 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}
.collection-thumbs.thumbs-3 img {
    min-height: 0;
}
.collection-thumbs.thumbs-3 img:first-child {
    grid-column: 1 / -1;
}

/* 2 images: side by side */
.collection-thumbs.thumbs-2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

/* 1 image or fallback: full bleed */
.collection-thumbs.thumbs-1 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.collection-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.collection-coming-soon {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tenant-bg-surface-alt);
}
.collection-coming-soon span {
    font-family: var(--tenant-font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--tenant-text-muted);
}

.collection-card .item-count {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: var(--tenant-bg);
    color: var(--tenant-text);
    padding: 0.15rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
}

.collection-card-info {
    padding: 1rem;
    text-align: center;
}

.collection-card-info h3 {
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

.collection-card-meta {
    font-size: 0.72rem;
    color: var(--tenant-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ── Filter Strip (horizontal chip navigation) ─────────────── */
.filter-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--tenant-border);
}

.filter-strip-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tenant-text-muted);
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.filter-strip-chip:hover {
    color: var(--tenant-text);
    border-color: var(--tenant-text-muted);
}

.filter-strip-chip.is-active {
    color: #fff;
    background: var(--tenant-primary);
    border-color: var(--tenant-primary);
}

.filter-strip-chip .chip-badge {
    font-size: 0.65rem;
    font-weight: 700;
    opacity: 0.7;
}

.filter-strip-chip.is-active .chip-badge {
    opacity: 1;
}

.header-accent {
    /* primary-text, not primary: Palace's primary is #000 in both themes,
       which made collection names black-on-black in dark mode. */
    color: var(--tenant-primary-text, var(--tenant-primary));
    white-space: nowrap;
}

@media (max-width: 768px) {
    .filter-strip {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.75rem;
        scrollbar-width: none;
    }
    .filter-strip::-webkit-scrollbar {
        display: none;
    }
}

/* ── Season Selector (horizontal chip scroller) ──────────────── */
.season-selector {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 2rem;
    position: relative;
}

.season-selector-track {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 0.25rem 0;
    scroll-behavior: smooth;
    mask-image: linear-gradient(to right, black, black calc(100% - 2rem), transparent);
    -webkit-mask-image: linear-gradient(to right, black, black calc(100% - 2rem), transparent);
}

.season-selector-track::-webkit-scrollbar {
    display: none;
}

.season-chip:has(.season-chip-sub) {
    flex-direction: column;
}

.season-chip-sub {
    display: block;
    font-size: 0.6rem;
    font-weight: 500;
    opacity: 0.7;
    letter-spacing: 0.02em;
    margin-top: 0.1rem;
}

.season-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.15rem;
    font-family: var(--tenant-font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    text-decoration: none;
    color: var(--tenant-text-muted);
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    border-radius: 2px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s;
    position: relative;
}

.season-chip:hover {
    color: var(--tenant-text);
    border-color: var(--tenant-text-muted);
    transform: translateY(-1px);
}

.season-chip.is-active {
    color: #fff;
    background: var(--tenant-primary);
    border-color: var(--tenant-primary);
}

.season-chip.is-active:hover {
    color: #fff;
    transform: translateY(-1px);
}

/* Arrow buttons */
.season-selector-arrow {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--tenant-border);
    border-radius: 2px;
    background: var(--tenant-bg-surface);
    color: var(--tenant-text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, opacity 0.2s;
    z-index: 2;
}

.season-selector-arrow:hover {
    color: var(--tenant-text);
    border-color: var(--tenant-text-muted);
}

.season-selector-arrow.is-hidden {
    opacity: 0;
    pointer-events: none;
    width: 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.season-selector-arrow--left {
    margin-right: 0.35rem;
}

.season-selector-arrow--right {
    margin-left: 0.35rem;
}

.year-heading {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tenant-text-muted);
    margin: 2.5rem 0 0;
}

.year-heading:first-child {
    margin-top: 0;
}

/* ── Droplist Notice ────────────────────────────────────────── */
.droplist-notice {
    padding: 0.85rem 1rem;
    margin-bottom: 1.5rem;
    background: var(--tenant-bg-surface);
    border-left: 3px solid var(--tenant-primary);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--tenant-text);
}

/* "More items to be announced" — a typographic marker, not a notice box.
   The notice bar it replaced read as an error state on a dark theme. */
.droplist-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    margin: 0 0 1.5rem;
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--tenant-border);
    border-bottom: 1px solid var(--tenant-border);
}

.droplist-more-text {
    font-family: var(--tenant-font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--tenant-text-muted);
}

.droplist-more-dots {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.droplist-more-dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--tenant-primary);
    animation: droplist-more-pulse 1.5s ease-in-out infinite;
}

.droplist-more-dots i:nth-child(2) { animation-delay: 0.2s; }
.droplist-more-dots i:nth-child(3) { animation-delay: 0.4s; }

@keyframes droplist-more-pulse {
    0%, 100% { opacity: 0.25; transform: scale(0.8); }
    50%      { opacity: 1;    transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .droplist-more-dots i { animation: none; opacity: 0.8; }
}

/* ── Droplist Countdown Strip ──────────────────────────────── */
.dc-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    margin: 0.35rem 0 0;
    padding: 0;
    opacity: 0.85;
    transition: opacity 0.2s;
}
.dc-strip:hover { opacity: 1; }

/* Region label — clickable to cycle */
.dc-region-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--tenant-text);
    background: none;
    border: none;
    padding: 0;
    cursor: default;
    white-space: nowrap;
}
.dc-region-label.is-switchable {
    cursor: pointer;
    border-bottom: 1px dashed color-mix(in srgb, var(--tenant-text-muted) 40%, transparent);
    transition: color 0.15s, border-color 0.15s;
}
.dc-region-label.is-switchable:hover {
    color: var(--tenant-primary);
    border-bottom-color: var(--tenant-primary);
}

/* Timer — monospace feel, the star of the strip */
.dc-strip .dc-timer {
    font-family: var(--tenant-font-heading);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--tenant-primary);
    letter-spacing: 0.01em;
}
.dc-strip .dc-timer.is-live {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Local time — quiet metadata */
.dc-strip .dc-drop-time {
    font-size: 0.8rem;
    color: var(--tenant-text-muted);
    white-space: nowrap;
    opacity: 0.7;
}
.dc-strip .dc-drop-time::before {
    content: "·";
    margin-right: 0.4rem;
    opacity: 0.4;
}

/* Mobile — compact single line */
@media (max-width: 520px) {
    .dc-strip {
        gap: 0.4rem;
        flex-wrap: wrap;
    }
    .dc-region-btn {
        padding: 0.2rem 0.5rem;
        font-size: 0.58rem;
    }
    .dc-strip .dc-timer { font-size: 0.78rem; }
    .dc-strip .dc-drop-time { font-size: 0.6rem; }
}
@media (max-width: 360px) {
    .dc-strip .dc-drop-time { display: none; }
}

/* Light mode */
:root[data-theme="light"] .dc-strip { opacity: 0.8; }
:root[data-theme="light"] .dc-strip:hover { opacity: 1; }


.droplist-related-articles {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
}
.droplist-related-heading {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--tenant-text-muted);
    font-weight: 600;
    margin: 0 0 .25rem;
}
.droplist-article-card {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .75rem 1rem;
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    text-decoration: none;
    color: var(--tenant-text);
    transition: border-color .15s;
}
.droplist-article-card:hover { border-color: var(--tenant-primary); }
.droplist-article-image { flex-shrink: 0; width: 64px; height: 64px; overflow: hidden; }
.droplist-article-image img { width: 100%; height: 100%; object-fit: cover; }
.droplist-article-info { min-width: 0; flex: 1; }
.droplist-article-title {
    display: block;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.3;
}
.droplist-article-arrow {
    flex-shrink: 0;
    font-size: 1rem;
    color: var(--tenant-text-muted);
    transition: color .15s, transform .15s;
}
.droplist-article-card:hover .droplist-article-arrow {
    color: var(--tenant-primary);
    transform: translateX(2px);
}
.droplist-article-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .78rem;
    color: var(--tenant-text-muted);
    line-height: 1.4;
    margin-top: .2rem;
}

/* ── Droplists ──────────────────────────────────────────────── */
.droplists-list {
    display: flex;
    flex-direction: column;
}

.droplist-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1rem;
    margin: 0 -1rem;
    border-bottom: 1px solid var(--tenant-border);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s, padding-left 0.2s;
}

.droplist-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
    padding: 0.35rem 0.5rem;
    background: var(--tenant-primary);
    color: #fff;
    line-height: 1.1;
    flex-shrink: 0;
}
.droplist-date .day { font-size: 1.25rem; font-weight: 700; }
.droplist-date .month { font-size: 0.65rem; text-transform: uppercase; font-weight: 600; }
.droplist-date .year { font-size: 0.6rem; opacity: 0.7; }

.droplist-row:first-child {
    border-top: 1px solid var(--tenant-border);
}

.droplist-row:hover {
    background: var(--tenant-bg-surface);
    padding-left: 1.5rem;
    border-left: 3px solid var(--tenant-primary);
}

.droplist-row-info {
    flex: 1;
    min-width: 0;
}
.droplist-row-info h3 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.15rem;
    text-transform: none;
    letter-spacing: 0.01em;
}

.droplist-week-badge,
.sellout-week-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
    padding: 0.35rem 0.5rem;
    background: var(--tenant-primary);
    color: #fff;
    line-height: 1.1;
    flex-shrink: 0;
}
.droplist-week-badge .week-num,
.sellout-week-badge .week-num { font-size: 1.25rem; font-weight: 700; }
.droplist-week-badge .week-label,
.sellout-week-badge .week-label { font-size: 0.6rem; text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em; }

.droplist-row-info .droplist-collection {
    font-size: 0.75rem;
    color: var(--tenant-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.droplist-arrow {
    color: var(--tenant-text-muted);
    flex-shrink: 0;
    transition: color 0.2s, transform 0.2s;
    display: flex;
    align-items: center;
}

.droplist-row:hover .droplist-arrow {
    color: var(--tenant-primary);
    transform: translateX(3px);
}

/* Item preview thumbnails */
.droplist-row-preview {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
}

.droplist-row-thumbs {
    display: flex;
    gap: 0.35rem;
}

.droplist-row-thumb {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 2px;
    background: var(--tenant-bg-surface-alt);
    border: 1px solid var(--tenant-border);
}

.droplist-row-more {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--tenant-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .droplist-row-preview {
        gap: 0.4rem;
    }
    .droplist-row-thumb {
        width: 28px;
        height: 28px;
    }
    .droplist-row-thumbs {
        gap: 0.2rem;
    }
    .droplist-row-more {
        font-size: 0.55rem;
    }
}

/* Legacy chevron fallback */
.droplist-row .chevron {
    font-size: 1.25rem;
    color: var(--tenant-text-muted);
    flex-shrink: 0;
}

/* Legacy droplist grid (home page preview) */
.droplist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
}

.droplist-card {
    display: block;
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s;
}

.droplist-card:hover { border-color: var(--tenant-text-muted); }

.droplist-image {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.droplist-info { padding: 1rem; }
.droplist-info .droplist-date { font-size: 0.85rem; color: var(--tenant-text-muted); background: none; padding: 0; min-width: auto; }

/* ── Restocks ───────────────────────────────────────────────── */
/* Region selector */
/* Restock timeline list */
.restock-timeline {
    position: relative;
    padding-left: 100px;
}
/* Vertical timeline line */
.restock-timeline::before {
    content: '';
    position: absolute;
    left: 88px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--tenant-border);
}

.restock-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0 0.85rem 1.25rem;
    border-bottom: 1px solid var(--tenant-border);
}

.restock-time {
    position: absolute;
    left: -100px;
    top: 50%;
    transform: translateY(-50%);
    width: 78px;
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--tenant-text-muted);
    text-align: right;
}

.restock-time .restock-ago {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.9em;
    font-weight: 400;
    letter-spacing: 0.01em;
    opacity: 0.75;
}

.restock-time-dot {
    position: absolute;
    left: -16px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background: var(--tenant-primary);
    border-radius: 50%;
    z-index: 1;
    box-shadow: 0 0 0 3px var(--tenant-bg);
}

.restock-thumb {
    width: 58px;
    height: 68px;
    object-fit: cover;
    background: var(--tenant-bg-surface);
    flex-shrink: 0;
}

.restock-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    flex: 1;
}

.restock-thumb-empty {
    display: block;
    width: 58px;
    height: 68px;
    background: var(--tenant-bg-surface-alt);
    flex-shrink: 0;
}

.restock-details h3 {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: none;
    margin-bottom: 0.2rem;
}

.restock-details .restock-meta {
    font-size: 0.8rem;
    color: var(--tenant-text-muted);
    line-height: 1.4;
}
.restock-details .restock-meta > span {
    display: block;
}
/* "New" badge: drop items entering the feed for the first time */
.restock-badge-new {
    display: inline-block;
    vertical-align: 2px;
    margin-left: 0.35rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    /* Theme-independent green (matches the resale badge family): tenant
       primaries are black (Palace) / gold (GolfWang) - poor pill contrast. */
    background: #08a05c;
}
.restock-details .restock-color { font-weight: 500; }
.restock-details .restock-sizes {
    word-break: break-word;
    font-size: 0.75rem;
}
.restock-details .restock-price {
    font-weight: 600;
    color: var(--tenant-text);
}

@media (max-width: 480px) {
    .restock-timeline { padding-left: 80px; }
    .restock-timeline::before { left: 68px; }
    .restock-time {
        left: -80px;
        width: 60px;
        font-size: 0.7rem;
    }
    .restock-time-dot { left: -16px; }
    .restock-item { padding-left: 1rem; }
    .restock-thumb, .restock-thumb-empty {
        width: 48px;
        height: 56px;
    }
    .restock-details h3 { font-size: 0.8rem; }
}

/* Legacy restock grid */
.restock-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.restock-card {
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    overflow: hidden;
}

.restock-image {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.restock-info { padding: 0.75rem; }
.restock-title { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.25rem; }
.restock-color, .restock-region, .restock-sizes, .restock-price { font-size: 0.75rem; color: var(--tenant-text-muted); display: block; }

/* Region selector (legacy buttons) */
.region-selector {
    display: flex;
    gap: 0;
    margin-bottom: 2rem;
    justify-content: center;
}

.region-btn {
    padding: 0.55rem 1.5rem;
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    margin-left: -1px;
    color: var(--tenant-text-muted);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.region-btn:first-child { border-radius: 4px 0 0 4px; margin-left: 0; }
.region-btn:last-child { border-radius: 0 4px 4px 0; }

.region-btn:hover {
    color: var(--tenant-text);
    background: var(--tenant-bg-surface-alt);
}

.region-btn.active {
    background: var(--tenant-primary);
    border-color: var(--tenant-primary);
    color: #fff;
    position: relative;
    z-index: 1;
}

@media (max-width: 480px) {
    .region-selector { margin-bottom: 1rem; }
    .region-btn { padding: 0.4rem 1rem; font-size: 0.7rem; }
    .region-btn, .region-btn:first-child, .region-btn:last-child { border-radius: 0; }
}

/* Region cards (landing page) */
.region-cards {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 700px;
    margin: 0 auto;
}

.region-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--tenant-border);
    border-bottom: none;
    text-decoration: none;
    color: var(--tenant-text);
    transition: background 0.15s;
}

.region-card:last-child {
    border-bottom: 1px solid var(--tenant-border);
}

.region-card:hover {
    background: var(--tenant-bg-surface);
}

.region-flag {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}

.region-label {
    font-size: 1rem;
    font-weight: 600;
    flex: 1;
}

.region-card .chevron {
    font-size: 1.5rem;
    color: var(--tenant-text-muted);
    flex-shrink: 0;
}

/* ── News ───────────────────────────────────────────────────── */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.news-card {
    display: block;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    aspect-ratio: 4/3;
    background: var(--tenant-bg-surface);
}

.news-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.news-card:hover img { transform: scale(1.05); }

.news-card .news-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
}

.news-card .news-title {
    font-family: var(--tenant-font-heading);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.news-card .news-date {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* News info fallback (no overlay / no image) */
.news-info { padding: 1rem; }
.news-info .news-title { font-size: 1rem; margin-bottom: 0.5rem; color: var(--tenant-text); }
.news-info .news-date { color: var(--tenant-text-muted); opacity: 1; }
.news-excerpt { font-size: 0.9rem; color: var(--tenant-text-muted); }

/* News list (article cards) */
.news-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.news-article-card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1.5rem;
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    overflow: hidden;
    transition: border-color 0.2s;
}

.news-article-card:hover { border-color: var(--tenant-text-muted); }

.news-article-card .article-image { aspect-ratio: 1; overflow: hidden; }
.news-article-card .article-image img { width: 100%; height: 100%; object-fit: cover; }

.news-article-card .article-content { padding: 1.25rem 1.25rem 1.25rem 0; }

.article-title { font-size: 1.15rem; margin-bottom: 0.5rem; text-transform: none; }
.article-title a { color: var(--tenant-text); }
.article-title a:hover { color: var(--tenant-primary); }

.article-date {
    font-size: 0.8rem;
    color: var(--tenant-text-muted);
    display: block;
    margin-bottom: 0.5rem;
}

.article-excerpt {
    color: var(--tenant-text-muted);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.read-more {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--tenant-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Article Detail */
.article-container { max-width: 800px; }
.article-header { margin-bottom: 1.5rem; }
.article-header h1 { font-size: 2rem; margin-bottom: 0.5rem; text-transform: none; }
.article-featured-image { margin-bottom: 2rem; overflow: hidden; cursor: zoom-in; }
.article-featured-image img { width: 100%; height: auto; }
.article-body { font-size: 1.05rem; line-height: 1.8; }
.article-body p { margin-bottom: 1.5rem; }
.article-body h3 { margin-top: 2rem; margin-bottom: 0.75rem; }
.article-body ul, .article-body ol { margin-bottom: 1.5rem; padding-left: 1.5rem; }
.article-body li { margin-bottom: 0.4rem; }
.article-body img { max-width: 100%; height: auto; margin: 1.5rem 0; border-radius: 2px; }
.external-link { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--tenant-border); }

/* Next drop countdown */
.next-drop-countdown { display: flex; justify-content: center; align-items: center; gap: 0.25rem; margin-bottom: 0.5rem; padding: 1rem 0 0; }
.next-drop-countdown .countdown-unit { text-align: center; min-width: 3.5rem; }
.next-drop-countdown .countdown-value { display: block; font-size: 2rem; font-weight: 700; line-height: 1; color: var(--tenant-primary); font-variant-numeric: tabular-nums; }
.next-drop-countdown .countdown-label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tenant-text-muted); margin-top: 0.25rem; }
.next-drop-countdown .countdown-separator { font-size: 1.5rem; font-weight: 300; color: var(--tenant-text-muted); padding-bottom: 1rem; }

/* Article gallery grid */
/* Article gallery section */
.article-gallery-section {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--tenant-border);
}
/* Grid view */
.article-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: .75rem;
}
.article-gallery-item {
    display: block;
    overflow: hidden;
    border-radius: 4px;
    background: var(--tenant-bg-surface-alt);
    cursor: zoom-in;
}
.article-gallery-item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    transition: transform .25s ease;
}
.article-gallery-item:hover img { transform: scale(1.03); }
.article-gallery-caption {
    display: block;
    padding: .4rem .6rem;
    font-size: .75rem;
    color: var(--tenant-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Slider view */
.article-slider {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: var(--tenant-bg-surface-alt);
    -webkit-user-select: none;
    user-select: none;
}
.article-slider-viewport {
    overflow: hidden;
    touch-action: pan-y;
    cursor: grab;
}
.article-slider-viewport.is-dragging { cursor: grabbing; }
.article-slider-track {
    display: flex;
    will-change: transform;
}
.article-slider-track.is-animating {
    transition: transform .35s cubic-bezier(.25,.1,.25,1);
}
.article-slider-slide {
    flex: 0 0 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.article-slider-slide img {
    display: block;
    width: 100%;
    max-height: 560px;
    object-fit: contain;
    pointer-events: none;
}
.article-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(0,0,0,.45);
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.1rem;
    opacity: 0;
    transition: opacity .2s, background .15s;
}
.article-slider:hover .article-slider-arrow { opacity: 1; }
.article-slider-arrow:hover { background: rgba(0,0,0,.7); }
.article-slider-prev { left: 10px; }
.article-slider-next { right: 10px; }
.article-slider-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    border-radius: 4px;
    line-height: 1;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.article-slider-badge iconify-icon { font-size: .85rem; cursor: pointer; }
.article-slider-info {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: .6rem .75rem;
}
.article-slider-caption {
    font-size: .85rem;
    color: var(--tenant-text);
    font-weight: 500;
}
.article-slider-counter-bottom {
    font-size: .75rem;
    color: var(--tenant-text-muted);
}

@media (max-width: 640px) {
    .article-gallery { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
    .article-slider-arrow { width: 34px; height: 34px; font-size: .9rem; opacity: 1; }
    .article-slider-slide img { max-height: 400px; }
}

.article-featured-items {
    padding-top: 1.5rem;
    margin-top: 1rem;
}
.article-featured-items h2 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

/* ── Help Page ──────────────────────────────────────────────── */
.help-category-panel {
    display: none;
}

.help-category-panel.active {
    display: block;
}

/* FAQ Accordion */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.faq-item {
    border-bottom: 1px solid var(--tenant-border);
}

.faq-item:first-child {
    border-top: none;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1.1rem 0.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 700;
    text-align: left;
    color: var(--tenant-text);
    font-family: inherit;
    transition: color 0.2s, padding-left 0.2s;
    letter-spacing: 0.01em;
}

.faq-question:hover {
    color: var(--tenant-primary);
    padding-left: 1rem;
}

.faq-icon {
    color: var(--tenant-text-muted);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
    color: var(--tenant-primary);
}

.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
    color: var(--tenant-text-muted);
    line-height: 1.75;
    font-size: 0.88rem;
}
.faq-answer > * {
    overflow: hidden;
    padding: 0 0.5rem;
}

.faq-item.active .faq-answer {
    grid-template-rows: 1fr;
}
.faq-item.active .faq-answer > * {
    padding-bottom: 1.25rem;
}

/* ── Help Center Hub ───────────────────────────────────────── */
.help-faq-section {
    margin-top: 2.5rem;
}

.help-faq-section .section-header {
    margin-bottom: 1.25rem;
}

/* Page-type cards grid */
.help-pages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.help-page-card {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.5rem;
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.help-page-card:hover {
    border-color: var(--tenant-primary);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}

.help-page-icon-wrap {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--tenant-primary) 12%, transparent);
    border-radius: 10px;
    transition: background 0.3s, transform 0.3s;
}

.help-page-card:hover .help-page-icon-wrap {
    background: var(--tenant-primary);
    transform: scale(1.08);
}

.help-page-icon {
    color: var(--tenant-primary);
    transition: color 0.3s;
}

.help-page-card:hover .help-page-icon {
    color: #fff;
}

.help-page-card-body {
    flex: 1;
    min-width: 0;
}

.help-page-card h3 {
    font-size: 0.88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.4rem;
    line-height: 1.3;
}

.help-page-card p {
    font-size: 0.78rem;
    color: var(--tenant-text-muted);
    line-height: 1.55;
    margin: 0 0 0.75rem;
}

.help-page-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tenant-primary);
    transition: gap 0.2s;
}

.help-page-card:hover .help-page-cta {
    gap: 0.55rem;
}

.help-category-panel-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tenant-text-muted);
    margin: 1.5rem 0 0.25rem;
    padding-bottom: 0;
}

.help-category-panel:first-of-type .help-category-panel-title {
    margin-top: 0;
}

/* ── Drop Times Page ───────────────────────────────────────── */
/* ── Drop Times Page ──────────────────────────────────────── */
.drop-countdown {
    text-align: center;
    padding: 3rem 2rem 2.5rem;
    margin-bottom: 3rem;
}

.drop-countdown-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--tenant-text-muted);
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.drop-countdown-units {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
}

.drop-countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 64px;
}

.drop-countdown-val {
    font-size: 3rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--tenant-text);
    line-height: 1;
    letter-spacing: -0.02em;
}

.drop-countdown-sub {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tenant-text-muted);
    margin-top: 0.4rem;
}

.drop-countdown-sep {
    font-size: 2rem;
    font-weight: 300;
    color: var(--tenant-border);
    margin: 0 0.15rem;
    align-self: flex-start;
    padding-top: 0.25rem;
}

.drop-countdown-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--tenant-primary);
    text-decoration: none;
    font-weight: 600;
}

.drop-countdown-cta:hover {
    text-decoration: underline;
}

/* Schedule section */
.drop-schedule {
    margin-bottom: 2.5rem;
}

.drop-schedule-heading {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tenant-text-muted);
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--tenant-border);
}

/* Region tabs */
.drop-region-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--tenant-border);
}

.drop-tab {
    padding: 0.6rem 1.2rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--tenant-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    font-family: inherit;
}

.drop-tab:hover {
    color: var(--tenant-text);
}

.drop-tab.is-active {
    color: var(--tenant-primary);
    border-bottom-color: var(--tenant-primary);
}

/* Drop time results */
.drop-times-result {
    display: none;
}

.drop-times-result.is-active {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Individual drop entry */
.drop-entry {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--tenant-border);
}

.drop-entry:first-child {
    padding-top: 0;
}

.drop-entry:last-child {
    border-bottom: none;
}

.drop-entry--solo {
    padding-top: 0;
    border-bottom: none;
}

.drop-entry-day {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tenant-primary);
    font-weight: 700;
}

.drop-entry-time {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--tenant-text);
    line-height: 1.2;
}

.drop-entry-alt {
    font-size: 1rem;
    font-weight: 500;
    color: var(--tenant-text-muted);
}

.drop-entry-where {
    font-size: 0.8rem;
    color: var(--tenant-text-muted);
}

.drop-entry-local {
    font-size: 0.8rem;
    color: var(--tenant-primary);
    font-weight: 600;
    margin-top: 0.15rem;
}

.drop-entry-local:empty {
    display: none;
}

/* ── Stores Page ───────────────────────────────────────────── */
.stores-region {
    margin-bottom: 2.5rem;
}

.stores-region-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tenant-text-muted);
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--tenant-border);
}

.stores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
}

.stores-grid--large {
    grid-template-columns: repeat(2, 1fr);
}

.store-card {
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    transition: border-color 0.2s;
    overflow: hidden;
}

.store-card:hover {
    border-color: var(--tenant-primary);
}

.store-card-img {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--tenant-bg-surface-alt);
}

.store-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.store-card:hover .store-card-img img {
    transform: scale(1.04);
}

.store-card-body {
    padding: 1.25rem;
}

.store-card h3 {
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.store-address {
    font-size: 0.8rem;
    color: var(--tenant-text-muted);
    line-height: 1.6;
    margin: 0 0 0.35rem;
}

.store-note {
    font-size: 0.72rem;
    opacity: 0.7;
    font-style: italic;
}

.store-hours {
    font-size: 0.75rem;
    color: var(--tenant-text-muted);
    line-height: 1.5;
    margin: 0 0 0.5rem;
}

.store-phone {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: var(--tenant-text-muted);
    margin: 0 0 0.75rem;
}

.store-map-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: var(--tenant-primary);
    text-decoration: none;
    font-weight: 600;
}

.store-map-link:hover {
    text-decoration: underline;
}

.stores-source {
    font-size: 0.72rem;
    color: var(--tenant-text-muted);
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--tenant-border);
}

.stores-source a {
    color: var(--tenant-primary);
    text-decoration: none;
}

.stores-source a:hover {
    text-decoration: underline;
}

/* ── Sizing Guide Page ─────────────────────────────────────── */
.sizing-tip {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 1rem 1.25rem;
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    border-left: 3px solid var(--tenant-primary);
    margin-bottom: 2rem;
    font-size: 0.85rem;
    color: var(--tenant-text-muted);
    line-height: 1.6;
}

.sizing-tip--warning {
    border-left-color: #e5a00d;
}

.sizing-tip--warning iconify-icon {
    color: #e5a00d;
}

.sizing-tip iconify-icon {
    color: var(--tenant-primary);
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.sizing-examples {
    margin-bottom: 2.5rem;
    padding: 1.5rem;
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
}

.sizing-examples-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.35rem;
}

.sizing-examples-desc {
    font-size: 0.8rem;
    color: var(--tenant-text-muted);
    margin: 0 0 1rem;
}

.sizing-examples-grid {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
}

.sizing-example-card {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.75rem 0.5rem 0.5rem;
    background: var(--tenant-bg);
    border: 1px solid var(--tenant-border);
    text-decoration: none;
    color: var(--tenant-text);
    transition: border-color 0.2s;
    min-width: 0;
}

.sizing-example-card:hover {
    border-color: var(--tenant-primary);
}

.sizing-example-img {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--tenant-bg-surface-alt);
}

.sizing-example-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sizing-example-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.sizing-example-cat {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tenant-primary);
    font-weight: 700;
}

.sizing-example-name {
    font-size: 0.75rem;
    color: var(--tenant-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}

.sizing-category {
    margin-bottom: 2rem;
}

.sizing-category h2 {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.75rem;
}

.sizing-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sizing-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    min-width: 400px;
}

.sizing-table th,
.sizing-table td {
    padding: 0.6rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--tenant-border);
}

.sizing-table th {
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tenant-text-muted);
    background: var(--tenant-bg-surface);
}

.sizing-table td:first-child {
    font-weight: 600;
    color: var(--tenant-text);
}

.sizing-table td {
    color: var(--tenant-text-muted);
}

.sizing-table tbody tr:hover td {
    background: rgba(255,255,255,0.02);
}

/* ── Generic Help Content Blocks ───────────────────────────── */
.help-content-sections {
    margin-top: 2.5rem;
}

.help-content-block {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--tenant-border);
}

.help-content-block:last-child {
    border-bottom: none;
}

.help-content-block h3 {
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
}

.help-content-body {
    font-size: 0.85rem;
    color: var(--tenant-text-muted);
    line-height: 1.75;
}

.help-content-body p {
    margin: 0 0 0.75rem;
}

.help-content-body a {
    color: var(--tenant-primary);
}

.help-content-body ul,
.help-content-body ol {
    padding-left: 1.5rem;
    margin: 0 0 0.75rem;
}

.help-content-body li {
    margin-bottom: 0.25rem;
}

.page-header-desc {
    font-size: 0.85rem;
    color: var(--tenant-text-muted);
    margin: 0.5rem 0 0;
    line-height: 1.6;
}

/* Mobile size lives here, AFTER the base rule. It used to sit in the
   responsive block near the top of the file, which is earlier than this
   declaration, so equal specificity plus source order meant it never
   applied and page descriptions stayed at .85rem on phones. */
@media (max-width: 768px) {
    .page-header-desc { font-size: 0.8rem; }
}

/* ── Help Center Mobile ────────────────────────────────────── */
@media (max-width: 768px) {
    .help-pages-grid {
        grid-template-columns: 1fr;
    }
    .help-page-card {
        padding: 1.15rem;
        gap: 1rem;
    }
    .help-page-icon-wrap {
        width: 42px;
        height: 42px;
    }
    .help-page-card h3 {
        font-size: 0.82rem;
    }
    .help-content-body + .help-content-sections h3 {
        font-size: 0.85rem;
    }
    .drop-countdown-val {
        font-size: 2rem;
    }
    .drop-countdown-unit {
        min-width: 48px;
    }
    .drop-countdown-sep {
        font-size: 1.5rem;
    }
    .drop-tab {
        padding: 0.5rem 0.8rem; font-size: 0.72rem;
    }
    .drop-entry-time {
        font-size: 1.3rem;
    }
    .stores-grid,
    .stores-grid--large {
        grid-template-columns: 1fr;
    }
    .sizing-examples-grid {
        gap: 0.5rem;
    }
    .sizing-example-name {
        max-width: 100px;
    }
    .sizing-table {
        min-width: 340px;
    }
}

/* ── Lookbooks ──────────────────────────────────────────────── */
.lookbook-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 2rem;
}

.lookbook-sidebar {
    position: sticky;
    top: 80px;
    align-self: start;
}

.lookbook-sidebar-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
}

.lookbook-sidebar-list a {
    display: block;
    padding: 0.5rem 0;
    color: var(--tenant-text-muted);
    transition: color 0.2s;
}

.lookbook-sidebar-list a:hover,
.lookbook-sidebar-list a.active {
    color: var(--tenant-text);
}

.lookbook-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 4px;
}

.lookbook-image { overflow: hidden; cursor: zoom-in; }
.lookbook-image img { width: 100%; height: auto; transition: transform 0.3s; }
.lookbook-image:hover img { transform: scale(1.03); }

/* Lightbox overlay */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.95);
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}
.lightbox.is-open { display: flex; }

.lightbox-img {
    max-width: 92vw;
    max-height: 92vh;
    object-fit: contain;
    user-select: none;
    -webkit-user-select: none;
}

.lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    padding: 0.5rem;
    z-index: 1;
    transition: color 0.2s;
}
.lightbox-close:hover { color: #fff; }

.lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 2.5rem;
    cursor: pointer;
    padding: 1rem;
    z-index: 1;
    transition: color 0.2s;
}
.lightbox-arrow:hover { color: #fff; }
.lightbox-prev { left: 0.5rem; }
.lightbox-next { right: 0.5rem; }

.lightbox-counter {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    font-family: var(--tenant-font-heading);
    letter-spacing: 0.1em;
}

/* ── Seasons / Collections Detail ───────────────────────────── */
.season-nav {
    display: flex;
    gap: 2px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--tenant-border);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.season-nav::-webkit-scrollbar { display: none; }

.season-nav .nav-item {
    position: relative;
    padding: 0.6rem 1.1rem;
    background: transparent;
    color: var(--tenant-text-muted);
    font-family: var(--tenant-font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s, background 0.2s;
    border-radius: 4px 4px 0 0;
}

.season-nav .nav-item::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--tenant-primary);
    transform: scaleX(0);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.season-nav .nav-item:hover {
    color: var(--tenant-text);
    background: var(--tenant-bg-surface-alt);
}

.season-nav .nav-item:hover::after {
    transform: scaleX(0.6);
}

.season-nav .nav-item.active {
    color: var(--tenant-primary);
}

.season-nav .nav-item.active::after {
    transform: scaleX(1);
}

/* Remove double border when filter bar follows season nav */
.season-nav + .icon-filter-bar {
    margin-top: -0.5rem;
}

/* The .season-actions button row was removed: it duplicated the "Left to
   Drop" and "Lookbook" season-nav tabs sitting directly above it. The count
   moved onto the nav tab (see .nav-item-count). */

.category-section { margin-bottom: 2.5rem; }

.category-title {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--tenant-primary);
    color: var(--tenant-text-muted);
}

/* Items Grid */
.items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.5rem 1.25rem;
}

/* ── Item Card ──────────────────────────────────────────────── */
.item-card {
    display: flex;
    flex-direction: column;
    background: transparent;
    text-decoration: none;
    color: inherit;
    position: relative;
    cursor: pointer;
}

.item-card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.item-card:hover .item-image img {
    transform: scale(1.04);
}


.item-card:hover .item-price {
    background: var(--tenant-primary);
    color: #fff;
}

.item-card:hover .item-name {
    color: var(--tenant-primary);
}

/* ── Image container ───────────────────────────────────────── */
.item-image {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: transparent;
    border-radius: 3px;
    padding: 6px;
}

/* Shimmer loader */
.item-image::before {
    content: '';
    position: absolute;
    inset: 6px;
    background: linear-gradient(90deg,
        var(--tenant-bg-surface-alt) 0%,
        var(--tenant-bg-surface) 40%,
        var(--tenant-bg-surface-alt) 80%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    z-index: 1;
    transition: opacity 0.3s;
}

.item-image.is-loaded::before { opacity: 0; pointer-events: none; }


@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(.22,.68,0,1.1);
}

/* ── Price chip — frosted glass, top-left ──────────────────── */
.item-price {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    padding: 3px 8px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 3px;
    z-index: 5;
    transition: background 0.25s, color 0.25s;
}

/* ── Hover vignette (unused, kept as empty overlay) ────────── */
.item-overlay { display: none; }

/* ── Card info — below image, no background ────────────────── */
.item-card .item-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.45rem 0.15rem 0;
    flex: 1;
}

.item-card .item-name {
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--tenant-text);
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    transition: color 0.2s ease;
}

.item-card .item-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.item-card .item-category-tag {
    font-size: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tenant-text-muted);
}

/* ── Inline card vote buttons ──────────────────────────────── */
.item-card-votes {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding: 0 0.15rem;
    position: relative;
    z-index: 2;
}

.card-vote-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: none;
    border: none;
    padding: 2px 0;
    cursor: pointer;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--tenant-text-muted);
    transition: color 0.15s ease, transform 0.15s ease;
    position: relative;
    z-index: 5;
}

.card-vote-btn iconify-icon {
    font-size: 14px;
}

.card-vote-btn:hover {
    transform: scale(1.15);
}

.card-vote-up:hover,
.card-vote-up.is-voted { color: #4caf50; }

.card-vote-dn:hover,
.card-vote-dn.is-voted { color: #e53935; }

.card-vote-count {
    font-variant-numeric: tabular-nums;
}

/* ── Vote sentiment bar ────────────────────────────────────── */
.item-vote-bar {
    display: flex;
    height: 3px;
    width: 100%;
    flex-shrink: 0;
    margin-top: auto;
    border-radius: 2px;
    overflow: hidden;
    background: var(--tenant-bg-surface-alt);
}

.vote-fill {
    display: block;
    height: 100%;
}

.vote-fill.vote-up { background: #4caf50; }
.vote-fill.vote-dn { background: #e53935; }

/* ── Legacy standalone classes ─────────────────────────────── */
.item-name { font-size: 0.72rem; font-weight: 700; line-height: 1.3; }
.item-meta { display: flex; align-items: center; gap: 0.5rem; }
.item-category-tag {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tenant-text-muted);
}
.item-votes-inline {
    display: flex;
    gap: 0.4rem;
    font-size: 0.6rem;
    font-weight: 600;
}
.item-votes-inline .upvotes { color: #5cb85c; }
.item-votes-inline .downvotes { color: #d9534f; }

/* Item Filter Bar */
.item-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--tenant-border);
}

.item-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    flex: 1;
    min-width: 0;
}

.item-filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tenant-text-muted);
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.item-filter-chip:hover {
    color: var(--tenant-text);
    border-color: var(--tenant-text-muted);
}

.item-filter-chip.is-active {
    color: #fff;
    background: var(--tenant-primary);
    border-color: var(--tenant-primary);
}

.item-sort-select {
    padding: 0.4rem 2rem 0.4rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--tenant-text);
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
}

.item-sort-select:focus {
    outline: none;
    border-color: var(--tenant-primary);
}

.item-card.is-hidden {
    display: none;
}

.category-section.is-hidden {
    display: none;
}

@media (max-width: 768px) {
    .item-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .item-filter-chips {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .item-filter-chips::-webkit-scrollbar {
        display: none;
    }
    .item-sort-select {
        align-self: flex-end;
    }
}

/* Item Detail */
.item-detail-container { max-width: 1100px; }
.item-info-mobile-top { display: none; }

.item-detail {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
    align-items: start;
}

.item-gallery {
    position: sticky;
    top: 72px;
}

.item-gallery .main-image {
    background: var(--tenant-bg-surface);
    overflow: hidden;
    margin-bottom: 0.75rem;
    position: relative;
    border: 1px solid var(--tenant-border);
    cursor: zoom-in;
}

.item-gallery .main-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.25s ease;
}
.item-gallery .main-image img.is-switching { opacity: 0; }

.image-zoom-hint {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(255,255,255,0.7);
    font-size: 1rem;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

.item-gallery .main-image:hover .image-zoom-hint { opacity: 1; }

/* ── Fullscreen lightbox (mobile tap / desktop click) ── */
.image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0,0,0,0.95);
    display: block;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s;
    touch-action: none;
    cursor: grab;
}
.image-lightbox.is-open { opacity: 1; visibility: visible; }
.image-lightbox.is-dragging { cursor: grabbing; }
.image-lightbox img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    max-height: none;
    width: auto;
    height: auto;
    transform-origin: 0 0;
    will-change: transform;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}
.image-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 100000;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 1.25rem;
    cursor: pointer;
    transition: background 0.15s;
}
.image-lightbox-close:hover { background: rgba(0,0,0,0.8); }
.image-lightbox-zoom-hint {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100000;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(255,255,255,0.7);
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.4s;
}
.image-lightbox-zoom-hint.is-hidden { opacity: 0; }

.image-lightbox-prev,
.image-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100000;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 1.25rem;
    cursor: pointer;
    transition: background 0.15s;
}
.image-lightbox-prev { left: 1rem; }
.image-lightbox-next { right: 1rem; }
.image-lightbox-prev:hover,
.image-lightbox-next:hover { background: rgba(0,0,0,0.8); }

.image-lightbox-counter {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100000;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(255,255,255,0.7);
    padding: 0.3rem 0.7rem;
    border-radius: 4px;
    font-size: 0.8rem;
    pointer-events: none;
}

.style-thumbnails {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.style-thumb {
    width: 64px;
    height: 64px;
    border: 2px solid var(--tenant-border);
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    background: var(--tenant-bg-surface);
    position: relative;
    transition: border-color 0.2s, transform 0.2s;
}

.style-thumb:hover {
    border-color: var(--tenant-text-muted);
    transform: translateY(-2px);
}

.style-thumb.is-active {
    border-color: var(--tenant-primary);
    box-shadow: 0 0 0 1px var(--tenant-primary);
}

.style-thumb img { width: 100%; height: 100%; object-fit: cover; }

.style-thumb-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 0.45rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(0,0,0,0.7);
    color: #fff;
    text-align: center;
    padding: 1px 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-info-panel { padding: 0.5rem 0; }

.item-info-top {
    display: flex;
    /* Without this the row stretches every child to the tallest one (the
       Save button), and the tags' text renders at the top of a box far
       taller than the text. Centring keeps each tag at its natural height
       and lines all three up on one axis. */
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.item-season-tag,
.item-cat-tag {
    /* inline-flex + centring so the label is centred on BOTH axes no matter
       what height the row ends up at. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    /* letter-spacing adds its gap AFTER the last character too, so equal
       padding reads as off-centre. Take that phantom gap off the right. */
    padding: 0.2rem calc(0.6rem - 0.08em) 0.2rem 0.6rem;
    border: 1px solid var(--tenant-border);
    color: var(--tenant-text-muted);
}

.item-season-tag {
    background: var(--tenant-primary);
    border-color: var(--tenant-primary);
    color: #fff;
}

.item-title { font-size: 1.75rem; margin-bottom: 0.75rem; text-transform: none; letter-spacing: normal; line-height: 1.2; }

.item-category-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--tenant-bg-surface);
    font-size: 0.8rem;
    margin-bottom: 1rem;
}

.item-prices { margin-bottom: 1.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.item-description { margin-top: -0.5rem; margin-bottom: 1.5rem; color: var(--tenant-text-muted); }
.item-description p { margin: 0; }
.price-row { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 1rem; row-gap: 0.15rem; }
.price-main { font-size: 1.5rem; font-weight: 700; color: var(--tenant-primary-text, var(--tenant-primary)); }
.price-alt { font-size: 0.9rem; color: var(--tenant-text-muted); margin-right: 0.5rem; }
.price-alts { font-size: 0.9rem; color: var(--tenant-text-muted); }
/* Variant price row (e.g. "Gold $548.00") — same treatment as the main
   price, one step down, with the variant name as the label. */
.price-row--variant { column-gap: 0.6rem; }
.price-variant-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tenant-text-muted);
}
.price-main--variant { font-size: 1.15rem; }

/* ── Detail Vote Pill ─────────────────────────────────────── */
.item-voting {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    position: relative;
    background: var(--tenant-bg-surface);
    padding: 2px;
    margin-bottom: 0.5rem;
}

/* Gradient border ring showing vote ratio */
.item-voting::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 999px;
    background: linear-gradient(
        to right,
        #4caf50 0%,
        #4caf50 var(--vote-up-pct, 50%),
        #f44336 var(--vote-up-pct, 50%),
        #f44336 100%
    );
    z-index: 0;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.item-voting:hover::before { opacity: 1; }

/* Inner background covers the gradient, leaving 2px border visible */
.item-voting::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--tenant-bg-surface);
    z-index: 1;
}

.vote-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.2rem;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--tenant-text-muted);
    transition: color 0.15s, background 0.15s;
    font-family: inherit;
    user-select: none;
    -webkit-user-select: none;
    line-height: 1;
    position: relative;
    z-index: 2;
}
.vote-btn iconify-icon { font-size: 1.05rem; }
.vote-btn:hover { color: var(--tenant-text); }
.vote-btn:active { transform: scale(0.97); }

.vote-btn.upvote { border-radius: 999px 0 0 999px; }
.vote-btn.upvote:hover { color: #4caf50; }
.vote-btn.upvote.is-voted { background: #4caf50; color: #fff; }

.vote-btn.downvote { border-radius: 0 999px 999px 0; }
.vote-btn.downvote:hover { color: #f44336; }
.vote-btn.downvote.is-voted { background: #f44336; color: #fff; }

.vote-pill-divider {
    width: 1px;
    height: 1.2rem;
    background: var(--tenant-border);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.item-voting-block {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--tenant-border);
}

.vote-ratio {
    font-size: 0.7rem;
    color: var(--tenant-text-muted);
    display: block;
}

.item-colorways { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--tenant-border); }
.item-colorways h3 { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tenant-text-muted); margin-bottom: 0.75rem; }
.item-colorways h3 iconify-icon { font-size: 0.85rem; vertical-align: -0.1em; margin-right: 0.25rem; }
.colorway-count { display: inline-block; background: var(--tenant-bg-surface); padding: 0.1rem 0.4rem; font-size: 0.6rem; margin-left: 0.35rem; border-radius: 2px; }
.colorway-list { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.colorway-tag {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    color: var(--tenant-text);
    transition: border-color 0.15s;
}
.colorway-tag:hover { border-color: var(--tenant-text-muted); }
.colorway-item { width: 80px; text-align: center; }
.colorway-item img { width: 80px; height: 80px; object-fit: cover; margin-bottom: 0.25rem; }
.colorway-name { font-size: 0.7rem; color: var(--tenant-text-muted); }

/* ── Item Poll Section (inline poll on item detail) ── */
.item-poll-section { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--tenant-border); }
.item-poll-section h3 { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tenant-text-muted); margin-bottom: 0.75rem; }
.item-poll-section h3 svg { font-size: 0.85rem; vertical-align: -0.1em; margin-right: 0.25rem; }
.item-poll-option { margin-bottom: 0.5rem; }
.item-poll-option-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; }
.item-poll-option-text { font-size: 0.78rem; font-weight: 600; color: var(--tenant-text); }
.item-poll-option-pct { font-size: 0.72rem; font-weight: 700; color: var(--tenant-text-muted); font-variant-numeric: tabular-nums; }
.item-poll-bar { height: 6px; background: var(--tenant-bg-surface-alt); border-radius: 3px; overflow: hidden; }
.item-poll-bar-fill { height: 100%; background: var(--tenant-primary); border-radius: 3px; transition: width 0.3s; }
.item-poll-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 0.6rem; font-size: 0.7rem; color: var(--tenant-text-muted); }
.item-poll-meta a { color: var(--tenant-primary); font-weight: 600; text-decoration: none; }
.item-poll-meta a:hover { text-decoration: underline; }
.item-poll-vote-cta { display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1rem; background: var(--tenant-bg-surface); border: 1px solid var(--tenant-border); font-size: 0.78rem; font-weight: 600; color: var(--tenant-primary); text-decoration: none; transition: border-color 0.2s; }
.item-poll-vote-cta:hover { border-color: var(--tenant-primary); }
.item-poll-vote-cta svg { font-size: 0.9rem; }
.item-sizing { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--tenant-border); }
.item-sizing-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.size-unit-toggle { display: inline-flex; gap: 0.25rem; margin-bottom: 0.75rem; }
.size-unit-btn {
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.3rem 0.7rem;
    background: none;
    border: 1px solid var(--tenant-border);
    color: var(--tenant-text-muted);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.size-unit-btn:hover { color: var(--tenant-text); }
.size-unit-btn.active {
    color: var(--tenant-text);
    border-color: var(--tenant-primary);
    background: var(--tenant-bg-surface);
}
.size-unit-btn:focus-visible { outline: 2px solid var(--tenant-primary); outline-offset: 1px; }
/* In the chart's top-left cell it replaces the stale "Sizes in Inches" label,
   so it has to sit tight and inherit the header's own background. */
.size-unit-toggle--incell { margin: 0; }
.size-unit-toggle--incell .size-unit-btn { padding: 0.15rem 0.45rem; font-size: 0.65rem; }
.item-sizing-table table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.item-sizing-table th { background: var(--tenant-bg-surface-alt); color: var(--tenant-text); font-weight: 600; text-align: left; padding: 0.5rem 0.75rem; border-bottom: 2px solid var(--tenant-border); }
.item-sizing-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--tenant-border); color: var(--tenant-text-muted); }
.item-sizing-table tr:nth-child(even) td { background: var(--tenant-bg-surface-alt); }
.item-sizing-table tr:hover td { background: var(--tenant-bg-surface); }
/* Measurement cells only — [data-in] is set by the unit toggle on exactly the
   cells it converts. "33 1/2" was wrapping to two lines in the narrow columns
   on a phone; the long row LABELS still wrap, which is what they need to do. */
.item-sizing-table [data-in] { white-space: nowrap; }

.item-drop-info { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--tenant-border); }

/* The info panel mixes two separator conventions: some sections draw their
   rule BELOW (voting, sellout, drop date) and others draw it ABOVE
   (colorways, poll, sizing). Wherever the two meet you get two rules with a
   dead band between them, which reads as a missing section. Any section that
   directly follows a rule-below one already has its separator, so drop the
   duplicate. Written as `+ *` so it holds for whichever sections happen to
   render for a given item. */
.item-voting-block + *,
.item-sellout + *,
.item-drop-info + * {
    border-top: none;
    padding-top: 0;
}
.item-drop-info h3 { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tenant-text-muted); margin-bottom: 0.5rem; }
.item-drop-info h3 iconify-icon { font-size: 0.85rem; vertical-align: -0.1em; margin-right: 0.25rem; }
.drop-date-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    background: transparent;
    border: none;
    font-weight: 700;
    font-size: 0.95rem;
    transition: color 0.15s;
}
.drop-date-link:hover { color: var(--tenant-primary); }
.drop-date-week { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tenant-primary); background: transparent; padding: 0.15rem 0.5rem; border: 1px solid var(--tenant-primary); }
.drop-date-arrow { margin-left: auto; font-size: 0.85rem; opacity: 0.4; transition: opacity 0.15s, transform 0.15s; }
.drop-date-link:hover .drop-date-arrow { opacity: 1; transform: translateX(3px); }
.item-sizing h3 { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tenant-text-muted); margin-bottom: 0.75rem; }
.item-sizing h3 iconify-icon { font-size: 0.85rem; vertical-align: -0.1em; margin-right: 0.25rem; }

/* ── Item Detail: Vote Bar ─────────────────────────────────── */
.detail-vote-bar {
    flex: 1;
    height: 5px;
    display: flex;
    border-radius: 99px;
    overflow: hidden;
    background: var(--tenant-border);
    align-self: center;
    min-width: 60px;
}

/* ── Item Detail: Sellout Time ─────────────────────────────── */
.item-sellout { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--tenant-border); }
.item-sellout h3 { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tenant-text-muted); margin-bottom: 0.5rem; }
.item-sellout h3 iconify-icon { font-size: 0.85rem; vertical-align: -0.1em; margin-right: 0.25rem; }
.sellout-arrow { margin-left: auto; font-size: 0.85rem; opacity: 0.4; transition: opacity 0.15s, transform 0.15s; }
.sellout-link:hover .sellout-arrow { opacity: 1; transform: translateX(3px); }

.sellout-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    background: transparent;
    border: none;
    text-decoration: none;
    color: var(--tenant-text);
    transition: color 0.15s;
}
.sellout-link:hover { color: var(--tenant-primary); }

.sellout-region-tag {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background: var(--tenant-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sellout-time { font-weight: 700; font-size: 1rem; }
.sellout-fast { color: #f44336; }
.sellout-bolt { color: #f44336; font-size: 1.1rem; }
.sellout-colorway { font-size: 0.85rem; color: var(--tenant-text-muted); }

.sellout-meta {
    font-size: 0.75rem;
    color: var(--tenant-text-muted);
    margin-left: auto;
}

/* ── Item Detail: Sell / Buy ───────────────────────────────── */
.item-buy-section { margin-bottom: 1.25rem; padding-bottom: 0; }
.item-buy-section h3 { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tenant-text-muted); margin-bottom: 0.75rem; }

.item-buy-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.buy-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.25rem;
    border: 1.5px solid var(--tenant-border);
    border-radius: 8px;
    background: var(--tenant-bg-surface);
    color: var(--tenant-text);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1;
}
.buy-link .buy-link-brand { font-size: 1.1rem; opacity: 0.8; transition: opacity 0.15s; }
.buy-link:hover .buy-link-brand { opacity: 1; }
.buy-link-letter { font-size: 1.15rem; font-weight: 900; line-height: 1; opacity: 0.8; transition: opacity 0.15s; }
.buy-link-letter--serif { font-family: Georgia, 'Times New Roman', serif; font-style: italic; }
.buy-link:hover .buy-link-letter { opacity: 1; }
.buy-link:hover {
    border-color: var(--tenant-primary);
    color: var(--tenant-primary);
    transform: translateY(-1px);
}
.buy-link:active { transform: translateY(0) scale(0.97); }

.buy-link-name { white-space: nowrap; }

.buy-link-arrow { font-size: 0.7rem; opacity: 0; margin-left: -0.2rem; transition: opacity 0.15s, transform 0.15s; }
.buy-link:hover .buy-link-arrow { opacity: 0.5; transform: translate(1px, -1px); }

.share-btn {
    border-style: dashed;
    color: var(--tenant-text-muted);
}
.share-btn:hover { color: var(--tenant-text); border-style: solid; }
.share-btn.is-copied {
    border-style: solid;
    border-color: #4caf50;
    color: #4caf50;
}

.affiliate-disclosure {
    margin-top: 0.625rem;
    font-size: 0.6rem;
    color: var(--tenant-text-muted);
    opacity: 0.5;
}

/* ── Droplists Grid (legacy) ────────────────────────────────── */
.droplists-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.droplists-grid .droplist-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s;
}

.droplists-grid .droplist-card:hover { border-color: var(--tenant-text-muted); }

.droplists-grid .droplist-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
    padding: 0.5rem;
    background: var(--tenant-primary);
    color: #fff;
}

.droplists-grid .droplist-date .day { font-size: 1.5rem; font-weight: 700; line-height: 1; }
.droplists-grid .droplist-date .month { font-size: 0.75rem; text-transform: uppercase; }
.droplists-grid .droplist-date .year { font-size: 0.65rem; }
.droplists-grid .droplist-info h3 { font-size: 1rem; margin-bottom: 0.25rem; }
.droplists-grid .item-count { font-size: 0.8rem; color: var(--tenant-text-muted); }

/* ── Sellouts ───────────────────────────────────────────────── */
.sellouts-list {
    display: flex;
    flex-direction: column;
}

.sellout-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1rem;
    margin: 0 -1rem;
    border-bottom: 1px solid var(--tenant-border);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s, padding-left 0.2s;
}

.sellout-card:first-child {
    border-top: 1px solid var(--tenant-border);
}

.sellout-card:hover {
    background: var(--tenant-bg-surface);
    padding-left: 1.5rem;
    border-left: 3px solid var(--tenant-primary);
}

.sellout-card .chevron {
    font-size: 1rem;
    color: var(--tenant-text-muted);
    flex-shrink: 0;
    opacity: 0.4;
    transition: opacity 0.15s, transform 0.15s;
}

.sellout-card:hover .chevron { opacity: 1; transform: translateX(3px); }

.sellout-info { flex: 1; min-width: 0; line-height: 1.3; }
.sellout-info h3 { font-size: 0.95rem; text-transform: none; margin-bottom: 0; font-weight: 700; }
.sellout-item-count { font-size: 0.8rem; color: var(--tenant-text-muted); }
.sellout-fastest {
    display: block;
    font-size: 0.78rem;
    color: var(--tenant-primary);
    font-weight: 700;
    margin-top: 0.1rem;
    letter-spacing: 0.02em;
}

.sellout-season-badge {
    font-size: 0.7rem;
    color: var(--tenant-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
}

.sellout-row-preview {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    width: 190px;
    justify-content: flex-start;
}
.sellout-row-thumbs { display: flex; gap: 0.35rem; }
.sellout-row-thumb {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 2px;
    background: var(--tenant-bg-surface-alt);
    border: 1px solid var(--tenant-border);
}
.sellout-row-more {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--tenant-text-muted);
    white-space: nowrap;
}
@media (max-width: 600px) {
    .sellout-row-preview { width: auto; }
    .sellout-row-thumb { width: 30px; height: 30px; }
    .sellout-row-more { display: none; }
}

.sellout-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
    padding: 0.35rem 0.5rem;
    background: var(--tenant-primary);
    color: #fff;
    line-height: 1.1;
}

.sellout-date .day { font-size: 1.25rem; font-weight: 700; }
.sellout-date .month { font-size: 0.65rem; text-transform: uppercase; font-weight: 600; }
.sellout-date .year { font-size: 0.6rem; opacity: 0.7; }

/* Sellout toolbar — unified control bar */
.st-toolbar {
    display: flex;
    align-items: stretch;
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    border-radius: 6px;
    margin-bottom: 1.5rem;
    overflow: visible;
}
.st-toolbar-regions {
    display: flex;
    border-right: 1px solid var(--tenant-border);
}
.st-region {
    padding: 0.5rem 0.85rem;
    color: var(--tenant-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
}
.st-region + .st-region { border-left: 1px solid var(--tenant-border); }
.st-toolbar-regions .st-region:first-child { border-radius: 5px 0 0 5px; }
.st-region:hover { background: var(--tenant-bg-surface-alt); color: var(--tenant-text); }
.st-region.is-active {
    color: var(--tenant-primary);
    box-shadow: inset 0 -2px 0 var(--tenant-primary);
}
.st-toolbar-filters {
    display: flex;
    align-items: center;
    margin-left: auto;
    border-left: 1px solid var(--tenant-border);
}
.st-toolbar-links {
    display: flex;
    border-left: 1px solid var(--tenant-border);
}
.st-toolbar-links a {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.85rem;
    color: var(--tenant-text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
}
.st-toolbar-links a + a { border-left: 1px solid var(--tenant-border); }
.st-toolbar-links a:hover { color: var(--tenant-primary); background: var(--tenant-bg-surface-alt); }

/* Sellout list layout */
.st-list { margin-bottom: 2rem; }
.st-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--tenant-border);
    transition: background 0.1s;
}
.st-row:hover { background: var(--tenant-bg-surface); }
.st-row .col-pos {
    width: 1.75rem;
    flex-shrink: 0;
    text-align: center;
    font-size: 0.75rem;
    color: var(--tenant-text-muted);
    font-variant-numeric: tabular-nums;
}
.st-row-info {
    flex: 1;
    min-width: 0;
}
.st-row-name {
    display: block;
    font-weight: 600;
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.st-row-meta {
    display: flex;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--tenant-text-muted);
    margin-top: 0.15rem;
}
.st-row-meta span:not(:last-child)::after {
    content: '\00b7';
    margin-left: 0.5rem;
}
.st-row-time {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Time badges */
.time-badge {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.time-badge--instant { background: #f443361a; color: #f44336; border: 2px solid #f4433650; }
.time-badge--fast    { background: #ff98001a; color: #ff9800; border: 2px solid #ff980050; }
.time-badge--medium  { background: #4caf501a; color: #4caf50; border: 2px solid #4caf5050; }
.time-badge--slow    { background: var(--tenant-bg-surface-alt); color: var(--tenant-text-muted); border: 2px solid var(--tenant-border); }
.time-badge--manual  { background: var(--tenant-bg-surface-alt); color: var(--tenant-text-muted); border: 2px solid var(--tenant-border); font-weight: 400; font-size: 0.8rem; }
/* Drop-open stock artifact rows: not sold out, feed loaded late */
.time-badge--loaded  { background: var(--tenant-bg-surface-alt); color: var(--tenant-text-muted); border: 2px dashed var(--tenant-border); font-weight: 400; font-size: 0.8rem; }

:root[data-theme="light"] .time-badge--instant { background: #f4433612; }
:root[data-theme="light"] .time-badge--fast    { background: #ff980012; }
:root[data-theme="light"] .time-badge--medium  { background: #4caf5012; }

/* Sellout filter segments (inside toolbar) */
.st-filter-segments {
    display: flex;
    overflow: visible;
}
.st-segment {
    position: relative;
}
.st-segment + .st-segment { border-left: 1px solid var(--tenant-border); }
.st-segment-trigger {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    background: none;
    border: none;
    color: var(--tenant-text);
    font-family: inherit;
    font-size: 0.72rem;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
.st-segment-trigger:hover { background: var(--tenant-bg-surface-alt); }
.st-segment.is-open .st-segment-trigger { background: var(--tenant-bg-surface-alt); }
.st-segment-label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.65rem;
    color: var(--tenant-text-muted);
}
.st-segment-value {
    font-weight: 600;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.st-segment-trigger.has-filter .st-segment-value {
    color: var(--tenant-primary);
}
/* Tray dropdown */
.st-segment-tray {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 60;
    min-width: 180px;
    max-width: 320px;
    max-height: 260px;
    overflow-y: auto;
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    border-radius: 5px;
    padding: 0.35rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.st-segment.is-open .st-segment-tray { display: block; }
.st-opt {
    display: block;
    width: 100%;
    padding: 0.4rem 0.65rem;
    text-align: left;
    background: none;
    border: none;
    border-radius: 3px;
    color: var(--tenant-text);
    font-family: inherit;
    font-size: 0.78rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.1s;
}
.st-opt:hover { background: var(--tenant-bg-surface-alt); }
.st-opt.is-active {
    background: var(--tenant-primary);
    color: #fff;
    font-weight: 600;
}
.st-filter-count {
    font-size: 0.75rem;
    color: var(--tenant-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
@media (max-width: 640px) {
    .st-toolbar {
        flex-wrap: wrap;
    }
    .st-toolbar-regions {
        flex: 1 1 100%;
        border-right: none;
        border-bottom: 1px solid var(--tenant-border);
    }
    .st-region { flex: 1; text-align: center; }
    .st-toolbar-regions .st-region:first-child { border-radius: 0; }
    .st-toolbar-filters {
        margin-left: 0;
        border-left: none;
    }
    .st-toolbar-links { border-left: 1px solid var(--tenant-border); }
    .st-segment-value { max-width: 80px; }
    .st-segment-tray { min-width: 160px; max-width: calc(100vw - 2rem); }
}
@media (max-width: 480px) {
    .st-row { gap: 0.5rem; }
    .st-row .col-pos { width: 1.25rem; font-size: 0.7rem; }
    .st-row-name { font-size: 0.82rem; }
}

.sellout-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 3px;
    background: var(--tenant-bg-surface-alt);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}
.sellout-thumb--empty {
    display: block;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: var(--tenant-bg-surface-alt);
    border-radius: 3px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* Small-phone sizing, AFTER both base rules. It was in a 480px block placed
   just above them, so the 40px bases won on source order and the thumbs never
   shrank. */
@media (max-width: 480px) {
    .sellout-thumb,
    .sellout-thumb--empty { width: 32px; height: 32px; }
}

/* ── Archive ────────────────────────────────────────────────── */

/* Search bar */
.archive-search { margin-bottom: 2rem; }
.archive-search form { display: flex; gap: 0.5rem; }
.archive-search .search-input {
    flex: 1;
    min-width: 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--tenant-border);
    border-radius: 6px;
    background: var(--tenant-bg-surface);
    color: var(--tenant-text);
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.2s;
}
.archive-search .search-input:focus {
    outline: none;
    border-color: var(--tenant-text-muted);
}
.archive-search .search-input::placeholder { color: var(--tenant-text-muted); }
.archive-search .btn { flex-shrink: 0; padding: 0.75rem 1.25rem; border-radius: 6px; }

/* Search form (search results page) */
.archive-search-form { margin-bottom: 1.5rem; }
.archive-search-form form { display: flex; gap: 0.5rem; }
.archive-search-form .search-input {
    flex: 1;
    min-width: 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--tenant-border);
    border-radius: 6px;
    background: var(--tenant-bg-surface);
    color: var(--tenant-text);
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.2s;
}
.archive-search-form .search-input:focus {
    outline: none;
    border-color: var(--tenant-text-muted);
}
.archive-search-form .btn { flex-shrink: 0; padding: 0.75rem 1.25rem; border-radius: 6px; }
.search-results-info { font-size: 0.88rem; color: var(--tenant-text-muted); margin-bottom: 1.5rem; }

/* Search input (generic — used outside archive too) */
.search-input {
    flex: 1;
    min-width: 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--tenant-border);
    background: var(--tenant-bg-surface);
    color: var(--tenant-text);
    font-size: 1rem;
    font-family: inherit;
}
.search-input::placeholder { color: var(--tenant-text-muted); }

/* ── Archive — reuses .collections-grid / .collection-card / .items-grid / .item-card ── */

/* Collection count on detail page header */
.archive-collection-count {
    font-size: 0.85rem;
    color: var(--tenant-text-muted);
    margin-top: 0.25rem;
}

.archive-intro {
    margin: 0 0 2.5rem;
    padding: 0 0 0 1.5rem;
    line-height: 1.8;
    color: var(--tenant-text-muted);
    font-size: 0.92rem;
    border-left: 3px solid var(--tenant-primary);
    position: relative;
}

.archive-intro-text p {
    margin-bottom: 0.75rem;
}

.archive-intro-text p:last-child {
    margin-bottom: 0;
}

.archive-intro-toggle {
    display: none;
}

@media (max-width: 600px) {
    .archive-intro {
        padding: 0 0 0 1rem;
    }

    .archive-intro.is-collapsed .archive-intro-text {
        max-height: 4.5em;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
    }

    .archive-intro.is-collapsed .archive-intro-toggle {
        display: block;
        background: none;
        border: none;
        color: var(--tenant-primary);
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        padding: 0.5rem 0 0;
        font-family: inherit;
    }
}

.archive-faq-section {
    margin-top: 3rem;
    margin-bottom: 1.5rem;
}

.archive-faq-section h2 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

/* Featured collection card */
.collection-card--featured {
    position: relative;
}
.archive-featured-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #d4a017;
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* Archive item links (used on <a> tags wrapping item-card) */
.archive-item-link {
    text-decoration: none;
    color: inherit;
}

/* Muted meta text below item names */
.item-meta-muted {
    font-size: 0.68rem;
    color: var(--tenant-text-muted);
    display: block;
}

/* ── Archive Detail Page ──────────────────────────────────── */
.archive-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    margin-bottom: 2rem;
}

.archive-detail-image {
    background: var(--tenant-bg-surface);
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--tenant-border);
}
.archive-detail-image img {
    width: 100%;
    height: auto;
    cursor: zoom-in;
    display: block;
}

.archive-detail-info h1 {
    font-size: 1.75rem;
    margin-bottom: 1.25rem;
    text-transform: none;
    line-height: 1.2;
}

/* Meta table (replaces old .archive-meta) */
.archive-meta-table {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 1.25rem;
    border: 1px solid var(--tenant-border);
    border-radius: 8px;
    overflow: hidden;
}
.archive-meta-row {
    display: flex;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--tenant-border);
}
.archive-meta-row:last-child { border-bottom: none; }
.archive-meta-label {
    width: 90px;
    flex-shrink: 0;
    font-size: 0.78rem;
    color: var(--tenant-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.archive-meta-value {
    font-size: 0.88rem;
    color: var(--tenant-text);
}

/* Keep old .archive-meta for backwards compat */
.archive-meta { margin-bottom: 1rem; }
.archive-meta .meta-item { display: block; margin-bottom: 0.25rem; color: var(--tenant-text-muted); }

.archive-details-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 1rem;
}

/* Colorways */
.archive-linked-styles { margin-top: 1.5rem; }
.archive-linked-styles h3 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
    color: var(--tenant-text-muted);
}
.archive-styles-grid { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.archive-style-thumb { width: 72px; text-align: center; }
.archive-style-thumb img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--tenant-border);
    margin-bottom: 0.3rem;
    transition: border-color 0.2s;
}
.archive-style-thumb:hover img { border-color: var(--tenant-text-muted); }
.archive-style-thumb span {
    font-size: 0.65rem;
    color: var(--tenant-text-muted);
    display: block;
    line-height: 1.2;
}

/* ── Archive Timeline (Collection Detail) ─────────────────── */
.archive-timeline {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.archive-timeline-group {
    display: flex;
    flex-direction: column;
}

.archive-timeline-year {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.archive-timeline-year::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--tenant-border);
}

.archive-timeline-year span {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--tenant-font-heading);
    color: var(--tenant-text);
    white-space: nowrap;
}

.archive-timeline-year-count {
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    color: var(--tenant-text-muted) !important;
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    white-space: nowrap;
}


/* ── Archive sort controls (unused, kept for compat) ─── */
.archive-controls {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.archive-sort select {
    padding: 0.5rem 0.75rem;
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    color: var(--tenant-text);
    font-size: 0.85rem;
    cursor: pointer;
}

.year-filter { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.year-btn {
    padding: 0.5rem 1rem;
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    text-decoration: none;
    color: var(--tenant-text);
    font-size: 0.85rem;
    transition: all 0.2s;
}

.year-btn:hover, .year-btn.active {
    background: var(--tenant-primary);
    border-color: var(--tenant-primary);
    color: #fff;
}

/* ── Archive Responsive ───────────────────────────────────── */
@media (max-width: 768px) {
    .archive-timeline-year span {
        font-size: 1.25rem;
    }
    .archive-detail {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .archive-detail-info h1 {
        font-size: 1.4rem;
    }
    .archive-meta-label {
        width: 75px;
    }
}

/* ── Polls ──────────────────────────────────────────────────── */
.polls-section { margin-bottom: 2rem; }

.polls-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.poll-card {
    display: block;
    padding: 1.5rem;
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s;
}

.poll-card:hover { border-color: var(--tenant-text-muted); }
.poll-card.active { border-left: 4px solid var(--tenant-primary); }
.poll-card.closed { opacity: 0.7; }
.poll-card h3 { margin-bottom: 0.5rem; text-transform: none; }
.poll-meta { display: flex; gap: 1rem; font-size: 0.85rem; color: var(--tenant-text-muted); }
.closed-badge { background: var(--tenant-bg-surface-alt); padding: 0.25rem 0.5rem; font-size: 0.75rem; }

.poll-detail { max-width: 600px; margin: 0 auto; }
.poll-detail h1 { margin-bottom: 1rem; text-transform: none; }
.poll-description { color: var(--tenant-text-muted); margin-bottom: 1.5rem; }
.poll-results { margin: 2rem 0; }

.poll-option { margin-bottom: 1rem; }

.poll-option.votable {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--tenant-border);
    cursor: pointer;
    transition: border-color 0.2s;
}

.poll-option.votable:hover { border-color: var(--tenant-primary); }
.poll-option input[type="radio"] { width: 20px; height: 20px; accent-color: var(--tenant-primary); }

.poll-option.result { padding: 1rem; background: var(--tenant-bg-surface); }
.poll-option.result.winner { border-left: 4px solid #4caf50; }

.option-text { font-weight: 600; margin-bottom: 0.5rem; }
.winner-badge { display: inline-block; padding: 0.125rem 0.5rem; background: #4caf50; color: #fff; font-size: 0.75rem; margin-left: 0.5rem; }

.option-bar-container { height: 8px; background: var(--tenant-border); overflow: hidden; margin-bottom: 0.5rem; border-radius: 4px; }
.option-bar { height: 100%; background: var(--tenant-primary); transition: width 0.3s; border-radius: 4px; }
.option-stats { font-size: 0.8rem; color: var(--tenant-text-muted); }
.poll-vote-form .btn { margin-top: 1rem; }
.voted-message { text-align: center; color: var(--tenant-text-muted); padding: 1.25rem; background: var(--tenant-bg-surface); border: 1px solid var(--tenant-border); font-weight: 600; font-size: 0.85rem; }

/* ── Pagination ─────────────────────────────────────────────── */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin: 2.5rem 0;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 1rem;
    border: 1px solid var(--tenant-border);
    border-radius: 999px;
    text-decoration: none;
    color: var(--tenant-text);
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s;
}

.pagination a:hover {
    border-color: var(--tenant-primary);
    color: var(--tenant-primary);
}

.pagination .active {
    background: var(--tenant-primary);
    border-color: var(--tenant-primary);
    color: #fff;
}

@media (max-width: 480px) {
    .pagination { gap: 0.35rem; }
    .pagination a,
    .pagination span { min-width: 34px; height: 34px; padding: 0 0.6rem; font-size: 0.8rem; }
    .pagination .pagination-label { display: none; }
}

.page-info {
    font-size: 0.85rem;
    color: var(--tenant-text-muted);
}

/* ── Grid Utilities ─────────────────────────────────────────── */
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ── Cards (generic) ────────────────────────────────────────── */
.card {
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    overflow: hidden;
    transition: border-color 0.2s;
}

.card:hover { border-color: var(--tenant-text-muted); }

/* ── Footer ────────────────────────────────────────────────── */
.main-footer {
    background: var(--tenant-footer-bg);
    border-top: 1px solid var(--tenant-border);
    margin-top: auto;
    color: var(--tenant-footer-text, var(--tenant-text));
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.footer-main {
    border-bottom: 1px solid var(--tenant-border);
}

.footer-main-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 3rem 2.5rem;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2rem;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-logo {
    font-family: var(--tenant-font-heading);
    font-weight: 900;
    font-size: 1.1rem;
    text-transform: uppercase;
    color: var(--tenant-footer-text, var(--tenant-text));
    letter-spacing: 0.04em;
    display: inline-block;
}

.footer-logo-img {
    height: 24px;
    width: auto;
    display: block;
}

/* Same reason as .nav-logo-wordmark: wide mark, so it needs less height. */
.footer-logo-wordmark { height: 19px; }

:root[data-theme="light"] .footer-logo-img {
    filter: invert(1);
}

.footer-disclaimer {
    font-size: 0.78rem;
    color: var(--tenant-footer-text-muted, var(--tenant-text-muted));
    line-height: 1.5;
    max-width: 280px;
}

.footer-social-links {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.footer-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    color: var(--tenant-footer-text-muted, var(--tenant-text-muted));
    transition: color 0.2s;
}

.footer-social-btn:hover {
    color: var(--tenant-footer-text, var(--tenant-text));
}

.footer-links-col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-col-title {
    font-family: var(--tenant-font-heading);
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--tenant-footer-text, var(--tenant-text));
    margin-bottom: 0.25rem;
}

.footer-links-col a {
    font-size: 0.8rem;
    color: var(--tenant-footer-text-muted, var(--tenant-text-muted));
    transition: color 0.15s;
    line-height: 1.6;
}

.footer-links-col a:hover {
    color: var(--tenant-footer-text, var(--tenant-text));
}

/* ── Footer Siblings — Our Communities bar ─────────────────── */
.footer-siblings {
    border-bottom: 1px solid var(--tenant-border);
}

.footer-siblings-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.25rem 2.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.footer-siblings-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--tenant-footer-text-muted, var(--tenant-text-muted));
    white-space: nowrap;
    flex-shrink: 0;
}

.footer-siblings-links {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.footer-sibling-current {
    font-family: var(--tenant-font-heading);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tenant-footer-text, var(--tenant-text));
}

.footer-sibling-link {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-family: var(--tenant-font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tenant-footer-text-muted, var(--tenant-text-muted));
    transition: color 0.2s;
    white-space: nowrap;
}

.footer-sibling-link:hover {
    color: var(--tenant-primary);
}

.footer-sibling-link iconify-icon {
    opacity: 0.5;
    font-size: 0.65em;
    transition: opacity 0.2s;
}

.footer-sibling-link:hover iconify-icon {
    opacity: 1;
}

.footer-sibling-platform {
    color: var(--tenant-footer-text-muted, var(--tenant-text-muted));
}

/* ── Footer Bottom — copyright bar ─────────────────────────── */
.footer-bottom {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-copyright {
    font-size: 0.75rem;
    color: var(--tenant-footer-text-muted, var(--tenant-text-muted));
}

/* Theme Switch — system / fixed light / fixed dark */
.theme-switch {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--tenant-footer-text-muted, var(--tenant-text-muted));
}
.theme-switch-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.6;
    margin-right: 0.15rem;
}
.theme-switch-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 4px;
    color: inherit;
    opacity: 0.5;
    transition: opacity 0.2s, color 0.2s, border-color 0.2s;
    font-family: inherit;
}
.theme-switch-btn:hover { opacity: 1; }
.theme-switch-btn.active {
    opacity: 1;
    color: var(--tenant-footer-text, var(--tenant-text));
    border-color: currentColor;
}
.theme-switch-btn:focus-visible {
    outline: 2px solid var(--tenant-primary);
    outline-offset: 1px;
}

/* ── Flash Messages ─────────────────────────────────────────── */
.flash-messages { max-width: 1200px; margin: 0 auto; padding: 1rem 2rem; }
.flash { padding: 1rem; margin-bottom: 0.5rem; font-size: 0.9rem; }
.flash-success { background: #1b5e20; color: #a5d6a7; }
.flash-error { background: #b71c1c; color: #ef9a9a; }
.flash-warning { background: #e65100; color: #ffcc80; }

/* ── Error Pages ────────────────────────────────────────────── */
.error-page { text-align: center; padding: 6rem 2rem; }
.error-page h1 { font-size: 8rem; color: var(--tenant-primary); margin-bottom: 1rem; }
.error-page p { font-size: 1.25rem; color: var(--tenant-text-muted); margin-bottom: 2rem; }

/* ── Empty State ────────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--tenant-text-muted);
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    border-radius: 6px;
    font-size: 0.9rem;
    grid-column: 1 / -1;
}

/* ── Season Coming Soon ─────────────────────────────────────── */
.season-coming-soon {
    margin: 2rem 0;
}
.season-coming-soon-header {
    text-align: center;
    padding: 2rem 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.season-coming-soon-icon {
    font-size: 2rem;
    color: var(--tenant-text-muted);
    margin-bottom: 0.75rem;
    animation: pulse-icon 2s ease-in-out infinite;
}
.season-coming-soon h2 {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.4rem;
    color: var(--tenant-text-muted);
}
.season-coming-soon p {
    color: var(--tenant-text-muted);
    font-size: 0.85rem;
}

/* Skeleton loading grid */
.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
@media (max-width: 768px) {
    .skeleton-grid { grid-template-columns: repeat(2, 1fr); }
}
.skeleton-card {
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    border-radius: 6px;
    overflow: hidden;
    opacity: 0;
    animation: skeleton-fade-in 0.4s ease forwards;
}
.skeleton-image {
    width: 100%;
    aspect-ratio: 1;
    background: linear-gradient(
        110deg,
        var(--tenant-bg-surface-alt) 8%,
        var(--tenant-border) 18%,
        var(--tenant-bg-surface-alt) 33%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s linear infinite;
}
.skeleton-text {
    margin: 0.75rem;
    border-radius: 4px;
    background: linear-gradient(
        110deg,
        var(--tenant-bg-surface-alt) 8%,
        var(--tenant-border) 18%,
        var(--tenant-bg-surface-alt) 33%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s linear infinite;
}
.skeleton-title { height: 0.75rem; width: 70%; }
.skeleton-price { height: 0.75rem; width: 35%; margin-bottom: 0.75rem; }

@keyframes skeleton-fade-in {
    to { opacity: 1; }
}
@keyframes pulse-icon {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.1); }
}

/* ── Filter Bar ─────────────────────────────────────────────── */
.filter-bar { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.filter-bar label { font-weight: 600; }

.filter-bar select {
    padding: 0.5rem 1rem;
    border: 1px solid var(--tenant-border);
    background: var(--tenant-bg-surface);
    color: var(--tenant-text);
    font-size: 1rem;
    font-family: inherit;
}

/* ── Forms ──────────────────────────────────────────────────── */
.submit-form .form-group { margin-bottom: 1.5rem; }
.submit-form label { display: block; font-weight: 600; margin-bottom: 0.5rem; }
.form-hint { color: var(--tenant-text-muted); display: block; margin-top: 0.5rem; font-size: 0.8rem; }
.form-required { color: var(--tenant-primary); }
.form-optional { color: var(--tenant-text-muted); font-weight: 400; font-size: 0.85rem; }
.form-actions { margin-top: 2rem; }

/* ── Feedback Form ─────────────────────────────────────────── */
.feedback-form { max-width: 600px; margin-top: 1.5rem; }
.feedback-form .form-group { margin-bottom: 1.5rem; }
.feedback-form label { display: block; font-weight: 600; margin-bottom: 0.5rem; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.03em; }
.feedback-form .form-select,
.feedback-form .form-input,
.feedback-form .form-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--tenant-border);
    background: var(--tenant-bg-surface);
    color: var(--tenant-text);
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.2s;
}
.feedback-form .form-select:focus,
.feedback-form .form-input:focus,
.feedback-form .form-textarea:focus {
    outline: none;
    border-color: var(--tenant-primary);
}
.feedback-form .form-textarea { resize: vertical; min-height: 120px; }
.feedback-form .btn-primary {
    background: var(--tenant-primary);
    color: #fff;
    border: none;
    padding: 0.75rem 2rem;
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: opacity 0.2s;
}
.feedback-form .btn-primary:hover { opacity: 0.9; }
.page-subtitle { color: var(--tenant-text-muted); margin-top: 0.5rem; font-size: 0.95rem; }

.narrow-container { max-width: 600px; }

.info-box {
    margin-top: 3rem;
    padding: 1.5rem;
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
}
.info-box h2 { font-size: 1.1rem; margin-bottom: 1rem; }
.info-box ul { list-style: disc; padding-left: 1.5rem; color: var(--tenant-text-muted); font-size: 0.9rem; line-height: 1.8; }

/* Back Link */
.back-link { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--tenant-border); }

/* Related Items */
.related-items { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--tenant-border); }
.related-items .section-header { margin-bottom: 1.5rem; }
.related-items .section-header h2 { letter-spacing: 0; text-transform: none; }
.related-items .items-grid,
.related-items .items-grid { grid-template-columns: repeat(4, 1fr); }

/* ── Ad Slots ───────────────────────────────────────────────── */
/* .ad-empty        GPT reported no fill (slotRenderEnded isEmpty); removed again when the slot renders.
   .ad-inactive     a placement not used at this viewport: never registered with Freestar, never requested.
   html.ads-blocked pubfig.min.js failed to load (ad blocker): nothing can fill, collapse every wrapper.
   No timer-based hiding any more: lazy and consent-gated slots fill later than any timeout would allow. */
.ad-empty, .ad-inactive { display: none !important; }
html.ads-blocked .grid-ad-slot, html.ads-blocked .ad-leaderboard, html.ads-blocked .ad-leaderboard-inline,
html.ads-blocked .ad-mobile-leaderboard, html.ads-blocked .ad-incontent, html.ads-blocked .ad-mobile-item-detail,
html.ads-blocked .ad-news-article, html.ads-blocked .news-grid-ad-slot,
html.ads-blocked .ad-sidewall-left, html.ads-blocked .ad-sidewall-right,
html.ads-blocked .ad-pushdown, html.ads-blocked .ad-video-slot { display: none !important; }

/* Side rails: 160px fixed, 10px outside the content box's inner edge (1200px box minus its
   2rem padding = 1136px, so 568px from centre + 170px = rail width + gap). A rail needs 738px
   on its side of centre, i.e. a 1476px viewport: shown from 1500px up, hidden below, where the
   slot is also .ad-inactive (base.html). Was 1540px, which hid a rail that Freestar still
   requested and filled on 1440px laptops. */
.ad-sidewall-left, .ad-sidewall-right { width: 160px; position: fixed; top: 60px; z-index: 10; }
.ad-sidewall-left { left: calc(50% - 568px - 170px); }
.ad-sidewall-right { right: calc(50% - 568px - 170px); }
@media (max-width: 1499px) { .ad-sidewall-left, .ad-sidewall-right { display: none; } }
/*
 * Pre-render reserve, one CSS custom property per wrapper class (never one shared value):
 * the wrapper keeps --ad-reserve as min-height until GPT's first slotRenderEnded, then
 * base.html sets the wrapper's height to the creative's height and clears the min-height,
 * so the box always matches the creative (also after a refresh that returns another size).
 * A 320x100 in a 250px box left 150-200px of blank under the top banner on phones (2026-10-28).
 *   below 1000px: mobile_leaderboard 100, incontent_* 250, leaderboard_desktop_mobile 250,
 *                 adhesion 50 (Freestar's footer, below), video 16:9 of its width
 *   1000px and up: leaderboard_desktop_mobile 250, incontent_* 250, adhesion 90, sidewalls 600,
 *                 video 16:9
 */
.ad-mobile-leaderboard, .ad-mobile-item-detail { --ad-reserve: 100px; }
.ad-leaderboard, .ad-leaderboard-inline, .ad-incontent, .ad-news-article, .news-grid-ad-slot,
.grid-ad-slot:not(.ad-video-slot) { --ad-reserve: 250px; }
.ad-sidewall-left, .ad-sidewall-right { --ad-reserve: 600px; min-height: var(--ad-reserve); }
.ad-mobile-leaderboard, .ad-mobile-item-detail, .ad-leaderboard, .ad-leaderboard-inline, .ad-incontent,
.ad-news-article, .news-grid-ad-slot, .grid-ad-slot:not(.ad-video-slot) {
    min-height: var(--ad-reserve); content-visibility: auto; contain-intrinsic-size: auto var(--ad-reserve);
}
.ad-incontent { margin: 2rem auto; text-align: center; }
.ad-leaderboard { text-align: center; margin: 2rem 0; }
.ad-leaderboard-inline { text-align: center; margin: 1.5rem 0; }
.ad-mobile-item-detail { text-align: center; margin: 2rem 0; display: none; }
.ad-news-article { margin: 2rem auto; text-align: center; max-width: 970px; }
/* In-grid slot (grid_ad.html). Spacing is a margin, not padding: the snapped height is
   the creative's height and border-box padding would clip it. */
.grid-ad-slot { text-align: center; margin: 1rem 0; }
/* Mobile leaderboard (320x100) at the top of <main> on phones: 8px above and below, and the
   content block under it drops its top padding so the breadcrumb starts within 20px. */
.ad-mobile-leaderboard { text-align: center; margin: 8px 0; }
@media (max-width: 768px) {
    .ad-mobile-leaderboard:not(.ad-empty):not(.ad-inactive):not(.ad-unfilled) ~ .content-wrapper { padding-top: 0; }
}
/* Freestar's "sliding ad" (pubOS: stickyAdEnabled + adScrollHeight on mobile_leaderboard and
   incontent_1) wraps the slot in a 250/280px .sliding-ad-container and floats the creative
   through it on scroll (inline margin-top on the inner shim, up to 279px). That container, not
   the creative, was the 250px black box on phones. Neutralised for the top banner and in-content
   slots only: the container follows its content, the shim sits at the top and never floats
   (!important beats pubfig's inline styles). The bottom leaderboard keeps the scroll-along. */
:is(.ad-mobile-leaderboard, .ad-mobile-item-detail, .grid-ad-slot, .ad-incontent, .ad-news-article, .news-grid-ad-slot)
  .sliding-ad-container { height: auto !important; min-height: 0 !important; min-width: 0 !important; overflow: visible !important; }
:is(.ad-mobile-leaderboard, .ad-mobile-item-detail, .grid-ad-slot, .ad-incontent, .ad-news-article, .news-grid-ad-slot)
  .sliding-ad-container > div { position: static !important; margin-top: 0 !important; top: auto !important; overflow: visible !important; }
/* Adhesion (Freestar's own #fs-sticky-footer, appended to <body>): pubfig sets its min-height
   to the tallest size in the mapping (100px), which put a 320x50 in a 100px strip. Reserve
   50px on phones / 90px from 1000px; base.html snaps the footer to the creative on render. */
.fs-sticky-footer { min-height: 50px !important; }
@media (min-width: 1000px) { .fs-sticky-footer { min-height: 90px !important; } }
/* Folded display slot (isEmpty, or no real creative 5s after coming into view; base.html):
   animates to 0 but stays laid out, so a creative that lands later re-opens it. */
.ad-unfilled { overflow: hidden; content-visibility: visible; contain-intrinsic-size: auto 0;
               transition: height 0.25s ease, margin 0.25s ease; }
/* Collapse slot when ad fails to fill (no-fill callback, ad blocker) */
.ad-no-fill { content-visibility: visible; contain-intrinsic-size: auto 0; min-height: 0; margin: 0; padding: 0; }
/* Home page: one leaderboard under the hero, one in-content slot further down */
.home-ad-slot { margin: 2rem auto 3rem; }
/* Pushdown (supremecommunity_pushdown): full content width, centred, directly under the nav.
   Freestar's cls.css reserves the height of the -pushdown-cls element on phones and hides it
   from 768px up (the placement has phone sizes only); Freestar's module expands/collapses it. */
.ad-pushdown { text-align: center; max-width: 1200px; margin: 0 auto; }
/* Outstream video (Primis via Freestar), one per page: a 16:9 box up to 640px wide keeps
   the space from the first paint, so the lazily started player causes no layout shift. */
.ad-video-slot { text-align: center; padding: 1rem 0; }
.ad-video-container { width: 100%; max-width: 640px; margin: 0 auto; aspect-ratio: 16 / 9; }
.ad-video-container > .ad-video-parent, .ad-video-container > #freestar-video-parent { width: 100%; height: 100%; }
.ad-video-slot.ad-no-fill .ad-video-container { aspect-ratio: auto; height: 0; }
/* A creative wider than its column (a 970x250 served into an in-content slot at tablet
   width) must not widen the page: clip it instead of scrolling sideways. */
.grid-ad-slot, .ad-incontent, .ad-news-article, .news-grid-ad-slot,
.ad-leaderboard, .ad-leaderboard-inline, .ad-mobile-leaderboard, .ad-pushdown, .ad-video-slot { max-width: 100%; overflow: hidden; }
#FreeStarVideoAdContainerIncontent { max-width: 600px; margin: 0 auto; }
.desktop-only { display: block; }
.mobile-only { display: none; }

/* Sticky anchor ad (mobile) — fixed to bottom of viewport */
.ad-sticky-anchor {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: var(--tenant-bg);
    text-align: center;
    padding: 6px 0 max(6px, env(safe-area-inset-bottom));
    box-shadow: 0 -1px 8px rgba(0,0,0,0.15);
}
.ad-sticky-close {
    position: absolute;
    top: -22px;
    right: 8px;
    width: 22px;
    height: 22px;
    border: none;
    background: var(--tenant-bg-surface);
    color: var(--tenant-text-muted);
    border-radius: 4px 4px 0 0;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 -1px 4px rgba(0,0,0,0.1);
}

/* ── Platform-specific overrides ────────────────────────────── */
.platform-theme .nav-links a:hover,
.platform-theme .nav-links a.active {
    border-bottom-color: var(--tenant-secondary);
}
.platform-theme .nav-mobile-overlay a:hover,
.platform-theme .nav-mobile-overlay a.active {
    color: var(--tenant-secondary);
}

.platform-theme .main-nav {
    border-bottom: 1px solid var(--tenant-border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.platform-theme .flash-success { background: #d4edda; color: #155724; }
.platform-theme .flash-error { background: #f8d7da; color: #721c24; }
.platform-theme .flash-warning { background: #fff3cd; color: #856404; }

/* ── Platform hub (cmtyone.com) ─────────────────────────────── */
/* Built on the tenant home's components — .home-page, .home-section,
   .section-header/.section-label, .home-droplist-card, .home-marquee,
   .home-restock-cta/.restock-timeline, .home-news-strip — so the hub reads as
   the same site. Only the brand cards below are new.

   The .hub-page overrides at the end exist because the platform theme has no
   brand hue: --tenant-primary is near-black in light mode and pure WHITE in
   dark, so the site's `color:#fff` on a primary background disappears in dark
   mode. Those rules swap that text to the page background instead. */

.hub-intro {
    max-width: 1400px;
    margin: 0 auto;
    padding: 4.5rem 2.5rem 3.5rem;
    text-align: center;
}

.hub-intro .section-label { margin-bottom: 0.75rem; }

.hub-intro-title {
    font-size: clamp(2.25rem, 7vw, 5rem);
    line-height: 0.95;
    letter-spacing: -0.01em;
    margin: 0 0 1.25rem;
}

.hub-intro-title em {
    font-style: italic;
    color: var(--tenant-text-muted);
}

.hub-intro-sub {
    max-width: 620px;
    margin: 0 auto;
    font-size: clamp(0.95rem, 1.6vw, 1.15rem);
    line-height: 1.6;
    color: var(--tenant-text-muted);
}


/* ── Brand cards ────────────────────────────────────────────── */
.hub-brands {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.hub-brand {
    display: flex;
    flex-direction: column;
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.hub-brand:hover {
    border-color: var(--tenant-primary);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}

.hub-brand-visual {
    position: relative;
    display: block;
    aspect-ratio: 4/5;
    overflow: hidden;
    background: var(--tenant-bg-surface-alt);
}

.hub-brand-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        var(--tenant-bg-surface-alt) 0%,
        var(--tenant-bg-surface) 40%,
        var(--tenant-bg-surface-alt) 80%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    z-index: 1;
    transition: opacity 0.3s;
}

.hub-brand-visual.is-loaded::before { opacity: 0; pointer-events: none; }

.hub-brand-visual > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 0.68, 0, 1.1);
}

.hub-brand:hover .hub-brand-visual > img { transform: scale(1.06); }

.hub-brand-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.9rem;
    padding: 1.5rem;
    /* Weighted low so a white logo stays legible over a bright lookbook —
       Supreme's SS26 shots fade to near-white exactly where the logo sits.
       The top 35% stays clear so the photograph still reads. */
    background: linear-gradient(180deg,
        transparent 35%,
        rgba(0,0,0,0.65) 62%,
        rgba(0,0,0,0.95) 100%
    );
}

/* Brand logos ship white, and this scrim is dark in both themes — so unlike
   .nav-logo-img they must NOT be inverted in light mode. */
.hub-brand-logo {
    height: 34px;
    width: auto;
    max-width: 65%;
    object-fit: contain;
    object-position: left bottom;
    filter: drop-shadow(0 1px 6px rgba(0,0,0,0.5));
}

.hub-brand-enter {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}

.hub-brand-enter svg { transition: transform 0.3s; }
.hub-brand:hover .hub-brand-enter svg { transform: translateX(4px); }

.hub-brand-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1.35rem;
}

.hub-brand-facts {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 0;
}

.hub-brand-fact dt {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--tenant-text-muted);
    margin-bottom: 0.3rem;
}

.hub-brand-fact dd {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
}

/* Season names come from importers and are inconsistently cased
   ("fall/winter 2026" vs "Autumn 2026"); capitalize evens them out without
   flattening all-caps names like "DON'T TAP THE GLASS". */
.hub-brand-fact dd a {
    color: var(--tenant-text);
    text-decoration: none;
    text-transform: capitalize;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}

.hub-brand-fact dd a:hover { border-bottom-color: currentColor; }

.hub-tag {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.5rem;
    border-radius: 2px;
    background: var(--tenant-primary);
    color: var(--tenant-bg);
    white-space: nowrap;
}

.hub-brand-thumbs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
}

.hub-brand-thumbs img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    background: var(--tenant-bg-surface-alt);
    transition: opacity 0.2s;
}

.hub-brand-thumbs:hover img { opacity: 0.72; }

.hub-brand-links {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--tenant-border);
}

.hub-brand-links a {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tenant-text-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.hub-brand-links a:hover { color: var(--tenant-primary); }

/* ── Platform-theme contrast fixes ──────────────────────────── */
/* See the note at the top of this block: on the hub --tenant-primary is
   white in dark mode, so the site's #fff-on-primary would be invisible. */
.hub-page .home-marquee-item { color: var(--tenant-bg); }
.hub-page .home-marquee-sep { background: var(--tenant-bg); opacity: 0.5; }
.hub-page .home-droplist-week { color: var(--tenant-bg); }
.hub-page .btn { color: var(--tenant-bg); }
.hub-page .btn:hover { color: var(--tenant-primary); }

/* Restock rows link out to the brand's own monitor here. */
.hub-page .restock-timeline-content { text-decoration: none; color: inherit; }

/* ── Hub responsive ─────────────────────────────────────────── */
@media (max-width: 1024px) {
    .hub-intro { padding: 3.5rem 1.5rem 2.5rem; }
    /* Two posters, not one. Three columns get too narrow here, but a single
       column made one brand fill the screen and forced a wide crop that cut
       the model out of the artwork. */
    .hub-brands { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}

@media (max-width: 600px) {
    .hub-intro { padding: 2.5rem 1rem 2rem; }
    .hub-intro-title { margin-bottom: 1rem; }

    /* One brand per row, and the card becomes a row: artwork on the left,
       facts beside it, item shots underneath.

       Stacked, the card ran about 480px tall, so a phone showed exactly one
       brand and the hub stopped reading as a brand picker. This fits all
       three on one screen, down to a 360px phone, and the artwork keeps a
       portrait crop instead of being letterboxed. */
    .hub-brands { grid-template-columns: 1fr; gap: 0.9rem; }

    .hub-brand {
        display: grid;
        /* Capped rather than a plain percentage, so the artwork column does
           not stretch wide on a large phone. */
        grid-template-columns: clamp(130px, 36%, 210px) 1fr;
    }

    .hub-brand-visual {
        grid-column: 1;
        grid-row: 1 / 3;        /* stands beside the facts and the links */
        aspect-ratio: auto;     /* the artwork sets the height */
        min-height: 130px;
    }

    .hub-brand-overlay { padding: 0.7rem; gap: 0.35rem; }
    .hub-brand-logo { height: 20px; }
    .hub-brand-enter { font-size: 0.58rem; }

    /* Promotes the three parts of the meta block to cells of the card grid,
       so the item strip can run the full width under the artwork instead of
       being squeezed into the right-hand column. */
    .hub-brand-meta { display: contents; }

    .hub-brand-facts {
        grid-column: 2;
        grid-row: 1;
        padding: 0.85rem 1rem 0;
        gap: 0.5rem;
    }

    .hub-brand-fact dt { margin-bottom: 0.1rem; }
    .hub-brand-fact dd { font-size: 0.88rem; }

    .hub-brand-links {
        grid-column: 2;
        grid-row: 2;
        align-self: end;
        padding: 0.7rem 1rem;
        gap: 0.3rem 0.8rem;
        border-top: 0;
    }

    .hub-brand-links a { font-size: 0.62rem; letter-spacing: 0.08em; }

    /* Auto columns, not a fixed six: brands supply different numbers of item
       shots, and a fixed count leaves a hole at the end of the shorter ones. */
    .hub-brand-thumbs {
        grid-column: 1 / -1;
        grid-row: 3;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: 2px;
        border-top: 1px solid var(--tenant-border);
    }
}

/* App webview: the hub is the app's FIRST SCREEN and there it is a brand
   picker, nothing else. The intro pitches the product to someone who already
   installed it, and the droplist / restock / news sections below duplicate
   what the app shows natively once a brand is chosen.

   Written as "every direct child except the cards" rather than a list of the
   four sections that exist today, so a section added to this page later is
   hidden here by default instead of quietly appearing on the app's first
   screen. Anything that genuinely must show in the app needs to opt in.

   (This previously only tightened the intro's padding, on the reasoning that
   with nav and footer hidden it was the screen's sole header.) */
html[data-app="true"] .hub-page > *:not(.hub-brands-section) {
    display: none !important;
}
/* The cards carry the whole screen now, so drop the gap the intro used to
   sit in. */
html[data-app="true"] .hub-page > .hub-brands-section { margin-top: 0; }

/* ── Platform news digest (/updates/) ───────────────────────── */
.hub-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 3rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tenant-text-muted);
}

.hub-pagination a { color: var(--tenant-text); text-decoration: none; }
.hub-pagination a:hover { color: var(--tenant-primary); }

.hub-empty {
    color: var(--tenant-text-muted);
    text-align: center;
    padding: 4rem 0;
}


/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .collections-grid { grid-template-columns: repeat(3, 1fr); }
    .news-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Nav: the desktop link row (nine links + logo + actions) needs about 1000px. Below
   1025px it used to overflow the viewport sideways (horizontal scroll from 769px to
   ~990px), so the hamburger takes over from 1024px down, and the row is tighter just above. */
@media (max-width: 1200px) {
    .nav-links { gap: 1.1rem; }
}
@media (max-width: 1024px) {
    .nav-links-desktop { display: none; }
    .nav-toggle { display: flex; z-index: 10001; position: relative; }
    .nav-search-desktop { display: none; }
}

@media (max-width: 768px) {
    /* Nav — desktop links/hamburger are switched at 1024px above */
    /* .nav-actions is deliberately NOT hidden: the favorites heart stays
       reachable on a phone. Its mobile placement is set further down, next
       to the favorites rules. A `display: none` here was dead anyway, beaten
       on source order by the later top-level rule. */
    .nav-social { display: none; }

    /* Content */
    .content-wrapper { padding: 1rem; }

    /* Grids */
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .collections-grid { grid-template-columns: repeat(2, 1fr); }
    .news-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .items-grid { grid-template-columns: repeat(2, 1fr); }

    /* Layouts */
    .lookbook-layout { grid-template-columns: 1fr; }
    .lookbook-sidebar { position: static; }
    .item-detail-container .breadcrumb { margin-bottom: 1.25rem; }
    .item-detail { grid-template-columns: 1fr; gap: 1rem; }
    .item-gallery { position: static; }
    .item-info-mobile-top { display: block; }
    .item-info-panel .item-info-top,
    .item-info-panel .item-title { display: none; }
    .related-items .items-grid,
    .related-items .items-grid { grid-template-columns: repeat(2, 1fr); }
    .home-restock-cta-inner { grid-template-columns: 1fr; }
    .hero-slider-track { height: calc(100vh - 56px - 36px); height: calc(100svh - 56px - 36px); min-height: 400px; }
    .hero-overlay-content { padding: 0 2rem; }
    .hero-title { font-size: clamp(2rem, 8vw, 3.5rem); }
    .hero-slider-arrow { width: 40px; height: 40px; }
    .hero-slider-prev { left: 0.75rem; }
    .hero-slider-next { right: 0.75rem; }
    .hero-scroll-indicator { right: 2rem; }
    .home-section { padding: 0 1.5rem; margin-bottom: 4rem; }
    .home-droplist-grid { grid-template-columns: repeat(3, 1fr); }
    .home-news-strip { grid-template-columns: 1fr; }
    .home-seasons-grid { grid-template-columns: repeat(2, 1fr); }
    .home-sellouts-grid { grid-template-columns: repeat(3, 1fr); }
    .home-features-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-main-inner { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; padding: 2.5rem 1.5rem; }
    .footer-brand { grid-column: 1 / -1; text-align: center; align-items: center; }
    .footer-disclaimer { max-width: none; }
    .footer-social-links { justify-content: center; }
    .footer-siblings-inner { padding: 1rem 1.5rem; flex-wrap: wrap; gap: 0.75rem; }
    .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; padding: 1rem 1.5rem; }
    .home-page .hero-slider + .home-section,
    .home-page .hero-slider + .home-top-items,
    .home-page .home-marquee + .home-section,
    .home-page .home-marquee + .home-top-items { margin-top: 3rem; }

    /* News */
    .news-article-card { grid-template-columns: 1fr; }
    .news-article-card .article-content { padding: 1rem; }

    /* Footer */
    .footer-bottom { padding: 1rem 1.5rem; }

    /* Ad slots */
    .ad-sidewall-left, .ad-sidewall-right { display: none; }
    .ad-mobile-item-detail { display: block; }
    .desktop-only { display: none; }
    .mobile-only { display: block; }

    /* Bottom padding added dynamically via JS when sticky anchor is visible */
}

@media (max-width: 480px) {
    .collections-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
    .items-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem 0.75rem; }
    .related-items .items-grid,
    .related-items .items-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-slider-track { height: calc(100vh - 56px - 36px); height: calc(100svh - 56px - 36px); min-height: 360px; }
    .hero-overlay-content { padding: 0 1.25rem; }
    .hero-title { font-size: clamp(1.75rem, 9vw, 3rem); }
    .hero-slider-arrow { display: none; }
    .hero-scroll-indicator { display: none; }
    .home-section { padding: 0 1rem; margin-bottom: 3rem; }
    .home-droplist-grid { grid-template-columns: repeat(2, 1fr); }
    .top-items-scroll .item-card { flex: 0 0 150px; }
    .home-restock-cta-inner { padding: 3rem 1rem; }
    .home-seasons-grid { grid-template-columns: repeat(2, 1fr); }
    .home-sellouts-grid { grid-template-columns: repeat(2, 1fr); }
    .home-features-grid { grid-template-columns: 1fr 1fr; }
    .home-feature-card { padding: 1.25rem; }
    .footer-main-inner { grid-template-columns: 1fr; text-align: center; padding: 2rem 1rem; }
    .footer-links-col { align-items: center; }
    .footer-siblings-inner { padding: 1rem; justify-content: center; flex-wrap: wrap; gap: 0.5rem 1rem; }
    .footer-siblings-label { display: none; }
    .footer-bottom { padding: 1rem; }
    .home-page .hero-slider + .home-section,
    .home-page .hero-slider + .home-top-items,
    .home-page .home-marquee + .home-section,
    .home-page .home-marquee + .home-top-items { margin-top: 2.5rem; }
    .footer-links-col { align-items: center; }
}

/* ── Icon Filter Bar ──────────────────────────────────────────── */
.icon-filter-bar {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.4rem 0.5rem;
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    border-radius: 6px;
    overflow: visible;
}
.icon-filter-scroll-hint { display: none; }

.icon-filter-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 0;
    font-family: inherit;
    flex: 1 1 0;
    min-width: 0;
}

.icon-filter-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid var(--tenant-border);
    background: transparent;
    color: var(--tenant-text-muted);
    transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s;
}

.icon-filter-circle svg { width: 20px; height: 20px; }
.icon-filter-circle iconify-icon { font-size: 22px; }

.icon-filter-label {
    font-size: 0.45rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--tenant-text-muted);
    text-align: center;
    transition: color 0.15s;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 64px;
}

.icon-filter-btn:hover .icon-filter-circle {
    border-color: var(--tenant-primary);
    transform: scale(1.12);
}
.icon-filter-btn:hover .icon-filter-label { color: var(--tenant-primary); }

.icon-filter-btn.is-active .icon-filter-circle {
    background: var(--tenant-primary);
    border-color: var(--tenant-primary);
    color: #fff;
}
.icon-filter-btn.is-active .icon-filter-label { color: var(--tenant-primary); }

.icon-filter-btn.is-disabled {
    opacity: 0.3;
    cursor: default;
}
.icon-filter-btn.is-disabled:hover .icon-filter-circle {
    border-color: var(--tenant-border);
    transform: none;
}
.icon-filter-btn.is-disabled:hover .icon-filter-label { color: var(--tenant-text-muted); }

.filter-sort-sep {
    width: 1px;
    align-self: stretch;
    margin: 4px 6px;
    background: var(--tenant-border);
    flex-shrink: 0;
}

/* ── Sort Control (circle icon style) ────────────────────────── */
.sort-control {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    justify-content: center;
}

.sort-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 2px 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.sort-toggle:hover .icon-filter-circle {
    border-color: var(--tenant-text-muted);
    transform: scale(1.12);
}
.sort-toggle:hover .icon-filter-label { color: var(--tenant-text); }

.sort-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 50%;
    transform: translateX(50%);
    min-width: 155px;
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    border-radius: 6px;
    padding: 4px;
    z-index: 50;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    margin-top: 4px;
}

.sort-control.is-open .sort-dropdown { display: block; }

.sort-option {
    display: block;
    width: 100%;
    padding: 6px 10px;
    font-size: 0.7rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--tenant-text-muted);
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
}

.sort-option:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--tenant-text);
}

.sort-option.is-active { color: var(--tenant-primary); }

@media (max-width: 640px) {
    .icon-filter-bar {
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .icon-filter-bar::-webkit-scrollbar { display: none; }
    .icon-filter-btn {
        flex: 0 0 auto;
        min-width: 48px;
        padding: 2px 4px;
    }
    .sort-control { flex: 0 0 auto; min-width: 48px; }
    .icon-filter-label {
        max-width: 52px;
        font-size: 0.4rem;
    }
    .icon-filter-label[data-short] {
        font-size: 0;
    }
    .icon-filter-label[data-short]::after {
        content: attr(data-short);
        font-size: 0.4rem;
    }
    .icon-filter-bar-wrap {
        position: relative;
        overflow: hidden;
        border-radius: 6px;
    }
    .icon-filter-bar-wrap::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 36px;
        background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tenant-bg-surface) 50%, transparent));
        pointer-events: none;
        z-index: 1;
        transition: opacity 0.3s;
    }
    :root[data-theme="light"] .icon-filter-bar-wrap::after {
        background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tenant-bg-surface) 65%, transparent));
    }
    .icon-filter-bar-wrap.is-scrolled-end::after {
        opacity: 0;
    }
    .icon-filter-scroll-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 8px;
        top: 0;
        bottom: 1rem;
        font-size: 1rem;
        line-height: 1;
        font-weight: 400;
        color: var(--tenant-text-muted);
        opacity: 0.6;
        pointer-events: none;
        z-index: 2;
    }
    .icon-filter-bar-wrap.is-scrolled-end .icon-filter-scroll-hint {
        display: none;
    }
}

/* ── Theme Transition ──────────────────────────────────────── */
body.theme-transitioning {
    transition: background-color 0.25s, color 0.25s !important;
}
body.theme-transitioning .main-nav,
body.theme-transitioning .main-footer,
body.theme-transitioning .main-content,
body.theme-transitioning .content-wrapper,
body.theme-transitioning .home-page {
    transition: background-color 0.25s, color 0.25s, border-color 0.25s !important;
}

/* ── Search Modal ──────────────────────────────────────────── */
.search-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10vh;
}

.search-modal.is-open {
    display: flex;
}

.search-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.search-modal-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    max-height: 70vh;
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0 1rem;
    animation: search-modal-in 0.15s ease-out;
}

@keyframes search-modal-in {
    from { opacity: 0; transform: scale(0.98) translateY(-8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.search-modal-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--tenant-border);
}

.search-modal-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.search-modal-icon {
    color: var(--tenant-text-muted);
    flex-shrink: 0;
}

.search-modal-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--tenant-text);
    font-size: 1rem;
    font-family: var(--tenant-font-body);
    padding: 0.25rem 0;
}

.search-modal-input::placeholder {
    color: var(--tenant-text-muted);
}

.search-modal-kbd {
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
    background: var(--tenant-bg-surface-alt);
    border: 1px solid var(--tenant-border);
    border-radius: 4px;
    color: var(--tenant-text-muted);
    font-family: inherit;
    flex-shrink: 0;
}

/* Close button — always visible, replaces ESC kbd on mobile */
.search-modal-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--tenant-text);
    cursor: pointer;
    padding: 0.35rem;
    flex-shrink: 0;
    transition: opacity 0.15s;
    opacity: 0.6;
}
.search-modal-close-btn:hover { opacity: 1; }

.search-modal-body {
    overflow-y: auto;
    padding: 0.5rem;
    flex: 1;
}

.search-modal-hint {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--tenant-text-muted);
    font-size: 0.85rem;
}

.search-modal-hint p { margin: 0 0 1rem; }

.search-modal-shortcut {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    color: var(--tenant-text-muted);
}

.search-modal-shortcut kbd {
    display: inline-block;
    padding: 0.1rem 0.35rem;
    background: var(--tenant-bg-surface-alt);
    border: 1px solid var(--tenant-border);
    border-radius: 3px;
    font-size: 0.65rem;
    font-family: inherit;
}

.search-modal-loading,
.search-modal-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--tenant-text-muted);
    font-size: 0.85rem;
}

.search-modal-section {
    margin-bottom: 0.25rem;
}

.search-modal-section-title {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tenant-text-muted);
    padding: 0.5rem 0.75rem 0.25rem;
}

.search-modal-result {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    transition: background 0.1s;
    text-decoration: none;
    color: var(--tenant-text);
}

.search-modal-result:hover,
.search-modal-result.is-active {
    background: var(--tenant-bg-surface-alt);
}

.search-modal-result-img {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--tenant-bg-surface-alt);
    flex-shrink: 0;
}

.search-modal-result-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-modal-result-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.search-modal-result-name {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-modal-result-meta {
    font-size: 0.7rem;
    color: var(--tenant-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-modal-see-all {
    display: block;
    text-align: center;
    padding: 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--tenant-primary);
    border-top: 1px solid var(--tenant-border);
    margin-top: 0.25rem;
    border-radius: 0 0 8px 8px;
    transition: background 0.1s;
}

.search-modal-see-all:hover,
.search-modal-see-all.is-active {
    background: var(--tenant-bg-surface-alt);
}

/* ── Search Page ──────────────────────────────────────────── */
.search-page-form {
    margin-bottom: 1.5rem;
}

.search-page-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    transition: border-color 0.2s;
}

.search-page-input-wrap:focus-within {
    border-color: var(--tenant-primary);
}

.search-page-icon {
    color: var(--tenant-text-muted);
    flex-shrink: 0;
}

.search-page-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--tenant-text);
    font-size: 1rem;
    font-family: var(--tenant-font-body);
}

.search-page-input::placeholder {
    color: var(--tenant-text-muted);
}

.search-summary {
    color: var(--tenant-text-muted);
    font-size: 0.85rem;
    margin-bottom: 1rem;
}
.search-fuzzy-note { font-style: italic; opacity: 0.8; }

.search-type-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.search-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--tenant-text-muted);
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    border-radius: 100px;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.search-type-chip:hover {
    border-color: var(--tenant-text-muted);
    color: var(--tenant-text);
}

.search-type-chip.is-active {
    background: var(--tenant-primary);
    border-color: var(--tenant-primary);
    color: #fff;
}

.search-type-count {
    font-size: 0.65rem;
    opacity: 0.7;
}

.search-results-page {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.search-results-section { }

.search-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tenant-text-muted);
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--tenant-border);
}

.search-results-list {
    display: flex;
    flex-direction: column;
}

.search-result-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--tenant-text);
    transition: background 0.1s;
}

.search-result-row:hover {
    background: var(--tenant-bg-surface);
}

.search-result-img {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--tenant-bg-surface-alt);
    flex-shrink: 0;
}

.search-result-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-result-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.search-result-name {
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-meta {
    font-size: 0.75rem;
    color: var(--tenant-text-muted);
}

.search-result-badge {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: var(--tenant-bg-surface-alt);
    color: var(--tenant-text-muted);
    flex-shrink: 0;
}

.search-see-all {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--tenant-primary);
}

.search-see-all:hover {
    text-decoration: underline;
}

.search-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--tenant-text-muted);
}

.search-empty p:first-child {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.search-empty-hint {
    font-size: 0.85rem;
}

/* Search modal mobile */
@media (max-width: 768px) {
    .search-modal {
        padding-top: 0;
    }

    .search-modal-container {
        max-width: 100%;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
        margin: 0;
    }

    .search-modal-kbd {
        display: none;
    }
}

/* ── Light Mode Overrides ──────────────────────────────────── */
/* Flash messages */
:root[data-theme="light"] .tenant-theme .flash-success { background: #d4edda; color: #155724; }
:root[data-theme="light"] .tenant-theme .flash-error { background: #f8d7da; color: #721c24; }
:root[data-theme="light"] .tenant-theme .flash-warning { background: #fff3cd; color: #856404; }

/* Footer — always dark even in light mode */
:root[data-theme="light"] .main-footer {
    background: #0a0a0a;
    color: #f0f0f0;
    border-top-color: #222;
}
:root[data-theme="light"] .main-footer .footer-main { border-bottom-color: #222; }
:root[data-theme="light"] .main-footer .footer-logo { color: #f0f0f0; }
:root[data-theme="light"] .main-footer .footer-logo-img { filter: none; }
:root[data-theme="light"] .main-footer .footer-disclaimer { color: #888; }
:root[data-theme="light"] .main-footer .footer-social-btn { color: #888; }
:root[data-theme="light"] .main-footer .footer-social-btn:hover { color: #fff; }
:root[data-theme="light"] .main-footer .footer-col-title { color: #f0f0f0; }
:root[data-theme="light"] .main-footer .footer-links-col a { color: #888; }
:root[data-theme="light"] .main-footer .footer-links-col a:hover { color: #fff; }
:root[data-theme="light"] .main-footer .footer-siblings { border-color: #222; }
:root[data-theme="light"] .main-footer .footer-siblings-label { color: #666; }
:root[data-theme="light"] .main-footer .footer-sibling-current { color: #f0f0f0; }
:root[data-theme="light"] .main-footer .footer-sibling-link { color: #888; }
:root[data-theme="light"] .main-footer .footer-sibling-link:hover { color: #fff; }
:root[data-theme="light"] .main-footer .footer-bottom { border-top-color: #222; }
:root[data-theme="light"] .main-footer .footer-copyright { color: #666; }
:root[data-theme="light"] .main-footer .theme-switch { color: #666; }
:root[data-theme="light"] .main-footer .theme-switch-btn.active { color: #fff; }

/* Sort dropdown */
:root[data-theme="light"] .sort-dropdown { box-shadow: 0 8px 20px rgba(0,0,0,0.1); }
:root[data-theme="light"] .sort-option:hover { background: rgba(0,0,0,0.05); }

/* Card shadows — removed, zoom + name color is enough */

/* Vote & buy buttons */
:root[data-theme="light"] .vote-btn:hover { box-shadow: none; }
:root[data-theme="light"] .vote-btn.upvote:hover { box-shadow: none; }
:root[data-theme="light"] .vote-btn.downvote:hover { box-shadow: none; }
:root[data-theme="light"] .buy-link:hover { box-shadow: none; }

/* Hero — always dark treatment regardless of theme */
:root[data-theme="light"] .hero-title { color: #fff; text-shadow: 0 4px 24px rgba(0,0,0,0.4); }
:root[data-theme="light"] .hero-subtitle { color: rgba(255,255,255,0.75); }
:root[data-theme="light"] .hero-cta { color: #fff; border-color: rgba(255,255,255,0.6); }
:root[data-theme="light"] .hero-cta:hover { background: rgba(255,255,255,0.12); border-color: #fff; }
:root[data-theme="light"] .hero-dot { background: rgba(255,255,255,0.3); }
:root[data-theme="light"] .hero-dot.is-active,
:root[data-theme="light"] .hero-dot:hover { background: rgba(255,255,255,0.7); }
:root[data-theme="light"] .hero-slider-arrow { background: rgba(0,0,0,0.25); border-color: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); }
:root[data-theme="light"] .hero-slider-arrow:hover { background: rgba(0,0,0,0.5); color: #fff; }
:root[data-theme="light"] .hero-scroll-line { background: rgba(255,255,255,0.4); }
:root[data-theme="light"] .hero-scroll-line::after { background: #fff; }

/* Image overlay gradients — keep dark for text contrast */
:root[data-theme="light"] .news-card .news-overlay { background: linear-gradient(transparent, rgba(0,0,0,0.85)); }
:root[data-theme="light"] .news-card { color: #fff; }
/* Season card overlays — always dark */
:root[data-theme="light"] .home-season-overlay { background: linear-gradient(transparent, rgba(0,0,0,0.85)); color: #fff; }
/* Price badge — keep readable in light mode */
:root[data-theme="light"] .item-price { background: rgba(0,0,0,0.7); color: #fff; }

/* Style thumb label — keep readable in light mode */
:root[data-theme="light"] .style-thumb-label { background: rgba(0,0,0,0.7); color: #fff; }

/* Home droplist card hover shadow */
:root[data-theme="light"] .home-droplist-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
:root[data-theme="light"] .home-feature-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.1); }

/* Restock timeline */
:root[data-theme="light"] .home-restock-cta .restock-timeline::after { background: linear-gradient(transparent, var(--tenant-bg-surface)); }
:root[data-theme="light"] .restock-timeline-content { background: rgba(0,0,0,0.03); }

/* Search modal */
:root[data-theme="light"] .search-modal-backdrop { background: rgba(0, 0, 0, 0.3); }
:root[data-theme="light"] .search-modal-container { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); }
:root[data-theme="light"] .search-type-chip.is-active { color: #fff; }

/* Tooltip */
:root[data-theme="light"] .vote-bar-tooltip { background: rgba(0,0,0,0.7); color: #fff; }

/* Articles */
:root[data-theme="light"] .article-body img { border: 1px solid rgba(0,0,0,0.08); }

/* Platform dark mode overrides */
:root[data-theme="dark"] .platform-theme .flash-success { background: #1b5e20; color: #a5d6a7; }
:root[data-theme="dark"] .platform-theme .flash-error { background: #b71c1c; color: #ef9a9a; }
:root[data-theme="dark"] .platform-theme .flash-warning { background: #e65100; color: #ffcc80; }

/* ── Season Countdown ──────────────────────────────────────── */
/* Compact countdown strip. Replaces the full card once the season has
   launched (preview up or a droplist published): the items are the reason
   people are on the page by then, so the dates get one line instead of a
   hero block. Same milestones, same ticking JS. */
.season-countdown-slim {
    /* Matches the season nav directly above it: same heading font, same
       uppercase treatment, one size and one letter-spacing for every part.
       The first version mixed .7rem labels with .85rem digits in two
       different families, which is why the row read as three unrelated bits
       of text at three heights. line-height is pinned so nothing drifts. */
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.5rem;
    margin: 0 0 1.1rem;
    padding: 0.6rem 0 0.65rem;
    border-bottom: 1px solid var(--tenant-border);
    font-family: var(--tenant-font-heading);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    overflow: hidden;
    white-space: nowrap;
}
/* Every child inherits the row's type. Nothing here sets its own size,
   family or spacing, which is what keeps the baseline true. */
.season-countdown-slim > *,
.season-countdown-slim .scs-part {
    font: inherit;
    letter-spacing: inherit;
    line-height: 1;
    margin: 0;
}
.season-countdown-slim .scs-season {
    font-weight: 700;
    color: var(--tenant-primary);
}
.season-countdown-slim .scs-status { color: var(--tenant-text-muted); }
.season-countdown-slim .scs-timer {
    display: inline-flex;
    gap: 0.45rem;
    /* tabular figures so ticking digits do not shift the row */
    font-variant-numeric: tabular-nums;
    color: var(--tenant-text-muted);
}
.season-countdown-slim .scs-part b {
    font-weight: 700;
    color: var(--tenant-text);
}
.season-countdown-slim .scs-date {
    margin-left: auto;
    padding-left: 0.5rem;
    color: var(--tenant-text-muted);
}
/* Separators, visible enough to bind the parts into one line */
.season-countdown-slim .scs-status::before,
.season-countdown-slim .scs-timer::before {
    content: "\00B7";
    margin-right: 0.5rem;
    color: var(--tenant-text-muted);
    opacity: 0.55;
    font-weight: 400;
}
@media (max-width: 560px) {
    /* Narrow phones: the timer already says how long and the header states
       the date, so drop the duplicate rather than crowding one line. */
    .season-countdown-slim .scs-date { display: none; }
}

/* Left-to-drop count on its season-nav tab, replacing the duplicate button
   row that used to sit under the nav. */
.nav-item-count {
    display: inline-block;
    margin-left: 0.15rem;
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    background: var(--tenant-bg-surface-alt);
    color: var(--tenant-text-muted);
    font-size: 0.85em;
    font-weight: 600;
    letter-spacing: 0;
}

.season-countdown {
    max-width: 560px;
    margin: 2rem auto;
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    border-radius: 12px;
    overflow: hidden;
}

.season-countdown-image {
    position: relative;
    width: 100%;
    aspect-ratio: 2.4 / 1;
    overflow: hidden;
}

.season-countdown-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.season-countdown-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--tenant-bg-surface) 0%, transparent 50%);
    pointer-events: none;
}

.season-countdown-body {
    padding: 1.75rem 2rem 1.5rem;
    text-align: center;
}

/* When teaser image present, pull body up into overlay */
.season-countdown-image + .season-countdown-body {
    margin-top: -2rem;
    position: relative;
}

.season-countdown-eyebrow {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--tenant-primary);
    margin-bottom: 0.35rem;
}

.season-countdown-title {
    font-family: var(--tenant-font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tenant-text);
    margin: 0 0 1.25rem;
}

.season-countdown-timer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 56px;
    padding: 0.6rem 0.4rem;
    background: var(--tenant-bg-surface-alt);
    border-radius: 8px;
    border: 1px solid var(--tenant-border);
}

.countdown-value {
    font-family: var(--tenant-font-heading);
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--tenant-primary);
}

.countdown-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--tenant-text-muted);
    margin-top: 0.3rem;
}

.countdown-separator {
    font-family: var(--tenant-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--tenant-text-muted);
    opacity: 0.3;
    padding-bottom: 0.8rem;
}

/* Scoped to the card. The compact strip reuses .countdown-status so the
   timer JS can find its label, and unscoped this leaked the card's
   margin-top: 0.6rem into the strip, dropping "WEEK 1" below its
   neighbours, plus a wider letter-spacing than the rest of the row. */
.season-countdown .countdown-status {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--tenant-text-muted);
    margin-top: 0.6rem;
}

.season-countdown-timer.is-complete .countdown-value {
    color: var(--tenant-text);
}

.season-countdown .season-countdown-timer.is-complete + .countdown-status {
    font-weight: 600;
    color: var(--tenant-primary);
    font-size: 0.8rem;
}

/* Action buttons (View Preview / View Lookbook) */
.season-countdown-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin: 1.25rem 0 0;
}

.season-countdown-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    padding: 0.5rem 1rem;
    background: var(--tenant-primary);
    border: none;
    border-radius: 6px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.season-countdown-btn:hover {
    opacity: 0.85;
    color: #fff;
    transform: translateY(-1px);
}

/* Date blocks grid */
.season-dates-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin: 1.25rem 0 0.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--tenant-border);
}

.season-date-block {
    padding: 0.75rem 0.5rem;
    text-align: center;
}

.season-date-block-icon {
    font-size: 1.1rem;
    color: var(--tenant-primary);
    margin-bottom: 0.3rem;
    opacity: 0.7;
}

.season-date-block-title {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tenant-text-muted);
    margin-bottom: 0.3rem;
}

.season-date-block-date {
    font-family: var(--tenant-font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--tenant-text);
    line-height: 1.2;
}
.season-date-block-date .date-short { display: none; }

.season-date-block-day {
    font-size: 0.7rem;
    color: var(--tenant-text-muted);
    margin-top: 0.1rem;
}

.season-date-block-region {
    font-size: 0.65rem;
    color: var(--tenant-text-muted);
    margin-top: 0.25rem;
    opacity: 0.7;
}

.season-countdown-disclaimer {
    font-size: 0.6rem;
    color: var(--tenant-text-muted);
    opacity: 0.5;
    font-style: italic;
    margin-top: 0.5rem;
}

/* ── Browse Other Seasons (below countdown) ────────────────── */
.season-explore-other {
    margin-bottom: 2.5rem;
}

.season-explore-other-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tenant-text-muted);
    margin-bottom: 1.25rem;
}

.season-explore-other-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.season-explore-other-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    margin-top: 1.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tenant-primary);
    transition: opacity 0.2s;
}

.season-explore-other-link:hover {
    opacity: 0.75;
}

@media (max-width: 480px) {
    .season-countdown-body { padding: 1.25rem 1rem 1rem; }
    .countdown-unit { min-width: 48px; padding: 0.5rem 0.3rem; }
    .countdown-separator { font-size: 1rem; padding-bottom: 0.6rem; }
    .season-countdown-title { font-size: 1.15rem; }
    .season-dates-grid { grid-template-columns: repeat(3, 1fr); gap: 0.15rem; }
    .season-date-block { padding: 0.5rem 0.25rem; }
    .season-date-block-date { font-size: 0.8rem; white-space: nowrap; }
    .season-date-block-date .date-full { display: none; }
    .season-date-block-date .date-short { display: inline; }
    .season-date-block-day { font-size: 0.6rem; }
    .season-date-block-title { font-size: 0.55rem; }
    .season-date-block-icon { font-size: 0.9rem; margin-bottom: 0.2rem; }
    .season-date-block-region { font-size: 0.55rem; }
    .season-countdown-actions { flex-direction: column; gap: 0.5rem; }
    .season-countdown-btn { width: 100%; justify-content: center; }
    .season-explore-other-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Light mode adjustments for season countdown */
:root[data-theme="light"] .season-countdown {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

:root[data-theme="light"] .countdown-unit {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.06);
}

/* Help center — light mode */
:root[data-theme="light"] .help-page-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
:root[data-theme="light"] .sellout-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
:root[data-theme="light"] .help-page-icon-wrap { background: color-mix(in srgb, var(--tenant-primary) 10%, transparent); }
:root[data-theme="light"] .drop-countdown-sep { color: rgba(0,0,0,0.15); }
:root[data-theme="light"] .sizing-table tbody tr:hover td { background: rgba(0,0,0,0.02); }

/* ── Legal Pages ───────────────────────────────────────────── */
.legal-page { max-width: 800px; margin: 0 auto; padding: 2rem 1rem 3rem; }
.legal-page h1 { font-size: clamp(1.5rem, 4vw, 2.25rem); margin-bottom: 1.5rem; }

.legal-content p { margin-bottom: 1rem; line-height: 1.7; color: var(--tenant-text); }
.legal-content a { color: var(--tenant-primary); text-decoration: underline; }
.legal-content a:hover { opacity: 0.8; }

.legal-content h2 {
    font-size: 1.15rem;
    margin: 2rem 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--tenant-border);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.legal-content h3 {
    font-size: 1rem;
    margin: 1.5rem 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.legal-content ul {
    margin: 0 0 1rem 1.5rem;
    line-height: 1.7;
}
.legal-content ul li { margin-bottom: 0.3rem; }

.legal-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 1.5rem;
    font-size: 0.85rem;
}
.legal-content table th,
.legal-content table td {
    text-align: left;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--tenant-border);
}
.legal-content table th {
    background: var(--tenant-bg-surface);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}
.legal-content table td { background: var(--tenant-bg-surface-alt); }

.legal-content strong { font-weight: 600; }

.legal-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--tenant-border);
}
.legal-nav a {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tenant-primary);
    text-decoration: none;
}
.legal-nav a:hover { opacity: 0.7; }

.cookie-report-container { margin: 1rem 0 1.5rem; }

#cookiescript_badge { display: none !important; }

@media (max-width: 600px) {
    .legal-content table { font-size: 0.78rem; }
    .legal-content table th,
    .legal-content table td { padding: 0.4rem 0.5rem; }
}

/* ── Mobile Refinements ─────────────────────────────────────── */
@media (max-width: 480px) {
    /* News grid: keep 2 columns but tighten cards */
    .news-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
    .news-card { aspect-ratio: 3/4; }
    .news-card .news-overlay { padding: 0.75rem; }
    .news-card .news-title { font-size: 0.8rem; }
    .news-card .news-date { font-size: 0.65rem; }

    /* Collection cards: squarer thumbs + tighter on small screens */
    .collection-thumbs { aspect-ratio: 1 / 1; }
    .collection-card-info { padding: 0.65rem; }
    .collection-card-info h3 { font-size: 0.75rem; }

    /* Droplist rows: tighter on small screens */
    .droplist-row { padding: 0.85rem 0.5rem; gap: 0.75rem; }
    .droplist-row-info h3 { font-size: 0.85rem; }
    .droplist-day-name { display: block; font-size: 0.7rem; font-weight: 600; color: var(--tenant-text-muted); }

    /* Sellout cards: tighter on small screens */
    .sellout-card { padding: 0.6rem 0.25rem; gap: 0.5rem; }
    .sellout-info h3 { font-size: 0.8rem; }
    .sellout-item-count { font-size: 0.7rem; }
    .sellout-fastest { font-size: 0.7rem; margin-top: 0.1rem; }

    /* Home news strip: tighter padding on small screens */
    .home-news-strip-info { padding: 0.75rem; }
    .home-news-strip-title { font-size: 0.8rem; }

    /* Lookbook grid: 2 columns on small screens */
    .lookbook-grid { grid-template-columns: repeat(2, 1fr); gap: 2px; }
}

/* ══════════════════════════════════════════════════════════════
   APP WEBVIEW MODE  (data-app="true" on <html>)
   Hides chrome (nav, footer, cookie badge) and heavy ad placements
   when the site is embedded inside the native mobile app.
   In-content ads (grid ads) are kept for monetisation.
   ══════════════════════════════════════════════════════════════ */
html[data-app="true"] body {
    min-height: 100vh;
    padding-top: env(safe-area-inset-top, 0px);
}

/* Navigation & footer */
html[data-app="true"] .main-nav,
html[data-app="true"] .nav-mobile-overlay { display: none !important; }

html[data-app="true"] .main-footer { display: none !important; }

html[data-app="true"] .breadcrumb { display: none !important; }

/* Heavy ad placements — siderails hidden in app (desktop-only, not relevant) */
html[data-app="true"] .ad-sidewall-left, html[data-app="true"] .ad-sidewall-right { display: none !important; }

/* Leaderboard, mobile leaderboard, and in-content grid ads are KEPT for app */

/* Cookie consent badge */
html[data-app="true"] #cookiescript_badge,
html[data-app="true"] #cookiescript_injected { display: none !important; }

/* Remove top padding that compensated for sticky nav */
html[data-app="true"] .page-container { padding-top: 0; }

/* Full-width adjustments for app */
html[data-app="true"] .page-container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* ── Ad Preview Mode ─────────────────────────────────────────
   Shows red dashed rectangles at all ad positions when
   body.ad-preview is present (?ad_preview=1).
   ══════════════════════════════════════════════════════════════ */
body.ad-preview [data-ad-label] {
    background: rgba(220, 38, 38, 0.15);
    border: 3px dashed #dc2626;
    border-radius: 8px;
    min-height: 100px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #dc2626;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body.ad-preview [data-ad-label]::after {
    content: attr(data-ad-label);
    display: block;
    text-align: center;
    padding: 0.5rem 1rem;
}

/* Size hints for preview rectangles */
body.ad-preview .ad-sidewall-left [data-ad-label],
body.ad-preview .ad-sidewall-right [data-ad-label] { min-height: 600px; }
body.ad-preview .ad-leaderboard [data-ad-label] { min-height: 90px; }
body.ad-preview .ad-incontent [data-ad-label] { min-height: 250px; }
body.ad-preview .grid-ad-slot [data-ad-label] { min-height: 250px; }
body.ad-preview .ad-news-article [data-ad-label] { min-height: 250px; }
body.ad-preview .ad-video-container[data-ad-label] { min-height: 0; }
body.ad-preview .ad-pushdown [data-ad-label] { min-height: 90px; }
@media (max-width: 767px) { body.ad-preview .ad-pushdown [data-ad-label] { min-height: 50px; } }
body.ad-preview .ad-sticky-anchor [data-ad-label] { min-height: 50px; }
body.ad-preview .ad-leaderboard-inline [data-ad-label] { min-height: 90px; }
body.ad-preview .ad-mobile-item-detail [data-ad-label] { min-height: 100px; }
body.ad-preview .ad-mobile-leaderboard [data-ad-label] { min-height: 100px; }

body.ad-preview .news-grid-ad-slot { grid-column: 1 / -1; }
body.ad-preview .news-grid-ad-slot [data-ad-label] { min-height: 250px; }

/* Ensure sticky anchor is visible in preview */
body.ad-preview .ad-sticky-anchor { padding-bottom: max(6px, env(safe-area-inset-bottom)); }

/* ── Stock-only sellout fallback (timer offline weeks) ──────────────── */
.stock-only-banner {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    border-left: 3px solid var(--tenant-primary);
    border-radius: 4px;
    color: var(--tenant-text-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}
.stock-only-banner strong { color: var(--tenant-text); margin-right: 0.25rem; }

.stock-only-summary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.75rem 0 1rem;
    padding: 0.6rem 0.85rem;
    background: var(--tenant-bg-surface);
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--tenant-text-muted);
}
.stock-only-stat strong { color: var(--tenant-text); font-weight: 700; margin-right: 0.2rem; }
.stock-only-stat-divider { opacity: 0.4; }

.stock-only-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 2rem; }

.stock-only-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    border-radius: 4px;
}
.stock-only-item.is-fully-so { border-left: 3px solid #d63648; }

.stock-only-thumb {
    width: 60px; height: 60px; flex-shrink: 0;
    object-fit: cover;
    background: var(--tenant-bg-surface-alt);
    border-radius: 3px;
}
.stock-only-thumb--empty { display: block; }

.stock-only-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; justify-content: center; }
.stock-only-name { font-weight: 600; font-size: 0.95rem; color: var(--tenant-text); }
.stock-only-color { font-weight: 400; color: var(--tenant-text-muted); }

.stock-only-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.stock-only-label {
    font-size: 0.7rem; text-transform: uppercase; font-weight: 600;
    letter-spacing: 0.04em; color: var(--tenant-text-muted);
    margin-right: 0.25rem;
}
.stock-only-row--so .stock-only-label { color: #d63648; }
.stock-only-row--is .stock-only-label { color: #4caf50; }

.size-badge {
    display: inline-block;
    padding: 0.18rem 0.5rem;
    border-radius: 3px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
}
.size-badge--so { background: rgba(214, 54, 72, 0.12); color: #d63648; }
.size-badge--is { background: rgba(76, 175, 80, 0.14); color: #2e7d32; }

:root[data-theme="light"] .size-badge--so { background: rgba(214, 54, 72, 0.1); color: #b62a3a; }
:root[data-theme="light"] .size-badge--is { background: rgba(76, 175, 80, 0.14); color: #1b5e20; }

@media (max-width: 600px) {
    .stock-only-thumb { width: 48px; height: 48px; }
    .stock-only-name { font-size: 0.88rem; }
    .size-badge { font-size: 0.72rem; padding: 0.15rem 0.42rem; }
}

.sellout-stock-only-tag {
    display: inline-block;
    padding: 0.12rem 0.45rem;
    margin-left: 0.4rem;
    background: var(--tenant-bg-surface-alt);
    color: var(--tenant-text-muted);
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

/* === Lookbook-only Season preview === */
.lookbook-preview { margin: 2rem 0 3rem; }
.lookbook-drop-banner {
    background: var(--tenant-bg-surface);
    border: 1px solid var(--tenant-border);
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    text-align: center;
}
.lookbook-drop-banner strong {
    font-family: var(--tenant-font-heading);
    font-size: 1.1rem;
    display: block;
    margin-bottom: 0.25rem;
}
.lookbook-drop-banner span { color: var(--tenant-text-muted); }
.lookbook-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}
.lookbook-tile { display: block; border-radius: 6px; overflow: hidden; }
.lookbook-tile img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}
:root[data-theme="light"] .lookbook-drop-banner { background: var(--tenant-bg-surface-alt); }

/* ── Favorites (device-saved items) ─────────────────────────── */
.fav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    cursor: pointer;
    border: none;
    color: #fff;
    background: rgba(15, 15, 15, 0.45);
    transition: background 0.15s, color 0.15s, transform 0.1s;
}
.fav-btn .fav-heart-fill { opacity: 0; }
.fav-btn.is-active { color: #e0245e; }
.fav-btn.is-active .fav-heart-fill { opacity: 1; }
.fav-btn.is-active .fav-heart-outline { opacity: 0; }
.fav-btn:active { transform: scale(0.92); }

/* Release-restriction badge ("London Exclusive"); the price tag owns the
   top-left corner and the favourite button the top-right. */
.item-exclusive {
    position: absolute;
    bottom: 8px;
    left: 8px;
    z-index: 2;
    max-width: calc(100% - 16px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 3px 7px;
    /* Inverted per theme: Palace shots are on white, so a white badge
       vanished into the photo in light mode. */
    background: var(--tenant-text);
    color: var(--tenant-bg);
    border-radius: 3px;
    pointer-events: none;
}
.item-cat-tag--exclusive {
    border-color: var(--tenant-text);
    background: var(--tenant-text);
    color: var(--tenant-bg);
}

.fav-btn--card {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 15px;
}
.fav-btn--card:hover { background: rgba(15, 15, 15, 0.7); }
.fav-btn--card.is-active { background: rgba(255, 255, 255, 0.85); }
:root[data-theme="light"] .fav-btn--card { background: rgba(255, 255, 255, 0.65); color: #333; }
:root[data-theme="light"] .fav-btn--card:hover { background: rgba(255, 255, 255, 0.9); }
:root[data-theme="light"] .fav-btn--card.is-active { color: #e0245e; }

.fav-btn--detail {
    margin-left: auto;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tenant-text);
    /* Was bg-surface-alt, which read as a grey chip sitting next to the
       flat outlined category tag. Transparent lets the border carry the
       shape, matching the tags beside it in both themes. */
    background: transparent;
    border: 1px solid var(--tenant-border);
}
.fav-btn--detail:hover {
    border-color: var(--tenant-text-muted);
    background: var(--tenant-bg-surface-alt);
}
.fav-btn--detail.is-active { color: #e0245e; border-color: #e0245e; }

/* Heart + search live in one right-side cluster so the space-between
   nav-container keeps its original three-zone layout (brand / links /
   actions) and the text menu doesn't shift. */
.nav-actions { display: flex; align-items: center; gap: 0.25rem; }
.nav-fav-link { text-decoration: none; display: flex; color: inherit; }

/* These two rules sit AFTER the responsive block, so they beat its
   `.nav-actions { display: none }` / `.nav-search-desktop { display: none }`
   on source order. That is what we want for the heart (it should stay
   reachable on a phone) but it left the cluster as the middle child of a
   space-between nav, so the heart floated between logo and hamburger.
   Park it against the hamburger instead. Search stays hidden on mobile:
   it only carries .nav-search-desktop, which the responsive block hides. */
@media (max-width: 1024px) {
    .nav-actions {
        display: flex;
        margin-left: auto;
        margin-right: 0.85rem;
    }
}

.fav-grid { margin-top: 1.25rem; }
/* Uniform card heights: the base card clamps names at 5 lines, which makes
   a mixed-season favorites grid ragged. Fix every card to the same info
   block: exactly two name lines + one season line. */
.fav-grid .item-name {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    min-height: calc(2 * 1.3em);
}
.fav-grid .item-info { padding-bottom: 0.35rem; }
.fav-grid .fav-card-season {
    margin: 0;
    font-size: 0.72rem;
    color: var(--tenant-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fav-empty {
    text-align: center;
    padding: 3.5rem 1rem;
    color: var(--tenant-text-muted);
}
.fav-empty h2 { color: var(--tenant-text); margin: 0.8rem 0 0.3rem; }
.fav-empty .btn-primary {
    display: inline-block;
    margin-top: 1.2rem;
    padding: 0.6rem 1.4rem;
    background: var(--tenant-primary);
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
}
.fav-loading { text-align: center; padding: 3rem 1rem; color: var(--tenant-text-muted); }

/* ── Resale badge (item detail, app-style in Sell/Buy) ─────── */
.resale-badge {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.2rem 0 0.8rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--tenant-border);
    border-radius: 999px;
    text-decoration: none;
    line-height: 1;
    transition: border-color 0.15s;
}
.resale-badge:hover { border-color: #08a05c; }
.resale-badge-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #08a05c;
}
.resale-badge-price {
    font-weight: 700;
    font-size: 1rem;
    color: var(--tenant-text);
    font-variant-numeric: tabular-nums;
}
.resale-badge-delta {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.resale-badge-delta.is-up { color: #0a9d58; background: rgba(10, 157, 88, 0.14); }
.resale-badge-delta.is-down { color: #d64545; background: rgba(214, 69, 69, 0.14); }
:root[data-theme="light"] .resale-badge-delta.is-up { color: #067a43; background: rgba(10, 157, 88, 0.12); }
:root[data-theme="light"] .resale-badge-delta.is-down { color: #b3261e; background: rgba(214, 69, 69, 0.1); }
.resale-badge-meta {
    font-size: 0.75rem;
    color: var(--tenant-text-muted);
}
.resale-app-cta {
    display: inline-block;
    margin-top: 0.6rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tenant-primary);
    text-decoration: none;
}
.resale-app-cta:hover { text-decoration: underline; }

/* Upcoming-season SEO line under the H1 (drop date in plain language) */
.header-abbr { color: var(--tenant-text-muted); font-weight: 600; }
.season-drop-line { color: var(--tenant-text-muted); font-size: .95rem; margin: .4rem 0 0; }
.season-drop-line strong { color: var(--tenant-text); }
.lookbook-intro { color: var(--tenant-text-muted); font-size: .95rem; margin: .4rem 0 0; max-width: 70ch; }
.lookbook-season-art { margin: 0 0 1.5rem; }
.lookbook-season-art img { width: 100%; height: auto; display: block; border-radius: 4px; }
.lookbook-season-art figcaption {
    margin-top: .5rem;
    font-size: .85rem;
    color: var(--tenant-text-muted);
}

/* Countdown-page mini FAQ (mirrors the FAQPage schema, kept compact) */
.season-faq { max-width: 560px; margin: 0 auto 2rem; }
.season-faq-item { border-bottom: 1px solid var(--tenant-border); }
.season-faq-item summary { cursor: pointer; padding: .85rem .25rem; font-size: .92rem; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.season-faq-item summary::-webkit-details-marker { display: none; }
.season-faq-item summary::after { content: "+"; color: var(--tenant-text-muted); font-weight: 400; font-size: 1.1rem; flex-shrink: 0; }
.season-faq-item[open] summary::after { content: "\2212"; }
.season-faq-item p { margin: 0 .25rem .9rem; font-size: .88rem; line-height: 1.55; color: var(--tenant-text-muted); }
.season-faq-note { font-size: .72rem; color: var(--tenant-text-muted); opacity: .7; margin: .75rem .25rem 0; }

/* Announced season with no imagery yet: the placeholder carries the date */
.collection-coming-soon { flex-direction: column; gap: .3rem; }
.collection-coming-date {
    font-family: var(--tenant-font-heading);
    font-size: .95rem; font-weight: 700;
    color: var(--tenant-primary);
    letter-spacing: .02em;
}

/* ============================================================
   Get-the-app marketing page (app_promo/index.html)
   Themed entirely from --tenant-* so it adapts per brand + theme.
   Solid CTAs use primary-on-bg (always a contrasting pair).
   ============================================================ */
.getapp-wrap { --ga-accent: var(--tenant-primary); --ga-soft: color-mix(in srgb, var(--tenant-primary) 12%, transparent); max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.getapp-wrap h1, .getapp-wrap h2, .getapp-wrap h3, .getapp-wrap h4 { font-family: var(--tenant-font-heading); letter-spacing: -0.02em; }

/* hero */
.getapp-hero { position: relative; padding: 48px 0 40px; }
.getapp-hero::before { content:""; position:absolute; inset:-8% -20% auto -20%; height:520px; background: radial-gradient(55% 60% at 72% 18%, var(--ga-soft), transparent 70%); pointer-events:none; z-index:0; }
.getapp-hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:1.05fr 0.95fr; gap:40px; align-items:center; }
.getapp-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--ga-accent); margin-bottom:16px; }
.getapp-pulse { width:7px; height:7px; border-radius:50%; background:var(--ga-accent); animation:ga-pulse 2s infinite; }
@keyframes ga-pulse { 0%{box-shadow:0 0 0 0 var(--ga-soft);} 70%{box-shadow:0 0 0 8px transparent;} 100%{box-shadow:0 0 0 0 transparent;} }
.getapp-h1 { font-size:clamp(36px,6vw,62px); line-height:1.0; margin:0 0 16px; font-weight:800; text-wrap:balance; color:var(--tenant-text); }
.getapp-accent { color:var(--ga-accent); }
.getapp-sub { font-size:17px; color:var(--tenant-text-muted); max-width:46ch; margin:0 0 24px; }
.getapp-sub b { color:var(--tenant-text); font-weight:600; }

.getapp-badges { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.getapp-badge { display:flex; align-items:center; gap:10px; padding:10px 15px; border-radius:12px; background:var(--tenant-bg-surface); border:1px solid var(--tenant-border); position:relative; text-decoration:none; color:var(--tenant-text); }
.getapp-badge svg { width:22px; height:22px; fill:var(--tenant-text); flex:0 0 auto; }
.getapp-badge small { display:block; font-size:9.5px; color:var(--tenant-text-muted); letter-spacing:0.03em; }
.getapp-badge strong { font-family:var(--tenant-font-heading); font-size:15px; font-weight:700; }
.getapp-badge.is-soon { opacity:0.9; }
.getapp-soon { position:absolute; top:-9px; right:-8px; font-size:8.5px; font-weight:800; letter-spacing:0.08em; padding:3px 7px; border-radius:999px; background:var(--ga-accent); color:var(--tenant-bg); }

.getapp-notify { margin-top:22px; max-width:440px; }
.getapp-notify-label { font-size:12.5px; color:var(--tenant-text-muted); margin-bottom:8px; font-weight:600; }
.getapp-notify-row { display:flex; gap:8px; flex-wrap:wrap; }
.getapp-notify-row input[type="email"] { flex:1 1 200px; min-width:0; font-size:14px; padding:12px 14px; border-radius:11px; background:var(--tenant-bg-surface); border:1px solid var(--tenant-border); color:var(--tenant-text); outline:none; }
.getapp-notify-row input[type="email"]:focus { border-color:var(--ga-accent); }
.getapp-notify-row button { font-size:14px; font-weight:700; cursor:pointer; padding:12px 18px; border-radius:11px; border:none; background:var(--ga-accent); color:var(--tenant-bg); white-space:nowrap; }
.getapp-notify-row .cf-turnstile { flex:1 1 100%; }

/* phone */
.getapp-phone-wrap { display:grid; place-items:center; }
.getapp-phone { width:270px; aspect-ratio:9/19.3; border-radius:40px; padding:11px; background:linear-gradient(160deg,#2a2a32,#141418); border:1px solid #3a3a44; box-shadow:0 40px 90px -30px rgba(0,0,0,0.55); position:relative; }
.getapp-phone::before { content:""; position:absolute; top:18px; left:50%; transform:translateX(-50%); width:92px; height:22px; border-radius:999px; background:#0a0a0c; z-index:3; }
.getapp-screen { width:100%; height:100%; border-radius:30px; overflow:hidden; background:var(--tenant-bg-surface); position:relative; display:flex; flex-direction:column; }
.getapp-s-status { height:42px; flex:0 0 auto; }
.getapp-s-body { flex:1; overflow:hidden; padding:0 13px; }
.getapp-s-eyebrow { font-size:8.5px; letter-spacing:0.18em; color:var(--tenant-text-muted); font-weight:700; text-transform:uppercase; }
.getapp-s-h { font-family:var(--tenant-font-heading); font-weight:800; font-size:20px; margin:2px 0 12px; color:var(--tenant-text); line-height:1.05; }
.getapp-drop-card { border-radius:16px; padding:13px; margin-bottom:12px; position:relative; overflow:hidden; background:linear-gradient(150deg,var(--ga-soft),var(--tenant-bg-surface-alt)); border:1px solid var(--tenant-border); }
.getapp-tag { font-size:8px; font-weight:800; letter-spacing:0.1em; color:var(--ga-accent); }
.getapp-dc-h { font-family:var(--tenant-font-heading); font-weight:800; font-size:15px; margin:4px 0 2px; color:var(--tenant-text); }
.getapp-dc-sub { font-size:10px; color:var(--tenant-text-muted); }
.getapp-dc-pill { position:absolute; right:12px; bottom:12px; font-size:9px; font-weight:800; color:var(--tenant-bg); background:var(--ga-accent); padding:5px 10px; border-radius:999px; }
.getapp-item-row { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:10px; gap:8px; }
.getapp-restock { display:flex; align-items:center; gap:5px; color:var(--tenant-text-muted); font-size:10px; font-weight:700; }
.getapp-resale { color:#16a34a; font-size:11px; font-weight:700; margin-top:5px; }
.getapp-alert { background:var(--ga-accent); color:var(--tenant-bg); font-size:10px; font-weight:800; text-align:center; padding:8px 13px; border-radius:999px; }
.getapp-strip { display:flex; gap:5px; }
.getapp-strip span { width:26px; height:26px; border-radius:8px; background:var(--tenant-bg-surface-alt); border:1px solid var(--tenant-border); }
.getapp-strip span:first-child { border-color:var(--ga-accent); }
.getapp-s-tabbar { height:50px; flex:0 0 auto; border-top:1px solid var(--tenant-border); display:flex; align-items:center; justify-content:space-around; padding:0 8px; }
.getapp-s-tabbar span { width:20px; height:20px; border-radius:6px; background:var(--tenant-bg-surface-alt); }
.getapp-s-tabbar span.on { background:var(--ga-accent); }

/* preview strip */
.getapp-prev { padding:34px 0 20px; }
.getapp-prev-h { text-align:center; margin-bottom:28px; }
.getapp-prev-h h2 { font-size:clamp(24px,4vw,34px); font-weight:800; margin:0 0 8px; color:var(--tenant-text); }
.getapp-prev-h p { color:var(--tenant-text-muted); font-size:15px; margin:0; }
.getapp-prev-row { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:900px; margin:0 auto; }
.getapp-prev-card { text-align:center; }
.getapp-mini { width:100%; max-width:210px; margin:0 auto 16px; aspect-ratio:9/17; border-radius:26px; padding:8px; background:linear-gradient(160deg,#242430,#131318); border:1px solid #34343e; box-shadow:0 24px 50px -24px rgba(0,0,0,0.5); }
.getapp-mini-screen { width:100%; height:100%; border-radius:20px; background:var(--tenant-bg-surface); overflow:hidden; padding:13px 11px; text-align:left; }
.getapp-mini-card { padding:9px; margin:6px 0 10px; }
.getapp-prev-card h3 { font-weight:700; font-size:16px; margin:0 0 5px; color:var(--tenant-text); }
.getapp-prev-card p { color:var(--tenant-text-muted); font-size:12.5px; margin:0 auto; max-width:26ch; }
.getapp-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.getapp-tiles span { aspect-ratio:1; border-radius:9px; background:var(--tenant-bg-surface-alt); border:1px solid var(--tenant-border); }
.getapp-tiles span.sel { border-color:var(--ga-accent); box-shadow:0 0 0 1px var(--ga-accent); }
.getapp-m-name { font-family:var(--tenant-font-heading); font-weight:800; font-size:14px; color:var(--tenant-text); }
.getapp-m-figure { height:118px; border-radius:12px; margin-top:8px; background:radial-gradient(50% 60% at 50% 40%,var(--ga-soft),var(--tenant-bg-surface-alt)); border:1px solid var(--tenant-border); display:grid; place-items:center; }
.getapp-m-figure .body { width:40px; height:76px; border-radius:20px 20px 14px 14px; background:var(--tenant-bg-surface-alt); border:1px solid var(--tenant-border); }
.getapp-m-alert { margin-top:10px; display:block; }
.getapp-m-arm { display:flex; align-items:center; gap:8px; padding:9px; border-radius:10px; background:var(--tenant-bg-surface-alt); border:1px solid var(--tenant-border); margin-top:8px; }
.getapp-m-arm .dot { width:8px; height:8px; border-radius:50%; background:var(--ga-accent); }
.getapp-m-arm .txt { flex:1; height:8px; border-radius:4px; background:var(--tenant-border); }
.getapp-m-arm .st { font-size:8px; font-weight:800; color:var(--ga-accent); }
.getapp-note { max-width:900px; margin:22px auto 0; text-align:center; font-size:11.5px; color:var(--tenant-text-muted); border:1px dashed var(--tenant-border); border-radius:10px; padding:9px; }

/* features */
.getapp-feats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:1000px; margin:40px auto; }
.getapp-feat { background:var(--tenant-bg-surface); border:1px solid var(--tenant-border); border-radius:14px; padding:18px; }
.getapp-ic { width:38px; height:38px; border-radius:10px; background:var(--ga-soft); display:grid; place-items:center; margin-bottom:12px; font-size:19px; }
.getapp-feat h4 { font-weight:700; font-size:15px; margin:0 0 5px; color:var(--tenant-text); }
.getapp-feat p { font-size:12.5px; color:var(--tenant-text-muted); margin:0; }

/* pricing */
.getapp-pricing { padding:34px 0 20px; }
.getapp-cards { max-width:980px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.getapp-pcard { background:var(--tenant-bg-surface); border:1px solid var(--tenant-border); border-radius:18px; padding:24px 22px; position:relative; display:flex; flex-direction:column; }
.getapp-pcard.is-pro { border-color:color-mix(in srgb, var(--ga-accent) 55%, var(--tenant-border)); box-shadow:0 20px 50px -28px var(--ga-accent); }
.getapp-badge2 { position:absolute; top:18px; right:18px; font-family:var(--tenant-font-heading); font-size:9.5px; font-weight:800; letter-spacing:0.1em; color:var(--tenant-bg); background:var(--ga-accent); padding:4px 9px; border-radius:999px; }
.getapp-tier { font-family:var(--tenant-font-heading); font-weight:800; font-size:19px; color:var(--tenant-text); }
.getapp-who { color:var(--tenant-text-muted); font-size:12px; margin-top:3px; min-height:44px; }
.getapp-price { margin:14px 0 6px; display:flex; align-items:baseline; gap:4px; }
.getapp-price .amt { font-family:var(--tenant-font-heading); font-weight:800; font-size:32px; color:var(--tenant-text); font-variant-numeric:tabular-nums; }
.getapp-price .per { color:var(--tenant-text-muted); font-size:12px; }
.getapp-pcard ul { list-style:none; padding:0; margin:12px 0 0; display:grid; gap:8px; }
.getapp-pcard li { font-size:12.8px; color:var(--tenant-text-muted); padding-left:16px; position:relative; }
.getapp-pcard li::before { content:"+"; position:absolute; left:0; color:var(--ga-accent); font-weight:800; }
.getapp-pcard li b { color:var(--tenant-text); font-weight:600; }
.getapp-fineprint { text-align:center; color:var(--tenant-text-muted); font-size:12px; margin:20px 0 0; }

/* final */
.getapp-final { text-align:center; padding:54px 0 44px; }
.getapp-final h2 { font-size:clamp(26px,4.5vw,40px); font-weight:800; margin:0 0 12px; color:var(--tenant-text); }
.getapp-final p { color:var(--tenant-text-muted); font-size:15px; margin:0 auto 22px; max-width:42ch; }
.getapp-final-form { max-width:440px; margin:0 auto; justify-content:center; }

@media (max-width:860px){
  .getapp-hero-grid { grid-template-columns:1fr; gap:28px; }
  .getapp-phone-wrap { order:-1; }
  .getapp-feats { grid-template-columns:1fr 1fr; }
  .getapp-prev-row { grid-template-columns:1fr; max-width:300px; }
  .getapp-cards { grid-template-columns:1fr; }
}

/* get-the-app: real App Store screenshots inside the phone frames */
.getapp-screen--shot, .getapp-mini-screen--shot { padding:0; background:#0e0e10; }
.getapp-shot { width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.getapp-island { position:absolute; top:9px; left:50%; transform:translateX(-50%); width:31%; height:24px; border-radius:14px; background:#000; }
/* The frame takes its height from the screen, and the screen has the exact
   screenshot ratio (1320x2868), so the whole screenshot shows, no crop. */
.getapp-phone:has(.getapp-screen--shot) { width:300px; aspect-ratio:auto; height:auto; }
.getapp-mini:has(.getapp-mini-screen--shot) { max-width:236px; aspect-ratio:auto; height:auto; }
.getapp-screen--shot, .getapp-mini-screen--shot { height:auto; aspect-ratio:1320/2868; }
.getapp-mini-screen--shot { border-radius:22px; }

/* get-the-app, launched: one solid App Store badge, Android as a quiet line */
.getapp-badge--store { background:#000; border-color:#000; color:#fff; padding:11px 22px 11px 18px; border-radius:13px; gap:12px; transition:transform .15s ease, box-shadow .15s ease; box-shadow:0 10px 24px -14px rgba(0,0,0,.6); }
.getapp-badge--store:hover { transform:translateY(-1px); box-shadow:0 14px 28px -14px rgba(0,0,0,.7); color:#fff; }
.getapp-badge--store svg { width:28px; height:28px; fill:#fff; }
.getapp-badge--store small { color:rgba(255,255,255,.78); font-size:11px; letter-spacing:.02em; }
.getapp-badge--store strong { font-size:20px; line-height:1.1; letter-spacing:-.01em; }
.getapp-android-soon { display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--tenant-text-muted); padding-left:6px; }
.getapp-android-soon svg { width:15px; height:15px; fill:currentColor; opacity:.8; }

/* get-the-app, launched: two real buttons of one height. Red = the action,
   outlined = Android, not tappable yet. */
.getapp-cta { display:inline-flex; align-items:center; gap:10px; height:54px; padding:0 24px 0 20px; border-radius:999px; font-family:var(--tenant-font-heading); font-size:16px; font-weight:800; letter-spacing:.01em; text-decoration:none; white-space:nowrap; }
.getapp-cta svg { width:20px; height:20px; flex:0 0 auto; fill:currentColor; }
.getapp-cta--store { background:var(--ga-accent); color:#fff; box-shadow:0 12px 26px -12px var(--ga-accent); transition:transform .15s ease, filter .15s ease, box-shadow .15s ease; }
.getapp-cta--store:hover, .getapp-cta--store:focus-visible { color:#fff; transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 16px 30px -12px var(--ga-accent); }
.getapp-cta--store:active { transform:translateY(0); }
.getapp-cta--soon { border:1.5px solid var(--tenant-border); color:var(--tenant-text-muted); background:transparent; cursor:default; }
.getapp-cta--soon em { font-style:normal; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border-radius:999px; background:var(--tenant-bg-surface); color:var(--tenant-text-muted); }
@media (max-width:480px) { .getapp-cta { height:50px; font-size:15px; padding:0 20px 0 16px; } }

/* Nav: "App" link with a small NEW pill (desktop nav + mobile menu) */
.nav-app-link { display:inline-flex; align-items:center; gap:6px; }
.nav-new { display:inline-block; font-size:8.5px; line-height:1; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:3px 6px 3px; border-radius:999px; background:var(--tenant-primary, #d91e2b); color:#fff; transform:translateY(-1px); }