/* ============================================================
   CESARIO CUSTOM SHIRTS — EDITORIAL DESIGN SYSTEM
   -----------------------------------------------------------
   Font pairing:
     Fraunces (display serif) + Jost (body/UI)
   Palette:
     Warm paper + stone neutrals; BRASS as sharp accent;
     OXBLOOD as critical CTA; INK NAVY for dark mode.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,300;1,9..144,400&family=Jost:wght@300;400;500;600;700&display=swap');

:root {
    /* ── Paper & stone neutrals ──────────────────────────── */
    --cs-paper: #FAF7F2;           /* warmer paper than pure white */
    --cs-white: #FAFAF8;
    --cs-light-gray: #F2EDE4;
    --cs-beige: #E8DFD1;
    --cs-stone: #E8DFD1;
    --cs-sand: #D4C8B6;
    --cs-cream: #F5EEE2;
    --cs-medium-gray: #A9A296;
    --cs-separator: rgba(60, 50, 41, 0.09);

    /* ── Ink & text ──────────────────────────────────────── */
    --cs-black: #14110D;            /* slightly warmer than pure black */
    --cs-ink: #0E1723;              /* reserved for dark-mode variant */
    --cs-charcoal: #26231F;
    --cs-espresso: #3D3229;
    --cs-brown: #3D3229;
    --cs-text: #1F1C18;
    --cs-text-secondary: #524B42;
    --cs-text-muted: #8C867D;

    /* ── BRASS — sharp accent (was taupe #8C7A68) ────────── */
    --cs-brass: #B08D57;
    --cs-brass-light: #C4A36A;
    --cs-brass-dark: #8E6F42;
    --cs-brass-glow: rgba(176, 141, 87, 0.15);

    /* Back-compat: --cs-gold aliases now render as brass.
       Nothing in the app needs to change. */
    --cs-gold: var(--cs-brass);
    --cs-gold-light: var(--cs-brass-light);
    --cs-gold-dark: var(--cs-brass-dark);
    --cs-gold-glow: var(--cs-brass-glow);

    /* Taupe — kept as quiet secondary tone */
    --cs-taupe: #8C7A68;
    --cs-taupe-light: #A89888;
    --cs-taupe-dark: #6B5D50;

    /* ── Oxblood — critical CTA / alerts ─────────────────── */
    --cs-oxblood: #6B1F1F;
    --cs-oxblood-dark: #4F1515;

    /* ── Semantic aliases ────────────────────────────────── */
    --cs-accent: var(--cs-brass);
    --cs-accent-light: var(--cs-brass-light);
    --cs-accent-dark: var(--cs-brass-dark);
    --cs-blue: #14110D;
    --cs-green: #2D6A4F;
    --cs-red: #8B2500;
    --cs-orange: #9F8453;
    --cs-navy: #14110D;
    --cs-navy-light: #26231F;
    --cs-grouped-bg: var(--cs-paper);
    --cs-card-bg: #FFFFFF;

    /* ── Typography ──────────────────────────────────────── */
    --cs-font-display: "Fraunces", "Playfair Display", "Cormorant Garamond", Georgia, serif;
    --cs-font-body: "Jost", "Futura PT", "Century Gothic", sans-serif;
    --cs-font-heading: "Jost", "Futura PT", "Century Gothic", sans-serif; /* labels / uppercase UI */

    /* ── Shape ───────────────────────────────────────────── */
    --cs-radius: 0;
    --cs-radius-lg: 0;
    --cs-radius-sm: 0;

    /* ── Elevation ───────────────────────────────────────── */
    --cs-shadow-sm: 0 1px 4px rgba(20, 17, 13, 0.04);
    --cs-shadow: 0 4px 24px rgba(20, 17, 13, 0.06);
    --cs-shadow-lg: 0 16px 56px rgba(20, 17, 13, 0.09);

    /* ── Motion ──────────────────────────────────────────── */
    --ease-luxury: cubic-bezier(0.19, 1, 0.22, 1);   /* editorial reveals */
    --ease-snap:   cubic-bezier(0.4, 0, 0.2, 1);     /* admin UI feedback */
    --ease-soft:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --dur-luxury:  0.6s;
    --dur-editorial: 0.45s;
    --dur-ui:      0.18s;
    --cs-transition: var(--ease-soft);
    --cs-tile-transition: 0.35s var(--ease-soft);

    /* ── Spacing ─────────────────────────────────────────── */
    --cs-spacing-xs: 0.5rem;
    --cs-spacing-sm: 0.75rem;
    --cs-spacing-md: 1.25rem;
    --cs-spacing-lg: 2rem;
    --cs-spacing-xl: 3rem;

    /* ── Components ──────────────────────────────────────── */
    --cs-comment-admin: #007aff;
    --cs-comment-user: #F2EDE4;
    --cs-comment-internal: #FBF4E6;
    --cs-footer-bg: #1A1714;
    --cs-footer-text: rgba(250, 247, 242, 0.55);

    /* ── Glass / gallery ─────────────────────────────────── */
    --cs-glass-bg: rgba(255, 255, 255, 0.15);
    --cs-glass-bg-hover: rgba(255, 255, 255, 0.25);
    --cs-glass-blur: blur(16px) saturate(180%);
    --cs-glass-border: rgba(255, 255, 255, 0.3);

    /* ── Textile material language ───────────────────────── */
    /* Grain overlay — SVG turbulence, very subtle. Used by .has-grain */
    --cs-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0 0.04 0 0 0 0.45 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
    /* Tick ruler — repeating 4px marks, editorial divider */
    --cs-ruler: repeating-linear-gradient(
        to right,
        var(--cs-brass) 0 1px,
        transparent 1px 8px
    );
}

html, body {
    font-family: var(--cs-font-body);
    color: var(--cs-text);
    background-color: var(--cs-grouped-bg);
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 15px;
    line-height: 1.65;
    letter-spacing: 0.01em;
    font-feature-settings: "liga" 1, "kern" 1;
}

/* Editorial serif headings — sentence case, optical-size enabled.
   Labels / uppercase UI chrome keep Jost via their own component rules. */
h1, h2, h3, h4 {
    font-family: var(--cs-font-display);
    color: var(--cs-text);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.12;
    text-transform: none;
    font-variation-settings: "opsz" 96;
}

h5, h6 {
    font-family: var(--cs-font-heading);
    color: var(--cs-text);
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

h1 { font-size: clamp(2.25rem, 4.5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); }
h4 { font-size: clamp(1.125rem, 1.5vw, 1.375rem); }

a, .btn-link {
    color: var(--cs-gold);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover, .btn-link:hover {
    color: var(--cs-gold-dark);
    opacity: 1;
}

h1:focus {
    outline: none;
}

.card {
    border: 1px solid var(--cs-separator);
    border-radius: var(--cs-radius) !important;
    background: var(--cs-card-bg);
    box-shadow: var(--cs-shadow-sm);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

/* Interactive cards opt in to the lift effect — brand surfaces (feature-card,
   gallery-card, style-option-card, fabric-card, admin-card) keep their own
   rules. Static cards in dense admin layouts no longer jitter on hover. */
.card.card-interactive {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card.card-interactive:hover {
    transform: translateY(-2px);
    box-shadow: var(--cs-shadow);
}

.card-header {
    background: var(--cs-card-bg) !important;
    border-bottom: 1px solid var(--cs-separator);
    font-weight: 500;
    padding: 1.25rem 1.5rem;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.card-body {
    padding: 1.75rem;
}

.table {
    --bs-table-bg: transparent;
    font-size: 0.875rem;
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--cs-separator);
    padding: 1rem 1.125rem;
    vertical-align: middle;
}

.table thead th {
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.15em;
    color: var(--cs-text-muted);
    font-weight: 500;
    border-bottom: 1px solid var(--cs-black);
}

.table-light {
    --bs-table-bg: var(--cs-light-gray);
    --bs-table-border-color: var(--cs-separator);
}

.table-hover > tbody > tr:hover {
    --bs-table-hover-bg: var(--cs-separator);
    transition: background-color 0.3s ease;
}

.btn {
    font-family: var(--cs-font-body);
    font-weight: 500;
    font-size: 0.8125rem;
    border-radius: var(--cs-radius);
    padding: 0.75rem 2rem;
    transition: all 0.3s ease;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn:active {
    transform: none;
    transition-duration: 0.1s;
}

.btn-primary {
    color: var(--cs-white);
    background-color: var(--cs-black);
    border-color: var(--cs-black);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--cs-text-secondary);
    border-color: var(--cs-text-secondary);
    box-shadow: none;
}

.btn-outline-primary {
    color: var(--cs-black);
    border: 2px solid var(--cs-black);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--cs-black);
    color: var(--cs-white);
    border-color: var(--cs-black);
}

.btn-outline-secondary {
    color: var(--cs-text-secondary);
    border: 2px solid var(--cs-medium-gray);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: var(--cs-separator);
    color: var(--cs-text);
    border-color: var(--cs-text);
}

.btn-success {
    background-color: var(--cs-green);
    border-color: var(--cs-green);
    color: var(--cs-white);
}

.btn-danger, .btn-outline-danger:hover {
    background-color: var(--cs-red);
    border-color: var(--cs-red);
    color: var(--cs-white);
}

.btn-outline-danger {
    color: var(--cs-red);
    border: 2px solid var(--cs-red);
}

.btn-info {
    background-color: var(--cs-brown);
    border-color: var(--cs-brown);
    color: var(--cs-white);
}

.btn-outline-gold {
    color: var(--cs-gold);
    border: 2px solid var(--cs-gold);
    background: transparent;
    padding: 0.625rem 1.5rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-outline-gold:hover,
.btn-outline-gold:focus {
    color: var(--cs-white);
    background-color: var(--cs-gold);
    border-color: var(--cs-gold);
}

.btn-gold {
    color: var(--cs-white);
    background-color: var(--cs-gold);
    border-color: var(--cs-gold);
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-gold:hover,
.btn-gold:focus {
    color: var(--cs-white);
    background-color: var(--cs-gold-dark);
    border-color: var(--cs-gold-dark);
}

.btn-sm {
    padding: 0.5rem 1.25rem;
    font-size: 0.75rem;
    border-radius: var(--cs-radius);
    min-height: 36px;
}

.btn-lg {
    padding: 1rem 2.5rem;
    font-size: 0.875rem;
    border-radius: var(--cs-radius);
    min-height: 56px;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 3px var(--cs-gold-glow);
}

.badge {
    font-weight: 500;
    font-size: 0.6875rem;
    padding: 0.4em 0.75em;
    border-radius: 0;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: transparent !important;
    border: 1px solid currentColor;
}

.app-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.app-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--cs-grouped-bg);
}

.topnav {
    position: sticky;
    top: 0;
    z-index: 1040;
    background: var(--cs-white);
    border-bottom: 1px solid var(--cs-separator);
    padding: 0 1rem;
}

.topnav .container-fluid {
    height: 60px;
}

.topnav-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--cs-text) !important;
    flex-shrink: 0;
}

.topnav-brand:hover {
    opacity: 0.85;
    text-decoration: none;
}

.topnav-brand-logo {
    width: 76px;
    height: 76px;
    border-radius: 0;
    object-fit: cover;
}

.topnav-brand-text {
    font-family: var(--cs-font-heading);
    font-weight: 500;
    font-size: 0.8125rem;
    letter-spacing: 0.15em;
    color: var(--cs-text);
    text-transform: uppercase;
}

.topnav-toggle {
    background: none;
    border: none;
    color: var(--cs-text);
    padding: 0.375rem;
    cursor: pointer;
    border-radius: 0;
    line-height: 1;
}

.topnav-toggle:hover {
    background: rgba(0, 0, 0, 0.04);
}

.topnav-link {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    border-radius: 0;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--cs-text-secondary);
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    background: none;
    font-family: var(--cs-font-body);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.topnav-link:hover {
    background: transparent;
    color: var(--cs-text);
    text-decoration: none;
}

.topnav-link.active {
    color: var(--cs-text);
    font-weight: 500;
    border-bottom: 2px solid var(--cs-text);
}

.topnav-link-admin {
    color: var(--cs-gold);
}

.topnav-link-admin.active {
    color: var(--cs-gold);
    border-bottom-color: var(--cs-gold);
}

.topnav-link-logout {
    color: var(--cs-red);
}

.topnav-link-cta {
    background: var(--cs-gold);
    color: var(--cs-white) !important;
    font-weight: 500;
    border-radius: 0;
}

.topnav-link-cta:hover {
    background: var(--cs-gold-dark);
}

.topnav-separator {
    width: 1px;
    height: 20px;
    background: var(--cs-separator);
    margin: 0 0.25rem;
}

.topnav-icon-btn {
    background: none;
    border: none;
    color: var(--cs-text-muted);
    font-size: 1rem;
    padding: 0.375rem;
    cursor: pointer;
    border-radius: 0;
    line-height: 1;
    transition: all 0.3s ease;
}

.topnav-icon-btn:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--cs-text);
}

.topnav-mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1039;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.topnav-mobile-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.topnav-mobile-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cs-card-bg);
    border-bottom: 1px solid var(--cs-separator);
    box-shadow: var(--cs-shadow-lg);
    padding: 0.5rem 1rem 1rem;
    z-index: 1041;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: transform 0.25s ease, opacity 0.25s ease, visibility 0s 0.25s;
}

.topnav-mobile-menu.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: transform 0.25s ease, opacity 0.25s ease, visibility 0s 0s;
}

.topnav-mobile-link {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-radius: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--cs-text-secondary);
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    width: 100%;
    border: none;
    background: none;
    text-align: left;
    font-family: var(--cs-font-body);
    text-transform: uppercase;
    /* iOS: skip the 300ms double-tap delay and suppress hover-first-tap, which
       was forcing users to press-and-hold a nav link to actually navigate. */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    letter-spacing: 0.1em;
}

.topnav-mobile-link:hover {
    background: rgba(0, 0, 0, 0.02);
    color: var(--cs-text);
    text-decoration: none;
}

.topnav-mobile-link.active {
    background: transparent;
    color: var(--cs-text);
    font-weight: 500;
    border-left: 2px solid var(--cs-text);
}

.topnav-mobile-link-logout {
    color: var(--cs-red);
}

.topnav-mobile-divider {
    margin: 0.375rem 0;
    border-color: var(--cs-separator);
}

.dark-mode-toggle {
    background: none;
    border: none;
    color: var(--cs-text-muted);
    font-size: 1.125rem;
    padding: 0.375rem;
    cursor: pointer;
    transition: opacity 0.3s ease;
    line-height: 1;
}

.alert {
    border: none;
    border-radius: 0;
    font-size: 0.9375rem;
    font-weight: 400;
    border-left: 4px solid;
}

.alert-success {
    border-left-color: var(--cs-green);
    background-color: rgba(45, 106, 79, 0.06);
    color: var(--cs-green);
}

.alert-danger {
    border-left-color: var(--cs-red);
    background-color: rgba(139, 37, 0, 0.06);
    color: var(--cs-red);
}

.alert-warning {
    border-left-color: var(--cs-orange);
    background-color: rgba(159, 132, 83, 0.06);
    color: var(--cs-orange);
}

.alert-info {
    border-left-color: var(--cs-brown);
    background-color: rgba(69, 54, 48, 0.06);
    color: var(--cs-brown);
}

.alert-light {
    border-left-color: var(--cs-medium-gray);
    background-color: var(--cs-light-gray);
    color: var(--cs-text);
}

/* ============================================================
   EDITORIAL HERO
   Masthead treatment with layered warm paper, paper-grain
   texture, and an oversized display serif. The gradient is
   intentionally wide and asymmetric (72% right) — not a
   centered radial "glow" that reads as generic SaaS.
   ============================================================ */
.hero-section {
    background:
        /* foreground wash */
        linear-gradient(112deg, rgba(250, 247, 242, 0.92) 0%, rgba(250, 247, 242, 0.6) 45%, rgba(232, 223, 209, 0) 75%),
        /* warm stone body */
        linear-gradient(160deg, #F7F1E6 0%, #EFE5D2 45%, #E5D7BD 100%);
    min-height: 82vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}


/* Paper-grain overlay — barely perceptible but breaks the flat gradient */
.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--cs-grain);
    background-size: 220px;
    opacity: 0.5;
    pointer-events: none;
    mix-blend-mode: multiply;
    z-index: 0;
}

/* Oversized brass "C" monogram ghost mark behind content — editorial flourish */
.hero-section::after {
    content: "C";
    position: absolute;
    right: -4rem;
    bottom: -5rem;
    font-family: var(--cs-font-display);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(20rem, 40vw, 38rem);
    line-height: 0.8;
    color: var(--cs-brass);
    opacity: 0.07;
    pointer-events: none;
    z-index: 0;
    font-variation-settings: "opsz" 144;
}

.hero-section .container {
    position: relative;
    z-index: 2;
}

/* Editorial eyebrow (Vol. / Est. / In residence) */
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--cs-font-heading);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--cs-brass-dark);
    margin-bottom: 1.5rem;
    animation: editorial-reveal var(--dur-luxury) var(--ease-luxury) both;
}

.hero-eyebrow::before {
    content: "";
    width: 36px;
    height: 1px;
    background: var(--cs-brass);
}

.hero-tagline {
    font-family: var(--cs-font-display);
    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 300;
    color: var(--cs-text);
    line-height: 1.02;
    margin-bottom: 1.75rem;
    letter-spacing: -0.02em;
    text-transform: none;
    font-variation-settings: "opsz" 144;
    animation: editorial-reveal var(--dur-luxury) 0.08s var(--ease-luxury) both;
}

.hero-tagline em {
    font-style: italic;
    font-weight: 300;
    color: var(--cs-brass-dark);
}

.hero-subtitle {
    font-family: var(--cs-font-body);
    font-size: 1.0625rem;
    color: var(--cs-text-secondary);
    font-weight: 300;
    line-height: 1.75;
    max-width: 520px;
    letter-spacing: 0.01em;
    animation: editorial-reveal var(--dur-luxury) 0.16s var(--ease-luxury) both;
}

/* Tick-ruler divider (replaces the timid 60×1px line) */
.hero-divider {
    width: 120px;
    height: 6px;
    background: var(--cs-ruler);
    background-repeat: repeat-x;
    background-position: center;
    border: none;
    margin: 2rem 0;
    opacity: 0.9;
    animation: editorial-reveal var(--dur-luxury) 0.24s var(--ease-luxury) both;
}

.hero-section .d-flex.gap-3 {
    animation: editorial-reveal var(--dur-luxury) 0.32s var(--ease-luxury) both;
}

@keyframes editorial-reveal {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 767.98px) {
    .hero-section {
        min-height: 64vh;
        text-align: center;
    }

    .hero-section::after {
        right: -2rem;
        bottom: -3rem;
        font-size: 18rem;
    }

    .hero-eyebrow { justify-content: center; }
    .hero-tagline { font-size: 2.5rem; }

    .hero-subtitle {
        font-size: 0.9375rem;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-divider {
        margin-left: auto;
        margin-right: auto;
    }
}

.section-padding {
    padding: 7rem 0;
}

.section-padding-sm {
    padding: 4rem 0;
}

.section-bg-light {
    background-color: var(--cs-light-gray);
}

.section-bg-navy {
    background: var(--cs-black);
    color: var(--cs-white);
    position: relative;
}

/* Paper grain on dark sections too — keeps texture consistent */
.section-bg-navy::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--cs-grain);
    background-size: 240px;
    opacity: 0.35;
    pointer-events: none;
    mix-blend-mode: screen;
}
.section-bg-navy > * { position: relative; z-index: 1; }

/* Eyebrow — small uppercase tag above editorial headlines */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-family: var(--cs-font-heading);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--cs-brass-dark);
    margin-bottom: 1rem;
}

.eyebrow::before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--cs-brass);
}

.eyebrow--center {
    justify-content: center;
}

.section-bg-navy .eyebrow { color: var(--cs-brass-light); }

/* Section title — now serif display, sentence case, larger */
.section-title {
    font-family: var(--cs-font-display);
    font-size: clamp(1.875rem, 3vw, 2.75rem);
    font-weight: 400;
    color: var(--cs-text);
    margin-bottom: 0.75rem;
    letter-spacing: -0.015em;
    text-transform: none;
    line-height: 1.1;
    font-variation-settings: "opsz" 96;
}

.section-title em {
    font-style: italic;
    font-weight: 400;
    color: var(--cs-brass-dark);
}

.section-bg-navy .section-title {
    color: var(--cs-white);
}
.section-bg-navy .section-title em {
    color: var(--cs-brass-light);
}

.section-subtitle {
    font-family: var(--cs-font-body);
    font-size: 1rem;
    color: var(--cs-text-secondary);
    max-width: 580px;
    margin: 0 auto 3rem;
    line-height: 1.75;
    letter-spacing: 0;
    font-weight: 300;
}

.section-bg-navy .section-subtitle {
    color: rgba(255, 255, 255, 0.62);
}

/* Tick-ruler accent — visual reference to measurement rulers.
   Keeps the .gold-accent-line classname for backward compat. */
.gold-accent-line {
    width: 80px;
    height: 6px;
    background: var(--cs-ruler);
    background-repeat: repeat-x;
    background-position: center;
    border: none;
    margin: 0 auto 1.5rem;
    border-radius: 0;
    opacity: 0.95;
}

.section-bg-navy .gold-accent-line {
    background: repeating-linear-gradient(
        to right,
        var(--cs-brass-light) 0 1px,
        transparent 1px 8px
    );
}

.feature-card {
    background: var(--cs-card-bg);
    border: 1px solid var(--cs-separator);
    border-radius: 0;
    padding: 3rem 2rem 2.5rem;
    text-align: center;
    transition:
        transform var(--dur-luxury) var(--ease-luxury),
        box-shadow var(--dur-luxury) var(--ease-luxury),
        border-color var(--dur-editorial) var(--ease-soft);
    height: 100%;
    box-shadow: none;
    position: relative;
}

/* Thin brass top-edge accent that reveals on hover — asymmetric, editorial */
.feature-card::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 0;
    height: 2px;
    background: var(--cs-brass);
    transition: width var(--dur-editorial) var(--ease-luxury),
                left var(--dur-editorial) var(--ease-luxury);
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--cs-shadow);
    border-color: rgba(176, 141, 87, 0.25);
}

.feature-card:hover::after {
    width: 48px;
    left: calc(50% - 24px);
}

.feature-card .feature-icon {
    width: 72px;
    height: 72px;
    background: transparent;
    border: 1px solid var(--cs-brass);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.75rem;
    color: var(--cs-brass-dark);
    font-size: 1.5rem;
    transition: color var(--dur-editorial) var(--ease-soft),
                background var(--dur-editorial) var(--ease-soft),
                transform var(--dur-luxury) var(--ease-luxury);
}

.feature-card:hover .feature-icon {
    background: var(--cs-brass-glow);
    color: var(--cs-brass-dark);
    transform: scale(1.04);
}

.feature-card h3 {
    font-family: var(--cs-font-heading);
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 0.875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cs-text);
}

.feature-card p {
    font-family: var(--cs-font-body);
    color: var(--cs-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.75;
    margin-bottom: 0;
    font-weight: 300;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.gallery-card {
    background: var(--cs-card-bg);
    border: 1px solid var(--cs-separator);
    border-radius: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: none;
}

.gallery-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--cs-shadow);
}

.gallery-card .card-img-top {
    height: 240px;
    object-fit: cover;
    background-color: var(--cs-light-gray);
}

.gallery-card .card-body {
    padding: 1.25rem 1.5rem;
}

.gallery-card .card-title {
    font-family: var(--cs-font-heading);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--cs-text);
    letter-spacing: 0.08em;
}

.gallery-card .card-text {
    color: var(--cs-text-muted);
    font-size: 0.875rem;
}

.gallery-card .badge-fabric {
    background-color: transparent;
    color: var(--cs-gold);
    font-weight: 500;
    font-size: 0.6875rem;
    padding: 0.3em 0.65em;
    border-radius: 0;
    border: 1px solid var(--cs-gold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.wizard-steps {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 3rem;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.wizard-step {
    display: flex;
    align-items: center;
    position: relative;
}

.wizard-step + .wizard-step::before {
    content: '';
    width: 48px;
    height: 1px;
    background-color: var(--cs-medium-gray);
    margin: 0 0.5rem;
}

.wizard-step + .wizard-step.active::before,
.wizard-step + .wizard-step.completed::before {
    background-color: var(--cs-gold);
}

.wizard-step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--cs-light-gray);
    color: var(--cs-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 0.8125rem;
    transition: all 0.3s ease;
}

.wizard-step.active .wizard-step-circle {
    background-color: var(--cs-gold);
    color: var(--cs-white);
    box-shadow: 0 0 0 4px var(--cs-gold-glow);
}

.wizard-step.completed .wizard-step-circle {
    background-color: var(--cs-green);
    color: var(--cs-white);
}

.wizard-step-label {
    font-size: 0.6875rem;
    color: var(--cs-text-muted);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    margin-top: 0.5rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.wizard-step.active .wizard-step-label {
    color: var(--cs-gold);
    font-weight: 500;
}

.wizard-step.completed .wizard-step-label {
    color: var(--cs-green);
    font-weight: 500;
}

@media (max-width: 575.98px) {
    .wizard-step + .wizard-step::before {
        width: 24px;
        margin: 0 0.25rem;
    }

    .wizard-step-circle {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .wizard-step-label {
        font-size: 0.625rem;
    }
}

.configurator-accordion .accordion-item {
    border: 1px solid var(--cs-separator);
    margin-bottom: 0.5rem;
    border-radius: 0 !important;
    overflow: hidden;
    background: var(--cs-card-bg);
    box-shadow: none;
}

.configurator-accordion .accordion-button {
    font-family: var(--cs-font-heading);
    font-weight: 500;
    color: var(--cs-text);
    background-color: var(--cs-card-bg);
    padding: 1rem 1.25rem;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.configurator-accordion .accordion-button:not(.collapsed) {
    background-color: var(--cs-card-bg);
    color: var(--cs-text);
    box-shadow: none;
    border-bottom: 1px solid var(--cs-separator);
}

.configurator-accordion .accordion-button:focus {
    box-shadow: 0 0 0 3px var(--cs-gold-glow);
    border-color: transparent;
}

.configurator-accordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23AAAAAA'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.configurator-accordion .accordion-body {
    padding: 1.75rem;
}

.form-control,
.form-select {
    border-color: rgba(0, 0, 0, 0.15);
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    border-radius: 0;
    background-color: var(--cs-card-bg);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--cs-gold);
    box-shadow: 0 0 0 4px var(--cs-gold-glow);
}

.form-label {
    font-weight: 500;
    font-size: 0.75rem;
    color: var(--cs-text-secondary);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Toggle-switch and checkbox labels — Bootstrap leaves these uncoloured so
   they fall back to the user-agent default (black). Bind to the body text
   variable so they re-tint correctly in both themes. */
.form-check-label {
    color: var(--cs-text);
}

/* Detail-card value text — used for bare `<div>` value renderings inside
   info cards (e.g. invoice details). Explicitly binding to --cs-text means
   they re-tint in dark mode without relying on cascade luck. */
.detail-value {
    color: var(--cs-text);
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--cs-text-muted);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--cs-green);
}

.invalid {
    outline: 1px solid var(--cs-red);
}

.validation-message {
    color: var(--cs-red);
    font-size: 0.8125rem;
    margin-top: 0.25rem;
    font-weight: 400;
}

.testimonial-card {
    background: var(--cs-card-bg);
    border-radius: 0;
    padding: 2.5rem;
    box-shadow: var(--cs-shadow-sm);
    position: relative;
    border: 1px solid var(--cs-separator);
}

.testimonial-card::before {
    content: '\201C';
    font-family: var(--cs-font-heading);
    font-size: 4rem;
    color: var(--cs-gold);
    position: absolute;
    top: 0.5rem;
    left: 1.25rem;
    line-height: 1;
    opacity: 0.4;
}

.testimonial-card .testimonial-text {
    font-style: italic;
    color: var(--cs-text);
    font-size: 0.9375rem;
    line-height: 1.7;
    padding-left: 0.75rem;
    font-weight: 300;
}

.testimonial-card .testimonial-author {
    font-weight: 500;
    color: var(--cs-text);
    font-size: 0.8125rem;
    margin-top: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.testimonial-card .testimonial-role {
    color: var(--cs-text-muted);
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
}

.footer-cs {
    background: var(--cs-footer-bg, #0E1723);
    color: var(--cs-footer-text, rgba(255, 255, 255, 0.5));
    padding: 4rem 0 1.5rem;
    position: relative;
    z-index: 0;
}

.footer-cs h5 {
    color: var(--cs-gold);
    font-family: var(--cs-font-heading);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 1rem;
}

.footer-cs a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 0.875rem;
}

.footer-cs a:hover {
    color: var(--cs-gold-light);
    opacity: 1;
}

.footer-cs .footer-brand {
    font-family: var(--cs-font-heading);
    font-size: 0.875rem;
    color: var(--cs-gold);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.footer-cs .footer-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 2rem;
    padding-top: 1.25rem;
}

.footer-cs .footer-bottom {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 0.04em;
}

.text-gold {
    color: var(--cs-gold) !important;
}

.text-navy {
    color: var(--cs-black) !important;
}

.bg-navy {
    background-color: var(--cs-black) !important;
}

.bg-gold {
    background-color: var(--cs-gold) !important;
}

.border-gold {
    border-color: var(--cs-gold) !important;
}

.content {
    padding-top: 0;
    position: relative;
    z-index: 1;
}

.progress {
    border-radius: 0;
    height: 4px;
    background-color: var(--cs-light-gray);
    overflow: hidden;
}

.progress-bar {
    border-radius: 0;
    background-color: var(--cs-gold);
}

.container-fluid, .container {
}

.shadow-sm {
    box-shadow: var(--cs-shadow-sm) !important;
}

.shadow {
    box-shadow: var(--cs-shadow) !important;
}

.input-group .form-control,
.input-group .form-select {
    border-radius: 0;
}

.input-group-text {
    background-color: var(--cs-light-gray);
    border-color: rgba(0, 0, 0, 0.15);
    font-size: 0.875rem;
    color: var(--cs-text-muted);
    border-radius: 0;
}

.dropdown-menu {
    border: 1px solid var(--cs-separator);
    border-radius: 0;
    box-shadow: var(--cs-shadow-lg);
    padding: 0.375rem;
    background: var(--cs-card-bg);
}

.dropdown-item {
    border-radius: 0;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--cs-light-gray);
}

.dropdown-item.active {
    background-color: var(--cs-black);
    color: var(--cs-white);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #8B2500;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: 0;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

@media (max-width: 575.98px) {
    .section-padding {
        padding: 3rem 0;
    }

    .section-title {
        font-size: 1.25rem;
    }

    .section-subtitle {
        font-size: 0.875rem;
    }
}

@media (max-width: 767.98px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.fabric-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 0;
}

.fabric-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--cs-shadow) !important;
}

.fabric-card-img {
    transition: opacity 0.3s ease;
}

.fabric-card:hover .fabric-card-img {
    opacity: 0.95;
}

.style-option-card {
    border: 1px solid var(--cs-separator);
    border-radius: 0;
    transition: all 0.3s ease;
    overflow: hidden;
}

.style-option-card:hover {
    border-color: var(--cs-gold);
    box-shadow: 0 0 0 1px var(--cs-gold);
    transform: translateY(-2px);
}

.style-option-card.selected {
    border-color: var(--cs-gold);
    background-color: var(--cs-gold-glow);
    box-shadow: 0 0 0 2px var(--cs-gold), var(--cs-shadow-sm);
}

.style-option-card .card-img-top {
    border-bottom: 1px solid var(--cs-separator);
}

.style-option-card.selected .card-img-top {
    border-bottom-color: var(--cs-gold);
}

.style-option-card .card-body {
    min-height: 0;
}

/* Force modals and their backdrops above the sticky topnav (z-index 1040)
   and the mobile menu layer (1041). Our custom ConfirmationModal renders
   without Bootstrap's JS, so we can't rely on the default runtime z-index
   bump — nail it down explicitly here. !important so per-modal inline
   styles can't accidentally underrun the topnav. */
.modal.show.d-block,
.modal.fade.show {
    z-index: 1070 !important;
}

.modal-backdrop,
.modal-backdrop.show {
    z-index: 1065 !important;
}

/* Reserve room for the sticky 60px topnav. Even though the modal renders at
   z-index 1070 (above the navbar's 1040), modal headers used to LAND inside
   the navbar's opaque visual footprint — so on mobile the close X and any
   header-side buttons were physically unreachable. Top-padding the .modal
   container pushes the dialog below the navbar in every layout (centered or
   not, single screen or scrolling). */
.modal {
    padding-top: 4.5rem !important; /* navbar 60px + ~12px breathing room */
}

/* Fullscreen modal variants need the dialog itself to keep its top edge
   below the navbar — the dialog is min-height: 100% which would otherwise
   ignore the parent padding. */
.modal-fullscreen,
.modal-fullscreen-sm-down,
.modal-fullscreen-md-down {
    padding-top: 0 !important;
}
.modal-fullscreen .modal-dialog,
.modal-fullscreen-sm-down .modal-dialog,
.modal-fullscreen-md-down .modal-dialog {
    margin-top: 4.5rem;
    height: calc(100% - 4.5rem);
}

/* Section title used inside admin/edit modals to group related fields. Brass
   underline keeps the editorial language consistent with the rest of the
   admin surface. */
.cs-section-title {
    font-family: var(--cs-font-heading, 'Jost', sans-serif);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cs-text-muted);
    margin: 0 0 0.85rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--cs-brass, #c5a55a);
}

[data-theme="dark"] .cs-section-title { color: #BDB4A3; }

/* Mobile-friendly price-levels table inside the catalog item modal. Below
   576px each <tr> stacks as a small card with labelled cells, so the table
   doesn't horizontally scroll a 5-column grid on a phone. */
@media (max-width: 575.98px) {
    .price-levels-stack table,
    .price-levels-stack thead,
    .price-levels-stack tbody,
    .price-levels-stack tr,
    .price-levels-stack th,
    .price-levels-stack td {
        display: block;
        width: 100%;
    }
    .price-levels-stack thead { display: none; }
    .price-levels-stack tr {
        border: 1px solid var(--cs-separator);
        border-radius: 0.4rem;
        margin-bottom: 0.6rem;
        padding: 0.6rem 0.75rem;
    }
    .price-levels-stack td {
        border: none;
        padding: 0.3rem 0;
        text-align: left !important;
    }
    .price-levels-stack td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.65rem;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--cs-text-muted);
        margin-bottom: 0.1rem;
    }
}

.modal-content {
    border: none;
    border-radius: 0;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.15), 0 8px 24px rgba(0, 0, 0, 0.06);
    background: var(--cs-card-bg);
}

.modal-header {
    border-bottom: 1px solid var(--cs-separator);
    padding: 1.25rem 1.5rem;
}

.modal-body {
    padding: 1.75rem;
}

.modal-footer {
    border-top: 1px solid var(--cs-separator);
    padding: 1.125rem 1.5rem;
}

.modal-backdrop.show {
    opacity: 0.4;
}

.modal .d-flex.gap-1 img {
    transition: opacity 0.3s ease, border-color 0.3s ease;
    border-radius: 0;
}

.modal .d-flex.gap-1 img:hover {
    opacity: 1 !important;
}

.spinner-border {
    width: 2rem;
    height: 2rem;
    border-width: 0.2em;
}

.list-group-item {
    border-color: var(--cs-separator);
    padding: 0.875rem 1rem;
    border-radius: 0;
}

.form-select-sm {
    border-radius: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.35rem 2rem 0.35rem 0.75rem;
}

/* ============================================================
   DARK MODE — INK NAVY VARIANT
   A genuine second mode, not a token flip. Ink navy field
   + warm cream text + brass accent. Feels like an evening
   companion to the paper mode.
   ============================================================ */
html[data-theme="dark"] {
    --cs-ink:            #0E1723;
    --cs-black:          #0B121C;
    --cs-navy:           #0B121C;
    --cs-navy-light:     #121B29;
    --cs-white:          #F3ECDF;
    --cs-paper:          #0E1723;
    --cs-light-gray:     #1A2332;
    --cs-medium-gray:    #4A5468;
    --cs-text:           #EDE4D2;
    --cs-text-secondary: #BDB4A3;
    --cs-text-muted:     #7B7668;
    --cs-separator:      rgba(237, 228, 210, 0.08);
    --cs-grouped-bg:     #0E1723;
    --cs-card-bg:        #15202F;
    --cs-beige:          #1F2A3B;
    --cs-cream:          #1F2A3B;
    --cs-stone:          #263447;
    --cs-sand:           #35445C;
    --cs-brown:          #35445C;

    /* Brass reads warmer + slightly brighter against ink */
    --cs-brass:          #C9A66B;
    --cs-brass-light:    #DCBB82;
    --cs-brass-dark:     #A88548;
    --cs-brass-glow:     rgba(201, 166, 107, 0.16);
    --cs-gold:           var(--cs-brass);
    --cs-gold-light:     var(--cs-brass-light);
    --cs-gold-dark:      var(--cs-brass-dark);
    --cs-gold-glow:      var(--cs-brass-glow);

    --cs-taupe:          #9A8A78;
    --cs-oxblood:        #B03333;
    --cs-accent:         var(--cs-brass);
    --cs-accent-light:   var(--cs-brass-light);
    --cs-accent-dark:    var(--cs-brass-dark);

    --cs-charcoal:       #EDE4D2;
    --cs-espresso:       #35445C;
    --cs-shadow-sm:      0 1px 4px rgba(0, 0, 0, 0.45);
    --cs-shadow:         0 4px 24px rgba(0, 0, 0, 0.55);
    --cs-shadow-lg:      0 18px 56px rgba(0, 0, 0, 0.65);
    --cs-comment-admin:  #4A8FE0;
    --cs-comment-user:   #1A2332;
    --cs-comment-internal: rgba(201, 166, 107, 0.14);
    --cs-footer-bg:      #080E17;
    --cs-footer-text:    rgba(237, 228, 210, 0.45);

    /* Slightly stronger grain against dark backgrounds */
    --cs-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.88 0 0 0 0 0.72 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    --cs-ruler: repeating-linear-gradient(
        to right,
        var(--cs-brass) 0 1px,
        transparent 1px 8px
    );

    color-scheme: dark;
}

/* In dark mode the hero masthead is a deep ink field with a
   single brass ghost monogram — quiet, evening tone. */
html[data-theme="dark"] .hero-section {
    background:
        linear-gradient(112deg, rgba(14, 23, 35, 0.92) 0%, rgba(21, 32, 47, 0.7) 50%, rgba(11, 18, 28, 0.95) 100%),
        linear-gradient(160deg, #0E1723 0%, #152033 50%, #0B121C 100%);
}
html[data-theme="dark"] .hero-section::after {
    color: var(--cs-brass);
    opacity: 0.09;
}

html[data-theme="dark"] .table-light {
    --bs-table-bg: #1A2332;
    --bs-table-border-color: rgba(237, 228, 210, 0.08);
    color: #EDE4D2;
}

html[data-theme="dark"] .table {
    --bs-table-color: #EDE4D2;
    --bs-table-color-state: #EDE4D2;
    --bs-table-bg: transparent;
    --bs-table-striped-bg: #121B29;
    --bs-table-striped-color: #EDE4D2;
    --bs-table-hover-bg: #1F2A3B;
    --bs-table-hover-color: #EDE4D2;
    --bs-table-active-bg: #263447;
    --bs-table-active-color: #EDE4D2;
    color: #EDE4D2;
}

/* Force every cell inside a dark-mode table to inherit the theme color so
   Bootstrap's stateful overrides (striped/hover/active rows) and explicit
   tbody td rules don't accidentally render as black on dark. Targeted cells
   using `text-muted`, `text-danger`, etc. still keep their utility color. */
html[data-theme="dark"] .table > :not(caption) > * > *:not(.text-muted):not(.text-danger):not(.text-warning):not(.text-success):not(.text-info):not(.text-primary):not(.text-secondary):not(.text-white):not(.text-dark) {
    color: #EDE4D2;
}

html[data-theme="dark"] .table thead th {
    color: #BDB4A3;
    border-bottom-color: rgba(237, 228, 210, 0.2);
}

/* Bootstrap's `.text-muted` hardcodes a mid-gray that stays too dim on a
   dark background — bump the contrast a notch in dark mode. */
html[data-theme="dark"] .table .text-muted {
    color: #BDB4A3 !important;
}

/* Light-mode safety: explicitly reinforce the default dark text color on
   tables so downstream overrides (e.g. Bootstrap striped-bg on brand-gold
   rows) can't leak white text into a light-bg cell. */
html:not([data-theme="dark"]) .table {
    --bs-table-color: #1E1C19;
    --bs-table-striped-color: #1E1C19;
    --bs-table-hover-color: #1E1C19;
    --bs-table-active-color: #1E1C19;
}


html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-striped-bg: #121B29;
    color: #EDE4D2;
}

html[data-theme="dark"] .bg-light {
    background-color: #1A2332 !important;
}

html[data-theme="dark"] .bg-white {
    background-color: #15202F !important;
}

html[data-theme="dark"] .bg-body-tertiary {
    background-color: #1A2332 !important;
}

html[data-theme="dark"] .text-dark {
    color: #EDE4D2 !important;
}

html[data-theme="dark"] .text-body {
    color: #EDE4D2 !important;
}

html[data-theme="dark"] .text-muted {
    color: #7B7668 !important;
}

html[data-theme="dark"] .text-secondary {
    color: #7B7668 !important;
}

html[data-theme="dark"] .border {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .border-bottom {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .border-top {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .alert-success {
    background-color: rgba(45, 106, 79, 0.12);
    color: #4CAF7D;
    border-left-color: #2D6A4F;
}

html[data-theme="dark"] .alert-danger {
    background-color: rgba(139, 37, 0, 0.12);
    color: #D4613E;
    border-left-color: #8B2500;
}

html[data-theme="dark"] .alert-warning {
    background-color: rgba(140, 122, 104, 0.12);
    color: #A89888;
    border-left-color: #8C7A68;
}

html[data-theme="dark"] .alert-info {
    background-color: rgba(61, 50, 41, 0.2);
    color: #A89888;
    border-left-color: #3D3229;
}

html[data-theme="dark"] .alert-light {
    background-color: #15202F;
    color: #EDE4D2;
    border-left-color: #4A5468;
}

html[data-theme="dark"] .topnav {
    background: #121B29;
    border-color: rgba(237, 228, 210, 0.08);
}

html[data-theme="dark"] .topnav-brand-text {
    color: #EDE4D2;
}

html[data-theme="dark"] .topnav-link {
    color: #7B7668;
}

html[data-theme="dark"] .topnav-link:hover {
    background: transparent;
    color: #EDE4D2;
}

html[data-theme="dark"] .topnav-link.active {
    color: #EDE4D2;
    border-bottom-color: #EDE4D2;
}

html[data-theme="dark"] .topnav-toggle {
    color: #EDE4D2;
}

html[data-theme="dark"] .topnav-icon-btn {
    color: #7B7668;
}

html[data-theme="dark"] .topnav-icon-btn:hover {
    background: rgba(237, 228, 210, 0.04);
    color: #EDE4D2;
}

html[data-theme="dark"] .topnav-separator {
    background: rgba(237, 228, 210, 0.08);
}

html[data-theme="dark"] .topnav-mobile-overlay {
    background: rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .topnav-mobile-menu {
    background: #121B29;
    border-color: rgba(237, 228, 210, 0.08);
}

html[data-theme="dark"] .topnav-mobile-link {
    color: #7B7668;
}

html[data-theme="dark"] .topnav-mobile-link:hover {
    background: rgba(237, 228, 210, 0.04);
    color: #EDE4D2;
}

html[data-theme="dark"] .topnav-mobile-link.active {
    background: transparent;
    color: #EDE4D2;
    border-left-color: #EDE4D2;
}

html[data-theme="dark"] .topnav-mobile-divider {
    border-color: rgba(237, 228, 210, 0.08);
}

html[data-theme="dark"] .topnav-link-cta {
    color: #0B121C !important;
}

html[data-theme="dark"] .hero-section {
    background: linear-gradient(160deg, #0B121C 0%, #121B29 40%, #15202F 100%);
}

html[data-theme="dark"] .hero-tagline {
    color: #EDE4D2;
}

html[data-theme="dark"] .hero-subtitle {
    color: #7B7668;
}

html[data-theme="dark"] .modal-content {
    background-color: #15202F;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .modal-header {
    border-color: rgba(237, 228, 210, 0.08);
}

html[data-theme="dark"] .modal-footer {
    border-color: rgba(237, 228, 210, 0.08);
}

html[data-theme="dark"] .modal-backdrop.show {
    opacity: 0.55;
}

html[data-theme="dark"] .dropdown-menu {
    background-color: #15202F;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    border-color: rgba(237, 228, 210, 0.08);
}

html[data-theme="dark"] .dropdown-item {
    color: #EDE4D2;
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background-color: #1F2A3B;
    color: #EDE4D2;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
    background-color: #1A2332;
    border-color: rgba(237, 228, 210, 0.12);
    color: #EDE4D2;
}

html[data-theme="dark"] .form-control::placeholder {
    color: #4A5468;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    background-color: #1A2332;
    border-color: var(--cs-gold);
    box-shadow: 0 0 0 4px var(--cs-gold-glow);
}

html[data-theme="dark"] .form-check-input {
    background-color: #1F2A3B;
    border-color: #4A5468;
}

html[data-theme="dark"] .form-check-input:checked {
    background-color: var(--cs-gold);
    border-color: var(--cs-gold);
}

html[data-theme="dark"] .input-group-text {
    background-color: #1A2332;
    border-color: rgba(237, 228, 210, 0.12);
    color: #7B7668;
}

html[data-theme="dark"] .form-label {
    color: #BDB4A3;
}

html[data-theme="dark"] .form-check-label {
    color: var(--cs-text);
}

html[data-theme="dark"] .footer-cs {
    background-color: #080E17;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
    color: #EDE4D2;
}

html[data-theme="dark"] .section-title {
    color: #EDE4D2;
}

html[data-theme="dark"] p {
    color: #BDB4A3;
}

html[data-theme="dark"] .btn-primary {
    background-color: #EDE4D2;
    border-color: #EDE4D2;
    color: #0B121C;
}

html[data-theme="dark"] .btn-primary:hover {
    background-color: #F8F1DF;
    border-color: #F8F1DF;
    color: #080E17;
}

html[data-theme="dark"] .btn-outline-secondary {
    color: #7B7668;
    border-color: #4A5468;
}

html[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: rgba(237, 228, 210, 0.06);
    color: #EDE4D2;
}

html[data-theme="dark"] .btn-outline-primary {
    color: #EDE4D2;
    border-color: #EDE4D2;
}

html[data-theme="dark"] .btn-outline-primary:hover {
    background-color: #EDE4D2;
    color: #0B121C;
    border-color: #EDE4D2;
}

html[data-theme="dark"] .btn-outline-danger {
    color: #D4613E;
    border-color: #D4613E;
}

html[data-theme="dark"] .btn-gold {
    color: #0B121C;
    background-color: var(--cs-gold);
    border-color: var(--cs-gold);
}

html[data-theme="dark"] .btn-gold:hover,
html[data-theme="dark"] .btn-gold:focus {
    color: #0B121C;
    background-color: var(--cs-gold-light);
    border-color: var(--cs-gold-light);
}

html[data-theme="dark"] .btn-success {
    background-color: #2D6A4F;
    border-color: #2D6A4F;
    color: #FFFFFF;
}

html[data-theme="dark"] .btn-danger {
    background-color: #8B2500;
    border-color: #8B2500;
    color: #FFFFFF;
}

html[data-theme="dark"] .btn-outline-danger:hover {
    background-color: #8B2500;
    border-color: #8B2500;
    color: #FFFFFF;
}

html[data-theme="dark"] .btn-info {
    background-color: var(--cs-gold-dark);
    border-color: var(--cs-gold-dark);
    color: #FFFFFF;
}

html[data-theme="dark"] .btn-outline-gold {
    color: var(--cs-gold-light);
    border-color: var(--cs-gold-light);
}

html[data-theme="dark"] .btn-outline-gold:hover,
html[data-theme="dark"] .btn-outline-gold:focus {
    color: #0B121C;
    background-color: var(--cs-gold-light);
    border-color: var(--cs-gold-light);
}

html[data-theme="dark"] .accordion-item {
    background-color: #121B29;
    border-color: rgba(237, 228, 210, 0.08);
}

html[data-theme="dark"] .accordion-button {
    background-color: #121B29;
    color: #EDE4D2;
}

html[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: #121B29;
    color: #EDE4D2;
    border-bottom-color: rgba(237, 228, 210, 0.08);
}

html[data-theme="dark"] .accordion-button::after {
    filter: invert(0.7);
}

html[data-theme="dark"] .accordion-body {
    background-color: #121B29;
    color: #BDB4A3;
}

html[data-theme="dark"] .badge.bg-light {
    background-color: #1F2A3B !important;
    color: #EDE4D2 !important;
}

html[data-theme="dark"] .badge.text-dark {
    color: #EDE4D2 !important;
}

html[data-theme="dark"] .list-group-item {
    background-color: #121B29;
    border-color: rgba(237, 228, 210, 0.08);
    color: #EDE4D2;
}

html[data-theme="dark"] .list-group-item-action:hover {
    background-color: #15202F;
    color: #EDE4D2;
}

html[data-theme="dark"] .card {
    border-color: rgba(237, 228, 210, 0.06);
}

html[data-theme="dark"] .card-header {
    /* Bootstrap's default card-cap background is rgba(0,0,0,0.03) which
       reads as a brighter band on a dark card. Pin to the card surface
       and inherit text colour so plain card headers (no bg-* override)
       stay legible on dark themes. */
    background-color: transparent;
    color: var(--cs-text);
    border-bottom-color: rgba(237, 228, 210, 0.08);
}

html[data-theme="dark"] .card-footer {
    background-color: #121B29;
    border-top-color: rgba(237, 228, 210, 0.08);
}

/* Plain tables (no table-light/table-dark modifier) ship with Bootstrap's
   default body colour and a transparent thead — on dark backgrounds the
   thead row was rendering as a hairline-thin light band. Force both the
   body and the thead to follow our dark-mode palette. */
html[data-theme="dark"] .table {
    --bs-table-color: #EDE4D2;
    --bs-table-bg: transparent;
    --bs-table-border-color: rgba(237, 228, 210, 0.08);
    --bs-table-striped-bg: rgba(237, 228, 210, 0.03);
    --bs-table-hover-bg: rgba(237, 228, 210, 0.05);
    color: #EDE4D2;
}

html[data-theme="dark"] .table > :not(caption) > * > * {
    background-color: var(--bs-table-bg);
    color: inherit;
    border-bottom-color: var(--bs-table-border-color);
}

html[data-theme="dark"] .table > thead {
    background-color: #15202F;
}

html[data-theme="dark"] .table > thead > tr > th {
    background-color: #15202F;
    color: #EDE4D2;
    border-bottom-color: rgba(237, 228, 210, 0.12);
    font-weight: 600;
}

/* Subtle-tinted callouts (bg-info bg-opacity-10, bg-warning bg-opacity-10)
   read as nearly-white panels on dark themes because the alpha sits on top
   of Bootstrap's near-white default. Re-anchor the underlying colour so
   the tint composites onto the dark surface instead. */
html[data-theme="dark"] .bg-info.bg-opacity-10,
html[data-theme="dark"] .bg-warning.bg-opacity-10,
html[data-theme="dark"] .bg-success.bg-opacity-10,
html[data-theme="dark"] .bg-danger.bg-opacity-10,
html[data-theme="dark"] .bg-primary.bg-opacity-10 {
    background-color: rgba(237, 228, 210, 0.05) !important;
    color: var(--cs-text);
}

/* Bare <div>/<dd>/<dt>/<small>/<span> elements inside cards inherit the
   body colour by default. Bootstrap doesn't set explicit colours on these
   so on dark themes they sometimes paint as the legacy near-black. Force
   them to inherit the theme text colour wherever they live inside a card. */
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .card-body * {
    color: var(--cs-text);
}

/* Don't flatten coloured utility classes — let .text-muted / .text-success /
   .text-danger / .text-warning / .text-primary / .text-info keep their
   semantic foreground. Same for badges and links. */
html[data-theme="dark"] .card-body .text-muted { color: #7B7668 !important; }
html[data-theme="dark"] .card-body .text-success { color: #6FB573 !important; }
html[data-theme="dark"] .card-body .text-danger { color: #E58A8A !important; }
html[data-theme="dark"] .card-body .text-warning { color: #E5C16E !important; }
html[data-theme="dark"] .card-body .text-info { color: #8AC4D8 !important; }
html[data-theme="dark"] .card-body .text-primary { color: #C5A55A !important; }
html[data-theme="dark"] .card-body a { color: #C5A55A; }
html[data-theme="dark"] .card-body .badge { color: inherit; }

html[data-theme="dark"] .card .fw-bold,
html[data-theme="dark"] .card .fw-semibold {
    color: #EDE4D2;
}

html[data-theme="dark"] .card .text-muted {
    color: #7B7668 !important;
}

html[data-theme="dark"] .card .text-warning {
    color: #f0c040 !important;
}

html[data-theme="dark"] .card .text-danger {
    color: #e74c3c !important;
}

html[data-theme="dark"] .badge.bg-secondary {
    background-color: #444 !important;
    color: #eee !important;
}

/* Dark-mode .badge.bg-warning: inherit transparent-with-cs-orange from the
   base rule at ~L2027. The previous `color: #000 !important;` override made
   warning pills render black-on-dark (unreadable). If a consumer slaps
   `.text-dark` on a `.badge.bg-warning` (e.g. old NavMenu PRO badge), this
   extra rule makes sure dark-mode still wins with a visible accent. */
html[data-theme="dark"] .badge.bg-warning,
html[data-theme="dark"] .badge.bg-warning.text-dark {
    color: var(--cs-orange) !important;
    border-color: var(--cs-orange);
}

html[data-theme="dark"] .border-primary {
    border-color: var(--cs-gold) !important;
}

html[data-theme="dark"] .feature-card .feature-icon {
    background: #35353A;
}

html[data-theme="dark"] .gallery-card .card-img-top {
    background-color: #1F2A3B;
}

html[data-theme="dark"] .gallery-card .card-title {
    color: #F2EFEF;
}

html[data-theme="dark"] .style-option-card {
    border-color: rgba(255, 255, 255, 0.08);
    background: #0E1723;
}

html[data-theme="dark"] .style-option-card:hover {
    border-color: var(--cs-gold);
}

html[data-theme="dark"] .style-option-card.selected {
    background-color: var(--cs-gold-glow);
}

html[data-theme="dark"] .wizard-step-circle {
    background-color: #1F2A3B;
    color: #BDB4A3;
}

html[data-theme="dark"] .progress {
    background-color: #1F2A3B;
}

html[data-theme="dark"] .nav-tabs {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .nav-tabs .nav-link {
    color: #BDB4A3;
}

html[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: #0E1723;
    border-color: rgba(255, 255, 255, 0.08) rgba(255, 255, 255, 0.08) #0E1723;
    color: #F2EFEF;
}

html[data-theme="dark"] .nav-pills .nav-link {
    color: #BDB4A3;
}

html[data-theme="dark"] .nav-pills .nav-link:hover {
    color: var(--cs-gold-light);
    background-color: var(--cs-gold-glow);
}

html[data-theme="dark"] .nav-pills .nav-link.active {
    background: var(--cs-black);
    color: #F2EFEF;
    box-shadow: none;
}

html[data-theme="dark"] .page-link {
    background-color: #0E1723;
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--cs-gold);
}

html[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--cs-gold);
    border-color: var(--cs-gold);
    color: #0B121C;
}

html[data-theme="dark"] .page-item.disabled .page-link {
    background-color: #0E1723;
    color: #7B7668;
}

html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: #7B7668;
}

html[data-theme="dark"] .breadcrumb-item a {
    color: var(--cs-gold);
}

html[data-theme="dark"] .breadcrumb-item.active {
    color: #BDB4A3;
}

html[data-theme="dark"] .toast {
    background-color: #1F2A3B;
    border-color: rgba(255, 255, 255, 0.08);
    color: #F2EFEF;
}

html[data-theme="dark"] .toast-header {
    background-color: #35353A;
    border-bottom-color: rgba(255, 255, 255, 0.08);
    color: #F2EFEF;
}

html[data-theme="dark"] code {
    color: #D4613E;
}

html[data-theme="dark"] pre {
    background-color: #1F2A3B;
    color: #F2EFEF;
}

html[data-theme="dark"] ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #0B121C;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #35353A;
    border-radius: 0;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #4A5468;
}

.display-6 {
    font-family: var(--cs-font-heading);
    color: var(--cs-text);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
}

.nav-pills .nav-link {
    color: var(--cs-text-secondary);
    border-radius: 0;
    padding: 0.6rem 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.nav-pills .nav-link:hover {
    color: var(--cs-gold);
    background-color: var(--cs-gold-glow);
}

.nav-pills .nav-link.active {
    color: var(--cs-white);
    background: var(--cs-black);
    box-shadow: none;
    border-radius: 0;
}

.container .card {
    border-radius: 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.admin-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.admin-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--cs-shadow) !important;
}

.form-floating > .form-control {
    border-radius: 0;
    border-color: rgba(0, 0, 0, 0.15);
}

.form-floating > .form-control:focus {
    border-color: var(--cs-gold);
    box-shadow: 0 0 0 4px var(--cs-gold-glow);
}

.form-floating > label {
    color: var(--cs-text-muted);
}

html[data-theme="dark"] .form-floating > .form-control {
    background-color: #1F2A3B;
    border-color: rgba(255, 255, 255, 0.12);
    color: #F2EFEF;
}

html[data-theme="dark"] .form-floating > label {
    color: #BDB4A3;
}

.badge.bg-primary {
    background: transparent !important;
    color: var(--cs-black) !important;
    border: 1px solid var(--cs-black);
}

.badge.bg-success {
    background: transparent !important;
    color: var(--cs-green) !important;
    border: 1px solid var(--cs-green);
}

.badge.bg-danger {
    background: transparent !important;
    color: var(--cs-red) !important;
    border: 1px solid var(--cs-red);
}

.badge.bg-warning {
    background: transparent !important;
    color: var(--cs-orange) !important;
    border: 1px solid var(--cs-orange);
}

.badge.bg-info {
    background: transparent !important;
    color: var(--cs-brown) !important;
    border: 1px solid var(--cs-brown);
}

/* Bootstrap's secondary palette ships with white text on a gray background.
   Our global .badge rule kills the background, which leaves white-on-paper
   in light mode. Re-bind to the muted body text colour so qty pills (and
   any other secondary chip) read correctly. The dark-mode override further
   below stays as-is. */
.badge.bg-secondary {
    background: transparent !important;
    color: var(--cs-text-muted) !important;
    border: 1px solid var(--cs-text-muted);
}

/* Light-mode safety net — bg-light / bg-white badges without an explicit
   foreground class render white-on-white when a caller slapped `.text-white`
   on them (e.g. copy-pasted from a dark context). Force readable dark text
   in light mode; dark-mode rules above already handle the inverse. */
html:not([data-theme="dark"]) .badge.bg-light,
html:not([data-theme="dark"]) .badge.bg-white,
html:not([data-theme="dark"]) .badge.bg-light.text-white,
html:not([data-theme="dark"]) .badge.bg-white.text-white {
    color: var(--cs-text, #1a1a1a) !important;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

/* Extra belt-and-braces: status pills using the `text-white` utility with any
   pale background (warning, info, light) should still be legible. */
html:not([data-theme="dark"]) .badge.bg-warning.text-white {
    color: var(--cs-orange, #b36b00) !important;
}
html:not([data-theme="dark"]) .badge.bg-info.text-white {
    color: var(--cs-brown, #5a3d1a) !important;
}

html[data-theme="dark"] .badge.bg-primary {
    color: #F2EFEF !important;
    border-color: #F2EFEF;
}

html[data-theme="dark"] .badge.bg-info {
    color: var(--cs-gold) !important;
    border-color: var(--cs-gold);
}

/* `bg-dark` badges (used for Closed status, Factory role, etc.) become
   black-on-near-black in dark mode without this override. Light mode is
   fine — Bootstrap defaults give white text on #212529. */
html[data-theme="dark"] .badge.bg-dark {
    background-color: #3A3835 !important;
    color: #EDE4D2 !important;
    border-color: #555 !important;
}

/* `bg-success` / `bg-danger` badges in light mode are restyled to
   transparent + colored text by the global rules above. Make sure dark
   mode keeps the same legible accent-on-dark treatment (Bootstrap's
   default green/red bg with white text is fine, but we re-state for
   parity with the bg-primary/bg-info dark overrides). */
html[data-theme="dark"] .badge.bg-success {
    color: var(--cs-green) !important;
    border-color: var(--cs-green);
}

html[data-theme="dark"] .badge.bg-danger {
    color: var(--cs-red) !important;
    border-color: var(--cs-red);
}

/* `bg-white` and `text-white` standalone (non-badge) chips/pills.
   White-on-white in light mode is unreadable; in dark mode white-on-dark
   is fine. We only need a light-mode guard for `bg-white`. */
.rounded-pill.bg-white,
.badge.bg-white {
    background-color: var(--cs-cream, #F5F1EA) !important;
    color: var(--cs-black, #1a1a1a) !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

html[data-theme="dark"] .rounded-pill.bg-white,
html[data-theme="dark"] .badge.bg-white {
    background-color: #3A3835 !important;
    color: #EDE4D2 !important;
    border-color: #555 !important;
}

.border-start.border-4.border-warning {
    border-color: var(--cs-orange) !important;
}

.border-start.border-4.border-danger {
    border-color: var(--cs-red) !important;
}

.border-start.border-4.border-success {
    border-color: var(--cs-green) !important;
}

.border-start.border-4.border-info {
    border-color: var(--cs-brown) !important;
}

.card-header {
    border-bottom: 1px solid var(--cs-separator);
}

html[data-theme="dark"] .card-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.container .card.shadow-sm {
    box-shadow: var(--cs-shadow-sm);
}


html[data-theme="dark"] .list-group-item {
    background-color: var(--cs-card-bg);
    border-color: rgba(255, 255, 255, 0.08);
    color: #F2EFEF;
}

html[data-theme="dark"] .input-group-text {
    background-color: #35353A;
    border-color: rgba(255, 255, 255, 0.08);
    color: #F2EFEF;
}

html[data-theme="dark"] .alert-success {
    background-color: rgba(45, 106, 79, 0.15);
    border-left-color: #2D6A4F;
    color: #4CAF7D;
}

html[data-theme="dark"] .alert-danger {
    background-color: rgba(139, 37, 0, 0.15);
    border-left-color: #8B2500;
    color: #D4613E;
}

.badge.rounded-pill {
    font-weight: 500;
    font-size: 0.6875rem;
    padding: 0.35em 0.75em;
    border-radius: 0;
}

.form-check-input:checked {
    background-color: var(--cs-gold);
    border-color: var(--cs-gold);
}

.form-check-input:focus {
    border-color: var(--cs-gold-light);
    box-shadow: 0 0 0 0.25rem var(--cs-gold-glow);
}

html[data-theme="dark"] .border {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .border-start {
    border-color: inherit !important;
}

.text-danger {
    color: var(--cs-red) !important;
}

.bg-primary.bg-opacity-10 {
    background-color: rgba(0, 0, 0, 0.06) !important;
}

.bg-success.bg-opacity-10 {
    background-color: rgba(45, 106, 79, 0.1) !important;
}

.bg-warning.bg-opacity-10 {
    background-color: rgba(159, 132, 83, 0.1) !important;
}

.bg-danger.bg-opacity-10 {
    background-color: rgba(139, 37, 0, 0.1) !important;
}

.bg-info.bg-opacity-10 {
    background-color: rgba(69, 54, 48, 0.1) !important;
}

html[data-theme="dark"] .bg-primary.bg-opacity-10 {
    background-color: rgba(242, 239, 239, 0.08) !important;
}

html[data-theme="dark"] .bg-success.bg-opacity-10 {
    background-color: rgba(45, 106, 79, 0.15) !important;
}

html[data-theme="dark"] .bg-warning.bg-opacity-10 {
    background-color: rgba(159, 132, 83, 0.15) !important;
}

html[data-theme="dark"] .bg-danger.bg-opacity-10 {
    background-color: rgba(139, 37, 0, 0.15) !important;
}

html[data-theme="dark"] .bg-info.bg-opacity-10 {
    background-color: rgba(69, 54, 48, 0.15) !important;
}

hr {
    border-color: var(--cs-separator);
    opacity: 1;
}

html[data-theme="dark"] hr {
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .app-main {
    background-color: #0B121C;
}

/* ═══════════════════════════════════════════════════════════
   ADMIN SIDEBAR
   ═══════════════════════════════════════════════════════════ */

.admin-layout {
    display: flex;
    min-height: calc(100vh - 200px);
}

.admin-sidebar {
    width: 240px;
    flex-shrink: 0;
    background: var(--cs-card-bg);
    border-right: 1px solid var(--cs-separator);
    padding: var(--cs-spacing-md) 0;
    position: sticky;
    top: 65px;
    height: calc(100vh - 65px);
    overflow-y: auto;
    transition: width 0.25s ease, padding 0.25s ease;
    z-index: 10;
}

.admin-sidebar.collapsed {
    width: 60px;
}

.admin-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.5rem;
    border: none;
    background: transparent;
    color: var(--cs-text-muted);
    cursor: pointer;
    transition: color 0.2s ease;
    margin-bottom: var(--cs-spacing-sm);
}

.admin-sidebar-toggle:hover {
    color: var(--cs-gold);
}

.admin-sidebar-group {
    margin-bottom: var(--cs-spacing-md);
}

.admin-sidebar-group-label {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--cs-text-muted);
    padding: 0 var(--cs-spacing-md);
    margin-bottom: var(--cs-spacing-xs);
}

.collapsed .admin-sidebar-group-label {
    display: none;
}

.admin-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem var(--cs-spacing-md);
    color: var(--cs-text-secondary);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    white-space: nowrap;
    overflow: hidden;
}

.admin-sidebar-link:hover {
    color: var(--cs-gold);
    background: var(--cs-gold-glow);
}

.admin-sidebar-link.active {
    color: var(--cs-gold);
    border-left-color: var(--cs-gold);
    background: var(--cs-gold-glow);
    font-weight: 600;
}

.admin-sidebar-link i {
    font-size: 1rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.collapsed .admin-sidebar-link {
    justify-content: center;
    padding: 0.75rem;
    gap: 0;
}

.collapsed .admin-sidebar-link span {
    display: none;
}

.admin-content {
    flex: 1;
    min-width: 0;
    padding: var(--cs-spacing-lg);
}

/* Admin sidebar responsive */
@media (max-width: 991.98px) {
    .admin-sidebar {
        position: fixed;
        left: -260px;
        top: 65px;
        height: calc(100vh - 65px);
        z-index: 1035;
        box-shadow: var(--cs-shadow-lg);
        transition: left 0.3s ease;
    }

    .admin-sidebar.mobile-open {
        left: 0;
    }

    .admin-sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        top: 65px;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1034;
    }

    .admin-sidebar-overlay.active {
        display: block;
    }

    .admin-content {
        padding: var(--cs-spacing-md);
        width: 100%;
    }

    .admin-layout {
        flex-direction: column;
    }
}

@media (min-width: 992px) {
    .admin-mobile-toggle {
        display: none !important;
    }

    .admin-sidebar-overlay {
        display: none !important;
    }
}

/* Dark mode admin sidebar */
html[data-theme="dark"] .admin-sidebar {
    background: #0E1723;
    border-right-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .admin-sidebar-link {
    color: #BDB4A3;
}

html[data-theme="dark"] .admin-sidebar-link:hover {
    color: var(--cs-gold-light);
    background: var(--cs-gold-glow);
}

html[data-theme="dark"] .admin-sidebar-link.active {
    color: var(--cs-gold-light);
    border-left-color: var(--cs-gold-light);
    background: var(--cs-gold-glow);
}

html[data-theme="dark"] .admin-sidebar-overlay.active {
    background: rgba(0, 0, 0, 0.6);
}

/* ═══════════════════════════════════════════════════════════
   PAGE HEADER
   ═══════════════════════════════════════════════════════════ */

.page-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--cs-spacing-sm);
    margin-bottom: var(--cs-spacing-lg);
}

.page-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE TABLES — CSS-ONLY STACKED CARDS ON MOBILE
   ═══════════════════════════════════════════════════════════
   Usage: Add .table-stacked to the <table>, and data-label="Column"
   to each <td>. On mobile, rows become stacked cards with labels.
*/

@media (max-width: 767.98px) {
    .table-stacked thead {
        display: none;
    }

    .table-stacked tbody tr {
        display: block;
        background: var(--cs-card-bg);
        border: 1px solid var(--cs-separator);
        margin-bottom: var(--cs-spacing-sm);
        padding: var(--cs-spacing-sm) var(--cs-spacing-md);
    }

    .table-stacked tbody tr:hover {
        box-shadow: var(--cs-shadow-sm);
    }

    .table-stacked tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.375rem 0;
        border: none;
        text-align: right;
        font-size: 0.875rem;
    }

    .table-stacked tbody td::before {
        content: attr(data-label);
        font-size: 0.6875rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--cs-text-muted);
        text-align: left;
        flex-shrink: 0;
        margin-right: var(--cs-spacing-sm);
    }

    /* Hide cells with no label (e.g., thumbnail or checkbox columns) */
    .table-stacked tbody td[data-label=""] {
        display: none;
    }

    /* Full-width cells for actions */
    .table-stacked tbody td.td-actions {
        justify-content: flex-end;
        padding-top: var(--cs-spacing-xs);
        margin-top: 0.25rem;
        border-top: 1px solid var(--cs-separator);
    }

    .table-stacked tbody td.td-actions::before {
        display: none;
    }
}

/* Toggle for explicit desktop/mobile sections (AdminOrders custom cards) */
.table-desktop {
    display: block;
}

.cards-mobile {
    display: none;
}

@media (max-width: 767.98px) {
    .table-desktop {
        display: none;
    }

    .cards-mobile {
        display: block;
    }
}

.mobile-order-card {
    border: 1px solid var(--cs-separator);
    padding: var(--cs-spacing-md);
    margin-bottom: var(--cs-spacing-sm);
    background: var(--cs-card-bg);
    transition: box-shadow 0.2s ease;
}

.mobile-order-card:hover {
    box-shadow: var(--cs-shadow-sm);
}

.mobile-order-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--cs-spacing-xs);
}

.mobile-order-card-row {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
    font-size: 0.875rem;
}

.mobile-order-card-row .label {
    color: var(--cs-text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.mobile-order-card-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: var(--cs-spacing-sm);
    padding-top: var(--cs-spacing-sm);
    border-top: 1px solid var(--cs-separator);
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE IMPROVEMENTS
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {
    .btn {
        padding: 0.625rem 1.25rem;
        font-size: 0.75rem;
        letter-spacing: 0.12em;
    }

    .btn-sm {
        padding: 0.375rem 0.75rem;
        font-size: 0.6875rem;
    }

    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-header-actions {
        width: 100%;
    }

    .table thead th {
        font-size: 0.625rem;
    }
}

/* ================================================================
   FACTORY — Pipeline Pills & Gallery
   ================================================================ */
.factory-pipeline-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.factory-pipeline {
    white-space: nowrap;
    padding: 0.25rem 0;
}

.factory-pill {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    border-radius: 2rem;
    border: 1px solid var(--cs-medium-gray);
    color: var(--cs-text-muted);
    background: transparent;
    white-space: nowrap;
}

.factory-pill.active {
    background: var(--cs-gold);
    color: #fff;
    border-color: var(--cs-gold);
    font-weight: 600;
}

.factory-pill.past {
    color: var(--cs-green);
    border-color: var(--cs-green);
}

.factory-pill-sep {
    color: var(--cs-medium-gray);
    font-size: 0.6rem;
}

.factory-info-value {
    color: var(--cs-text);
}

.factory-gallery-img {
    width: 100%;
    height: 234px;
    object-fit: cover;
}

@media (min-width: 768px) {
    .factory-gallery-img {
        height: 286px;
    }
}

.factory-fabric-card .card-body .small div {
    line-height: 1.6;
}

html[data-theme="dark"] .factory-pill {
    border-color: #4A5468;
    color: #BDB4A3;
}

html[data-theme="dark"] .factory-pill.active {
    background: var(--cs-gold);
    color: #fff;
    border-color: var(--cs-gold);
}

html[data-theme="dark"] .factory-pill.past {
    color: #4caf50;
    border-color: #4caf50;
}

html[data-theme="dark"] .factory-info-value {
    color: #F2EFEF;
}

html[data-theme="dark"] .factory-order-header .fw-bold,
html[data-theme="dark"] .factory-order-header .fs-5 {
    color: #F2EFEF;
}

/* ================================================================
   LAZY IMAGE LOADING
   ================================================================ */
img[data-src] {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

img.lazy-loaded {
    opacity: 1;
}

/* ================================================================
   PRINT STYLES — Factory Pages
   ================================================================ */
@media print {
    /* Hide non-printable UI elements */
    .topnav,
    .sidebar,
    .nav-pills,
    .btn,
    .spinner-border,
    .alert-dismissible .btn-close,
    .form-check-input,
    .form-select,
    footer,
    [data-no-print],
    .modal,
    .modal-backdrop,
    .offcanvas,
    .offcanvas-backdrop,
    .popover,
    .tooltip,
    .bi-arrow-left,
    .alert {
        display: none !important;
    }

    /* Hide scrollbars in print */
    * {
        overflow: visible !important;
        scrollbar-width: none !important;
    }
    *::-webkit-scrollbar {
        display: none !important;
    }

    /* Full-width layout */
    body {
        font-size: 11pt;
        color: #000 !important;
        background: #fff !important;
    }

    .container-fluid,
    .container {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Cards print as bordered sections */
    .card {
        border: 1px solid #999 !important;
        box-shadow: none !important;
        break-inside: avoid;
        margin-bottom: 0.5rem !important;
    }

    .card-header {
        background: #eee !important;
        border-bottom: 1px solid #999 !important;
        padding: 0.25rem 0.5rem !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .card-body {
        padding: 0.5rem !important;
    }

    /* Badges print with borders instead of color fills */
    .badge {
        border: 1px solid #333 !important;
        color: #000 !important;
        background: transparent !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Tables */
    .table {
        font-size: 10pt;
    }

    .table th,
    .table td {
        border-color: #999 !important;
        padding: 0.2rem 0.4rem !important;
    }

    /* Factory pipeline — compact for print */
    .factory-pipeline-wrap {
        overflow: visible;
    }

    .factory-pill {
        font-size: 8pt;
        padding: 0.1rem 0.4rem;
    }

    /* Order header — compact for print, order # top-right */
    .factory-order-header {
        border: 2px solid #000 !important;
    }

    .factory-order-header .card-body {
        padding: 4px 8px !important;
    }

    .factory-order-header .fs-5 {
        font-size: 13pt !important;
        font-weight: bold !important;
    }

    .factory-order-header .factory-order-number {
        font-size: 13pt !important;
    }

    .factory-order-header .factory-info-row {
        gap: 1rem !important;
        font-size: 10pt;
        margin-top: 2px !important;
    }

    .factory-info-value {
        color: #000 !important;
    }

    .display-6 {
        font-size: 14pt !important;
    }

    h4, h5 {
        font-size: 12pt !important;
    }

    /* Monogram preview — preserve colors */
    .monogram-preview {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Measurements — MUST be visible and large for factory floor */
    .factory-print {
        break-inside: avoid;
    }

    .factory-print .card-body {
        padding: 0.25rem !important;
    }

    .measurements-display .measurement-value,
    .factory-print .measurement-value {
        font-size: 14pt !important;
        font-weight: bold !important;
        color: #000 !important;
    }

    .measurements-display .measurement-label,
    .factory-print .measurement-label {
        font-size: 9pt;
        color: #333 !important;
    }

    /* Measurement tables — ensure visible in print */
    .measurements-display table {
        border-collapse: collapse;
        width: 100%;
    }

    .measurements-display table th,
    .measurements-display table td {
        border: 1px solid #999 !important;
        padding: 2px 6px !important;
        font-size: 11pt;
        color: #000 !important;
    }

    .measurements-display table td:last-child {
        font-weight: bold;
        font-size: 13pt;
    }

    /* Gallery images — smaller in print */
    .factory-gallery-img {
        height: 100px !important;
    }

    /* Constrain all card images for compact print layout */
    .card-body img {
        max-height: 80px !important;
        max-width: 100% !important;
        object-fit: cover;
    }

    /* Review stage fabric cards — compact for print */
    .card-img-top {
        height: 80px !important;
        object-fit: cover;
    }

    /* Safety net — any <img> not already sized (e.g. customer-uploaded fabric
       photos rendered outside a .card-body / .card-img-top) must not blow up
       to full page width when the user prints. max-height caps tall images
       while leaving small inline-sized thumbs (e.g. 32×32) alone. */
    img {
        max-width: 100% !important;
        max-height: 160px !important;
        object-fit: cover;
    }

    /* Explicit override for the rare logo/branding case where print should
       use the logo at its configured 50px height (see .logo-area img). */
    .company-info .logo-area img,
    .header img.logo {
        max-height: 60px !important;
    }

    /* Prevent card splitting across pages */
    .card.mb-3,
    .card.mb-2,
    .factory-fabric-card {
        break-inside: avoid;
    }

    /* Compact style detail rows */
    .row.g-2.small,
    .row.g-3.small {
        font-size: 9pt;
    }

    /* Page breaks */
    .page-break-before {
        break-before: page;
    }

    .page-break-after {
        break-after: page;
    }

    /* Hide mobile-only elements */
    .d-md-none {
        display: none !important;
    }

    /* Show desktop table on print */
    .d-none.d-md-block {
        display: block !important;
    }

    /* Collar designer — print static result only */
    .collar-designer .collar-opt-btn {
        display: none !important;
    }

    .collar-designer .collar-code {
        font-size: 18pt !important;
        font-weight: bold;
    }

    /* Box assignment cards */
    .border-primary {
        border-color: #333 !important;
    }
}

/* ============================================================
   InfoFlyout Component
   ============================================================ */

.info-flyout {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    outline: none;
    vertical-align: middle;
}

.info-flyout-trigger {
    color: var(--cs-accent, var(--cs-gold));
    font-size: 0.8125rem;
    margin-left: 0.375rem;
    transition: color 0.2s ease;
    opacity: 0.6;
}

.info-flyout:hover .info-flyout-trigger {
    opacity: 1;
    color: var(--cs-accent-dark, var(--cs-gold-dark));
}

.info-flyout-panel {
    position: absolute;
    z-index: 1060;
    background: var(--cs-card-bg);
    border: 1px solid var(--cs-separator);
    box-shadow: var(--cs-shadow-lg);
    padding: 1.25rem;
    font-size: 0.8125rem;
    line-height: 1.7;
    animation: flyoutIn 0.15s ease-out;
}

@keyframes flyoutIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.info-flyout-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    color: var(--cs-text-muted);
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
}

.info-flyout-close:hover {
    color: var(--cs-text);
}

.info-flyout-right {
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
}

.info-flyout-left {
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
}

.info-flyout-above {
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
}

.info-flyout-below {
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
}

.info-flyout-sm { width: 200px; }
.info-flyout-md { width: 280px; }
.info-flyout-lg { width: 360px; }

.info-flyout-title {
    font-family: var(--cs-font-heading);
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cs-accent, var(--cs-gold));
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    padding-right: 1.5rem;
    border-bottom: 1px solid var(--cs-separator);
}

.info-flyout-body {
    color: var(--cs-text-secondary);
    font-weight: 300;
}

.info-flyout-link {
    display: inline-block;
    margin-top: 0.75rem;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cs-accent, var(--cs-gold));
    font-weight: 500;
}

.info-flyout-link:hover {
    color: var(--cs-accent-dark, var(--cs-gold-dark));
}

.info-flyout-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1059;
}

@media (max-width: 767.98px) {
    .info-flyout-panel {
        position: fixed;
        left: 0 !important;
        right: 0 !important;
        /* Honor optional --cs-phase-nav-h so a sticky bottom nav isn't covered */
        bottom: var(--cs-phase-nav-h, 0) !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        max-height: 60vh;
        overflow-y: auto;
        border-left: none;
        border-right: none;
        border-bottom: none;
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
        padding: 1.5rem 1.25rem 1.25rem;
        z-index: 1060;
        animation: flyoutSlideUp 0.2s ease-out;
    }

    .info-flyout-panel::before {
        content: "";
        display: block;
        position: absolute;
        top: 0.45rem;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: var(--bs-secondary-bg, #d1d5db);
        opacity: 0.8;
    }

    @keyframes flyoutSlideUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    .info-flyout-backdrop {
        background: rgba(0, 0, 0, 0.3);
    }
}

/* ============================================================
   Our Craft — Editorial Process Page
   ============================================================ */

.craft-section {
    padding: 7rem 0;
}

.craft-step-number {
    font-family: var(--cs-font-heading);
    font-size: 4rem;
    font-weight: 300;
    color: var(--cs-accent, var(--cs-gold));
    letter-spacing: 0.1em;
    line-height: 1;
    opacity: 0.4;
    margin-bottom: 1.5rem;
}

.craft-headline {
    font-family: var(--cs-font-heading);
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cs-text);
    margin-bottom: 0.5rem;
}

.craft-body {
    font-size: 0.9375rem;
    line-height: 2;
    color: var(--cs-text-muted);
    max-width: 420px;
    letter-spacing: 0.02em;
    font-weight: 300;
}

.craft-image-placeholder {
    background: var(--cs-stone, var(--cs-beige));
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cs-separator);
}

.craft-image-label {
    font-size: 0.6875rem;
    letter-spacing: 0.15em;
    color: var(--cs-text-muted);
    text-transform: uppercase;
    font-weight: 400;
}

.craft-divider {
    width: 40px;
    height: 1px;
    background-color: var(--cs-accent, var(--cs-gold));
    border: none;
    margin: 1.5rem 0;
}

.section-bg-navy .craft-headline {
    color: #FFFFFF;
}

.section-bg-navy .craft-body {
    color: rgba(255, 255, 255, 0.65);
}

.section-bg-navy .craft-image-placeholder {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.section-bg-navy .craft-image-label {
    color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 767.98px) {
    .craft-section {
        padding: 4rem 0;
    }

    .craft-step-number {
        font-size: 2.5rem;
    }

    .craft-body {
        max-width: 100%;
    }

    .craft-image-placeholder {
        min-height: 250px;
        margin-top: 2rem;
    }
}

/* ============================================================
   The Cesario Codex — Knowledge Base Page
   ============================================================ */

.codex-hero {
    padding: 5rem 0 4rem;
    text-align: center;
}

.codex-hero-title {
    font-family: var(--cs-font-heading);
    font-size: 2.5rem;
    font-weight: 300;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #FFFFFF;
    margin-bottom: 0.25rem;
}

.codex-hero-subtitle {
    font-family: var(--cs-font-heading);
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.codex-nav {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--cs-separator);
    background: var(--cs-card-bg);
    position: sticky;
    top: 56px;
    z-index: 1030;
}

.codex-nav-btn {
    background: none;
    border: none;
    font-family: var(--cs-font-heading);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cs-text-muted);
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    transition: color 0.2s ease;
    border-bottom: 2px solid transparent;
}

.codex-nav-btn:hover {
    color: var(--cs-text);
}

.codex-nav-btn.active {
    color: var(--cs-text);
    border-bottom-color: var(--cs-accent, var(--cs-gold));
}

.codex-section {
    padding: 4rem 0;
}

.codex-group-title {
    font-family: var(--cs-font-heading);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--cs-accent, var(--cs-gold));
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--cs-separator);
}

.codex-measurement-card {
    background: var(--cs-card-bg);
    border: 1px solid var(--cs-separator);
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: box-shadow 0.2s ease;
}

.codex-measurement-card:hover {
    box-shadow: var(--cs-shadow-sm);
}

.codex-measurement-name {
    font-family: var(--cs-font-heading);
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cs-text);
    margin-bottom: 0.5rem;
}

.codex-measurement-body {
    font-size: 0.8125rem;
    line-height: 1.7;
    color: var(--cs-text-secondary);
    font-weight: 300;
}

.codex-tip {
    font-size: 0.75rem;
    color: var(--cs-accent, var(--cs-gold));
    margin-top: 0.5rem;
    font-weight: 400;
}

.codex-tip::before {
    content: "TIP: ";
    font-weight: 600;
    letter-spacing: 0.05em;
}

.codex-mistake {
    font-size: 0.75rem;
    color: var(--cs-red);
    margin-top: 0.25rem;
    font-weight: 400;
}

.codex-mistake::before {
    content: "AVOID: ";
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* Style Profile Cards */
.codex-profile-card {
    background: var(--cs-card-bg);
    border: 1px solid var(--cs-separator);
    padding: 2rem;
    margin-bottom: 1.5rem;
    transition: box-shadow 0.2s ease;
}

.codex-profile-card:hover {
    box-shadow: var(--cs-shadow);
}

.codex-profile-name {
    font-family: var(--cs-font-heading);
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cs-text);
    margin-bottom: 0.25rem;
}

.codex-profile-vibes {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cs-accent, var(--cs-gold));
    margin-bottom: 1rem;
    font-weight: 500;
}

.codex-profile-desc {
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--cs-text-secondary);
    font-weight: 300;
    margin-bottom: 1.25rem;
}

.codex-profile-signature {
    font-size: 0.75rem;
    font-style: italic;
    color: var(--cs-text-muted);
    padding-top: 0.75rem;
    border-top: 1px solid var(--cs-separator);
    margin-top: 1rem;
}

.codex-profile-recs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.codex-rec-item {
    font-size: 0.75rem;
    color: var(--cs-text-secondary);
    font-weight: 300;
}

.codex-rec-label {
    display: block;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cs-text-muted);
    font-weight: 500;
    margin-bottom: 0.125rem;
}

.codex-profile-occasions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.codex-occasion-tag {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--cs-separator);
    color: var(--cs-text-muted);
    font-weight: 400;
}

/* Shirt Anatomy Cards */
.codex-anatomy-card {
    background: var(--cs-card-bg);
    border: 1px solid var(--cs-separator);
    padding: 1.5rem;
    height: 100%;
}

.codex-anatomy-name {
    font-family: var(--cs-font-heading);
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cs-text);
    margin-bottom: 0.5rem;
}

.codex-anatomy-desc {
    font-size: 0.8125rem;
    line-height: 1.7;
    color: var(--cs-text-secondary);
    font-weight: 300;
    margin-bottom: 0.75rem;
}

.codex-anatomy-options {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem 0;
}

.codex-anatomy-options li {
    font-size: 0.75rem;
    color: var(--cs-text-muted);
    padding: 0.25rem 0;
    padding-left: 0.75rem;
    border-left: 2px solid var(--cs-separator);
    font-weight: 300;
}

.codex-anatomy-tip {
    font-size: 0.75rem;
    color: var(--cs-accent, var(--cs-gold));
    font-weight: 400;
    font-style: italic;
}

@media (max-width: 767.98px) {
    .codex-hero-title {
        font-size: 1.75rem;
    }

    .codex-nav {
        overflow-x: auto;
        justify-content: flex-start;
        padding: 1rem;
        -webkit-overflow-scrolling: touch;
    }

    .codex-nav-btn {
        white-space: nowrap;
        flex-shrink: 0;
    }

    .codex-profile-recs {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================================
   Logo Showcase (Admin)
   ============================================================ */

.logo-showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}

.logo-showcase-card {
    border: 1px solid var(--cs-separator);
    padding: 2.5rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.logo-showcase-card svg {
    max-width: 100%;
    height: auto;
}

.logo-showcase-card.bg-dark-preview {
    background: var(--cs-black);
    color: var(--cs-white);
}

.logo-showcase-card.bg-light-preview {
    background: var(--cs-white);
    color: var(--cs-black);
}

.logo-showcase-card.bg-accent-preview {
    background: var(--cs-stone, var(--cs-beige));
    color: var(--cs-espresso, var(--cs-brown));
}

.logo-showcase-small svg {
    max-height: 40px;
}

.logo-showcase-large svg {
    max-height: 200px;
}

/* ============================================================================
   ============================================================================

     EDITORIAL DESIGN SYSTEM — APPENDIX
     These utilities, escape-hatches, and typography classes extend the
     existing palette without changing any current component's class names.

   ============================================================================
   ============================================================================ */

/* ============================================================
   1. EDITORIAL TYPOGRAPHY
   ============================================================ */

.display-serif {
    font-family: var(--cs-font-display);
    font-weight: 300;
    letter-spacing: -0.02em;
    text-transform: none;
    font-variation-settings: "opsz" 144;
}

.editorial-display {
    font-family: var(--cs-font-display);
    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 300;
    line-height: 1.02;
    letter-spacing: -0.02em;
    text-transform: none;
    font-variation-settings: "opsz" 144;
}

.editorial-h1 {
    font-family: var(--cs-font-display);
    font-size: clamp(2.25rem, 4.5vw, 3.5rem);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.015em;
    text-transform: none;
    font-variation-settings: "opsz" 96;
}

.editorial-h2 {
    font-family: var(--cs-font-display);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.01em;
    text-transform: none;
}

.editorial-lead {
    font-family: var(--cs-font-body);
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--cs-text-secondary);
    letter-spacing: 0;
}

.editorial-italic {
    font-style: italic;
    color: var(--cs-brass-dark);
}

/* ============================================================
   2. TEXTILE MATERIAL LANGUAGE
   ============================================================ */

/* Paper grain overlay — apply to hero, dark sections, feature panels */
.has-grain {
    position: relative;
    isolation: isolate;
}
.has-grain::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--cs-grain);
    background-size: 220px;
    opacity: 0.5;
    pointer-events: none;
    mix-blend-mode: multiply;
    z-index: 0;
}
.has-grain > * { position: relative; z-index: 1; }

html[data-theme="dark"] .has-grain::before {
    mix-blend-mode: screen;
    opacity: 0.4;
}

/* Tick-ruler divider — editorial reference to shirt measurement */
.ruler-divider {
    display: block;
    width: 120px;
    height: 6px;
    background: var(--cs-ruler);
    background-repeat: repeat-x;
    background-position: center;
    border: none;
    margin: 1.5rem 0;
}

.ruler-divider--center { margin-left: auto; margin-right: auto; }
.ruler-divider--wide   { width: 180px; }
.ruler-divider--full   { width: 100%; opacity: 0.7; }

/* Stitched dashed border — used to mark selected configurator options */
.stitch-border {
    border: 1px dashed var(--cs-brass);
    background-clip: padding-box;
}

.style-option-card.selected {
    border: 1px dashed var(--cs-brass) !important;
    box-shadow: inset 0 0 0 2px var(--cs-paper), 0 0 0 1px var(--cs-brass);
}

/* ============================================================
   3. MONOGRAM MARK (brand moment)
   ============================================================ */

.monogram-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--cs-brass);
    border-radius: 50%;
    font-family: var(--cs-font-display);
    font-weight: 400;
    font-style: italic;
    font-size: 1.1rem;
    color: var(--cs-brass-dark);
    background: transparent;
    letter-spacing: 0;
    transition: background var(--dur-editorial) var(--ease-soft),
                color var(--dur-editorial) var(--ease-soft),
                transform var(--dur-luxury) var(--ease-luxury);
    flex-shrink: 0;
}

.monogram-mark:hover {
    background: var(--cs-brass);
    color: var(--cs-white);
    transform: rotate(-6deg);
}

html[data-theme="dark"] .monogram-mark {
    color: var(--cs-brass-light);
    border-color: var(--cs-brass-light);
}

/* ============================================================
   4. OXBLOOD — critical CTA / deep accent
   ============================================================ */

.btn-oxblood {
    color: var(--cs-white);
    background-color: var(--cs-oxblood);
    border: 2px solid var(--cs-oxblood);
    letter-spacing: 0.22em;
}

.btn-oxblood:hover,
.btn-oxblood:focus {
    background-color: var(--cs-oxblood-dark);
    border-color: var(--cs-oxblood-dark);
    color: var(--cs-white);
}

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

.btn-outline-oxblood:hover,
.btn-outline-oxblood:focus {
    background-color: var(--cs-oxblood);
    color: var(--cs-white);
}

.text-oxblood { color: var(--cs-oxblood) !important; }

/* ============================================================
   5. MOTION RHYTHM
   ============================================================ */

/* Marketing / editorial — slower, more deliberate */
.hero-section *,
.feature-card,
.section-title,
.testimonial-card,
.gallery-card,
.codex-profile-card,
.craft-section * {
    transition-timing-function: var(--ease-luxury);
}

/* Staggered reveal helpers (optional opt-in via class) */
.reveal-on-load {
    animation: editorial-reveal var(--dur-luxury) var(--ease-luxury) both;
}
.reveal-delay-1 { animation-delay: 0.08s; }
.reveal-delay-2 { animation-delay: 0.16s; }
.reveal-delay-3 { animation-delay: 0.24s; }
.reveal-delay-4 { animation-delay: 0.32s; }
.reveal-delay-5 { animation-delay: 0.40s; }

@media (prefers-reduced-motion: reduce) {
    .reveal-on-load,
    .hero-eyebrow,
    .hero-tagline,
    .hero-subtitle,
    .hero-divider,
    .hero-section .d-flex.gap-3 {
        animation: none !important;
    }
    * { transition: none !important; }
}

/* ============================================================
   6. DENSE UI — admin / factory / data-heavy escape hatch
   -----------------------------------------------------------
   Applied by the .dense-ui class (or .admin-layout which now
   inherits .dense-ui semantics). Undoes editorial uppercase +
   tracking so operators can scan data quickly.
   ============================================================ */

.dense-ui,
.admin-layout,
.factory-pipeline-wrap {
    --cs-section-padding: 1.25rem;
}

.dense-ui h1, .dense-ui h2, .dense-ui h3, .dense-ui h4,
.admin-layout h1, .admin-layout h2, .admin-layout h3, .admin-layout h4 {
    font-family: var(--cs-font-heading);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    font-variation-settings: normal;
}

.dense-ui h1, .admin-layout h1 { font-size: 1.5rem; line-height: 1.3; }
.dense-ui h2, .admin-layout h2 { font-size: 1.25rem; line-height: 1.3; }
.dense-ui h3, .admin-layout h3 { font-size: 1.0625rem; }
.dense-ui h4, .admin-layout h4 { font-size: 0.9375rem; }

.dense-ui h5, .admin-layout h5,
.dense-ui h6, .admin-layout h6 {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.dense-ui .btn, .admin-layout .btn {
    min-height: 34px;
    padding: 0.4rem 1rem;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: none;
    font-weight: 500;
}

.dense-ui .btn-sm, .admin-layout .btn-sm {
    min-height: 28px;
    padding: 0.25rem 0.65rem;
    font-size: 0.75rem;
}

.dense-ui .btn-lg, .admin-layout .btn-lg {
    min-height: 42px;
    padding: 0.55rem 1.25rem;
    font-size: 0.875rem;
}

.dense-ui .card-header, .admin-layout .card-header {
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 600;
}

.dense-ui .card-body, .admin-layout .card-body {
    padding: 1rem 1.125rem;
}

.dense-ui .table, .admin-layout .table {
    font-size: 0.8125rem;
}

.dense-ui .table thead th,
.admin-layout .table thead th {
    text-transform: none;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    color: var(--cs-text-secondary);
    font-weight: 600;
}

.dense-ui .table > :not(caption) > * > *,
.admin-layout .table > :not(caption) > * > * {
    padding: 0.55rem 0.75rem;
}

.dense-ui .form-label, .admin-layout .form-label {
    font-size: 0.75rem;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 500;
    color: var(--cs-text-secondary);
    margin-bottom: 0.35rem;
}

.dense-ui .form-control,
.dense-ui .form-select,
.admin-layout .form-control,
.admin-layout .form-select {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.dense-ui .badge, .admin-layout .badge {
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    text-transform: none;
    font-weight: 500;
    padding: 0.3em 0.55em;
}

.dense-ui .nav-pills .nav-link,
.admin-layout .nav-pills .nav-link {
    letter-spacing: 0.02em;
    text-transform: none;
    padding: 0.45rem 0.85rem;
    font-size: 0.8125rem;
}

.dense-ui *, .admin-layout * {
    transition-duration: var(--dur-ui);
    transition-timing-function: var(--ease-snap);
}

.dense-ui .card:hover, .admin-layout .card:hover {
    transform: none;
    box-shadow: var(--cs-shadow-sm);
}

/* Dense-mode buttons keep focus ring but lose the uppercase swagger */
.dense-ui .btn-primary,
.admin-layout .btn-primary {
    letter-spacing: 0.02em;
}

/* ============================================================
   7. EDITORIAL NAV — monogram brand upgrade
   ============================================================ */

.topnav-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 1px solid var(--cs-brass);
    border-radius: 50%;
    background: transparent;
    font-family: var(--cs-font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 1.25rem;
    color: var(--cs-brass-dark);
    transition: background var(--dur-editorial) var(--ease-soft),
                color var(--dur-editorial) var(--ease-soft);
}

.topnav-brand:hover .topnav-brand-mark {
    background: var(--cs-brass);
    color: var(--cs-white);
}

html[data-theme="dark"] .topnav-brand-mark {
    color: var(--cs-brass-light);
    border-color: var(--cs-brass-light);
}

/* Brand wordmark — editorial serif */
.topnav-brand-wordmark {
    font-family: var(--cs-font-display);
    font-weight: 400;
    font-size: 1.0625rem;
    letter-spacing: 0.04em;
    color: var(--cs-text);
    text-transform: none;
    line-height: 1;
}

.topnav-brand-subline {
    display: block;
    font-family: var(--cs-font-heading);
    font-size: 0.5625rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--cs-text-muted);
    margin-top: 0.15rem;
}

/* ============================================================
   8. TESTIMONIAL REFINEMENT (serif quote, deeper breath)
   ============================================================ */

.testimonial-card {
    background: var(--cs-card-bg);
    border: 1px solid var(--cs-separator);
    border-radius: 0;
    padding: 3rem 2.5rem 2rem;
    box-shadow: var(--cs-shadow-sm);
    position: relative;
    transition: box-shadow var(--dur-luxury) var(--ease-luxury);
}

.testimonial-card::before {
    content: '\201C';
    font-family: var(--cs-font-display) !important;
    font-weight: 300;
    font-style: italic;
    font-size: 6rem;
    color: var(--cs-brass);
    position: absolute;
    top: -0.75rem;
    left: 1.25rem;
    line-height: 1;
    opacity: 0.5;
}

.testimonial-card .testimonial-text {
    font-family: var(--cs-font-display);
    font-style: italic;
    font-weight: 300;
    color: var(--cs-text);
    font-size: 1.0625rem;
    line-height: 1.7;
    padding-left: 0;
    letter-spacing: -0.005em;
}

.testimonial-card .testimonial-author {
    font-family: var(--cs-font-heading);
    font-weight: 500;
    color: var(--cs-text);
    font-size: 0.75rem;
    margin-top: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.testimonial-card .testimonial-role {
    font-family: var(--cs-font-body);
    color: var(--cs-text-muted);
    font-size: 0.8125rem;
    letter-spacing: 0;
    margin-top: 0.25rem;
}

/* ============================================================
   9. FOOTER REFINEMENT (wordmark serif)
   ============================================================ */

.footer-cs .footer-brand {
    font-family: var(--cs-font-display);
    font-size: 1.25rem;
    font-weight: 400;
    font-style: italic;
    color: var(--cs-brass-light);
    letter-spacing: 0.04em;
    text-transform: none;
}

/* ============================================================
   10. BUTTON REFINEMENT — reduce shout-volume outside marketing
   ============================================================ */

.btn-gold {
    color: var(--cs-white);
    background-color: var(--cs-brass);
    border-color: var(--cs-brass);
    font-weight: 500;
    letter-spacing: 0.22em;
    transition: background-color var(--dur-editorial) var(--ease-soft),
                border-color var(--dur-editorial) var(--ease-soft),
                transform var(--dur-luxury) var(--ease-luxury);
}

.btn-gold:hover,
.btn-gold:focus {
    color: var(--cs-white);
    background-color: var(--cs-brass-dark);
    border-color: var(--cs-brass-dark);
    transform: translateY(-1px);
}

.btn-outline-gold {
    color: var(--cs-brass-dark);
    border: 1px solid var(--cs-brass);
    letter-spacing: 0.22em;
    background: transparent;
}

.btn-outline-gold:hover,
.btn-outline-gold:focus {
    color: var(--cs-white);
    background-color: var(--cs-brass);
    border-color: var(--cs-brass);
}

/* ============================================================
   11. LINK — subtle brass underline reveal
   ============================================================ */

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.topnav-link):not(.footer-cs a):not(.topnav-brand):not(.topnav-mobile-link) {
    background-image: linear-gradient(var(--cs-brass), var(--cs-brass));
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    transition: background-size var(--dur-editorial) var(--ease-luxury),
                color var(--dur-editorial) var(--ease-soft);
}

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.topnav-link):not(.footer-cs a):not(.topnav-brand):not(.topnav-mobile-link):hover {
    background-size: 100% 1px;
}

/* ═══════════════════════════════════════════════════════════
   BACK-OFFICE BUTTON + UTILITY VARIANTS
   The global .btn uses uppercase + 0.2em tracking + 48px min-height — right
   for editorial brand CTAs, heavy for dense admin / factory surfaces. These
   scoped overrides keep the brand look on marketing pages while giving the
   back-office a normal-cased, compact button and a few shared utilities that
   replace repeated inline styles throughout .razor pages.
   ═══════════════════════════════════════════════════════════ */

.admin-layout .btn,
.factory-view .btn {
    letter-spacing: 0.02em;
    text-transform: none;
    min-height: 38px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.admin-layout .btn-lg,
.factory-view .btn-lg {
    min-height: 44px;
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
}

.admin-layout .btn-sm,
.factory-view .btn-sm {
    min-height: 32px;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

/* Shared utility replacements for common inline styles. */
.badge-filter-count {
    background-color: var(--cs-gold) !important;
    color: var(--cs-white) !important;
    border-color: var(--cs-gold) !important;
}

.badge-cart {
    font-size: 0.55rem;
    min-width: 16px;
}

.kpi-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cs-text-muted);
    font-weight: 500;
}

.filter-select-compact {
    width: auto;
    min-width: 160px;
}

.panel-muted {
    background-color: var(--cs-grouped-bg);
}

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--cs-green);
}

/* ═══════════════════════════════════════════════════════════
   KPI CARDS — monochrome with single accent
   Replaces the multi-color Bootstrap border-start stack on the Admin
   Dashboard. Use .kpi-card for the neutral default; add .kpi-card-focus
   for the focal metric (gold) and .kpi-card-alert for danger states (red).
   ═══════════════════════════════════════════════════════════ */

.kpi-card {
    background: var(--cs-card-bg);
    border: 1px solid var(--cs-separator);
    border-left: 3px solid var(--cs-separator);
    padding: 1rem 1.25rem;
    height: 100%;
    transition: box-shadow 0.2s ease;
}

.kpi-card:hover {
    box-shadow: var(--cs-shadow-sm);
}

.kpi-card .kpi-value {
    font-size: 1.625rem;
    font-weight: 600;
    color: var(--cs-text);
    line-height: 1.1;
    margin-top: 0.25rem;
    letter-spacing: 0;
    text-transform: none;
    font-family: var(--cs-font-body);
}

.kpi-card-focus {
    border-left-color: var(--cs-gold);
}

.kpi-card-focus .kpi-value {
    color: var(--cs-gold);
}

.kpi-card-alert {
    border-left-color: var(--cs-red);
}

.kpi-card-alert .kpi-value {
    color: var(--cs-red);
}

/* ═══════════════════════════════════════════════════════════
   TOPNAV — Shop dropdown (logged-in ops chrome)
   The Shop dropdown toggle reuses .topnav-link visuals — strip Bootstrap's
   default button-inside-dropdown chrome so it blends with the rest of the
   topnav links. The dropdown menu itself inherits .dropdown-menu tokens.
   ═══════════════════════════════════════════════════════════ */

.topnav .dropdown > .topnav-link.dropdown-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
}

.topnav .dropdown > .topnav-link.dropdown-toggle::after {
    margin-left: 0.4em;
    vertical-align: 0.1em;
    border-top-color: currentColor;
    opacity: 0.7;
}

.topnav .dropdown-menu {
    margin-top: 0.5rem;
    min-width: 10rem;
}

/* ═══════════════════════════════════════════════════════════
   12 — Visualizer stages (FabricThreadVisualizer, MonogramPreview,
       ShirtPreview, CollarPreview). Shared container chrome so all
       four read as one editorial system: warm paper backdrop with a
       soft inner shadow, rounded corners, and matching label pills.
   ═══════════════════════════════════════════════════════════ */

.fabric-thread-visualizer {
    padding: 0.75rem;
    background: linear-gradient(180deg, #f9f3e6, #ede3cc);
    border: 1px solid rgba(60, 45, 20, 0.12);
    border-radius: 10px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .fabric-thread-visualizer {
    background: linear-gradient(180deg, #1a2333, #111827);
    border-color: rgba(201, 166, 107, 0.18);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.fabric-thread-visualizer .stitch-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background: var(--ftv-fallback, #f5f0e8);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.15),
        inset 0 0 0 1px rgba(0, 0, 0, 0.08),
        inset 0 2px 8px rgba(0, 0, 0, 0.18);
}

.fabric-thread-visualizer .stitch-stage__fabric {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Subtle paper-grain overlay — breaks up the flatness of the fabric
   photo just enough to read as real cloth rather than a printed swatch. */
.fabric-thread-visualizer .stitch-stage__grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: multiply;
    opacity: 0.28;
    background-image: radial-gradient(rgba(0,0,0,0.08) 1px, transparent 1px),
                      radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 3px 3px, 5px 5px;
    background-position: 0 0, 1px 2px;
}

/* Vignette — darkens the four corners so the fabric reads as
   spotlit instead of printed. */
.fabric-thread-visualizer .stitch-stage__vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center,
        transparent 55%,
        rgba(0, 0, 0, 0.22) 100%);
}

.fabric-thread-visualizer .stitch-stage__overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.fabric-thread-visualizer .stitch-stage__label {
    position: absolute;
    bottom: 0.6rem;
    left: 0.6rem;
    right: 0.6rem;
    padding: 0.25rem 0.6rem;
    background: rgba(14, 23, 35, 0.85);
    color: #efe8d7;
    border-radius: 4px;
    font-family: "Jost", sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    backdrop-filter: blur(4px);
}

.fabric-thread-visualizer .ftv-chips {
    margin-top: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.fabric-thread-visualizer .ftv-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fabric-thread-visualizer .ftv-chip__swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3),
        0 1px 2px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.fabric-thread-visualizer .ftv-chip__label {
    font-size: 0.8rem;
    color: var(--cs-text-muted, #6b5a3d);
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fabric-thread-visualizer .ftv-linings {
    margin-top: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.fabric-thread-visualizer .ftv-lining {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* Stacked-layer glyph — single for regular, triple for built-up, with an
   optional glue teardrop pinned top-right when the lining is fusible. */
.fabric-thread-visualizer .ftv-lining__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--cs-brass, #8a7d5c);
}

[data-theme="dark"] .fabric-thread-visualizer .ftv-lining__icon {
    color: #d9b272;
}

.fabric-thread-visualizer .ftv-lining__label {
    display: flex;
    flex-direction: column;
    font-size: 0.78rem;
    color: var(--cs-text-muted, #6b5a3d);
    line-height: 1.2;
    min-width: 0;
}

.fabric-thread-visualizer .ftv-lining__role {
    font-family: 'Jost', sans-serif;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cs-text-muted, #6b5a3d);
    opacity: 0.7;
}

.fabric-thread-visualizer .ftv-lining__name {
    font-weight: 500;
    color: var(--cs-text, #3d342a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-theme="dark"] .fabric-thread-visualizer .ftv-lining__name {
    color: #f5eee2;
}

/* Monogram preview ------------------------------------------------- */
.monogram-preview {
    display: inline-block;
    max-width: 320px;
    width: 100%;
}

.monogram-preview .monogram-svg {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.15),
        0 1px 2px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .monogram-preview .monogram-svg {
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.45),
        0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Shirt preview --------------------------------------------------- */
.shirt-preview {
    display: block;
    width: 100%;
}

.shirt-preview__svg {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    margin: 0 auto;
    border-radius: 12px;
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.1),
        0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Collar preview -------------------------------------------------- */
.collar-preview-component {
    display: block;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
}

.collar-preview-svg {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

/* ═══════════════════════════════════════════════════════════
   13 — Designer stage/inspector layout
   Used by Easy Designer (and any other designer wanting the same
   split). .designer-stage is the visual pane; .designer-inspector
   is the form column. On >=md the stage becomes sticky so the
   preview stays in view while the user scrolls long option lists.
   ═══════════════════════════════════════════════════════════ */

.designer-stage {
    position: relative;
    padding: 1.25rem;
    background: radial-gradient(ellipse at top, #f9f3e6 0%, #ede3cc 60%, #e0d4b6 100%);
    border: 1px solid rgba(60, 45, 20, 0.14);
    border-radius: 14px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 1px 3px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .designer-stage {
    background: radial-gradient(ellipse at top, #1a2333 0%, #111827 60%, #0b111b 100%);
    border-color: rgba(201, 166, 107, 0.2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 1px 3px rgba(0, 0, 0, 0.35);
}

.designer-stage__eyebrow {
    display: block;
    font-family: "Jost", sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cs-brass, #B08D57);
    margin-bottom: 0.75rem;
}

.designer-stage__body {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    align-items: center;
}

.designer-stage__caption {
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-size: 0.9rem;
    color: rgba(60, 45, 20, 0.75);
    text-align: center;
    line-height: 1.35;
}

[data-theme="dark"] .designer-stage__caption {
    color: rgba(239, 232, 215, 0.7);
}

.designer-inspector {
    min-width: 0;
}

@media (min-width: 992px) {
    .designer-stage-sticky {
        position: sticky;
        top: 1rem;
    }
}

/* Swatch tray — inline horizontal fabric chooser under the stage. */
.swatch-tray {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.5rem 0.25rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}

.swatch-tray::-webkit-scrollbar { height: 6px; }
.swatch-tray::-webkit-scrollbar-thumb { background: rgba(60, 45, 20, 0.25); border-radius: 3px; }

.swatch-tray__chip {
    flex: 0 0 auto;
    width: 64px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    scroll-snap-align: start;
    transition: transform 180ms cubic-bezier(0.19, 1, 0.22, 1),
                border-color 180ms ease;
}

.swatch-tray__chip:hover {
    transform: translateY(-2px);
    border-color: rgba(176, 141, 87, 0.4);
}

.swatch-tray__chip.is-selected {
    border-color: var(--cs-brass, #B08D57);
    box-shadow: 0 4px 10px rgba(176, 141, 87, 0.3);
}

.swatch-tray__chip img,
.swatch-tray__chip .swatch-tray__empty {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.swatch-tray__chip .swatch-tray__empty {
    background: repeating-linear-gradient(45deg,
        rgba(60,45,20,0.06) 0 6px,
        rgba(60,45,20,0.12) 6px 12px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(60,45,20,0.55);
    font-size: 0.7rem;
}

.swatch-tray__label {
    display: block;
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    text-align: center;
    padding-top: 0.25rem;
    color: var(--cs-text-muted, #6b5a3d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60px;
}

/* Zoom pills — tiny segment control above the stage. */
.stage-zoom-pills {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: rgba(60, 45, 20, 0.08);
    border-radius: 999px;
    margin-bottom: 0.75rem;
}

.stage-zoom-pill {
    font-family: "Jost", sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.3rem 0.9rem;
    border: none;
    background: transparent;
    color: rgba(60, 45, 20, 0.65);
    border-radius: 999px;
    cursor: pointer;
    transition: all 180ms cubic-bezier(0.19, 1, 0.22, 1);
}

.stage-zoom-pill:hover { color: var(--cs-brass, #B08D57); }

.stage-zoom-pill.is-active {
    background: #fff;
    color: #2b1d0a;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .stage-zoom-pill { color: rgba(239, 232, 215, 0.65); }
[data-theme="dark"] .stage-zoom-pill.is-active {
    background: #1a2333;
    color: #efe8d7;
}

/* ============================================================
   SECTION 14 — ORDER THANK-YOU / COMMISSION RECEIVED
   ------------------------------------------------------------
   Ceremonial landing rendered once after a customer submits an
   order. Editorial atelier aesthetic: paper backdrop, giant
   Fraunces italic headline, brass wax-seal cipher, staggered
   reveal cascade. Uses --delay inline style per element so we
   orchestrate motion timing without bloating selector count.
   ============================================================ */

.thankyou {
    position: relative;
    min-height: 100vh;
    background: var(--cs-paper);
    overflow: hidden;
    isolation: isolate;
    padding-bottom: 3rem;
}

[data-theme="dark"] .thankyou { background: var(--cs-ink); }

.thankyou__grain {
    position: absolute; inset: 0;
    pointer-events: none;
    background-image: var(--cs-grain);
    background-size: 220px 220px;
    mix-blend-mode: multiply;
    opacity: 0.55;
    z-index: 1;
}

[data-theme="dark"] .thankyou__grain { opacity: 0.35; mix-blend-mode: screen; }

/* Brass tick rulers that draw in from the edges on load. */
.thankyou__ruler {
    position: absolute; left: 0; right: 0;
    height: 4px;
    background: var(--cs-ruler);
    transform: scaleX(0);
    animation: thankyou-ruler-draw 1.3s var(--ease-luxury) forwards;
    z-index: 2;
}

.thankyou__ruler--top { top: 0; transform-origin: left center; animation-delay: 0ms; }
.thankyou__ruler--bottom { bottom: 0; transform-origin: right center; animation-delay: 1s; }

@keyframes thankyou-ruler-draw {
    to { transform: scaleX(1); }
}

.thankyou__stage {
    position: relative;
    z-index: 3;
    max-width: 1180px;
    padding-top: clamp(3.5rem, 10vh, 7.5rem);
    padding-bottom: 2.5rem;
}

/* ── Left column: editorial lede ─────────────────────────────── */

.thankyou__lede { padding-right: clamp(0px, 3vw, 3rem); }

.thankyou__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    font-family: var(--cs-font-heading);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--cs-text-muted);
    margin: 0 0 2.5rem;
    opacity: 0;
    animation: thankyou-fadeup 0.9s var(--ease-luxury) forwards;
    animation-delay: var(--delay, 0ms);
}

.thankyou__eyebrow-glyph {
    font-family: var(--cs-font-display);
    font-style: italic;
    font-size: 1.15rem;
    letter-spacing: 0;
    color: var(--cs-brass);
    line-height: 1;
}

.thankyou__eyebrow-tick {
    display: inline-block;
    width: 54px;
    height: 1px;
    background: var(--cs-brass);
}

.thankyou__headline {
    font-family: var(--cs-font-display);
    font-weight: 300;
    font-size: clamp(3.6rem, 11vw, 8.5rem);
    line-height: 0.92;
    letter-spacing: -0.02em;
    margin: 0 0 1.5rem;
    color: var(--cs-charcoal);
    font-variation-settings: "opsz" 144;
    opacity: 0;
    animation: thankyou-fadeup 1s var(--ease-luxury) forwards;
    animation-delay: var(--delay, 0ms);
}

[data-theme="dark"] .thankyou__headline { color: #F2EDE4; }

.thankyou__headline em {
    font-style: italic;
    font-feature-settings: "ss01", "swsh";
    font-weight: 300;
}

.thankyou__rule {
    width: 140px;
    height: 1px;
    background: var(--cs-brass);
    margin: 0.5rem 0 2rem;
    transform: scaleX(0);
    transform-origin: left center;
    animation: thankyou-ruler-draw 1s var(--ease-luxury) forwards;
    animation-delay: var(--delay, 0ms);
}

.thankyou__copy {
    max-width: 52ch;
    font-family: var(--cs-font-body);
    font-size: 1.05rem;
    line-height: 1.78;
    color: var(--cs-text-secondary);
    margin: 0 0 2.75rem;
    opacity: 0;
    animation: thankyou-fadeup 0.9s var(--ease-luxury) forwards;
    animation-delay: var(--delay, 0ms);
}

[data-theme="dark"] .thankyou__copy { color: rgba(242, 237, 228, 0.72); }

.thankyou__dropcap {
    font-family: var(--cs-font-display);
    font-style: italic;
    font-weight: 300;
    font-size: 3.6em;
    line-height: 0.8;
    float: left;
    padding: 0.1em 0.16em 0 0;
    color: var(--cs-brass);
}

/* Summary: two-column bordered key/value grid. */
.thankyou__summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2.5rem;
    row-gap: 1.6rem;
    margin: 0 0 2.5rem;
    padding: 1.75rem 0;
    border-top: 1px solid var(--cs-separator);
    border-bottom: 1px solid var(--cs-separator);
    opacity: 0;
    animation: thankyou-fadeup 0.9s var(--ease-luxury) forwards;
    animation-delay: var(--delay, 0ms);
}

[data-theme="dark"] .thankyou__summary { border-color: rgba(242, 237, 228, 0.1); }

.thankyou__summary-row { display: flex; flex-direction: column; gap: 0.4rem; }

.thankyou__summary-row dt {
    font-family: var(--cs-font-heading);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--cs-text-muted);
    margin: 0;
}

.thankyou__summary-row dd {
    font-family: var(--cs-font-display);
    font-weight: 400;
    font-size: 1.5rem;
    letter-spacing: -0.01em;
    color: var(--cs-charcoal);
    margin: 0;
    font-variation-settings: "opsz" 72;
}

[data-theme="dark"] .thankyou__summary-row dd { color: #F5EEE2; }

/* Handwritten-feel owner signature. */
.thankyou__sign {
    font-family: var(--cs-font-display);
    font-style: italic;
    font-weight: 300;
    font-size: 1.15rem;
    color: var(--cs-text-secondary);
    margin: 0 0 3rem;
    transform-origin: left;
    opacity: 0;
    animation: thankyou-sign-in 1s var(--ease-luxury) forwards;
    animation-delay: var(--delay, 0ms);
}

@keyframes thankyou-sign-in {
    from { opacity: 0; transform: rotate(-4deg) translateY(8px); }
    to   { opacity: 1; transform: rotate(-1.8deg) translateY(0); }
}

.thankyou__sign-dash { color: var(--cs-brass); margin-right: 0.4rem; }

.thankyou__sign-name {
    font-style: italic;
    font-size: 1.35rem;
    color: var(--cs-charcoal);
    border-bottom: 1px solid rgba(82, 75, 66, 0.35);
    padding: 0 0.35rem 0.1rem;
    margin-left: 0.2rem;
}

[data-theme="dark"] .thankyou__sign-name { color: #F5EEE2; border-bottom-color: rgba(242, 237, 228, 0.35); }

/* CTA row: primary ink button + quiet text link. */
.thankyou__cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.75rem 2.25rem;
    opacity: 0;
    animation: thankyou-fadeup 0.9s var(--ease-luxury) forwards;
    animation-delay: var(--delay, 0ms);
}

.thankyou__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    font-family: var(--cs-font-heading);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.28s var(--ease-soft), border-color 0.28s var(--ease-soft);
}

.thankyou__cta--primary {
    position: relative;
    overflow: hidden;
    background: var(--cs-charcoal);
    color: var(--cs-paper);
    padding: 1.1rem 2.1rem;
    border: 1px solid var(--cs-charcoal);
}

.thankyou__cta--primary::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, var(--cs-brass-dark), var(--cs-brass));
    transform: translateX(-101%);
    transition: transform 0.55s var(--ease-luxury);
    z-index: 0;
}

.thankyou__cta--primary > span { position: relative; z-index: 1; }

.thankyou__cta--primary:hover {
    color: #FAF7F2;
    border-color: var(--cs-brass);
}

.thankyou__cta--primary:hover::before { transform: translateX(0); }

.thankyou__arrow {
    display: inline-block;
    transition: transform 0.4s var(--ease-luxury);
}

.thankyou__cta--primary:hover .thankyou__arrow { transform: translateX(6px); }

[data-theme="dark"] .thankyou__cta--primary {
    background: #F5EEE2;
    color: var(--cs-ink);
    border-color: #F5EEE2;
}

[data-theme="dark"] .thankyou__cta--primary:hover { color: var(--cs-ink); }

.thankyou__cta--quiet {
    color: var(--cs-text-muted);
    padding: 0 0 2px;
    border-bottom: 1px solid transparent;
    letter-spacing: 0.24em;
}

.thankyou__cta--quiet:hover {
    color: var(--cs-charcoal);
    border-bottom-color: var(--cs-brass);
}

[data-theme="dark"] .thankyou__cta--quiet:hover { color: #F5EEE2; }

/* ── Right column: seal + three-step promise ─────────────────── */

.thankyou__hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 1.5rem;
}

.thankyou__seal-wrap {
    width: min(360px, 88%);
    aspect-ratio: 1 / 1;
    margin: 0 auto 3rem;
    filter: drop-shadow(0 26px 32px rgba(20, 17, 13, 0.28));
    transform-origin: 50% 52%;
    opacity: 0;
    animation: thankyou-seal-stamp 1.1s var(--ease-luxury) forwards,
               thankyou-seal-breathe 7s ease-in-out 2s infinite;
    animation-delay: var(--delay, 380ms), 0s;
}

.thankyou__seal { width: 100%; height: 100%; display: block; }

@keyframes thankyou-seal-stamp {
    0%   { opacity: 0; transform: scale(1.35) rotate(-14deg); }
    55%  { opacity: 1; transform: scale(0.96) rotate(-1deg); }
    75%  { opacity: 1; transform: scale(1.015) rotate(-3.8deg); }
    100% { opacity: 1; transform: scale(1) rotate(-3deg); }
}

@keyframes thankyou-seal-breathe {
    0%, 100% { transform: scale(1) rotate(-3deg); }
    50%      { transform: scale(1.008) rotate(-2.7deg); }
}

/* ── Modern icon mark replacement ─────────────────────────────── */
.thankyou__mark-wrap {
    width: min(340px, 80%);
    margin: 0 auto 2.5rem;
    opacity: 0;
    animation: thankyou-fadeup 1s var(--ease-luxury) forwards;
    animation-delay: var(--delay, 380ms);
}

.thankyou__mark-frame {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 1.25rem;
}

.thankyou__mark-frame::before,
.thankyou__mark-frame::after {
    content: "";
    position: absolute;
    left: 14%;
    right: 14%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(180, 148, 92, 0.55) 20%,
        rgba(180, 148, 92, 0.55) 80%,
        transparent 100%);
}

.thankyou__mark-frame::before { top: 0; }
.thankyou__mark-frame::after  { bottom: 0; }

.thankyou__mark {
    width: clamp(140px, 58%, 220px);
    height: auto;
    display: block;
    filter: drop-shadow(0 10px 24px rgba(20, 17, 13, 0.16));
}

.thankyou__mark-ticker,
.thankyou__mark-motto {
    font-family: var(--cs-font-heading, 'Jost', sans-serif);
    font-size: 0.66rem;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--cs-brass);
    font-weight: 500;
    text-align: center;
}

.thankyou__mark-motto {
    color: var(--cs-muted, #7c7264);
    font-size: 0.58rem;
    letter-spacing: 0.36em;
}

[data-theme="dark"] .thankyou__mark-ticker { color: #d9b272; }
[data-theme="dark"] .thankyou__mark-motto  { color: rgba(242, 237, 228, 0.55); }
[data-theme="dark"] .thankyou__mark { filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.5)) invert(0.92); }

.thankyou__steps {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    width: 100%;
    max-width: 420px;
}

.thankyou__steps li {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.25rem 0;
    border-top: 1px solid var(--cs-separator);
    opacity: 0;
    animation: thankyou-fadeup 0.9s var(--ease-luxury) forwards;
    animation-delay: var(--delay, 0ms);
}

.thankyou__steps li:last-child { border-bottom: 1px solid var(--cs-separator); }

[data-theme="dark"] .thankyou__steps li { border-color: rgba(242, 237, 228, 0.08); }

.thankyou__step-num {
    flex-shrink: 0;
    font-family: var(--cs-font-display);
    font-style: italic;
    font-weight: 300;
    font-size: 1.6rem;
    color: var(--cs-brass);
    min-width: 2.3em;
    line-height: 1;
    padding-top: 0.2rem;
    font-variation-settings: "opsz" 96;
}

.thankyou__step-title {
    display: block;
    font-family: var(--cs-font-heading);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--cs-charcoal);
    margin: 0 0 0.4rem;
}

[data-theme="dark"] .thankyou__step-title { color: #F5EEE2; }

.thankyou__step-body {
    display: block;
    font-family: var(--cs-font-body);
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--cs-text-secondary);
}

[data-theme="dark"] .thankyou__step-body { color: rgba(242, 237, 228, 0.68); }

/* ── Shared fade-up keyframe used by several reveal targets ──── */
@keyframes thankyou-fadeup {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive collapse ─────────────────────────────────────── */
@media (max-width: 991.98px) {
    .thankyou__lede { padding-right: 0; margin-bottom: 2rem; }
    .thankyou__hero { padding-top: 0; margin-top: 1.5rem; }
    .thankyou__seal-wrap { width: min(300px, 72%); margin-bottom: 2rem; }
    .thankyou__mark-wrap { width: min(280px, 72%); margin-bottom: 2rem; }
    .thankyou__steps { margin-left: auto; margin-right: auto; }
}

@media (max-width: 575.98px) {
    .thankyou__summary { grid-template-columns: 1fr; row-gap: 1.2rem; }
    .thankyou__headline { font-size: clamp(3rem, 16vw, 5.5rem); }
    .thankyou__cta--primary { padding: 0.95rem 1.6rem; width: 100%; justify-content: space-between; }
    .thankyou__cta--quiet { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .thankyou *,
    .thankyou__seal-wrap,
    .thankyou__mark-wrap {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* ============================================================
   Welcome (RegisterConfirmation) — overrides on top of .thankyou
   Same atelier vocabulary, but the email becomes the headline
   datum and "Status" gets a soft pulsing brass pill.
   ============================================================ */

.welcome__email {
    font-family: var(--cs-font-display);
    font-style: italic;
    font-size: 1.4rem !important;
    font-variation-settings: "opsz" 96 !important;
    letter-spacing: -0.005em !important;
    word-break: break-all;
}

.welcome__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.95rem 0.42rem;
    border: 1px solid rgba(180, 148, 92, 0.55);
    border-radius: 999px;
    font-family: var(--cs-font-heading);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--cs-brass);
    background: linear-gradient(135deg,
        rgba(180, 148, 92, 0.08),
        rgba(180, 148, 92, 0));
}

.welcome__pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cs-brass);
    box-shadow: 0 0 0 0 rgba(180, 148, 92, 0.6);
    animation: welcome-pulse 2.4s var(--ease-soft, ease-in-out) infinite;
}

@keyframes welcome-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(180, 148, 92, 0.55); }
    60%      { box-shadow: 0 0 0 9px rgba(180, 148, 92, 0); }
}

[data-theme="dark"] .welcome__pill { color: #d9b272; border-color: rgba(217, 178, 114, 0.5); }
[data-theme="dark"] .welcome__pill-dot { background: #d9b272; }

.welcome__error {
    max-width: 540px;
    margin: 4rem auto;
    padding: 1.5rem 1.75rem;
    border: 1px solid rgba(180, 148, 92, 0.4);
    border-left: 4px solid var(--cs-brass);
    background: rgba(180, 148, 92, 0.06);
    font-family: var(--cs-font-body);
    color: var(--cs-text-secondary);
    text-align: center;
}

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

/* ============================================================
   Confirm (ConfirmEmail) — overrides on top of .thankyou
   Adds a brass progress line that fills as the meta-refresh
   countdown runs to its redirect, and quietly checks off the
   first step in the post-confirm "what's next" list.
   ============================================================ */

.confirm__redirect {
    margin: 0 0 2.5rem;
    max-width: 380px;
    opacity: 0;
    animation: thankyou-fadeup 0.9s var(--ease-luxury) forwards;
    animation-delay: var(--delay, 0ms);
}

.confirm__redirect-label {
    display: block;
    font-family: var(--cs-font-heading);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--cs-text-muted);
    margin: 0 0 0.7rem;
}

.confirm__redirect-track {
    display: block;
    width: 100%;
    height: 2px;
    background: rgba(82, 75, 66, 0.12);
    overflow: hidden;
    position: relative;
}

[data-theme="dark"] .confirm__redirect-track { background: rgba(242, 237, 228, 0.08); }

.confirm__redirect-fill {
    display: block;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--cs-brass-dark), var(--cs-brass));
    transform: scaleX(0);
    transform-origin: left center;
    animation: confirm-redirect-fill var(--duration, 6s) linear forwards;
    /* Match the lede stagger so the bar starts after the headline lands. */
    animation-delay: 720ms;
}

@keyframes confirm-redirect-fill {
    to { transform: scaleX(1); }
}

/* "Done" treatment for the verified step on the right column. */
.confirm__step--done .thankyou__step-num {
    position: relative;
    color: transparent;
}

.confirm__step--done .thankyou__step-num::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35rem;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    border: 1.5px solid var(--cs-brass);
    background: linear-gradient(135deg,
        rgba(180, 148, 92, 0.16),
        rgba(180, 148, 92, 0));
}

.confirm__step--done .thankyou__step-num::after {
    content: "";
    position: absolute;
    left: 0.42em;
    top: 0.78rem;
    width: 0.55em;
    height: 0.32em;
    border-left: 1.5px solid var(--cs-brass);
    border-bottom: 1.5px solid var(--cs-brass);
    transform: rotate(-48deg);
}

.confirm__step--done .thankyou__step-title { color: var(--cs-brass); }

[data-theme="dark"] .confirm__step--done .thankyou__step-title { color: #d9b272; }

/* Error state — softer headline tint and a quiet detail line. */
.confirm__headline--error {
    color: var(--cs-text-secondary);
}

.confirm__error-detail {
    max-width: 52ch;
    margin: -1.25rem 0 2.5rem;
    padding: 0.85rem 1.1rem;
    border-left: 2px solid rgba(180, 148, 92, 0.6);
    background: rgba(180, 148, 92, 0.05);
    font-family: var(--cs-font-body);
    font-size: 0.9rem;
    color: var(--cs-text-muted);
    opacity: 0;
    animation: thankyou-fadeup 0.9s var(--ease-luxury) forwards;
    animation-delay: var(--delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
    .confirm__redirect-fill { animation: none; transform: scaleX(1); }
}

/* ConfirmEmail (login-style card) — slim gold redirect bar shown beneath
   the "We'll forward you in a moment" copy. Synchronised with the meta
   refresh duration via the --duration custom property. */
.confirm-progress {
    display: block;
    width: 100%;
    max-width: 280px;
    height: 3px;
    margin: 0 auto;
    background: rgba(82, 75, 66, 0.1);
    border-radius: 999px;
    overflow: hidden;
}

.confirm-progress-fill {
    display: block;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--cs-brass-dark, #9c7a3e), var(--cs-brass, #b4945c));
    transform: scaleX(0);
    transform-origin: left center;
    border-radius: inherit;
    animation: confirm-progress-fill var(--duration, 6s) linear forwards;
}

@keyframes confirm-progress-fill {
    to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    .confirm-progress-fill { animation: none; transform: scaleX(1); }
}

/* Collar Options group in the shirt configurator — constrain to half the
   row (≈ two of four columns) and force the inner card grid to a 2-up
   layout so each option auto-expands to fill its column instead of
   collapsing into the default 5-up grid. */
.cs-collar-options {
    max-width: 50%;
    flex: 0 0 50%;
}

.cs-collar-options > div > .row {
    --bs-gutter-x: 0.5rem;
}

.cs-collar-options .row > [class^="col"],
.cs-collar-options .row > [class*=" col"] {
    flex: 0 0 50%;
    max-width: 50%;
}

@media (max-width: 767.98px) {
    .cs-collar-options { max-width: 100%; flex: 0 0 100%; }
}