/* ============================================================
   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;
}

/* Large text mode — bumps the root rem baseline by ~20% so every rem-based
   font-size scales together while breakpoint-driven layout (Bootstrap's
   px-based media queries) stays intact. Applied on <html> via the
   data-text-size attribute so dark-mode's data-theme cascade is unaffected;
   both attributes can be set independently. */
html[data-text-size="large"],
html[data-text-size="large"] body {
    font-size: 18px;
}

/* In Large mode the desktop top-nav (.topnav-links) overflows on screens
   1000–1199px because each link is ~20% wider but the layout breakpoint
   doesn't move. Promote the mobile-offcanvas trigger from `lg` (992px) to
   `xl` (1200px) for Large-text users so anyone on a 13–14" laptop gets the
   scrollable vertical menu instead of cramped overflow. !important is needed
   to override Bootstrap's `d-lg-none` / `d-none d-lg-flex` utility classes
   that drive the default switch. */
@media (max-width: 1199.98px) {
    html[data-text-size="large"] .topnav-toggle {
        display: inline-flex !important;
    }
    html[data-text-size="large"] .topnav-links {
        display: none !important;
    }
}

/* 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;
}

/* Scroll-anchor offset — programmatic scrollIntoView() (used by
   scroll-utils.js across the order wizard, configurator, and
   measurement editor) aligns the target's top with the viewport
   top, which is *behind* the 60px sticky .topnav above. Setting
   scroll-margin-top on every known anchor pushes the scroll target
   below the nav bar so the section header is actually visible.
   Mobile and desktop both have the 60px topnav, so a single value
   covers all viewports. Leaving an extra ~16px for breathing room.
   Selector list mirrors the targets passed into scroll-utils. */
#order-step-content,
.shirt-configurator .ps-tab-groups,
.shirt-configurator .tab-content,
.shirt-configurator [id^="heading-"],
.shirt-configurator .accordion-collapse,
[id^="section-"],
[id^="measurement-accordion-"] {
    scroll-margin-top: 76px;
}

.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;
}

/* OrderDetail service/othercharges rows: render as a flat accordion-styled
   header but suppress everything that implies "click to expand" — no
   chevron, default cursor, no disabled-button greyout, no hover lift.
   Service lines have no shirt-style fields to reveal in a body, so the
   header IS the row. */
.order-detail__accordion-btn.order-detail__no-collapse::after {
    display: none;
}

.order-detail__accordion-btn.order-detail__no-collapse {
    cursor: default;
    pointer-events: none;
    background-color: transparent;
    color: inherit;
    opacity: 1;
    box-shadow: none;
}

.order-detail__accordion-btn.order-detail__no-collapse:focus {
    box-shadow: none;
}

.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;
    /* 0.12 alpha is invisible on the dark page background — an empty
       <input type="date"> or any empty form-control just disappears
       (the /admin/orders "To Date" was the reproducer). 0.28 is dim
       enough to feel restful but firm enough to outline the field
       even when empty. */
    border-color: rgba(237, 228, 210, 0.28);
    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;
}

/* Disabled state — Bootstrap's default opacity:0.65 on the cream btn-primary
   reads as a faint gray rectangle on dark backgrounds (the OrderList "Apply"
   button when there's nothing pending was the trigger). Override with an
   explicit muted-but-readable color so the user can see the button exists
   and understand it's currently inactive. */
html[data-theme="dark"] .btn-primary:disabled,
html[data-theme="dark"] .btn-primary.disabled {
    background-color: #2A3142;
    border-color: #3A4358;
    color: #8D8678;
    opacity: 1;
}

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;
    }

    /* Allow long values to wrap instead of overflowing horizontally.
       overflow-wrap: anywhere is stricter than word-break: break-word —
       it breaks long unbreakable strings (UUIDs, order numbers, emails,
       URLs) at any character to prevent overflow, AND it makes the
       browser consider the flex container's available width when sizing
       this cell's value flex-item. word-break: break-word alone does
       not honor that on iOS Safari + flexbox, which is why long IDs
       were spilling off iPhone portrait viewports. */
    .table-stacked tbody td {
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: normal;
        gap: 0.5rem;
    }

    /* Allow direct children of the value side (links, badges, spans,
       buttons) to shrink below their min-content. Default flex
       min-width is `auto` (= min-content), which means a single
       <a>long-uuid</a> refuses to wrap because it asks for its full
       width. Setting min-width: 0 on direct children lets them
       cooperate with overflow-wrap: anywhere on the parent. The td
       itself is already min-width: 0 from the rule above. */
    .table-stacked tbody td > * {
        min-width: 0;
        max-width: 100%;
    }

    /* Action-button rows: wrap to a second line on narrow viewports
       instead of pushing the leftmost button off-screen. */
    .table-stacked tbody td.td-actions {
        flex-wrap: wrap;
        row-gap: 0.4rem;
    }

    /* Bootstrap's .text-nowrap class is widely used on date/timestamp
       and ID cells to keep them on one line in desktop tabular layouts.
       On mobile stacked rows the cell has the full row width and
       wrapping is the right behavior — long datetime strings or IDs
       were being truncated against the right edge because nowrap
       overrides overflow-wrap. Reset white-space to normal in stacked
       mode so the wrap rules above can do their job. */
    .table-stacked tbody td.text-nowrap {
        white-space: normal;
    }

    /* Card row gets a subtle radius so it reads as a real card */
    .table-stacked tbody tr {
        border-radius: var(--cs-radius-sm, 6px);
    }

    /* Stack-mode cell: label on top, value full-width below.
       Use for descriptions, badge clusters, action button groups,
       anything wider than ~half the row. */
    .table-stacked tbody td.td-block {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
    }

    .table-stacked tbody td.td-block::before {
        margin-bottom: 0.25rem;
        margin-right: 0;
    }

    /* Hide low-priority columns on mobile (apply to both <th> and <td>) */
    .table-stacked .th-hide-mobile,
    .table-stacked .td-hide-mobile {
        display: none !important;
    }
}

/* Definition-list grid for OrderDetail line-item details — prevents browser
   default dd { margin-left: 40px } and long-value horizontal overflow on mobile.
   Both dt and dd carry min-width:0 + overflow-wrap:anywhere so long single-token
   values (fabric names without spaces, monogram strings, comma-joined option
   lists) break instead of pushing the grid past the panel edge. */
.line-item-details dl {
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
    column-gap: var(--cs-spacing-md);
    row-gap: 0.25rem;
    margin: 0;
}

.line-item-details dt {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.line-item-details dd {
    margin: 0;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Stack the dl whenever the parent panel is narrow. The shirt detail body uses
   col-md-6 col-lg-4 (full-width xs/sm → 2-col md → 3-col lg → still 3-col xl),
   so at lg (3 × ~315px panels) the dt column eats most of the row for any long
   label like "Back Height / Point / Band" or "Thread / Buttonhole Thread" and
   squeezes the value to a vertical column of single characters (iPad-landscape
   reproducer). Stay stacked through lg; only go side-by-side at xl (~380px+). */
@media (max-width: 1199.98px) {
    .line-item-details dl {
        grid-template-columns: 1fr;
        row-gap: 0.125rem;
    }

    .line-item-details dt {
        margin-top: 0.5rem;
    }

    .line-item-details dt:first-child {
        margin-top: 0;
    }
}

/* Fabric Receiving Hub — collapsible accordion on /factory.
   Toggle button styling + nav-tabs underline fix.

   Without these rules:
   - The toggle button shows native button chrome
   - The active nav-tab's bottom border doesn't merge with the card-body
     edge cleanly in dark mode (Bootstrap's default border-bottom-color:
     var(--bs-card-bg) doesn't align with the page's card surface), and
     the horizontal break line visibly cuts through the tab label.
   The active-tab override forces the bottom border to inherit the card
   body's background so the tab "sits on" the line instead of being cut by it. */
.fabric-receiving-hub__toggle {
    cursor: pointer;
    text-align: left;
    border-radius: var(--bs-card-border-radius, 0.5rem);
    transition: background-color 0.15s ease;
}

.fabric-receiving-hub__toggle:hover,
.fabric-receiving-hub__toggle:focus-visible {
    background-color: rgba(155, 126, 75, 0.06) !important;
    outline: none;
}

html[data-theme="dark"] .fabric-receiving-hub__toggle:hover,
html[data-theme="dark"] .fabric-receiving-hub__toggle:focus-visible {
    background-color: rgba(237, 228, 210, 0.04) !important;
}

.fabric-receiving-hub .nav-tabs {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

.fabric-receiving-hub .nav-tabs .nav-link.active {
    background-color: var(--bs-card-bg);
    border-bottom-color: var(--bs-card-bg);
}

html[data-theme="dark"] .fabric-receiving-hub .nav-tabs {
    border-bottom-color: rgba(237, 228, 210, 0.12);
}

html[data-theme="dark"] .fabric-receiving-hub .nav-tabs .nav-link {
    color: #8D8678;
}

html[data-theme="dark"] .fabric-receiving-hub .nav-tabs .nav-link:hover {
    color: #EDE4D2;
    border-color: rgba(237, 228, 210, 0.12);
}

html[data-theme="dark"] .fabric-receiving-hub .nav-tabs .nav-link.active {
    color: #EDE4D2;
    background-color: transparent;
    border-color: rgba(237, 228, 210, 0.18);
    /* Bury the card-header's bottom border under the active tab so the
       horizontal line doesn't visually cut through the tab text. */
    border-bottom-color: transparent;
    margin-bottom: -1px;
}

/* 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;
}

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

.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. */
.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"] .ftv-lining__icon {
    color: #d9b272;
}

.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;
}

.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;
}

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

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

/* Factory process page — readability bump for shop-floor screens.
   Body default is 15px; Bootstrap .small drops to ~13px which is hard to read
   at arm's length on a phone or tablet on the floor. Inside per-shirt cards
   we promote the meta text back up to body size and tighten label contrast
   for the AssemblyOverlay grid specifically. Italic comment lines stay
   slightly smaller so they remain visually secondary. */
.factory-process-page .card-body .small,
.factory-process-page .assembly-overlay-details {
    font-size: 0.9375rem;
    line-height: 1.5;
}

.factory-process-page .card-body .small.fst-italic {
    font-size: 0.875rem;
}

.factory-process-page .card-body strong,
.factory-process-page .assembly-overlay-details strong {
    font-weight: 600;
}

.factory-process-page .assembly-overlay-details .text-muted {
    color: var(--cs-text-secondary) !important;
}

[data-theme="dark"] .factory-process-page .assembly-overlay-details .text-muted {
    color: var(--cs-text-muted) !important;
}

/* 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%; }
}