@charset "UTF-8";

/* ==========================================================================
   COMPONENT LIBRARY
   ============================================================================
   Extracted, reusable component patterns from anysku codebase.
   Import this file AFTER style-vars.css and global/master.css

   USAGE: Add these classes alongside .command class.
   The .command class is REQUIRED for TypeScript event handling.

   Example: <div class="command btn-primary" event-name="Form-Submit">Submit</div>

   See component-library.md for full documentation.

   Design System: "Precision Craft"
   - Unified lift + glow hover patterns
   - Staggered reveal animations
   - Diagonal accent motifs
   - Color-tinted shadows for depth
   ========================================================================== */

/* ==========================================================================
   KEYFRAME ANIMATIONS
   ========================================================================== */

/* Fade in from below - for page load reveals */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade in - simple opacity */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Scale in - for modals, cards */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Shimmer effect - for loading states and hover accents */
@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Pulse glow - for attention-grabbing elements */
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(var(--color-primary-rgb), 0.5), 0 0 60px rgba(var(--color-secondary-rgb), 0.2);
    }
}

/* Border flow - animated gradient border */
@keyframes borderFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Subtle float - for featured elements */
@keyframes subtleFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Spin - for loading indicators */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Skeleton shimmer */
@keyframes skeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Staggered reveal classes */
.animate-in {
    animation: fadeInUp 0.5s var(--ease-elegant) forwards;
    opacity: 0;
}

.animate-in-delay-1 { animation-delay: 0.1s; }
.animate-in-delay-2 { animation-delay: 0.2s; }
.animate-in-delay-3 { animation-delay: 0.3s; }
.animate-in-delay-4 { animation-delay: 0.4s; }
.animate-in-delay-5 { animation-delay: 0.5s; }

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .animate-in,
    .animate-in-delay-1,
    .animate-in-delay-2,
    .animate-in-delay-3,
    .animate-in-delay-4,
    .animate-in-delay-5 {
        animation: none;
        opacity: 1;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* --------------------------------------------------------------------------
   SECTION 1: BUTTON VARIANTS
   --------------------------------------------------------------------------
   Base: .command (from global/master.css - required for event-name)
   These are the normalized button classes to use going forward.

   Migration:
   - .btn-primary -> .btn-primary
   - .btn-secondary -> .btn-secondary
   - .btn-ghost, .cmdCancel -> .btn-ghost
   - Delete/remove actions -> .btn-danger
   -------------------------------------------------------------------------- */

/* Primary button - main call to action */
.command.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--color-primary);
    color: var(--color-background);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    border: none;
    border-radius: var(--border-radius-button);
    cursor: pointer;
    transition: var(--transition-all);
    position: relative;
    width: auto;
    text-align: center;
}

.command.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.25s var(--ease-elegant);
}

.command.btn-primary:hover {
    background: var(--color-primary-hover, rgb(75, 55, 220));
    transform: translateY(-2px);
    box-shadow: var(--shadow-button);
}

.command.btn-primary:hover::before {
    opacity: 1;
}

.command.btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.command.btn-primary[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Incomplete/disabled state via class (clickable to show guidance) */
.command.btn-primary.disabled {
    opacity: 0.6;
    background: var(--color-text-muted);
    cursor: pointer;
    transform: none;
    box-shadow: none;
}

.command.btn-primary.disabled:hover {
    opacity: 0.7;
    background: var(--color-text-muted);
    transform: none;
}

.command.btn-primary.disabled:active {
    transform: scale(0.98);
    opacity: 0.8;
}

/* Secondary button - alternative action */
.command.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--color-background);
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--border-radius-button);
    cursor: pointer;
    transition: var(--transition-all);
}

.command.btn-secondary:hover {
    background: var(--color-surface);
    border-color: var(--color-primary-muted);
    color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.command.btn-secondary:active {
    transform: translateY(0);
    box-shadow: none;
}

.command.btn-secondary[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Ghost button - minimal styling for cancel/dismiss */
.command.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: transparent;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
    border: none;
    border-radius: var(--border-radius-button);
    cursor: pointer;
    transition: var(--transition-all);
    position: relative;
}

.command.btn-ghost::before {
    content: '';
    position: absolute;
    inset: 0;
    background: currentColor;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.2s var(--ease-elegant);
}

.command.btn-ghost:hover {
    color: var(--color-text);
}

.command.btn-ghost:hover::before {
    opacity: 0.06;
}

.command.btn-ghost:active::before {
    opacity: 0.1;
}

.command.btn-ghost[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Danger button - destructive actions */
.command.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--color-error);
    color: var(--color-background);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    border: none;
    border-radius: var(--border-radius-button);
    cursor: pointer;
    transition: all 0.3s var(--ease-elegant);
}

.command.btn-danger:hover {
    background: var(--color-error-dark);
    transform: translateY(-1px);
}

/* Ghost danger - text-only destructive */
.command.btn-ghost.btn-danger {
    background: transparent;
    color: var(--color-error);
}

.command.btn-ghost.btn-danger:hover {
    background: rgba(231, 59, 59, 0.1);
}

/* Warning button - caution actions (not destructive, but significant) */
.command.btn-warning {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--color-warning);
    color: var(--color-warning-contrast, #1a1a1a);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    border: none;
    border-radius: var(--border-radius-button);
    cursor: pointer;
    transition: all 0.3s var(--ease-elegant);
}

.command.btn-warning:hover {
    background: var(--color-warning-dark);
    transform: translateY(-1px);
}

/* Ghost warning - text-only caution */
.command.btn-ghost.btn-warning {
    background: transparent;
    color: var(--color-warning-dark);
    border: 1px solid var(--color-warning);
}

.command.btn-ghost.btn-warning:hover {
    background: rgba(245, 158, 11, 0.1);
}

/* Button with glow effect - for hero CTAs */
.command.btn-glow {
    box-shadow: var(--shadow-button);
}

.command.btn-glow:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-button-hover);
}

/* Glass/frosted button - for colored backgrounds */
.command.btn-glass {
    background: rgba(255, 255, 255, 0.15);
    color: inherit;
    border: 2px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s var(--ease-elegant);
}

.command.btn-glass:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
}

/* Button sizes */
.command.btn-sm {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.command.btn-lg {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-lg);
}

/* Full-width button */
.command.btn-block {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Icon button (square, centered icon) */
.command.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    transition: all 0.2s var(--ease-elegant);
}

.command.btn-icon:hover {
    background: var(--color-surface-darkened);
    border-color: var(--color-border-medium);
}

.command.btn-icon.btn-sm {
    width: 32px;
    height: 32px;
}

.command.btn-icon.btn-lg {
    width: 48px;
    height: 48px;
}

.command.btn-icon.btn-primary {
    background: var(--color-primary);
    color: var(--color-background);
    border-color: var(--color-primary);
}

.command.btn-icon.btn-primary .icon-svg,
.command.btn-primary > .icon-svg {
    filter: brightness(0) invert(1);
}

/* Button group - for dialog commands */
.btn-group {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   SECTION 2: CHIP COMPONENT
   --------------------------------------------------------------------------
   Selection chips for filters, attributes, multi-select
   -------------------------------------------------------------------------- */

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-background);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: var(--transition-all);
    user-select: none;
}

.chip:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-lighter);
    color: var(--color-primary);
    transform: translateY(-1px);
}

.chip:active {
    transform: translateY(0);
}

.chip:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--color-primary-lighter);
}

.chip.selected {
    background: var(--color-primary);
    color: var(--color-background);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.chip.selected:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-background);
}

.chip.more {
    color: var(--color-primary);
    font-style: italic;
    border-style: dashed;
    background: transparent;
}

.chip.more:hover {
    background: var(--color-primary-lighter);
    border-style: solid;
}

.chip.custom {
    background: var(--color-secondary-light);
    color: var(--color-secondary-darker);
    border-color: var(--color-secondary-muted);
}

.chip.custom:hover {
    background: var(--color-secondary);
    color: var(--color-text);
    border-color: var(--color-secondary);
}

.chip.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Chip container */
.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

/* --------------------------------------------------------------------------
   SECTION 3: CARD PATTERNS
   --------------------------------------------------------------------------
   Card components with unified lift + glow hover system
   Signature: diagonal accent, color-tinted shadows, refined transitions
   -------------------------------------------------------------------------- */

/* Base card */
.card {
    background: var(--color-background);
    border-radius: var(--border-radius-card);
    padding: var(--spacing-xl);
    transition: var(--transition-lift);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border);
    position: relative;
    gap: var(--spacing-sm);
}

/* Diagonal accent overlay - signature visual element */
.card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-diagonal-accent);
    opacity: 0;
    transition: opacity 0.4s var(--ease-elegant);
    pointer-events: none;
    border-radius: inherit;
}

.card:hover::after {
    opacity: 1;
}

/* Standard hover lift - unified pattern */
.card.card-lift {
    cursor: pointer;
}

.card.card-lift:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-border-primary-subtle);
}

.card.card-lift:active {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* Dramatic hover lift - for featured cards */
.card.card-lift-dramatic {
    cursor: pointer;
}

.card.card-lift-dramatic:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: var(--shadow-card-lifted), var(--shadow-glow-primary-soft);
    border-color: var(--color-primary-muted);
}

/* Card with top bar reveal on hover */
.card.card-reveal {
    position: relative;
    overflow: hidden;
}

.card.card-reveal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ease-elegant);
    z-index: 1;
}

.card.card-reveal:hover::before {
    transform: scaleX(1);
}

/* Card with gradient top bar - signature element */
.card.card-reveal-gradient::before {
    background: var(--gradient-border-glow);
    background-size: 200% 100%;
}

.card.card-reveal-gradient:hover::before {
    animation: borderFlow 3s ease infinite;
}

/* Card with bottom glow effect */
.card.card-glow {
    position: relative;
    z-index: 0;
}

.card.card-glow::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 15%;
    right: 15%;
    height: 60%;
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    opacity: 0;
    filter: blur(40px);
    transition: opacity 0.5s var(--ease-elegant);
    z-index: -1;
    border-radius: 50%;
}

.card.card-glow:hover::after {
    opacity: 0.2;
}

/* Card with shimmer on hover */
.card.card-shimmer {
    overflow: hidden;
}

.card.card-shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
    );
    transition: none;
    z-index: 1;
}

.card.card-shimmer:hover::before {
    animation: shimmer 0.8s ease-out;
}

/* Card image with zoom on hover */
.card-image {
    overflow: hidden;
    border-radius: var(--border-radius-md);
}

.card-image img {
    width: 100%;
    height: auto;
    transition: transform 0.4s var(--ease-elegant);
}

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

/* Card icon - icon container at top of card */
.card-icon {
    width: 48px;
    height: 48px;
    background: var(--color-primary-light);
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: var(--spacing-xs);
    align-self: center;
    justify-self: center;
}

/* Card content sections */
.card-title {
    margin: var(--spacing-xs) 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    display: flex;
    flex-direction: row;
    justify-self: center;
    width: auto;
    gap: var(--spacing-sm);
}

.card-description {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

/* Card note - secondary context/callout within card */
.card-note {
    margin: 0;
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--color-surface-darkened);
    border-radius: var(--border-radius-sm);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: 1.5;
}

.card-meta {
    display: inline-block;
    margin-top: var(--spacing-md);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-surface);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Card link - arrow link at bottom of card */
.card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: var(--spacing-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    transition: gap 0.2s var(--ease-elegant), color 0.2s var(--ease-elegant);
}

.card:hover .card-link {
    color: var(--color-primary-dark);
    gap: var(--spacing-sm);
}

/* Card as link (clickable card) */
a.card {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}

/* Card grid layout */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 340px));
    gap: var(--spacing-lg);
    justify-content: center;
}

/* Icon grid - simple centered icons with text (no card chrome) */
.icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 200px));
    gap: var(--spacing-md);
    justify-content: center;
}

.icon-item {
    text-align: center;
    padding: var(--spacing-lg);
}

.icon-item-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: var(--spacing-sm);
}

.icon-item-text {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
    margin: 0;
}

/* Compact card grid - fits more cards per row */
.card-grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
    gap: var(--spacing-md);
    justify-content: center;
}

/* Compact card variant - smaller padding and text */
.card.card-compact {
    padding: var(--spacing-md);
    gap: var(--spacing-xs);
}

.card-compact .card-icon {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
}

.card-compact .card-title {
    margin-bottom: var(--spacing-sm);
}

.card-compact .card-description {
    font-size: var(--font-size-sm);
}

@media (max-width: 768px) {
    .card-grid-compact {
        grid-template-columns: 1fr;
    }
}

/* Info box grid - fixed 2-column layout for longer text content */
.info-box-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

/* Info box - larger card for descriptive text without icons */
.info-box {
    background: var(--color-background);
    border-radius: var(--border-radius-card);
    padding: var(--spacing-xl);
    border: 1px solid var(--color-border);
    transition: var(--transition-lift);
}

.info-box ul {
    list-style: disc;
    list-style-position: inside;
}

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

.info-box h3,
.info-box-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0 0 var(--spacing-sm) 0;
}

.info-box p,
.info-box-description {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 768px) {
    .info-box-grid {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   SECTION 3B: SUBSCRIPTION PLAN CARDS
   --------------------------------------------------------------------------
   Plan comparison cards with "curated warmth" aesthetic.
   Purple-tinted shadows, violet accents, warm typography.

   HTML:
     <div class="card-grid plan-comparison">
       <div class="card current-plan">
         <div class="card-meta">Current Plan</div>
         <div class="card-title">Free Plan</div>
         <div class="card-description">Free</div>
         <div class="checklist plan-features">...</div>
       </div>
       <div class="card new-plan recommended">...</div>
     </div>
   -------------------------------------------------------------------------- */

/* Plan comparison grid - side by side on desktop, stacked on mobile */
.plan-comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

/* Plan card base - warm gradient background */
.plan-comparison .card {
    background: var(--gradient-card-base);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-card);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-card);
    transition: var(--transition-card);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.plan-comparison .card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-4px);
    border-color: var(--color-border-primary-subtle);
}

/* Current plan - subtle muted styling */
.plan-comparison .card.current-plan {
    background: linear-gradient(
        160deg,
        var(--color-background) 0%,
        var(--color-surface) 100%
    );
    border-color: var(--color-border-medium);
}

/* New/recommended plan - hero card with violet glow */
.plan-comparison .card.new-plan,
.plan-comparison .card.recommended {
    background: linear-gradient(
        160deg,
        rgba(92, 67, 244, 0.03) 0%,
        rgba(92, 67, 244, 0.01) 50%,
        var(--color-background) 100%
    );
    border-color: rgba(92, 67, 244, 0.15);
    box-shadow:
        0 4px 16px rgba(92, 67, 244, 0.08),
        0 1px 4px rgba(92, 67, 244, 0.04);
}

.plan-comparison .card.new-plan:hover,
.plan-comparison .card.recommended:hover {
    box-shadow:
        0 8px 24px rgba(92, 67, 244, 0.12),
        0 2px 8px rgba(92, 67, 244, 0.06);
    border-color: rgba(92, 67, 244, 0.25);
}

/* Card meta badge - small uppercase pill */
.plan-comparison .card-meta,
.card-meta.plan-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: rgba(92, 67, 244, 0.08);
    border-radius: var(--border-radius-full);
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-primary);
    width: fit-content;
    margin-bottom: var(--spacing-xs);
}

/* Current plan badge - muted */
.card.current-plan .card-meta {
    background: var(--color-surface-darkened);
    color: rgba(30, 25, 55, 0.6);
}

/* Recommended/popular badge - highlighted */
.card.recommended .card-meta,
.card-meta.most-popular {
    background: linear-gradient(
        135deg,
        rgba(92, 67, 244, 0.12) 0%,
        rgba(0, 255, 203, 0.08) 100%
    );
    color: var(--color-primary);
    border: 1px solid rgba(92, 67, 244, 0.15);
}

/* Plan title - warm heading */
.plan-comparison .card-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: rgba(30, 25, 55, 0.88);
    margin: 0;
    letter-spacing: -0.01em;
}

/* Plan price/description */
.plan-comparison .card-description {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin: 0;
}

.card.current-plan .card-description {
    color: rgba(30, 25, 55, 0.6);
}

/* Plan features checklist - VIOLET tint instead of green */
.plan-features.checklist {
    margin-top: var(--spacing-sm);
    gap: var(--spacing-xs);
}

.plan-features .checklist-item {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-md);
    gap: var(--spacing-sm);
    border: none;
}

/* Override green success colors with violet warmth */
.plan-features .checklist-item.completed {
    background: rgba(92, 67, 244, 0.06);
    border: 1px solid rgba(92, 67, 244, 0.1);
}

.plan-features .checklist-item.completed .checklist-status {
    color: var(--color-primary);
}

.plan-features .checklist-item.completed .checklist-content,
.plan-features .checklist-item.completed .checklist-title {
    color: rgba(30, 25, 55, 0.78);
    font-weight: var(--font-weight-medium);
}

/* Current plan features - more muted */
.card.current-plan .plan-features .checklist-item.completed {
    background: rgba(30, 25, 55, 0.04);
    border-color: rgba(30, 25, 55, 0.08);
}

.card.current-plan .plan-features .checklist-item.completed .checklist-status {
    color: rgba(30, 25, 55, 0.5);
}

.card.current-plan .plan-features .checklist-item.completed .checklist-content {
    color: rgba(30, 25, 55, 0.65);
}

/* Plan card footer - action area */
.plan-comparison .card-footer {
    margin-top: auto;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
}

/* ==========================================================================
   PlanComparisonView Specific Styles
   Uses: .planComparison, .card.plan, .card-badge, .planFeatures
   ========================================================================== */

/* Plan comparison container */
.planComparison {
    padding: var(--spacing-md) 0;
}

.planComparison .card-grid.plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

/* Plan card base */
.card.plan {
    background: var(--gradient-card-base);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-card);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-card);
    transition: var(--transition-card);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    position: relative;
    overflow: visible;
}

.card.plan:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-4px);
    border-color: var(--color-border-primary-subtle);
}

/* Card badge - top badge for "Most Popular" / "Current Plan" */
.card.plan .card-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 14px;
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    z-index: 1;
}

/* Most Popular badge - violet gradient */
.card.plan.popular .card-badge {
    background: linear-gradient(
        135deg,
        rgba(92, 67, 244, 0.15) 0%,
        rgba(0, 255, 203, 0.1) 100%
    );
    color: var(--color-primary);
    border: 1px solid rgba(92, 67, 244, 0.2);
    box-shadow: 0 2px 8px rgba(92, 67, 244, 0.1);
}

/* Current Plan badge - muted */
.card.plan.current .card-badge.current {
    background: var(--color-surface-darkened);
    color: rgba(30, 25, 55, 0.6);
    border: 1px solid var(--color-border);
}

/* Popular/recommended plan - hero treatment */
.card.plan.popular {
    background: linear-gradient(
        160deg,
        rgba(92, 67, 244, 0.04) 0%,
        rgba(92, 67, 244, 0.015) 50%,
        var(--color-background) 100%
    );
    border-color: rgba(92, 67, 244, 0.18);
    box-shadow:
        0 4px 20px rgba(92, 67, 244, 0.1),
        0 2px 6px rgba(92, 67, 244, 0.05);
}

.card.plan.popular:hover {
    box-shadow:
        0 8px 28px rgba(92, 67, 244, 0.14),
        0 4px 10px rgba(92, 67, 244, 0.08);
    border-color: rgba(92, 67, 244, 0.28);
    transform: translateY(-6px);
}

/* Current plan - subtle muted */
.card.plan.current {
    background: linear-gradient(
        160deg,
        var(--color-background) 0%,
        var(--color-surface) 100%
    );
    border-color: var(--color-border-medium);
    opacity: 0.9;
}

.card.plan.current:hover {
    opacity: 1;
}

/* Plan header */
.planHeader {
    text-align: center;
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

.planHeader .planName {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: rgba(30, 25, 55, 0.88);
    margin-bottom: var(--spacing-xs);
    letter-spacing: -0.01em;
}

.planHeader .planPrice {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

/* Current plan price - muted */
.card.plan.current .planHeader .planPrice {
    color: rgba(30, 25, 55, 0.6);
}

/* Plan features checklist - VIOLET tint */
.planFeatures.checklist {
    flex: 1;
    gap: var(--spacing-xs);
}

.planFeatures .checklist-item {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-md);
    gap: var(--spacing-sm);
    border: none;
    background: transparent;
}

/* Override green with violet for plan features */
.planFeatures .checklist-item.completed {
    background: rgba(92, 67, 244, 0.05);
    border: 1px solid rgba(92, 67, 244, 0.08);
}

.planFeatures .checklist-item.completed .checklist-status {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}

.planFeatures .checklist-item.completed .checklist-content {
    color: rgba(30, 25, 55, 0.75);
    font-size: var(--font-size-sm);
}

.planFeatures .checklist-content .featureName {
    font-weight: var(--font-weight-semibold);
    color: rgba(30, 25, 55, 0.78);
}

.planFeatures .checklist-content .featureValue {
    color: rgba(30, 25, 55, 0.65);
}

/* Current plan features - more muted */
.card.plan.current .planFeatures .checklist-item.completed {
    background: rgba(30, 25, 55, 0.03);
    border-color: rgba(30, 25, 55, 0.06);
}

.card.plan.current .planFeatures .checklist-item.completed .checklist-status {
    color: rgba(30, 25, 55, 0.45);
}

.card.plan.current .planFeatures .checklist-content {
    color: rgba(30, 25, 55, 0.6);
}

/* Plan actions */
.planActions {
    margin-top: auto;
    padding-top: var(--spacing-md);
}

.planActions .command {
    width: 100%;
    justify-content: center;
}

.planActions .command.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.command.disabled, .command[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Plan summary card - compact version for payment step */
.card.plan-summary {
    background: var(--gradient-card-base);
    padding: var(--spacing-lg);
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.card.plan-summary .card-title {
    color: rgba(30, 25, 55, 0.88);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-xs);
}

.card.plan-summary .card-description {
    color: var(--color-primary);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

/* Change summary board */
.change-summary .form-group.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-border);
}

.change-summary .form-group.summary-item:last-child {
    border-bottom: none;
}

.change-summary .form-label {
    color: rgba(30, 25, 55, 0.6);
    font-weight: var(--font-weight-medium);
}

.change-summary .form-static {
    color: rgba(30, 25, 55, 0.88);
    font-weight: var(--font-weight-semibold);
}

/* Responsive - stack on mobile */
@media (max-width: 640px) {
    .plan-comparison {
        grid-template-columns: 1fr;
    }

    .plan-comparison .card {
        padding: var(--spacing-lg);
    }
}

/* ==========================================================================
   Dialog-specific plan card overrides
   Inside dialog drawers (400-500px), force single column full-width layout
   ========================================================================== */

/* Plan cards inside dialogs - full width, single column */
.dialog .plan-comparison,
.dialog-body .plan-comparison,
.dialog .planComparison .card-grid.plans,
.dialog-body .planComparison .card-grid.plans {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.dialog .plan-comparison .card,
.dialog-body .plan-comparison .card,
.dialog .card.plan,
.dialog-body .card.plan {
    width: 100%;
    max-width: none;
}

/* Remove the centered grid behavior in dialogs */
.dialog .planComparison,
.dialog-body .planComparison {
    padding: 0;
}

.dialog .planComparison .card-grid.plans,
.dialog-body .planComparison .card-grid.plans {
    margin-top: var(--spacing-md);
}

/* Compact plan cards for dialog context */
.dialog .card.plan,
.dialog-body .card.plan {
    padding: var(--spacing-lg);
}

.dialog .planHeader,
.dialog-body .planHeader {
    text-align: left;
    padding-bottom: var(--spacing-sm);
    border-bottom: none;
}

.dialog .planHeader .planName,
.dialog-body .planHeader .planName {
    font-size: var(--font-size-lg);
}

.dialog .planHeader .planPrice,
.dialog-body .planHeader .planPrice {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

/* Compact checklist in dialog */
.dialog .planFeatures .checklist-item,
.dialog-body .planFeatures .checklist-item {
    padding: var(--spacing-xs) var(--spacing-sm);
}

/* Card badge positioning for dialog (inline instead of absolute) */
.dialog .card.plan .card-badge,
.dialog-body .card.plan .card-badge {
    position: static;
    transform: none;
    margin-bottom: var(--spacing-xs);
    width: fit-content;
}

/* Plan actions full width in dialog */
.dialog .planActions,
.dialog-body .planActions {
    padding-top: var(--spacing-sm);
}

/* ==========================================================================
   Upgraded Plan Comparison Layout - Current Plan Strip
   Shows current plan as compact reference, focuses on upgrade options
   ========================================================================== */

/* Current plan strip - compact horizontal reference */
.current-plan-strip {
    background: linear-gradient(
        135deg,
        rgba(30, 25, 55, 0.03) 0%,
        rgba(30, 25, 55, 0.015) 100%
    );
    border: 1px solid rgba(30, 25, 55, 0.08);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.current-plan-info {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.current-plan-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: rgba(30, 25, 55, 0.5);
}

.current-plan-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: rgba(30, 25, 55, 0.85);
}

.current-plan-price {
    font-size: var(--font-size-sm);
    color: rgba(30, 25, 55, 0.6);
    font-weight: var(--font-weight-medium);
}

.current-plan-summary {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.current-plan-summary .summary-item {
    font-size: var(--font-size-xs);
    color: rgba(30, 25, 55, 0.55);
}

.current-plan-summary .summary-divider {
    color: rgba(30, 25, 55, 0.25);
    font-size: var(--font-size-xs);
}

/* Upgrade prompt heading */
.upgrade-prompt {
    font-size: var(--font-size-lg) !important;
    font-weight: var(--font-weight-semibold) !important;
    color: rgba(30, 25, 55, 0.85) !important;
    margin-bottom: var(--spacing-sm) !important;
    margin-top: var(--spacing-xs) !important;
}

/* Available plans grid - the upgrade focus */
.available-plans {
    gap: var(--spacing-md) !important;
}

/* Upgrade option card - hero treatment */
.card.plan.upgrade-option {
    background: linear-gradient(
        160deg,
        rgba(92, 67, 244, 0.035) 0%,
        var(--color-background) 100%
    );
    border-color: rgba(92, 67, 244, 0.12);
}

.card.plan.upgrade-option:hover {
    border-color: rgba(92, 67, 244, 0.25);
    box-shadow:
        0 6px 24px rgba(92, 67, 244, 0.12),
        0 2px 8px rgba(92, 67, 244, 0.06);
}

/* Downgrade option - muted, de-emphasized */
.card.plan.downgrade-option {
    background: var(--color-surface);
    border-color: var(--color-border);
    opacity: 0.85;
}

.card.plan.downgrade-option:hover {
    opacity: 1;
}

/* Upgrade badge */
.card.plan .card-badge.upgrade-badge {
    background: linear-gradient(
        135deg,
        rgba(92, 67, 244, 0.1) 0%,
        rgba(92, 67, 244, 0.05) 100%
    );
    color: var(--color-primary);
    border: 1px solid rgba(92, 67, 244, 0.15);
}

/* Popular/recommended badge - more prominent */
.card.plan .card-badge.popular-badge {
    background: linear-gradient(
        135deg,
        var(--color-primary) 0%,
        rgba(92, 67, 244, 0.85) 100%
    );
    color: white;
    border: none;
    box-shadow: 0 2px 8px rgba(92, 67, 244, 0.3);
}

/* Popular card even more prominent in upgrade context */
.card.plan.popular.upgrade-option {
    background: linear-gradient(
        160deg,
        rgba(92, 67, 244, 0.06) 0%,
        rgba(92, 67, 244, 0.02) 50%,
        var(--color-background) 100%
    );
    border-color: rgba(92, 67, 244, 0.2);
    box-shadow:
        0 4px 20px rgba(92, 67, 244, 0.1),
        0 2px 6px rgba(92, 67, 244, 0.05);
}

.card.plan.popular.upgrade-option:hover {
    box-shadow:
        0 8px 32px rgba(92, 67, 244, 0.15),
        0 4px 12px rgba(92, 67, 244, 0.08);
    transform: translateY(-6px);
}

/* Responsive: stack on mobile */
@media (max-width: 480px) {
    .current-plan-strip {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .current-plan-info {
        flex-direction: column;
        gap: 2px;
    }

    .current-plan-summary {
        margin-top: var(--spacing-xs);
    }
}

/* --------------------------------------------------------------------------
   SECTION 4: INCREMENTER / STEPPER
   --------------------------------------------------------------------------
   Number input with +/- buttons (price, quantity, inventory)
   -------------------------------------------------------------------------- */

.incrementer {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    background: var(--color-background);
    overflow: hidden;
}

.incrementer .command {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-surface);
    border: none;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-light);
    cursor: pointer;
    transition: var(--transition-fast);
    user-select: none;
}

.incrementer .command:hover {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.incrementer .command:active {
    background: var(--color-primary);
    color: var(--color-background);
}

.incrementer .textbox {
    flex: 1;
    min-width: 60px;
    margin-bottom: 0;
}

.incrementer .textbox input {
    width: 100%;
    text-align: center;
    border: none;
    background: transparent;
    padding: var(--spacing-sm);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

.incrementer .textbox input:focus {
    outline: none;
}

/* Compact incrementer */
.incrementer.incrementer-sm .command {
    width: 32px;
    height: 32px;
    font-size: var(--font-size-base);
}

.incrementer.incrementer-sm .textbox input {
    font-size: var(--font-size-sm);
}

/* Incrementer Field — wrapper with label above incrementer
   Used in dialogs for labeled quantity/value inputs */
.incrementer-field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.incrementer-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm-body);
    letter-spacing: 0.01em;
}

/* Ensure incrementer buttons have visible styling in dialog context */
.dialog .incrementer,
.dialog-body .incrementer {
    border: 1px solid var(--color-border);
    box-shadow: 0 1px 3px rgba(124, 58, 237, 0.06);
    max-width: 180px;
}

    .dialog .incrementer .command,
    .dialog-body .incrementer .command {
        background: var(--color-surface);
        border-radius: 0;
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-bold);
        color: rgba(30, 25, 55, 0.6);
    }

        .dialog .incrementer .command:hover,
        .dialog-body .incrementer .command:hover {
            background: var(--color-primary-light);
            color: var(--color-primary);
        }

        .dialog .incrementer .command:active,
        .dialog-body .incrementer .command:active {
            background: var(--color-primary);
            color: var(--color-background);
        }

/* Incrementer with suffix text (e.g., "items", "days") */
.incrementer-field:has(.incrementer-suffix) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.incrementer-field:has(.incrementer-suffix) .incrementer-label {
    width: 100%;
}

.incrementer-suffix {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-left: var(--spacing-sm);
}

/* Price break preview */
.price-break-preview {
    margin-top: var(--spacing-md);
}

.price-break-preview .preview-text {
    font-size: var(--font-size-sm);
}

/* --------------------------------------------------------------------------
   SECTION 5: TOGGLE SWITCH
   --------------------------------------------------------------------------
   Boolean toggle for on/off states
   -------------------------------------------------------------------------- */

.toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
}

.toggle-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.toggle-label {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    background: var(--color-border-medium);
    border-radius: var(--border-radius-full);
    transition: background 0.3s var(--ease-elegant);
}

.toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: var(--color-background);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s var(--ease-elegant);
}

.toggle-checkbox:checked + .toggle-label .toggle-switch {
    background: var(--color-primary);
}

.toggle-checkbox:checked + .toggle-label .toggle-switch::after {
    transform: translateX(20px);
}

.toggle-checkbox:focus-visible + .toggle-label .toggle-switch {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.toggle-text {
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

/* Option toggle - container for checkbox + label toggle pattern */
.option-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Toggle list - vertical stack of option toggles */
.toggle-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Toggle group - container for multiple toggles */
.toggle-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.toggle-group .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.toggle-group .form-hint {
    margin-left: 56px; /* 44px switch + 12px gap */
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

/* --------------------------------------------------------------------------
   Preference Grid — channel toggle matrix for notification/settings grids
   Rows: category label + hint, Columns: channel toggles (Email, SMS, etc.)
   Locked rows show "Always" for non-disableable categories.
   -------------------------------------------------------------------------- */

.pref-grid {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    min-width: 500px;
    max-width: 100%;
    align-self: center;
}

.pref-grid-header {
    display: grid;
    grid-template-columns: 1fr 72px 72px;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.pref-grid-header .pref-grid-channel {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm-muted);
    text-align: center;
}

.pref-grid-row {
    display: grid;
    grid-template-columns: 1fr 72px 72px;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    transition: background 0.15s var(--ease-elegant);
}

.pref-grid-row:last-child {
    border-bottom: none;
}

.pref-grid-row:hover {
    background: var(--color-primary-bg-subtle);
}

.pref-grid-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pref-grid-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-warm);
}

.pref-grid-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-warm-muted);
}

.pref-grid-channel {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Compact toggle inside grid — no text label, just the switch */
.pref-grid-channel .toggle {
    gap: 0;
}

.pref-grid-channel .toggle-label {
    gap: 0;
}

/* Locked/always-on rows */
.pref-grid-locked {
    background: var(--gradient-footer-warm);
}

.pref-grid-locked:hover {
    background: var(--gradient-footer-warm);
}

.pref-grid-locked .pref-grid-name {
    color: var(--color-text-warm-muted);
}

.pref-grid-always {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm-muted);
}

/* N/A channel (no SMS for email-only categories) */
.pref-grid-na {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   SECTION 6: STICKY HEADERS
   --------------------------------------------------------------------------
   Headers that stick to viewport on scroll
   -------------------------------------------------------------------------- */

.sticky-header {
    position: sticky;
    top: 0;
    z-index: var(--z-index-sticky);
    background: var(--color-background);
    border-bottom: 1px solid var(--color-border);
    transition: box-shadow 0.3s var(--ease-elegant);
}

.sticky-header.scrolled {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Revealed header (hide on scroll down, show on scroll up) */
.header-reveal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-index-fixed);
    background: var(--color-background);
    transform: translateY(-100%);
    transition: transform 0.3s var(--ease-elegant);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-reveal.visible {
    transform: translateY(0);
}

/* --------------------------------------------------------------------------
   SECTION 6B: APP HEADER
   --------------------------------------------------------------------------
   Two-bar application header with logo, search, navigation tabs, and actions.
   Supports sticky/fixed scroll behavior via body class toggles.
   Site-specific overrides (IDs, images) belong in style-header.css.
   -------------------------------------------------------------------------- */

/* --- Root container ---
   Uses column-reverse so the secondary bar (location, user menu) renders
   above the primary bar visually, while the primary bar comes first in DOM
   order for accessibility and focus sequence. */
.app-header {
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
    position: relative;
    z-index: var(--z-index-sticky);
    background: var(--color-background);
}

/* --- Primary bar --- Logo + search + tabs + cart */
.app-header-primary {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    width: 100%;
    min-height: 56px;
    padding: var(--spacing-sm) var(--spacing-md);
    box-sizing: border-box;
    position: relative;
    box-shadow: var(--shadow-sm);
}

/* --- Secondary bar --- Location + user actions */
.app-header-secondary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 36px;
    padding: 0 var(--spacing-md);
    box-sizing: border-box;
    background: var(--color-black);
    color: var(--color-primary-on-dark);
    font-size: var(--font-size-sm);
    border-top: 1px solid var(--color-glass);
}

/* --- Logo --- */
.app-header-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: 34px;
    transition: opacity var(--transition-fast);
}

.app-header-logo img {
    height: 100%;
    width: auto;
    display: block;
}

.app-header-logo:hover {
    opacity: 0.85;
}

/* --- Search --- */
.app-header-search {
    flex: 1;
    min-width: 0;
    max-width: 480px;
    margin: 0 auto;
    position: relative;
}

.app-header-search input,
.app-header-search.textbox input {
    width: 100%;
    height: var(--form-input-height);
    padding: 0 var(--spacing-md) 0 calc(var(--spacing-xl) + var(--spacing-sm));
    border: 1px solid var(--color-border-medium);
    border-radius: var(--border-radius-full);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--font-size-base);
    font-family: var(--font-family-base);
    outline: none;
    box-sizing: border-box;
    transition: var(--transition-colors), box-shadow var(--transition-fast);
}

.app-header-search input::placeholder {
    color: var(--color-text-muted);
}

.app-header-search input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
    background: var(--color-background);
}

/* Search icon (positioned inside the input via pseudo-element on wrapper) */
.app-header-search::before {
    content: '';
    position: absolute;
    left: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23888'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
}

/* Search clear button */
.app-header-search-clear {
    position: absolute;
    right: var(--spacing-sm);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    border: none;
    background: var(--color-surface-darkened);
    background-image: url("/images/icon/close-black.svg");
    background-size: var(--icon-size-sm);
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--border-radius-full);
    cursor: pointer;
    font-size: 0;
    text-indent: -9999px;
    color: var(--color-text-muted);
    display: none;
    align-items: center;
    justify-content: center;
    transition: var(--transition-colors);
    z-index: 2;
}

.app-header-search-clear:hover {
    background-color: var(--color-border-medium);
}

/* Transparent header: light clear button */
.app-header-transparent .app-header-search-clear {
    background-color: var(--color-glass);
    background-image: url("/images/icon/close-white.svg");
}

.app-header-transparent .app-header-search-clear:hover {
    background-color: var(--color-glass-heavy);
    background-image: url("/images/icon/close-black.svg");
}

/* Scroll revert: back to default clear button */
body.scrolledBack .app-header-transparent .app-header-search-clear {
    background-color: var(--color-surface-darkened);
    background-image: url("/images/icon/close-black.svg");
}

body.scrolledBack .app-header-transparent .app-header-search-clear:hover {
    background-color: var(--color-border-medium);
}

.app-header-search input:not(:placeholder-shown) ~ .app-header-search-clear {
    display: flex;
}

/* --- Tab navigation --- Horizontal scrollable tabs */
.app-header-nav {
    display: flex;
    align-items: stretch;
    gap: 0;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-shrink: 0;
}

.app-header-nav::-webkit-scrollbar {
    display: none;
}

.app-header-nav-item {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    white-space: nowrap;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    text-decoration: none;
    cursor: pointer;
    position: relative;
    transition: color var(--transition-fast);
    border: none;
    background: none;
    font-family: var(--font-family-base);
}

.app-header-nav-item:hover {
    color: var(--color-text);
}

.app-header-nav-item.active {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

/* Active tab underline marker */
.app-header-nav-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: var(--spacing-sm);
    right: var(--spacing-sm);
    height: 2px;
    background: var(--color-primary);
    border-radius: 1px;
}

/* Sliding marker (JS-positioned alternative to ::after) */
.app-header-nav-marker {
    position: absolute;
    bottom: 0;
    height: 2px;
    background: var(--color-primary);
    border-radius: 1px;
    transition: left var(--transition-medium), width var(--transition-medium);
    pointer-events: none;
}

/* --- Right-side actions --- Cart, user menu, etc. */
.app-header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
    margin-left: 0;
    min-width: 95px;
    margin-right: 0;
    justify-content: flex-end;
}
#Body.contentPage .app-header-actions {
    margin-left: auto;
}

@media (max-width: 800px) {
    .app-header-actions {
        min-width: initial;
    }
}

/* Action button base */
.app-header-action {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    border-radius: var(--border-radius-md);
    color: var(--color-text-light);
    cursor: pointer;
    transition: var(--transition-colors);
    font-size: 0;
    text-indent: -9999px;
}

.app-header-action:hover {
    background: var(--color-surface-darkened);
    color: var(--color-text);
}

/* Action icon via background-image (SVG pattern) */
.app-header-action-icon {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* Cart badge (item count) */
.app-header-cart-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--color-accent);
    color: var(--color-white);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    line-height: 18px;
    text-align: center;
    border-radius: var(--border-radius-full);
    text-indent: 0;
    pointer-events: none;
}

.app-header-cart-badge:empty,
.app-header-cart-badge[data-count="0"] {
    display: none;
}

/* --- Secondary bar elements --- */
.app-header-location {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-primary-on-dark);
    cursor: pointer;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    transition: var(--transition-colors);
    white-space: nowrap;
}

.app-header-location:hover {
    background: var(--color-glass);
}

.app-header-user {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-left: auto;
}

.app-header-user-action {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-primary-on-dark);
    cursor: pointer;
    border-radius: var(--border-radius-sm);
    transition: var(--transition-colors);
    border: none;
    background: none;
    font-family: var(--font-family-base);
    white-space: nowrap;
}

.app-header-user-action:hover {
    background: var(--color-glass);
}


/* --- Mobile menu toggle --- Hidden globally (app uses account icon as menu) */
.app-header-menu {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: none;
    background: transparent;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    color: var(--color-text);
    transition: var(--transition-colors);
}

.app-header-menu:hover {
    background: var(--color-surface-darkened);
}

/* --- Scroll states ---
   Applied by ScrollManager via body class toggles.
   .scrolled = user has scrolled down past threshold (header disappears)
   .scrolledBack = user scrolling back up (header reveals as fixed) */

/* Fixed reveal state */
body.scrolledBack .app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: var(--shadow-md);
    animation: appHeaderReveal 0.3s var(--ease-out);
}

/* Hide secondary bar when fixed */
body.scrolledBack .app-header-secondary {
    display: none;
}

@keyframes appHeaderReveal {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* --- Transparent variant ---
   For hero/landing pages where header overlays the content */
.app-header-transparent {
    position: absolute;
    top: 0;
    background: transparent;
    z-index: var(--z-index-fixed);
}

.app-header-transparent .app-header-primary {
    box-shadow: none;
}

.app-header-transparent .app-header-search input {
    background: var(--color-glass-normal);
    border-color: var(--color-glass);
    color: var(--color-white);
}

.app-header-transparent .app-header-search input::placeholder {
    color: var(--color-glass-heavy);
}

.app-header-transparent .app-header-nav-item {
    color: var(--color-glass-heavy);
}

.app-header-transparent .app-header-nav-item:hover,
.app-header-transparent .app-header-nav-item.active {
    color: var(--color-white);
}

.app-header-transparent .app-header-nav-item.active::after {
    background: var(--color-white);
}

.app-header-transparent .app-header-action {
    color: var(--color-glass-heavy);
}

.app-header-transparent .app-header-action:hover {
    background: var(--color-glass);
    color: var(--color-white);
}

/* When scrolled back, the transparent variant becomes opaque */
body.scrolledBack .app-header-transparent {
    background: var(--color-background);
}

body.scrolledBack .app-header-transparent .app-header-search input {
    background: var(--color-surface);
    border-color: var(--color-border-medium);
    color: var(--color-text);
}

body.scrolledBack .app-header-transparent .app-header-search input::placeholder {
    color: var(--color-text-muted);
}

body.scrolledBack .app-header-transparent .app-header-nav-item {
    color: var(--color-text-muted);
}

body.scrolledBack .app-header-transparent .app-header-nav-item:hover {
    color: var(--color-text);
}

body.scrolledBack .app-header-transparent .app-header-nav-item.active {
    color: var(--color-primary);
}

body.scrolledBack .app-header-transparent .app-header-nav-item.active::after {
    background: var(--color-primary);
}

body.scrolledBack .app-header-transparent .app-header-action {
    color: var(--color-text-light);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .app-header-primary {
        flex-wrap: wrap;
    }

    /* Nav tabs wrap to own row; search stays inline with logo */
    .app-header-nav {
        order: 10;
        flex-basis: 100%;
        margin-top: var(--spacing-xs);
        border-top: 1px solid var(--color-border);
        padding-top: var(--spacing-xs);
    }

    /* Collapsed search: bare icon only */
    .app-header-search {
        flex: 0 0 40px;
        max-width: 40px;
        margin: 0;
    }

    .app-header-search input {
        opacity: 0;
        cursor: pointer;
    }

    /* Bare icon — black on normal pages */
    .app-header-search::before {
        left: 50%;
        transform: translate(-50%, -50%);
        width: 22px;
        height: 22px;
        filter: brightness(0);
    }

    /* White icon on transparent header (homepage) */
    .app-header-transparent .app-header-search::before {
        filter: brightness(0) invert(1);
    }

    /* Scrolled-back: revert to black */
    body.scrolledBack .app-header-transparent .app-header-search::before {
        filter: brightness(0);
    }

    /* Expanded search: fill available space on same row */
    .app-header-search:focus-within {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
    }

    .app-header-search:focus-within input {
        opacity: 1;
        cursor: text;
    }

    .app-header-search:focus-within::before {
        left: var(--spacing-md);
        transform: translateY(-50%);
        width: var(--icon-size-sm);
        height: var(--icon-size-sm);
        filter: none;
    }

    /* Hide clear button when collapsed */
    .app-header-search .app-header-search-clear {
        display: none !important;
    }

    .app-header-search:focus-within input:not(:placeholder-shown) ~ .app-header-search-clear {
        display: flex !important;
    }

    /* Transparent header expanded */
    .app-header-transparent .app-header-search:focus-within input {
        color: var(--color-white);
    }

    .app-header-transparent .app-header-search:focus-within input::placeholder {
        color: var(--color-glass-heavy);
    }

    body.scrolledBack .app-header-transparent .app-header-search:focus-within input {
        color: var(--color-text);
    }

    body.scrolledBack .app-header-transparent .app-header-search:focus-within input::placeholder {
        color: var(--color-text-muted);
    }
}

@media (max-width: 480px) {
    .app-header-secondary {
        padding: 0 var(--spacing-sm);
        font-size: var(--font-size-xs);
    }

    .app-header-user-action .app-header-user-slug,
    .app-header-user-action .app-header-user-arrow {
        display: none;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .app-header,
    .app-header-nav-marker,
    body.scrolledBack .app-header {
        animation: none;
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   SECTION 7: BOTTOM NAVIGATION
   --------------------------------------------------------------------------
   Fixed bottom navigation bar for mobile. Shows at smaller breakpoints.
   App-specific icon mappings go in navigation.css
   -------------------------------------------------------------------------- */

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-index-fixed);
    background: var(--color-background);
    border-top: 1px solid var(--color-border);
    padding-bottom: env(safe-area-inset-bottom, 0);
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-xs);
    min-height: 56px;
    color: var(--color-text-muted);
    text-decoration: none;
    cursor: pointer;
    position: relative;
    transition: color 0.2s var(--ease-out);
}

.bottom-nav-item:hover,
.bottom-nav-item:focus {
    color: var(--color-text);
    text-decoration: none;
}

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

/* Bottom nav icon container */
.bottom-nav-icon {
    width: 24px;
    height: 24px;
    margin-bottom: var(--spacing-xs);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.2s var(--ease-out);
}

.bottom-nav-item:hover .bottom-nav-icon {
    transform: scale(1.1);
}

/* Bottom nav label */
.bottom-nav-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

/* Bottom nav avatar (replaces account icon when user has avatar) */
.bottom-nav-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: var(--spacing-xs);
    transition: transform 0.15s ease;
}

.bottom-nav-item:hover .bottom-nav-avatar {
    transform: scale(1.1);
}

.bottom-nav-item.active .bottom-nav-avatar {
    box-shadow: 0 0 0 2px var(--color-primary);
}

/* Bottom nav badge (notification count) */
.bottom-nav-badge {
    position: absolute;
    top: 4px;
    right: 50%;
    transform: translateX(14px);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background-color: var(--color-accent);
    color: var(--color-white);
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    line-height: 18px;
    text-align: center;
    border-radius: var(--border-radius-full);
    box-sizing: border-box;
}

/* Sticky commands bar (for dialogs/forms) */
.commands-sticky {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-background);
    border-top: 1px solid var(--color-border);
    padding: var(--spacing-md);
    display: flex;
    gap: var(--spacing-sm);
    justify-content: flex-end;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
}

/* --------------------------------------------------------------------------
   SECTION 7B: TABBED NAVIGATION
   --------------------------------------------------------------------------
   Horizontal tab navigation with animated marker underline.
   Used for switching between views/panels.
   -------------------------------------------------------------------------- */

.tabbed-view {
    display: flex;
    flex-direction: column;
}

.tabbed-navigation {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    position: relative;
    border-bottom: 1px solid var(--color-border);
    padding: 0 var(--spacing-lg);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tabbed-navigation::-webkit-scrollbar {
    display: none;
}

.tab-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-md) var(--spacing-sm);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    transition: color 0.2s var(--ease-out);
    border: none;
    background: none;
}

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

.tab-item.selected {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

/* Animated underline marker */
.tab-item::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: var(--spacing-sm);
    right: var(--spacing-sm);
    height: 3px;
    background: var(--color-secondary);
    border-radius: 2px 2px 0 0;
    transform: scaleX(0);
    transition: transform 0.25s var(--ease-elegant);
}

.tab-item.selected::after {
    transform: scaleX(1);
}

/* Tab notification badge — inline (not absolute) so it doesn't clip in scrollable nav */
.tab-item .notification-badge {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    padding: 0 5px;
    background: var(--color-accent);
    color: var(--color-white);
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    border-radius: var(--border-radius-full);
    margin-left: var(--spacing-xs);
}

/* Tab panels container */
.tab-panels {
    flex: 1;
    position: relative;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

/* Legacy class support (.tab-view, .tab-nav, .tab-item) */
.tab-view {
    display: flex;
    flex-direction: column;
}

.tab-nav {
    display: flex;
    align-items: center;
    position: relative;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--spacing-xs);
}

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

.tab-nav .tab-item {
    display: flex;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s var(--ease-out);
    position: relative;
    margin-bottom: -1px;
}

.tab-nav .tab-item:hover {
    color: var(--color-text);
}

.tab-nav .tab-item.selected {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    border-bottom: 2px solid var(--color-primary);
}

/* Animated marker (positioned absolutely, moved via JS) */
.tab-nav .marker {
    position: absolute;
    bottom: 0;
    height: 3px;
    background: var(--color-primary);
    border-radius: 2px 2px 0 0;
    transition: left 0.25s var(--ease-elegant), width 0.25s var(--ease-elegant);
}

/* --------------------------------------------------------------------------
   SECTION 7C: QUICK NAVIGATION
   --------------------------------------------------------------------------
   Subtle inline navigation links, typically in header area.
   -------------------------------------------------------------------------- */

.quick-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.quick-nav-link {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: inherit;
    text-decoration: none;
    opacity: 0.9;
    transition: opacity 0.15s var(--ease-out);
}

.quick-nav-link:hover {
    opacity: 1;
    text-decoration: underline;
}

.quick-nav-separator {
    opacity: 0.5;
    font-size: var(--font-size-sm);
}

/* --------------------------------------------------------------------------
   SECTION 8: LOADING STATES
   --------------------------------------------------------------------------
   Loading indicators and skeleton states
   -------------------------------------------------------------------------- */

/* Busy overlay */
.busy-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-index-modal);
}

/* Spinner */
.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Skeleton loading */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-surface) 25%,
        var(--color-surface-darkened) 50%,
        var(--color-surface) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: var(--border-radius-sm);
}

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

.skeleton-text {
    height: 1em;
    margin-bottom: var(--spacing-xs);
}

.skeleton-title {
    height: 1.5em;
    width: 60%;
}

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

/* --------------------------------------------------------------------------
   SECTION 9: FOCUS & ACCESSIBILITY
   --------------------------------------------------------------------------
   Consistent focus indicators for keyboard navigation
   -------------------------------------------------------------------------- */

/* Standard focus ring */
.focus-ring:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Remove outline for mouse users */
.focus-ring:focus:not(:focus-visible) {
    outline: none;
}

/* Skip link for accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-primary);
    color: var(--color-background);
    padding: var(--spacing-sm) var(--spacing-md);
    z-index: var(--z-index-modal);
    transition: top 0.3s var(--ease-elegant);
}

.skip-link:focus {
    top: 0;
}

/* --------------------------------------------------------------------------
   SECTION 10: UTILITY CLASSES
   --------------------------------------------------------------------------
   Common utility patterns
   -------------------------------------------------------------------------- */

/* Visually hidden but accessible */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Truncate text with ellipsis */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Line clamp (multi-line truncate) */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Scroll container */
.scroll-container {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.scroll-container::-webkit-scrollbar {
    width: 8px;
}

.scroll-container::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: var(--border-radius-full);
}

.scroll-container::-webkit-scrollbar-thumb:hover {
    background: var(--color-border-medium);
}

/* Responsive text visibility */
.text-mobile { display: none; }
.desktop-only { }
@media (max-width: 600px) {
    .text-desktop { display: none !important; }
    .text-mobile { display: inline !important; }
    .desktop-only { display: none !important; }
}

/* --------------------------------------------------------------------------
   SECTION 11: BADGE COMPONENT
   --------------------------------------------------------------------------
   Status indicators, counts, labels
   -------------------------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius-full);
    transition: var(--transition-fast);
}

/* Small badge variant */
.badge-sm {
    padding: 2px var(--spacing-xs);
    font-size: 10px;
}

.badge-primary {
    background: var(--color-primary);
    color: var(--color-background);
}

.badge-primary-soft {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.badge-secondary {
    background: var(--color-secondary);
    color: var(--color-secondary-darker);
}

.badge-secondary-soft {
    background: var(--color-secondary-light);
    color: var(--color-secondary-dark);
}

.badge-success {
    background: var(--color-success-light, rgba(var(--color-success-rgb), 0.15));
    color: var(--color-success-dark, #059669);
}

.badge-warning {
    background: var(--color-warning-light, rgba(var(--color-warning-rgb), 0.15));
    color: var(--color-warning-dark, #b45309);
}

.badge-error {
    background: var(--color-error-light, rgba(var(--color-error-rgb), 0.15));
    color: var(--color-error-dark, #dc2626);
}

.badge-info {
    background: var(--color-info-light, rgba(var(--color-info-rgb), 0.15));
    color: var(--color-info-dark, #1d4ed8);
}

.badge-muted {
    background: var(--color-surface-darkened);
    color: var(--color-text-muted);
}

/* Count badge (circular) */
.badge-count {
    min-width: 20px;
    height: 20px;
    padding: 0 var(--spacing-xs);
    border-radius: 50%;
    font-size: 11px;
}

/* Dot indicator (no text) */
.badge-dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    padding: 0;
    border-radius: 50%;
}

.badge-dot.badge-success {
    background: var(--color-success);
}

.badge-dot.badge-warning {
    background: var(--color-warning);
}

.badge-dot.badge-error {
    background: var(--color-error);
}

/* Pulse animation for live indicators */
.badge-pulse {
    position: relative;
}

.badge-pulse::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: inherit;
    opacity: 0.5;
    animation: badge-pulse 1.5s ease-in-out infinite;
}

@keyframes badge-pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.15); opacity: 0; }
}

/* ==========================================================================
   SECTION 11B: STATUS BADGE (Dot+Pill Pattern)
   --------------------------------------------------------------------------
   Per style-guide.md - the standard status indicator pattern.
   A small colored dot precedes uppercase text in a tinted pill.

   Usage:
     <span class="status-badge status-pending">Pending</span>
     <span class="status-badge status-complete">Complete</span>
     <span class="status-badge role-selling">Selling</span>

   Variants:
     State: status-pending, status-draft, status-complete, status-live,
            status-success, status-warning, status-cancelled, status-error, status-info
     Role:  role-selling, role-buying
     Style: status-badge-glass (for dark/gradient backgrounds)
     Size:  status-badge-sm, status-badge-lg
   ========================================================================== */

/* Base dot+pill structure */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px var(--spacing-sm) 3px 8px;
    border-radius: var(--border-radius-full);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    text-transform: none;
    letter-spacing: 0.01em;
    white-space: nowrap;
    background: var(--color-surface-darkened);
    color: var(--color-text-muted);
}

/* The dot - created via ::before pseudo-element */
.status-badge::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: currentColor;
}

/* --- State Variants --- */

/* Pending / Draft — violet (primary) */
.status-badge.status-pending,
.status-badge.status-draft {
    background: rgba(92, 67, 244, 0.08);
    color: var(--color-primary);
}

/* Complete / Live / Success — green */
.status-badge.status-complete,
.status-badge.status-live,
.status-badge.status-success {
    background: rgba(34, 197, 94, 0.1);
    color: var(--color-success-dark, #15803d);
}
.status-badge.status-complete::before,
.status-badge.status-live::before,
.status-badge.status-success::before {
    background: var(--color-success);
}

/* Cancelled / Error — red */
.status-badge.status-cancelled,
.status-badge.status-error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-error-dark, #b91c1c);
}
.status-badge.status-cancelled::before,
.status-badge.status-error::before {
    background: var(--color-error);
}

/* Warning — amber */
.status-badge.status-warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--color-warning-text, #b45309);
}
.status-badge.status-warning::before {
    background: var(--color-warning);
}

/* Info — blue */
.status-badge.status-info {
    background: rgba(59, 130, 246, 0.1);
    color: var(--color-info-dark, #1d4ed8);
}
.status-badge.status-info::before {
    background: var(--color-info);
}

/* Partial — for partially complete states */
.status-badge.status-partial {
    background: rgba(59, 130, 246, 0.1);
    color: var(--color-info-dark, #1d4ed8);
}
.status-badge.status-partial::before {
    background: var(--color-info);
}

/* --- Role Variants (for transaction context) ---
   Roles are neutral context, not status indicators */

.status-badge.role-selling {
    background: var(--color-role-selling-tint);
    color: var(--color-role-selling-tint-text);
}
.status-badge.role-buying {
    background: var(--color-role-buying-tint);
    color: var(--color-role-buying-tint-text);
}
.status-badge.role-selling::before,
.status-badge.role-buying::before {
    display: none;
}

/* Purchase type badges — no dot, subtle tints */
.status-badge.type-purchase {
    background: var(--color-type-purchase-tint);
    color: var(--color-type-purchase-tint-text);
}
.status-badge.type-offer {
    background: var(--color-type-offer-tint);
    color: var(--color-type-offer-tint-text);
}
.status-badge.type-purchase::before,
.status-badge.type-offer::before {
    display: none;
}

/* --- Glass Variant (for dark/gradient backgrounds) --- */

.status-badge.status-badge-glass {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    color: var(--color-white);
}
.status-badge.status-badge-glass::before {
    background: rgba(255, 255, 255, 0.8);
}

/* Glass + state combinations */
.status-badge.status-badge-glass.status-complete::before,
.status-badge.status-badge-glass.status-live::before,
.status-badge.status-badge-glass.role-selling::before {
    background: var(--color-success-light, #86efac);
}

.status-badge.status-badge-glass.status-pending::before,
.status-badge.status-badge-glass.status-draft::before {
    background: rgba(255, 255, 255, 0.9);
}

.status-badge.status-badge-glass.status-cancelled::before,
.status-badge.status-badge-glass.status-error::before {
    background: var(--color-error-light, #fca5a5);
}

.status-badge.status-badge-glass.role-buying::before {
    background: var(--color-info-light, #93c5fd);
}

/* --- Size Variants --- */

.status-badge.status-badge-sm {
    font-size: 10px;
    padding: 2px var(--spacing-xs) 2px 6px;
    gap: 4px;
}
.status-badge.status-badge-sm::before {
    width: 6px;
    height: 6px;
}

.status-badge.status-badge-lg {
    font-size: 12px;
    padding: 4px var(--spacing-md) 4px 10px;
    gap: 8px;
}
.status-badge.status-badge-lg::before {
    width: 8px;
    height: 8px;
}

/* --- Muted Variant (for low-priority states like out-of-stock) --- */

.status-badge.status-muted {
    background: var(--color-surface-darkened);
    color: var(--color-text-warm-muted);
}
.status-badge.status-muted::before {
    background: var(--color-text-muted);
}

/* --- Step 11: Product Summary Contexts --- */

/* --- 11A. Detail page layout: side-by-side with sticky right pane --- */
/* Scoped to .search-detail (ProductDetailView) — does NOT apply to quick-view dialog */
.search-detail .product-summary .content-section.summary {
    flex-direction: row;
    gap: var(--spacing-lg);
    align-items: flex-start;
}

.search-detail .product-summary .content-section .pane.photos {
    flex: 1 1 55%;
    min-width: 0;
}

.search-detail .product-summary .content-section .pane.about {
    flex: 0 0 38%;
    position: sticky;
    top: var(--spacing-sm);
    padding: 0;
    max-height: calc(100vh - var(--spacing-lg));
    overflow-y: auto;
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
    .search-detail .product-summary .content-section.summary {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .search-detail .product-summary .content-section .pane.photos {
        flex: 1 1 100%;
    }

    .search-detail .product-summary .content-section .pane.about {
        position: static;
        flex: 1 1 100%;
        max-height: none;
        overflow-y: visible;
    }
}

/* General pane base — column layout, full width */
#View_ProductSummary .dialog-body > .pane {
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
    width: 100%;
}

/* Hide engagement stats in dialog — redundant with photo overlay */
#Interactions .product-summary .product-engagement-stats {
    display: none;
}

/* --- 11B. Pane layout (visibility managed by DialogViewBehavior JS) --- */

/* Base pane layout - visibility controlled by JS inline styles */
#View_ProductSummary[ux-workspace-dialog] > .dialog-body > .pane {
    display: none; /* Default hidden, JS sets display:flex when active */
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
}

/* Product pane layout */
#View_ProductSummary .dialog-body > .pane.product {
    align-items: stretch;
    justify-content: flex-start;
}

/* Added-to-cart content layout */
#View_ProductSummary .content.added {
    align-items: center;
    justify-content: flex-start;
}

/* Added state: show footer commands */
#View_ProductSummary[ux-state="added"] .content > .dialog-footer {
    display: flex;
}

/* --- 11C. Added-to-cart confirmation content --- */

/* Content wrapper — normal order with notice at top */
#View_ProductSummary .content.added .added-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 100%;
    padding: var(--spacing-md);
}

/* Success notice banner */
#View_ProductSummary .content.added .added-notice {
    margin-bottom: var(--spacing-sm);
}

/* Added item card */
#View_ProductSummary .content.added .added-item-card {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-card);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-card);
}

/* Added item — photo + details row */
#View_ProductSummary .content.added .added-item {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--spacing-md);
}

#View_ProductSummary .content.added .added-item .photo {
    flex: 0 0 auto;
    width: 80px;
}

#View_ProductSummary .content.added .added-item .photo img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-sm);
}

#View_ProductSummary .content.added .added-item .details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

#View_ProductSummary .content.added .added-item .details .caption {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    color: var(--color-text-warm);
    line-height: 1.3;
}

#View_ProductSummary .content.added .added-item .details .seller {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
}

#View_ProductSummary .content.added .added-item .details .quantity {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-body);
}

#View_ProductSummary .content.added .added-item .details .pricing {
    margin-top: auto;
}

#View_ProductSummary .content.added .added-item .details .pricing .total {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    color: var(--color-text-warm);
}

#View_ProductSummary .content.added .added-item .details .pricing .unit-price {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
}

/* Checkout group card — purchase type with delivery method */
#View_ProductSummary .content.added .checkout-group {
    background: var(--gradient-card-base);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-card);
    padding: 0;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

#View_ProductSummary .content.added .checkout-group .card-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

#View_ProductSummary .content.added .checkout-group .group-type .icon {
    width: 24px;
    height: 24px;
    background-image: url(/images/icon/cart-primary.svg);
    background-position: center;
    background-size: 20px;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

#View_ProductSummary .content.added .checkout-group .card-title {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    color: var(--color-text-warm);
}

#View_ProductSummary .content.added .checkout-group .card-body {
    padding: var(--spacing-md);
}

#View_ProductSummary .content.added .checkout-group .group-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
    margin-bottom: var(--spacing-xs);
}

#View_ProductSummary .content.added .checkout-group .delivery-method {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-body);
    font-weight: var(--font-weight-medium);
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs);
}

#View_ProductSummary .content.added .checkout-group .delivery-method .delivery-label {
    color: var(--color-text-warm-muted);
    font-weight: var(--font-weight-normal);
}

#View_ProductSummary .content.added .checkout-group .delivery-method .method {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
}

/* Meetup location display in added-to-cart confirmation */
#View_ProductSummary .content.added .added-meetup-location {
    --icon-size: var(--icon-size-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-surface-success-faint);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-sm);
}

#View_ProductSummary .content.added .added-meetup-location .icon-svg {
    flex-shrink: 0;
    opacity: 0.8;
}

#View_ProductSummary .content.added .meetup-location-text {
    flex: 1;
    color: var(--color-text-warm-body);
}

#View_ProductSummary .content.added .meetup-location-name {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
}

#View_ProductSummary .content.added .meetup-location-in {
    color: var(--color-text-warm-muted);
    margin: 0 2px;
}

#View_ProductSummary .content.added .meetup-location-postal {
    color: var(--color-text-warm-muted);
}

#View_ProductSummary .content.added .meetup-location-map {
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
}

#View_ProductSummary .content.added .meetup-location-map:hover {
    text-decoration: underline;
}

/* --- Added-to-cart footer: Mobile stacked layout --- */
@media (max-width: 480px) {
    #View_ProductSummary .content.added > .dialog-footer {
        flex-direction: column;
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
    }

    #View_ProductSummary .content.added > .dialog-footer .command {
        width: 100%;
        justify-content: center;
        padding: var(--spacing-sm) var(--spacing-md);
    }

    /* Reorder: "View cart & check out" (btn-secondary) should be primary action at top */
    #View_ProductSummary .content.added > .dialog-footer .btn-secondary[event-name="Store-Checkout"] {
        order: -1;
        background: var(--gradient-primary);
        color: white;
        font-weight: var(--font-weight-semibold);
        border: none;
        box-shadow: var(--shadow-primary);
    }

    #View_ProductSummary .content.added > .dialog-footer .btn-secondary[event-name="Store-Checkout"]:hover {
        background: var(--gradient-primary-hover);
        box-shadow: var(--shadow-primary-hover);
    }

    /* "Continue Shopping" becomes secondary/ghost style */
    #View_ProductSummary .content.added > .dialog-footer .btn-primary[event-name="ChangeForm-Close"] {
        order: 0;
        background: transparent;
        color: var(--color-primary);
        border: 1px solid var(--color-border-primary-faint);
        font-weight: var(--font-weight-medium);
        box-shadow: none;
    }

    #View_ProductSummary .content.added > .dialog-footer .btn-primary[event-name="ChangeForm-Close"]:hover {
        background: var(--color-surface-primary-faint);
        border-color: var(--color-primary);
    }
}

/* ==========================================================================
   SECTION 11C: STATE SURFACE
   ==========================================================================
   Semantic background tints for state indication (success, warning, error, info).
   Used for payment states, inventory warnings, status containers.

   Structure:
     <div class="state-surface state-success">Payment captured successfully</div>
     <div class="state-surface state-warning state-surface-strong">Awaiting review</div>

   Variants:
     .state-success    - Green tint (captured, confirmed, complete)
     .state-warning    - Amber tint (pending, review, waiting)
     .state-error      - Red tint (failed, rejected, cancelled)
     .state-info       - Blue tint (informational)
     .state-primary    - Violet tint (branded/highlighted)
     .state-muted      - Gray tint (inactive, neutral)

   Modifiers:
     .state-surface-strong  - Stronger tint (doubled alpha values)
     .state-dashed          - Dashed border style
   ========================================================================== */

/* Base state surface */
.state-surface {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-md);
    border: 1px solid transparent;
    transition: var(--transition-base);
}

/* Success state (green tint) */
.state-surface.state-success {
    background: var(--color-state-success-bg);
    border-color: var(--color-state-success-border);
}

/* Warning state (amber tint) */
.state-surface.state-warning {
    background: var(--color-state-warning-bg);
    border-color: var(--color-state-warning-border);
}

/* Error state (red tint) */
.state-surface.state-error {
    background: var(--color-state-error-bg);
    border-color: var(--color-state-error-border);
}

/* Info state (blue tint) */
.state-surface.state-info {
    background: var(--color-state-info-bg);
    border-color: var(--color-state-info-border);
}

/* Primary state (violet tint) */
.state-surface.state-primary {
    background: rgba(var(--color-primary-rgb), 0.06);
    border-color: rgba(var(--color-primary-rgb), 0.15);
}

/* Muted state (gray tint) */
.state-surface.state-muted {
    background: var(--color-state-muted-bg);
    border-color: var(--color-state-muted-border);
}

/* Dashed border variant */
.state-surface.state-dashed {
    border-style: dashed;
}

/* Stronger tint variant (doubled alpha values) */
.state-surface.state-surface-strong.state-success {
    background: rgba(var(--color-success-rgb), 0.12);
    border-color: rgba(var(--color-success-rgb), 0.25);
}

.state-surface.state-surface-strong.state-warning {
    background: rgba(var(--color-warning-rgb), 0.12);
    border-color: rgba(var(--color-warning-rgb), 0.25);
}

.state-surface.state-surface-strong.state-error {
    background: rgba(var(--color-error-rgb), 0.12);
    border-color: rgba(var(--color-error-rgb), 0.25);
}

.state-surface.state-surface-strong.state-info {
    background: rgba(var(--color-info-rgb), 0.12);
    border-color: rgba(var(--color-info-rgb), 0.25);
}

.state-surface.state-surface-strong.state-primary {
    background: rgba(var(--color-primary-rgb), 0.12);
    border-color: rgba(var(--color-primary-rgb), 0.25);
}

/* Compact variant for inline use */
.state-surface.state-surface-compact {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
}

/* Icon support */
.state-surface .state-icon {
    display: inline-flex;
    align-items: center;
    margin-right: var(--spacing-xs);
}

.state-surface.state-success .state-icon { color: var(--color-success); }
.state-surface.state-warning .state-icon { color: var(--color-warning); }
.state-surface.state-error .state-icon { color: var(--color-error); }
.state-surface.state-info .state-icon { color: var(--color-info); }
.state-surface.state-primary .state-icon { color: var(--color-primary); }

/* ==========================================================================
   SECTION 11D: CODE DISPLAY
   ==========================================================================
   Monospace code snippets and verification codes.
   Used for verification codes, API keys, reference numbers.

   Structure:
     <span class="code-display">ABC123</span>
     <span class="code-display code-primary">VERIFY-CODE</span>
     <div class="code-display code-large code-primary">A1B2C3</div>

   Variants:
     .code-primary    - Primary/violet tinted background
     .code-muted      - Gray/neutral background
     .code-success    - Success/green tinted (for confirmed codes)

   Sizes:
     .code-large      - Large display (for prominent codes)
     .code-small      - Smaller inline codes
   ========================================================================== */

/* Base code display */
.code-display {
    display: inline-block;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.15em;
    padding: 2px var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    background: var(--color-surface-darkened);
    color: var(--color-text);
}

/* Primary variant (violet tint) */
.code-display.code-primary {
    background: var(--color-border-primary-faint);
    color: var(--color-primary);
}

/* Muted variant */
.code-display.code-muted {
    background: var(--color-surface-darkened);
    color: var(--color-text-muted);
}

/* Success variant */
.code-display.code-success {
    background: var(--color-state-success-bg);
    color: var(--color-success-dark);
}

/* Large size (for prominent verification codes) */
.code-display.code-large {
    font-size: var(--font-size-xl);
    padding: var(--spacing-sm) var(--spacing-md);
    letter-spacing: 0.2em;
    border-radius: var(--border-radius-md);
}

/* Extra large (for handoff codes) */
.code-display.code-xl {
    font-size: 2.5rem;
    padding: var(--spacing-md) var(--spacing-lg);
    letter-spacing: 0.25em;
    border-radius: var(--border-radius-card);
}

/* Small size (inline) */
.code-display.code-small {
    font-size: var(--font-size-sm);
    padding: 1px var(--spacing-xs);
    letter-spacing: 0.1em;
}

/* --------------------------------------------------------------------------
   SECTION 12: FORM COMPONENTS (TypeScript Behavior Classes)
   --------------------------------------------------------------------------
   Inputs, labels, validation, form layouts.
   These class names are expected by WebClientTypescript FormsBehavior.
   -------------------------------------------------------------------------- */

/* Form container - enables form behaviors */
.form {
    display: block;
}

/* Textbox wrapper - handles focus/blur states */
.textbox {
    position: relative;
}

.textbox input,
.textbox textarea,
.textbox select {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: inherit;
    font-size: var(--font-size-base);
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    transition: border-color 0.2s var(--ease-elegant), box-shadow 0.2s var(--ease-elegant);
    box-sizing: border-box;
}

.textbox input:focus,
.textbox textarea:focus,
.textbox select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus-ring);
}

.textbox input:disabled,
.textbox textarea:disabled,
.textbox select:disabled {
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.textbox input::placeholder,
.textbox textarea::placeholder {
    color: var(--color-text-muted);
}

/* Textbox error state */
.textbox.error input,
.textbox.error textarea,
.textbox.error select {
    border-color: var(--color-error);
}

.textbox.error input:focus,
.textbox.error textarea:focus,
.textbox.error select:focus {
    box-shadow: 0 0 0 3px rgba(var(--color-error-rgb), 0.15);
}

/* Textarea within textbox */
.textbox textarea {
    min-height: 100px;
    resize: vertical;
}

/* Select within textbox */
.textbox select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-md) center;
    padding-right: calc(var(--spacing-md) * 2 + 12px);
}

/* Checkbox - TypeScript behavior class */
.checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    user-select: none;
}

.checkbox input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.checkbox .mark {
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    transition: all 0.2s var(--ease-elegant);
    position: relative;
    flex-shrink: 0;
}

.checkbox input:checked + .mark {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.checkbox input:checked + .mark::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox input:focus-visible + .mark {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.checkbox input:disabled + .mark {
    background: var(--color-surface);
    cursor: not-allowed;
}

.checkbox .label {
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

/* Radio List - TypeScript behavior class */
.radio-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.radio-list .radio,
.radio {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    user-select: none;
}

.radio input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.radio .mark {
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-border);
    border-radius: 50%;
    transition: all 0.2s var(--ease-elegant);
    position: relative;
    flex-shrink: 0;
}

.radio input:checked + .mark {
    border-color: var(--color-primary);
}

.radio input:checked + .mark::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
}

.radio input:focus-visible + .mark {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.radio .label {
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

/* Selectable - multi-select list pattern */
.selectable {
    display: flex;
    flex-direction: column;
}

.selectable .item {
    cursor: pointer;
    transition: background 0.2s var(--ease-elegant);
}

.selectable .item:hover {
    background: var(--color-surface);
}

.selectable .item.selected {
    background: var(--color-primary-light);
}

/* ============================================
   CHECKBOX LIST - Interactive checkbox items
   Used for multi-select attribute lists,
   variant wizards, and filter selections.
   ============================================ */

/* Container for checkbox list */
.checkbox-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* Group header within checkbox list */
.checkbox-list-header {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    letter-spacing: 0.3px;
    margin-top: var(--spacing-md);
}

.checkbox-list-header:first-child {
    margin-top: 0;
}

/* Checkbox item - interactive selection row */
.checkbox-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    padding-left: calc(var(--spacing-md) + 28px);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: all 0.2s var(--ease-elegant);
}

.checkbox-item:hover {
    border-color: var(--color-primary-muted);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Hide native checkbox/radio but keep accessible - pointer-events: none prevents double-click from label's for attribute */
.checkbox-item input[type="checkbox"],
.checkbox-item input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Prevent label click from triggering input (which would cause double-toggle) */
.checkbox-item label {
    pointer-events: none;
}

/* Custom checkbox indicator - circle/square with checkmark */
.checkbox-item::before {
    content: "";
    position: absolute;
    left: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    background-color: var(--color-background);
    transition: all 0.2s var(--ease-elegant);
}

/* Checkmark - hidden by default */
.checkbox-item::after {
    content: "";
    position: absolute;
    left: calc(var(--spacing-md) + 6px);
    top: 50%;
    transform: translateY(-60%) rotate(45deg) scale(0);
    width: 6px;
    height: 11px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transition: transform 0.15s var(--ease-elegant);
}

/* Selected state */
.checkbox-item.selected,
.checkbox-item:has(input:checked) {
    border-color: var(--color-primary);
    background-color: var(--color-primary-lighter);
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.12);
}

.checkbox-item.selected::before,
.checkbox-item:has(input:checked)::before {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
}

.checkbox-item.selected::after,
.checkbox-item:has(input:checked)::after {
    transform: translateY(-60%) rotate(45deg) scale(1);
}

/* Checkbox item parts */
.checkbox-item-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    line-height: 1.3;
}

.checkbox-item-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: 1.4;
}

/* Value badge - shows current value with indicator dot */
.checkbox-item-hint.has-value {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

.checkbox-item-hint.has-value::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--color-success);
    border-radius: 50%;
    margin-right: var(--spacing-xs);
    flex-shrink: 0;
}

/* Focus state for accessibility */
.checkbox-item:focus-within {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Disabled state */
.checkbox-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Radio-style variant - round indicator for single-select */
.checkbox-item.checkbox-item-radio::before {
    border-radius: 50%;
}

.checkbox-item.checkbox-item-radio::after {
    /* Solid dot instead of checkmark - reset transforms from checkbox */
    border: none;
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    left: calc(var(--spacing-md) + 5px);
    transform: translateY(-50%) scale(0);
}

.checkbox-item.checkbox-item-radio.selected::after,
.checkbox-item.checkbox-item-radio:has(input:checked)::after {
    transform: translateY(-50%) scale(1);
}

/* Hide native radio but keep accessible */
.checkbox-item input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Rich Dropdown - enhanced dropdown with search */
.rich-dropdown {
    position: relative;
    cursor: pointer;
}

.rich-dropdown .value {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================
   FORM GROUP - FLOATING LABELS (DEFAULT)
   Label sits as placeholder when empty, floats
   to top border when focused or filled.
   Applies to text inputs and textareas only.
   ============================================ */

/* Form group container - positioned for floating label */
.form-group {
    position: relative;
    margin-bottom: var(--spacing-md);
}

/* Form panel - static card-like container for grouping form fields */
.form-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-self: center;
    justify-self: center;
    width: min(500px, 100%);
    max-width: 100%;
    box-sizing: border-box;
    flex: 0 0 auto;
    margin-top: 0;
}

.form-panel:last-child {
    margin-bottom: 0;
}

.form-panel > .form-group:last-child,
.form-panel > .incrementer-field:last-child {
    margin-bottom: 0;
}

/* Variant Card — Card-based layout for multi-variant editing (mobile-friendly)
   Used in family/bulk editing dialogs like Availability, Pricing.
   Each card shows variant caption/photo with form fields for that variant. */
.variant-cards-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    max-width: 100%;
    overflow: hidden;
}

.variant-card {
    /* Inherits from .form-panel */
}

/* --- Default Variant Card Header --- */
.variant-card-header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border-light);
}

.variant-card-header .variant-thumbnail {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
}

.variant-card-header .variant-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.variant-card-header .no-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    border-radius: var(--border-radius-sm);
}

.variant-card-header .no-image::before {
    content: '';
    width: 24px;
    height: 24px;
    background-image: url('/images/icon/camera.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.3;
}

.variant-card-header .variant-info {
    flex: 1;
    min-width: 0;
}

.variant-card-header .variant-caption {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    line-height: 1.3;
    margin-bottom: var(--spacing-2xs);
}

.variant-card-header .variant-subcaption {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    line-height: 1.3;
    margin-bottom: var(--spacing-xs);
}

.variant-card-header .variant-attributes {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.3;
    margin-bottom: var(--spacing-xs);
}

.variant-card-header .variant-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
}

.variant-card-header .status-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 2px var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-weight: var(--font-weight-medium);
}

.variant-card-header .status-indicator.in-stock {
    background: var(--color-success-light);
    color: var(--color-success);
}

.variant-card-header .status-indicator.out-of-stock {
    background: var(--color-danger-light);
    color: var(--color-danger);
}

.variant-card-header .status-indicator.low-stock {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

/* Price breaks badge - subtle indicator for quantity discounts */
.variant-card-header .price-breaks-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px var(--spacing-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: var(--border-radius-sm);
    margin-left: var(--spacing-xs);
}

.variant-card-header .price-breaks-badge .icon-svg {
    width: 12px;
    height: 12px;
}

.variant-card-header .price-breaks-badge .badge-arrow {
    width: 10px;
    height: 10px;
    opacity: 0.6;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Clickable badge hover state */
.variant-card-header .price-breaks-badge.command {
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.variant-card-header .price-breaks-badge.command:hover {
    background: var(--color-info, #3b82f6);
    color: var(--color-white, #fff);
}

.variant-card-header .price-breaks-badge.command:hover .badge-arrow {
    opacity: 1;
    transform: translateX(2px);
}

.variant-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* ==========================================================================
   COMPACT VARIANT CARDS — Bulk Editing Dialogs (Availability, Pricing)
   Applied via .variant-card-compact class or dialog-specific selectors
   ========================================================================== */

/* Compact container: tighter gaps */
#Dlg_Availability .variant-cards-container,
#Dlg_Pricing .variant-cards-container,
.variant-cards-container.compact {
    gap: var(--spacing-sm);
    align-self: center;
    min-width: min(500px, 100%);
    max-width: 100%;
}

/* Compact card: reduced padding, full width, prevent overflow */
#Dlg_Availability .variant-card,
#Dlg_Pricing .variant-card,
.variant-card.variant-card-compact {
    padding: var(--spacing-sm) var(--spacing-md);
    width: 100%;
    max-width: 100%;
    flex: none;
    box-sizing: border-box;
    overflow: hidden;
}

/* Compact header: inline layout */
#Dlg_Availability .variant-card-header,
#Dlg_Pricing .variant-card-header,
.variant-card-compact .variant-card-header {
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
}

/* Compact thumbnail: smaller */
#Dlg_Availability .variant-thumbnail,
#Dlg_Pricing .variant-thumbnail,
.variant-card-compact .variant-thumbnail {
    width: 40px;
    height: 40px;
}

#Dlg_Availability .variant-thumbnail .no-image::before,
#Dlg_Pricing .variant-thumbnail .no-image::before,
.variant-card-compact .variant-thumbnail .no-image::before {
    width: 18px;
    height: 18px;
}

/* Compact variant info: inline flow */
#Dlg_Availability .variant-info,
#Dlg_Pricing .variant-info,
.variant-card-compact .variant-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs) var(--spacing-sm);
}

/* Compact caption: smaller, truncated */
#Dlg_Availability .variant-caption,
#Dlg_Pricing .variant-caption,
.variant-card-compact .variant-caption {
    font-size: var(--font-size-sm);
    line-height: 1.2;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

#Dlg_Availability .variant-subcaption,
#Dlg_Pricing .variant-subcaption,
.variant-card-compact .variant-subcaption {
    font-size: var(--font-size-sm);
    line-height: 1.2;
    margin-bottom: 0;
    color: var(--color-text-muted);
}

/* Compact status: smaller badge, right-aligned */
#Dlg_Availability .variant-status,
#Dlg_Pricing .variant-status,
.variant-card-compact .variant-status {
    font-size: var(--font-size-xs);
    margin-left: auto;
}

#Dlg_Availability .status-indicator,
#Dlg_Pricing .status-indicator,
.variant-card-compact .status-indicator {
    gap: 3px;
    padding: 2px 6px;
    font-weight: var(--font-weight-semibold);
    font-size: 10px;
    letter-spacing: 0.02em;
}

/* Compact card body: horizontal row layout for side-by-side fields */
#Dlg_Availability .variant-card-body,
#Dlg_Pricing .variant-card-body,
.variant-card-compact .variant-card-body {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: var(--spacing-sm) !important;
    align-items: flex-end !important;
}

/* Incrementer fields take equal space, side by side */
#Dlg_Availability .variant-card-body > .incrementer-field,
#Dlg_Pricing .variant-card-body > .incrementer-field,
.variant-card-compact .variant-card-body > .incrementer-field {
    flex: 1 1 30% !important;
    min-width: 0;
    max-width: 100%;
}

/* Backorder toggle - inline with fields */
#Dlg_Availability .variant-card-body > .backorder-field,
.variant-card-compact .variant-card-body > .backorder-field {
    flex: 0 0 auto;
    margin-left: auto;
}

/* Compact incrementer styling */
#Dlg_Availability .variant-card .incrementer-field,
#Dlg_Pricing .variant-card .incrementer-field,
.variant-card-compact .incrementer-field {
    margin-bottom: 0;
}

#Dlg_Availability .variant-card .incrementer-label,
#Dlg_Pricing .variant-card .incrementer-label,
.variant-card-compact .incrementer-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-warm-muted);
    margin-bottom: 4px;
}

#Dlg_Availability .variant-card .incrementer,
#Dlg_Pricing .variant-card .incrementer,
.variant-card-compact .incrementer {
    height: 34px;
}

#Dlg_Availability .variant-card .incrementer-btn,
#Dlg_Pricing .variant-card .incrementer-btn,
.variant-card-compact .incrementer-btn {
    width: 28px;
    height: 34px;
    font-size: var(--font-size-sm);
}

/* Variant card actions span full width */
#Dlg_Availability .variant-card-actions,
#Dlg_Pricing .variant-card-actions,
.variant-card-compact .variant-card-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-xs);
    border-top: 1px solid var(--color-border-light);
    margin-top: var(--spacing-xs);
}

#Dlg_Availability .variant-card-actions .command,
#Dlg_Pricing .variant-card-actions .command,
.variant-card-compact .variant-card-actions .command {
    font-size: var(--font-size-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
}

/* Mobile: Stack fields vertically */
@media (max-width: 520px) {
    /* CRITICAL: Override form-panel fixed width for mobile */
    #Dlg_Pricing .form-panel,
    #Dlg_Availability .form-panel,
    .dialog-drawer .form-panel {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #Dlg_Availability .variant-card-body > .incrementer-field,
    #Dlg_Pricing .variant-card-body > .incrementer-field,
    .variant-card-compact .variant-card-body > .incrementer-field {
        max-width: none;
        width: 100%;
    }

    /* Ensure variant cards don't overflow on mobile */
    #Dlg_Pricing .variant-card,
    #Dlg_Availability .variant-card,
    .variant-card-compact {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden;
    }

    /* Truncate long captions on mobile */
    #Dlg_Pricing .variant-caption,
    #Dlg_Availability .variant-caption,
    .variant-card-compact .variant-caption {
        max-width: 150px;
    }

    /* Stack status indicators vertically on very narrow screens */
    #Dlg_Pricing .variant-status,
    #Dlg_Availability .variant-status,
    .variant-card-compact .variant-status {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Price breaks badge - full width on mobile */
    #Dlg_Pricing .price-breaks-badge {
        margin-left: 0;
        margin-top: var(--spacing-xs);
    }

    #Dlg_Availability .variant-card-body > .backorder-field,
    .variant-card-compact .variant-card-body > .backorder-field {
        margin-top:var(--spacing-sm);
    }
}

/* ==========================================================================
   QUANTITY DISCOUNT CALLOUT — Subtle prompt for power sellers
   Uses native <details>/<summary> for accessible progressive disclosure
   ========================================================================== */

.quantity-discount-callout {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px dashed var(--color-border-soft, rgba(0, 0, 0, 0.08));
    font-size: var(--font-size-sm);
}

/* Summary/trigger - the always-visible clickable row */
.quantity-discount-callout .callout-trigger {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    cursor: pointer;
    color: var(--color-text-secondary);
    list-style: none; /* Remove default arrow */
    user-select: none;
}

.quantity-discount-callout .callout-trigger::-webkit-details-marker {
    display: none;
}

.quantity-discount-callout .callout-trigger::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.2s ease;
}

.quantity-discount-callout[open] .callout-trigger::after {
    transform: rotate(180deg);
}

.quantity-discount-callout .callout-trigger:hover {
    color: var(--color-primary);
}

.quantity-discount-callout .hint-icon {
    font-size: 14px;
    flex-shrink: 0;
}

.quantity-discount-callout .hint-text {
    color: inherit;
}

/* Expanded content - revealed when open */
.quantity-discount-callout .callout-content {
    padding: var(--spacing-md) 0 var(--spacing-xs);
    animation: slideDown 0.2s ease;
}

.quantity-discount-callout .callout-content p {
    margin: 0 0 var(--spacing-md);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.quantity-discount-callout .callout-content .btn-sm {
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs) var(--spacing-md);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hide callout when dialog is in market-value mode or has price breaks */
#Dlg_Pricing[data-mode="market-value"] .quantity-discount-callout,
#Dlg_Pricing[data-has-price-breaks] .quantity-discount-callout {
    display: none;
}

/* ==========================================================================
   PRICING LIST — Price tier/quantity discount list items
   Uses template pattern from Template_Pricing_PriceItem
   ========================================================================== */

/* ==========================================================================
   PRICING TIERS — Inline editable grid for quantity discounts
   ========================================================================== */

.pricing-tiers-container {
    margin-top: var(--spacing-sm);
}

/* Header row */
.pricing-tier-header {
    display: grid;
    grid-template-columns: 100px 1fr 40px;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--color-border);
}

.pricing-tiers-list {
    margin-top: var(--spacing-xs);
}

.pricing-tiers {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* Tier row - grid layout */
.pricing-tier-row {
    display: grid;
    grid-template-columns: 100px 1fr 40px;
    gap: var(--spacing-md);
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color 0.15s ease;
}

.pricing-tier-row:focus-within {
    border-color: var(--color-primary-border-soft);
}

/* Quantity column */
.pricing-tier-row .tier-quantity {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.pricing-tier-row .quantity-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-primary-light);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

/* Base price gets success color */
.pricing-tier-row[data-key="1"] .quantity-badge {
    background: var(--color-success-light, rgba(34, 197, 94, 0.1));
    color: var(--color-success, #22c55e);
}

.pricing-tier-row .quantity-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Price column - compact incrementer */
.pricing-tier-row .tier-price {
    display: flex;
    align-items: center;
}

.pricing-tier-row .incrementer-compact {
    max-width: 180px;
}

.pricing-tier-row .incrementer-compact .incrementer-btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    min-width: 32px;
}

.pricing-tier-row .incrementer-compact .form-input {
    padding: var(--spacing-xs) var(--spacing-sm);
    text-align: center;
    font-weight: var(--font-weight-medium);
}

/* Actions column */
.pricing-tier-row .tier-actions {
    display: flex;
    justify-content: center;
}

.pricing-tier-row .tier-remove {
    opacity: 0.4;
    padding: var(--spacing-xs);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    transition: all 0.15s ease;
    cursor: pointer;
}

.pricing-tier-row:hover .tier-remove,
.pricing-tier-row:focus-within .tier-remove {
    opacity: 1;
}

.pricing-tier-row .tier-remove:hover {
    background: var(--color-danger-light, rgba(239, 68, 68, 0.1));
    color: var(--color-danger, #ef4444);
}

/* Hide remove for base price (qty=1) */
.pricing-tier-row[data-key="1"] .tier-remove {
    visibility: hidden;
}

/* Add tier row */
.pricing-tier-add {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    border-style: dashed;
    background: transparent;
    cursor: pointer;
}

.pricing-tier-add:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

.pricing-tier-add .tier-add-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

.pricing-tier-add .icon-svg {
    width: 16px;
    height: 16px;
}

/* Legacy support - keep old classes working */
.pricing-list-container {
    margin-top: var(--spacing-md);
}

.pricing-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.pricing-item-action {
    color: var(--color-text-muted);
    transition: color 0.15s ease;
}

.pricing-item:hover .pricing-item-action {
    color: var(--color-primary);
}

/* Add command item - styled differently */
.pricing-item-add {
    border-style: dashed;
    background: transparent;
}

.pricing-item-add:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

.pricing-add-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-light);
    border-radius: var(--radius-sm);
    color: var(--color-primary);
}

.pricing-add-text {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
}

/* Base price styling - emphasized */
.pricing-item[data-key="1"] .pricing-quantity {
    background: var(--color-success-light, rgba(34, 197, 94, 0.1));
}

.pricing-item[data-key="1"] .quantity-value {
    color: var(--color-success, #22c55e);
}

/* Backorder field layout */
.backorder-field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.backorder-toggle-row {
    display: flex;
    align-items: center;
}

.backorder-toggle-row .toggle-text {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    margin-left: var(--spacing-sm);
}

.backorder-days-field {
    padding-left: var(--spacing-lg);
}

/* ==========================================================================
   BULK ACTIONS PANEL — Compact layout for family/multi-variant dialogs
   ========================================================================== */

.bulk-actions-panel {
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

/* Compact section header */
.bulk-actions-panel .settings-section {
    padding: 0;
}

.bulk-actions-panel .settings-header {
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
}

.bulk-actions-panel .settings-header h4 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin: 0;
}

.bulk-actions-panel .settings-tip,
.bulk-actions-panel .section-tip {
    font-size: var(--font-size-xs);
    margin-top: 2px;
}

/* Compact controls layout */
.bulk-actions-panel .bulk-controls {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.bulk-actions-panel .bulk-action-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* Inline input row: incrementer + button side by side */
.bulk-actions-panel .bulk-input-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: nowrap;
}

/* Apply button in input row matches other bulk buttons */
.bulk-actions-panel .bulk-input-row > .command {
    font-size: var(--font-size-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
}

/* Compact incrementer field in bulk panel */
.bulk-actions-panel .incrementer-field {
    margin-bottom: 0;
}

.bulk-actions-panel .incrementer-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-warm-muted);
    margin-bottom: 2px;
}

.bulk-actions-panel .incrementer {
    height: 32px;
}

.bulk-actions-panel .incrementer .command {
    width: 28px;
    height: 32px;
    font-size: var(--font-size-sm);
}

.bulk-actions-panel .incrementer .form-input {
    font-size: var(--font-size-sm);
    height: 32px;
}

/* Compact bulk label */
.bulk-actions-panel .bulk-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-warm-muted);
}

/* Compact bulk buttons */
.bulk-actions-panel .bulk-buttons {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.bulk-actions-panel .bulk-buttons .command {
    font-size: var(--font-size-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    min-width: auto;
}

/* Quick adjustment buttons — all in one row */
.bulk-actions-panel .quick-adjust-buttons {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
}

.bulk-actions-panel .quick-adjust-buttons .command {
    font-size: 11px;
    padding: 4px 8px;
    min-width: 40px;
    flex: 0 0 auto;
}

/* Side-by-side bulk set fields (price + market value) */
.bulk-actions-panel .bulk-set-row {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.bulk-actions-panel .bulk-set-row .incrementer-field {
    flex: 1 1 200px;
    min-width: 180px;
}

/* Summary panel - now integrated into footer */
.summary-panel {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}

.summary-panel .availability-summary,
.summary-panel .pricing-summary {
    padding: 0;
}

.summary-panel .summary-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-sm);
}

.summary-panel .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--spacing-xs) var(--spacing-sm);
    min-width: 72px;
}

.summary-panel .stat-label {
    font-size: 10px;
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-warm-muted);
}

.summary-panel .stat-value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    line-height: 1;
}

/* ==========================================================================
   AVAILABILITY DIALOG ENHANCEMENTS
   "Curated Warmth" styling for inventory management
   ========================================================================== */

/* Variant Card — Enhanced with purple-tinted shadows and hover lift */
.variant-card {
    background: var(--gradient-card-base);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-card);
    transition: var(--transition-card);
    position: relative;
    overflow: hidden;
}

.variant-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        rgba(92, 67, 244, 0.15) 0%,
        rgba(0, 255, 203, 0.1) 100%
    );
    opacity: 0;
    transition: opacity 0.3s var(--ease-elegant);
}

.variant-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
    border-color: var(--color-border-primary-subtle);
}

.variant-card:hover::before {
    opacity: 1;
}

/* Variant Card Header — Warm typography */
.variant-card-header .variant-caption {
    color: var(--color-text-warm);
    letter-spacing: -0.01em;
}

.variant-card-header .variant-subcaption {
    color: var(--color-text-warm-muted);
}

/* Variant Thumbnail — Subtle enhancement */
.variant-card-header .variant-thumbnail {
    box-shadow: 0 2px 8px rgba(92, 67, 244, 0.08);
    transition: var(--transition-card);
}

.variant-card:hover .variant-thumbnail {
    box-shadow: 0 4px 12px rgba(92, 67, 244, 0.12);
}

/* Toggle Switch — Polished appearance for backorder toggles */
.option-toggle {
    display: flex;
    align-items: center;
}

.option-toggle .toggle-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.option-toggle .toggle-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    user-select: none;
}

.option-toggle .toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--color-surface-darkened);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-full);
    transition: all 0.25s var(--ease-elegant);
    flex-shrink: 0;
}

.option-toggle .toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: var(--color-background);
    border-radius: var(--border-radius-full);
    box-shadow: 0 2px 4px rgba(92, 67, 244, 0.15);
    transition: transform 0.25s var(--ease-elegant);
}

/* Toggle checked state — Primary color with glow */
.option-toggle .toggle-checkbox:checked + .toggle-label .toggle-switch {
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(92, 67, 244, 0.25);
}

.option-toggle .toggle-checkbox:checked + .toggle-label .toggle-switch::after {
    transform: translateX(20px);
}

/* Toggle hover state */
.option-toggle .toggle-label:hover .toggle-switch {
    border-color: var(--color-border-primary-subtle);
}

/* Toggle focus state for accessibility */
.option-toggle .toggle-checkbox:focus-visible + .toggle-label .toggle-switch {
    box-shadow: var(--shadow-focus-ring);
}

/* Toggle text styling */
.option-toggle .toggle-text {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-warm-body);
}

/* Market Value Visibility Toggle — inside Dlg_Pricing dialog scroll */
#Dlg_Pricing .market-value-visibility-toggle .option-toggle {
    margin-bottom: 4px;
}

#Dlg_Pricing .market-value-visibility-toggle .toggle-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-warm-muted);
    line-height: 1.4;
    padding-left: 56px; /* align with text after 44px switch + 12px gap */
}

/* ==========================================================================
   SUMMARY PANEL IN DIALOG FOOTER
   When a summary-panel is placed inside dialog-footer, it gets special styling
   ========================================================================== */

/* Footer with summary panel: vertical layout
   Uses :has() with fallback for dialog-specific selectors */
.dialog-footer:has(.summary-panel),
#Dlg_Availability .content.family .dialog-footer,
#Dlg_Pricing .content.family-pricing .dialog-footer {
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Summary panel when inside footer */
.dialog-footer .summary-panel {
    width: 100%;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    order: -1; /* Stats above buttons */
}

.dialog-footer .summary-stats {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xs);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border-light);
}

.dialog-footer .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--spacing-xs) var(--spacing-md);
    background: rgba(255, 255, 255, 0.7);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--color-border-light);
    min-width: 80px;
    transition: var(--transition-fast);
}

.dialog-footer .stat-item:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: var(--color-border-primary-faint);
    box-shadow: 0 2px 8px rgba(92, 67, 244, 0.06);
}

.dialog-footer .stat-label {
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-warm-muted);
}

.dialog-footer .stat-value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    line-height: 1;
}

/* Out of stock stat gets warning color (last stat in availability) */
#Dlg_Availability .dialog-footer .stat-item:last-child .stat-value {
    color: var(--color-warning);
}

/* Footer actions row - wraps buttons when summary panel present */
.dialog-footer .footer-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm);
}

.dialog-footer .footer-actions .command {
    min-width: 120px;
}

.dialog-footer .footer-actions .btn-primary {
    min-width: 160px;
}

/* Mobile: Stack stats vertically if needed */
@media (max-width: 400px) {
    .dialog-footer .summary-stats {
        flex-wrap: wrap;
    }

    .dialog-footer .stat-item {
        min-width: 70px;
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .dialog-footer .footer-actions {
        flex-direction: column;
    }

    .dialog-footer .footer-actions .command {
        width: 100%;
        max-width: none;
    }
}

/* Bulk Actions Panel — Subtle branded background, no flex growth */
.bulk-actions-panel.form-panel {
    flex: 0 0 auto; /* Don't grow to fill space */
    background: linear-gradient(
        135deg,
        rgba(92, 67, 244, 0.025) 0%,
        rgba(0, 255, 203, 0.015) 100%
    );
    border-color: var(--color-border-primary-faint);
}

/* Row dividers */
.bulk-actions-panel .bulk-action-row:not(:last-child) {
    border-bottom: 1px solid var(--color-border-primary-faint);
    padding-bottom: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

/* ==========================================================================
   COMPACT LAYOUT FOR BULK DIALOGS
   Full-width cards for efficient bulk editing
   ========================================================================== */

/* Compact dialog subtitle */
#Dlg_Availability .content.family .dialog-subtitle,
#Dlg_Pricing .content.family-pricing .dialog-subtitle {
    flex: 0 0 auto;
    font-size: var(--font-size-xs);
    margin-bottom: var(--spacing-sm);
}

/* Variant cards container - full width, don't grow vertically */
#Dlg_Availability .variant-cards-container,
#Dlg_Pricing .variant-cards-container {
    flex: 0 0 auto;
    width: 100%;
    margin-bottom: var(--spacing-lg)
}

/* Compact notice banner */
#Dlg_Availability .content.family .live-operation-notice,
#Dlg_Pricing .content.family-pricing .live-operation-notice {
    flex: 0 0 auto;
    font-size: var(--font-size-xs);
    padding: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

/* Live Operation Notice — Enhanced info banner */
.live-operation-notice {
    background: linear-gradient(
        90deg,
        rgba(59, 130, 246, 0.06) 0%,
        rgba(59, 130, 246, 0.02) 100%
    );
    border: 1px solid rgba(59, 130, 246, 0.12);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.live-operation-notice .notice-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-image: url('/images/icon/info-circle-primary.svg');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.7;
}

.live-operation-notice .notice-content {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-body);
    line-height: 1.5;
}

.live-operation-notice .notice-content strong {
    color: var(--color-info);
    font-weight: var(--font-weight-semibold);
}

/* ==========================================================================
   Save Operation Indicator
   Compact inline indicator showing if save is live or draft operation
   ========================================================================== */

.save-operation-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-xs, 0.75rem);
    line-height: 1;
    white-space: nowrap;
    opacity: 0.85;
}

.save-operation-indicator .indicator-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.save-operation-indicator .indicator-text {
    font-weight: var(--font-weight-medium, 500);
}

/* Live operation variant (price, inventory, visibility) */
.save-operation-indicator.live-indicator {
    color: var(--color-info, #3b82f6);
}

.save-operation-indicator.live-indicator .indicator-icon {
    background-image: url("/images/icon/lightning-primary.svg");
}

/* Draft operation variant (market value, description, etc.) */
.save-operation-indicator.draft-indicator {
    color: var(--color-text-muted, #6b7280);
}

.save-operation-indicator.draft-indicator .indicator-icon {
    background-image: url("/images/icon/edit-muted.svg");
}

/* Footer action group to align button + indicator */
.footer-action-group {
    display: inline-flex;
    align-items: center; flex-direction:column;
    gap: var(--spacing-sm, 8px);
}

/* ==========================================================================
   Conditional Visibility - Hide indicators for never-published listings
   ========================================================================== */

[data-listing-ever-published="false"] .save-operation-indicator,
[ux-draft-only] .save-operation-indicator,
.dialog[data-listing-ever-published="false"] .save-operation-indicator {
    display: none !important;
}

/* Selection Cards — Out of stock options */
#Dlg_Availability .selection-cards {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

#Dlg_Availability .selection-card {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: var(--transition-card);
}

#Dlg_Availability .selection-card:hover {
    border-color: var(--color-border-primary-subtle);
    background: var(--color-primary-bg-subtle);
    box-shadow: 0 2px 8px rgba(92, 67, 244, 0.08);
}

#Dlg_Availability .selection-card:has(input:checked) {
    border-color: var(--color-primary);
    background: linear-gradient(
        135deg,
        rgba(92, 67, 244, 0.04) 0%,
        rgba(92, 67, 244, 0.02) 100%
    );
    box-shadow: 0 2px 8px rgba(92, 67, 244, 0.12);
}

#Dlg_Availability .selection-indicator {
    flex-shrink: 0;
    padding-top: 2px;
}

#Dlg_Availability .selection-indicator input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
}

#Dlg_Availability .selection-content {
    flex: 1;
}

#Dlg_Availability .selection-label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
    margin-bottom: var(--spacing-xs);
}

#Dlg_Availability .selection-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
    line-height: 1.4;
}

/* Backorder prep section reveal */
#Dlg_Availability .backorder-prep {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-surface);
    border-radius: var(--border-radius-md);
    border: 1px dashed var(--color-border-primary-faint);
}

/* Mobile responsiveness for summary stats */
@media (max-width: 480px) {
    .summary-panel .summary-stats {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .summary-panel .stat-item {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
    }

    /* Keep bulk-input-row horizontal - incrementer + Apply fits on one line */
    .bulk-actions-panel .bulk-input-row {
        flex-wrap: wrap;
    }

    .bulk-actions-panel .bulk-input-row .incrementer {
        flex: 1;
        min-width: 120px;
    }

    .bulk-actions-panel .bulk-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }

    .bulk-actions-panel .bulk-buttons .command {
        flex: 0 0 auto;
    }

    /* Quick adjustments: 2 rows of 3 on mobile */
    .bulk-actions-panel .quick-adjust-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }

    .bulk-actions-panel .quick-adjust-buttons .command {
        flex: 0 0 calc(33% - 4px);
        min-width: 50px;
    }
}

/* Fill-in input - inline text input for text/number type attributes */
.fill-in-input {
    flex: 1;
    min-width: 200px;
    max-width: 300px;
}

.fill-in-input .form-input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    background: var(--color-background);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fill-in-input .form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus-ring);
}

.fill-in-input .form-input::placeholder {
    color: var(--color-text-muted);
}

/* Form input base */
.form-input,
.form-textarea {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: inherit;
    font-size: var(--font-size-base);
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    transition: border-color 0.2s var(--ease-elegant), box-shadow 0.2s var(--ease-elegant);
    box-sizing: border-box;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus-ring);
}

.form-input:disabled,
.form-textarea:disabled {
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

/* Textarea specific */
.form-textarea {
    min-height: 100px;
    resize: vertical;
}

/* Select */
.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-md) center;
    padding-right: calc(var(--spacing-md) * 2 + 12px);
}

/* -------------------------------------------
   Floating Label Behavior
   ------------------------------------------- */

/* Label starts in placeholder position (for text inputs/textareas) */
/* Exclude: .form-group-checkbox (checkbox layout), .textbox-code (static centered label) */
/* Pattern: label AFTER input inside .textbox, uses sibling selector for reliability */
.textbox:not(.textbox-code) > .form-input + .form-label,
.textbox > .form-textarea + .form-label {
    position: absolute;
    left: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
    pointer-events: none;
    transition: all 0.2s var(--ease-elegant);
    background: transparent;
    padding: 0;
    margin: 0;
    z-index: 1;
    line-height: 1;
}

/* Textarea label positions at top, not center */
.textbox > .form-textarea + .form-label {
    top: var(--spacing-md);
    transform: none;
}

/* Required asterisk */
.form-label .form-required {
    color: var(--color-error);
    margin-left: 2px;
}

/* Float label up when focused or filled */
/* Uses sibling selectors for reliability - label must come AFTER input */
.textbox:not(.textbox-code) > .form-input:focus + .form-label,
.textbox > .form-textarea:focus + .form-label,
.textbox:not(.textbox-code) > .form-input:not(:placeholder-shown) + .form-label,
.textbox > .form-textarea:not(:placeholder-shown) + .form-label,
.textbox[form-child-filled]:not(.textbox-code) > .form-input + .form-label,
.textbox[form-child-filled] > .form-textarea + .form-label {
    top: 0;
    transform: translateY(-50%);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    background: var(--color-background);
    padding: 0 var(--spacing-sm);
    left: calc(var(--spacing-md) - var(--spacing-sm));
}

/* Focused state - primary color */
.textbox:not(.textbox-code) > .form-input:focus + .form-label,
.textbox > .form-textarea:focus + .form-label {
    color: var(--color-primary);
}

/* Hide native placeholder when floating label acts as placeholder */
/* The label visually replaces the placeholder, so hide the real one */
.textbox:not(.textbox-code) > .form-input:placeholder-shown::placeholder {
    opacity: 0;
}
.textbox > .form-textarea:placeholder-shown::placeholder {
    opacity: 0;
}

/* Show placeholder when label floats up (on focus) */
.textbox:not(.textbox-code) > .form-input:focus::placeholder,
.textbox > .form-textarea:focus::placeholder {
    opacity: 0.5;
}

/* Standalone placeholder styling */
.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--color-text-muted);
}

/* -------------------------------------------
   Error States
   ------------------------------------------- */

.form-input-error,
.form-group-error .form-input,
.form-group-error .form-textarea {
    border-color: var(--color-error);
}

.form-input-error:focus,
.form-group-error .form-input:focus,
.form-group-error .form-textarea:focus {
    box-shadow: 0 0 0 3px rgba(var(--color-error-rgb), 0.15);
}

.form-group-error .form-label {
    color: var(--color-error);
}

/* Hint text */
.form-hint {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Error message */
.form-error {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-error-dark);
}

/* -------------------------------------------
   Form Input Group
   Container for input with inline action (password toggle, etc.)
   ------------------------------------------- */

.form-input-group {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.form-input-group .form-input {
    flex: 1;
    padding-right: 48px; /* Space for toggle button */
}

/* Password toggle button positioned inside input */
.form-input-toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    border: none;
    border-radius: var(--border-radius-sm);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 0; /* Hide text, show icon only */
    transition: background 0.15s ease, opacity 0.15s ease;
}

.form-input-toggle:hover {
    background: var(--color-surface-darkened);
}

.form-input-toggle:focus {
    outline: none;
    background: var(--color-surface-darkened);
}

/* Eye icon - default state (password hidden, show eye-closed) */
.form-input-toggle::before {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url('/images/icon/eye-closed-black.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.form-input-toggle:hover::before {
    opacity: 0.9;
}

/* Active state - password visible (show eye-open) */
/* Uses form-unmasked attribute set by FormsBehavior on .textbox parent */
.form-input-toggle[data-toggle-active]::before,
.textbox[form-unmasked] .form-input-toggle::before {
    background-image: url('/images/icon/eye-black.svg');
}

/* Smaller toggle for compact inputs */
.form-input-group.form-input-group-sm .form-input {
    padding-right: 40px;
}

.form-input-group.form-input-group-sm .form-input-toggle {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
}

.form-input-group.form-input-group-sm .form-input-toggle::before {
    width: 16px;
    height: 16px;
}

/* -------------------------------------------
   Textbox Code Modifier
   For verification codes, OTP, PIN entry
   Follows textbox modifier pattern (textbox-code)
   ------------------------------------------- */

.textbox-code,
.form-input.textbox-code {
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    letter-spacing: 0.35em;
    padding: var(--spacing-md) var(--spacing-lg);
    max-width: 220px;
    margin: 0 auto;
}

.textbox-code::placeholder,
.form-input.textbox-code::placeholder {
    letter-spacing: normal;
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
}

/* Center the code input within form-group */
.form-group:has(.textbox-code) {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.form-group:has(.textbox-code) .form-label {
    position: static;
    transform: none;
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    background: transparent;
}

/* -------------------------------------------
   Static Label Variant (opt-out of floating)
   Use .form-group-static for traditional layout
   ------------------------------------------- */

.form-group-static {
    position: static;
}

.form-group-static .form-label {
    position: static;
    display: block;
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    transform: none;
    background: transparent;
    pointer-events: auto;
}

.form-group-static .form-input::placeholder,
.form-group-static .form-textarea::placeholder {
    opacity: 1;
}

/* Checkbox Group - native checkbox with label */
.form-group-checkbox {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

/* Native checkbox input styling */
input.form-checkbox {
    width: 18px;
    height: 18px;
    margin: 2px 0 0 0;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.form-checkbox-label {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    line-height: 1.4;
    cursor: pointer;
}

.form-checkbox-label a {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Wrapper-based checkbox (legacy pattern) */
label.form-checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    user-select: none;
}

label.form-checkbox input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.form-checkbox-mark {
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    transition: all 0.2s var(--ease-elegant);
    position: relative;
    flex-shrink: 0;
}

label.form-checkbox input:checked + .form-checkbox-mark {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

label.form-checkbox input:checked + .form-checkbox-mark::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

label.form-checkbox input:disabled + .form-checkbox-mark {
    background: var(--color-surface);
    cursor: not-allowed;
}

/* Radio */
.form-radio {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    user-select: none;
}

.form-radio input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.form-radio-mark {
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-border);
    border-radius: 50%;
    transition: all 0.2s var(--ease-elegant);
    position: relative;
    flex-shrink: 0;
}

.form-radio input:checked + .form-radio-mark {
    border-color: var(--color-primary);
}

.form-radio input:checked + .form-radio-mark::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
}

.form-radio-label {
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

/* Form row (side by side) */
.form-row {
    display: flex;
    gap: var(--spacing-md);
}

.form-row .form-group {
    flex: 1;
}

/* Form actions */
.form-actions {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: flex-end;
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}

/* -------------------------------------------
   Rich Text Editor
   WYSIWYG editor with toolbar for formatting
   ------------------------------------------- */

/* Rich text editor container group */
.rich-text-editor-group {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: var(--rich-text-editor-min-height);
}

/* Container for the rich text editor */
.rich-text-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: var(--rich-text-editor-min-height);
}

/* The actual rich text editor (injected by JS) */
.richTextEditor {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: var(--rich-text-editor-min-height);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    background-color: var(--color-background);
    overflow: hidden;
}

/* Rich Text Editor Toolbar */
.richTextEditor .panel {
    flex: 0 0 auto;
    background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-background) 100%);
    border-bottom: 1px solid var(--color-border);
    padding: var(--spacing-sm);
    margin: 0;
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
    display: flex !important;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    list-style: none;
}

/* Code mode indicator */
.richTextEditor[data-mode="code"] .panel {
    background: linear-gradient(180deg, var(--color-surface-primary-tint) 0%, var(--color-background) 100%);
    border-bottom: 2px solid var(--color-primary);
}

#Interactions .richTextEditor[data-mode="code"] {
    flex: initial !important;
    min-height: initial !important;
}

/* Toolbar buttons */
.richTextEditor .panel a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--rich-text-editor-button-size);
    height: var(--rich-text-editor-button-size);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    background-color: var(--color-background);
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-fast);
    color: var(--color-text-warm-body);
}

.richTextEditor .panel a:hover {
    background-color: var(--color-primary-lighter);
    border-color: var(--color-primary-border-soft);
    transform: translateY(-1px);
}

.richTextEditor .panel a:active,
.richTextEditor .panel a.active {
    background-color: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Toolbar button text/icons */
.richTextEditor .panel a.bold::after {
    content: 'B';
    font-weight: bold;
    font-size: var(--rich-text-editor-button-font-size);
}

.richTextEditor .panel a.italic::after {
    content: 'I';
    font-style: italic;
    font-size: var(--rich-text-editor-button-font-size);
}

.richTextEditor .panel a.underline::after {
    content: 'U';
    text-decoration: underline;
    font-size: var(--rich-text-editor-button-font-size);
}

.richTextEditor .panel a.h1::after {
    content: 'H1';
    font-weight: bold;
    font-size: calc(var(--rich-text-editor-button-font-size) - 2px);
}

.richTextEditor .panel a.h2::after {
    content: 'H2';
    font-weight: bold;
    font-size: calc(var(--rich-text-editor-button-font-size) - 2px);
}

.richTextEditor .panel a.h3::after {
    content: 'H3';
    font-weight: bold;
    font-size: calc(var(--rich-text-editor-button-font-size) - 2px);
}

.richTextEditor .panel a.insertUnorderedList::after {
    content: '•';
    font-size: 18px;
    line-height: 1;
}

.richTextEditor .panel a.insertOrderedList::after {
    content: '1.';
    font-size: var(--rich-text-editor-button-font-size);
}

.richTextEditor .panel a.normal::after {
    content: '¶';
    font-size: var(--rich-text-editor-button-font-size);
}

.richTextEditor .panel a.undo::after {
    content: '↶';
    font-size: 16px;
}

.richTextEditor .panel a.redo::after {
    content: '↷';
    font-size: 16px;
}

.richTextEditor .panel a.html {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-xs);
    min-width: 40px;
    text-align: center;
    position: relative;
    text-indent:-9999px; 
    z-index: 10; /* Ensure it's always clickable */
}
.richTextEditor .panel a.html.active {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}

.richTextEditor .panel a.html::after {
    content: '</>';
    text-indent:0; 
    font-family: var(--font-family-mono);
    font-size: calc(var(--rich-text-editor-button-font-size) - 2px);
}

/* Divider between button groups */
.richTextEditor .panel .divider {
    width: 1px;
    height: var(--rich-text-editor-button-size);
    background: var(--color-border);
    margin: 0 var(--spacing-xs);
}

/* Editor content area (iframe) */
.richTextEditor iframe {
    flex: 1;
    width: 100%;
    min-height: 200px;
    border: none;
    background: var(--color-background);
}

.richTextEditor iframe:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* Focus states for accessibility */
.richTextEditor .panel a:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Rich textarea (fallback/markdown mode) */
.rich-textarea {
    flex: 1;
    width: 100%;
    min-height: 200px;
    padding: var(--spacing-md);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.2s var(--ease-elegant), box-shadow 0.2s var(--ease-elegant);
}

.rich-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus-ring);
}

/* Code/markdown view specific styling */
.rich-textarea[data-mode="code"],
.rich-text-container textarea[data-mode="code"] {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    background-color: var(--color-surface);
    tab-size: 2;
    -moz-tab-size: 2;
    white-space: pre-wrap;
}

/* Hide label when rich text editor is active */
.rich-text-container:has(.richTextEditor) > .form-label {
    display: none;
}

/* Dialog-specific rich text editor styling */

/* Dialog body with rich text editor needs flex column */
#Interactions .dialog .dialog-body:has(.rich-text-editor-group) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Dialog scroll area fills available space and uses flex */
#Interactions .dialog .dialog-scroll:has(.rich-text-editor-group) {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--spacing-md);
    overflow: hidden;
    min-height: 0; /* Allow shrinking in flex */
}

/* Hide description dialog tip - content is self-explanatory */
#Interactions #Dlg_Description .dialog-scroll > .tip {
    display: none;
}

/* Rich text editor group fills the scroll area */
#Interactions .dialog .rich-text-editor-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    min-height: 0; /* Allow shrinking in flex */
    width: 100%;
}

/* The data container fills available space */
#Interactions .dialog .rich-text-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
}

/* Rich text editor fills its container */
#Interactions .dialog .richTextEditor {
    flex: 1;
    width: 100%;
    min-height: 200px;
}

/* Iframe fills the editor */
#Interactions .dialog .richTextEditor iframe {
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 200px;
}

/* Mobile responsive adjustments */
@media only screen and (max-width: 750px) {
    .rich-text-editor-group {
        min-height: 200px;
    }

    .richTextEditor .panel {
        padding: var(--spacing-xs);
        gap: 2px;
    }

    .richTextEditor .panel a {
        width: 28px;
        height: 28px;
    }

    .rich-textarea {
        min-height: 150px;
        font-size: var(--font-size-sm);
        padding: var(--spacing-sm);
    }
}

/* --------------------------------------------------------------------------
   SECTION 13: INTERACTIVE PATTERN
   --------------------------------------------------------------------------
   Multi-state UI elements with start/progress/end states.
   Expected by WebClientTypescript InteractiveBehavior.
   -------------------------------------------------------------------------- */

/* Interactive container */
.interactive {
    position: relative;
}

/* Interactive content states */
.interactive .interactive-content {
    display: none;
}

.interactive .interactive-content.start {
    display: block;
}

/* When in progress state */
.interactive[data-state="progress"] .interactive-content.start,
.interactive[data-state="progress"] .interactive-content.end {
    display: none;
}

.interactive[data-state="progress"] .interactive-content.progress {
    display: block;
}

/* When in end state */
.interactive[data-state="end"] .interactive-content.start,
.interactive[data-state="end"] .interactive-content.progress {
    display: none;
}

.interactive[data-state="end"] .interactive-content.end {
    display: block;
}

/* Interactive list container */
.interactive-list {
    display: flex;
    flex-direction: column;
}

.interactive-list .interactive {
    border-bottom: 1px solid var(--color-border);
}

.interactive-list .interactive:last-child {
    border-bottom: none;
}

/* Interactive inline (no dialog) */
.interactive[interactive-inline] .interactive-content.progress {
    background: var(--color-surface);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    margin-top: var(--spacing-sm);
}

/* --------------------------------------------------------------------------
   SECTION 14: PAGE HERO / BANNER
   --------------------------------------------------------------------------
   Full-width banner headers for page titles
   -------------------------------------------------------------------------- */

/* Page hero - gradient banner header */
.page-hero {
    background: var(--gradient-hero, linear-gradient(135deg, var(--color-primary-darker) 0%, var(--color-primary-dark) 50%, var(--color-primary) 100%));
    color: var(--color-background);
    padding: 5rem 0 4rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.page-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at top right, rgba(var(--color-secondary-rgb), 0.15) 0%, transparent 50%),
                radial-gradient(ellipse at bottom left, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.page-hero-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: var(--font-weight-extrabold);
    margin: 0 0 1rem 0;
    line-height: 1.1;
    color: var(--color-background);
    letter-spacing: -0.02em;
    position: relative;
}

.page-hero-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    opacity: 0.92;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7;
    position: relative;
}

/* Page hero icon - large icon/emoji above title */
.page-hero-icon {
    display: block;
    font-size: 3.5rem;
    margin-bottom: var(--spacing-md);
    position: relative;
}

.page-hero-breadcrumb {
    margin-bottom: 1rem;
    font-size: 0.9rem;
    opacity: 0.8;
}

.page-hero-breadcrumb a {
    color: var(--color-background);
    text-decoration: none;
    opacity: 0.9;
}

.page-hero-breadcrumb a:hover {
    opacity: 1;
    text-decoration: underline;
}

.page-hero-breadcrumb .separator {
    margin: 0 0.5rem;
}

/* Page hero actions - for CTA buttons */
.page-hero-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    margin-top: var(--spacing-lg);
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   SECTION 14B: PAGE & CONTAINER
   --------------------------------------------------------------------------
   Page wrapper and max-width container for content
   -------------------------------------------------------------------------- */

/* Homepage/page wrapper */
.homepage {
    line-height: 1.6;
    color: var(--color-text-light);
    margin: 0;
    padding: 0;
}

/* Max-width container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* --------------------------------------------------------------------------
   SECTION 15: SECTION HEADERS
   --------------------------------------------------------------------------
   Headers for content sections.
   See also: §24 Large Section Titles — identical font-size but adds
   .section-header-lg container and .section-title-accent gradient underline.
   -------------------------------------------------------------------------- */

/* Base section wrapper */
.section {
    padding: 5rem var(--spacing-lg);
    background: var(--color-background);
}

.section:nth-child(even) {
    background: var(--color-surface);
}

/* Section with highlight gradient background */
.section.section-highlight {
    background: linear-gradient(135deg, var(--color-background-alt) 0%, var(--color-background-darkened) 100%);
}

/* Section header - for content sections */
.section-header {
    margin-bottom: var(--spacing-lg);
}

.section-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: var(--font-weight-bold);
    margin: 0 0 2rem 0;
    color: var(--color-text);
    text-align: center;
}

.subsection-title {
    font-size: clamp(0.75rem, 3vw, 1.5rem);
    font-weight: var(--font-weight-bold);
    margin: 3rem 0 2rem 0;
    color: var(--color-text);
    text-align: center;
}

.section-title-centered {
    text-align: center;
}

.section-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
    margin: -1rem auto 3rem auto;
    line-height: 1.6;
    text-align: center;
    max-width: 800px;
}

.section-subtitle-centered {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

/* Section divider - horizontal rule with spacing */
.section-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--spacing-xl) 0;
}

/* --------------------------------------------------------------------------
   SECTION 16: DIALOG HEADER
   --------------------------------------------------------------------------
   Headers for modal dialogs (reference for documentation)
   -------------------------------------------------------------------------- */

/* Dialog header - dark header bar */
.dialog-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: var(--spacing-md) var(--spacing-xl);
    background-color: var(--color-primary-darker);
    color: var(--color-white);
    border-bottom: 1px solid var(--color-glass);
}

.dialog-header-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    text-align: center;
}

.dialog-header .command {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-white);
    opacity: 0.8;
}

.dialog-header .command:hover {
    opacity: 1;
}

.dialog-header .command.close {
    right: var(--spacing-md);
}

.dialog-header .command.back {
    left: var(--spacing-md);
}

/* --------------------------------------------------------------------------
   SECTION 17: GRADIENT BUTTONS
   --------------------------------------------------------------------------
   Call-to-action buttons with gradient backgrounds
   -------------------------------------------------------------------------- */

/* Gradient CTA button */
.command.btn-gradient {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 1rem 2rem;
    border-radius: var(--border-radius-button);
    background: var(--gradient-primary, linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%));
    color: var(--color-background);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    border: none;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-all);
    box-shadow: var(--shadow-button);
    position: relative;
    overflow: hidden;
}

.command.btn-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s var(--ease-elegant);
}

.command.btn-gradient:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-button-hover);
}

.command.btn-gradient:hover::before {
    left: 100%;
}

.command.btn-gradient:active {
    transform: translateY(-1px);
    box-shadow: var(--shadow-button);
}

/* Gradient variants */
.command.btn-gradient.btn-gradient-warm {
    background: var(--gradient-warm, linear-gradient(135deg, rgb(239, 68, 68) 0%, rgb(245, 158, 11) 100%));
    box-shadow: 0 4px 15px rgba(var(--color-error-rgb), 0.3);
}

.command.btn-gradient.btn-gradient-warm:hover {
    box-shadow: 0 8px 25px rgba(var(--color-error-rgb), 0.4);
}

.command.btn-gradient.btn-gradient-cool {
    background: var(--gradient-cool, linear-gradient(135deg, rgb(16, 185, 129) 0%, rgb(6, 182, 212) 100%));
    box-shadow: 0 4px 15px rgba(var(--color-success-rgb), 0.3);
}

.command.btn-gradient.btn-gradient-cool:hover {
    box-shadow: 0 8px 25px rgba(var(--color-success-rgb), 0.4);
}

/* Secondary/outline gradient - gradient border effect */
.command.btn-gradient-outline {
    position: relative;
    background: var(--color-background);
    color: var(--color-primary);
    border: none;
    z-index: 1;
}

.command.btn-gradient-outline::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    background: var(--gradient-banner);
    border-radius: inherit;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: xor;
    -webkit-mask-composite: xor;
    z-index: -1;
}

/* --------------------------------------------------------------------------
   SECTION 18: IMAGE CARDS WITH OVERLAY
   --------------------------------------------------------------------------
   Picture cards with text overlay and hover effects (category-card pattern)
   -------------------------------------------------------------------------- */

/* Image card container */
.image-card {
    position: relative;
    border-radius: var(--border-radius-card);
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition-all);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    display: block;
}

.image-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: var(--shadow-card-lifted, 0 20px 40px rgba(0, 0, 0, 0.2));
}

.image-card:active {
    transform: translateY(-2px) scale(1.01);
}

/* Image within card */
.image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-card-photo);
}

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

/* Text overlay at bottom */
.image-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 4rem 1.5rem 1.5rem;
    background: var(--gradient-overlay-dark, linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 100%));
    color: var(--color-background);
    transition: all 0.4s var(--ease-elegant);
}

.image-card:hover .image-card-overlay {
    background: linear-gradient(to top, rgba(61, 84, 245, 0.9) 0%, rgba(61, 84, 245, 0.6) 60%, transparent 100%);
    padding-bottom: 1.75rem;
}

.image-card-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--spacing-xs) 0;
}

.image-card-subtitle {
    font-size: var(--font-size-sm);
    opacity: 0.9;
    margin: 0;
}

/* Preset sizes */
.image-card.image-card-tall {
    height: 350px;
}

.image-card.image-card-medium {
    height: 280px;
}

.image-card.image-card-short {
    height: 200px;
}

/* Image card grid - for category cards */
.image-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

@media (max-width: 1024px) {
    .image-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .image-card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .image-card.image-card-medium {
        height: 200px;
    }
}

@media (max-width: 480px) {
    .image-card-grid {
        grid-template-columns: 1fr;
    }

    .image-card.image-card-medium {
        height: 220px;
    }
}

/* --------------------------------------------------------------------------
   SECTION 19: FEATURE BADGES
   --------------------------------------------------------------------------
   Positioned badges for cards and images
   -------------------------------------------------------------------------- */

/* Feature badge - positioned absolutely */
.feature-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: linear-gradient(135deg, #3d54f5 0%, #e74c3c 100%);
    color: var(--color-background);
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    z-index: 10;
}

/* Badge positions */
.feature-badge.feature-badge-top-left {
    right: auto;
    left: 1rem;
}

.feature-badge.feature-badge-bottom-right {
    top: auto;
    bottom: 1rem;
}

.feature-badge.feature-badge-bottom-left {
    top: auto;
    bottom: 1rem;
    right: auto;
    left: 1rem;
}

.feature-badge.feature-badge-bottom-center {
    top: auto;
    bottom: 1rem;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
}

/* Badge color variants */
.feature-badge.feature-badge-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.feature-badge.feature-badge-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.feature-badge.feature-badge-info {
    background: linear-gradient(135deg, #06b6d4 0%, #0284c7 100%);
}

/* Non-gradient solid badge */
.feature-badge.feature-badge-solid {
    background: var(--color-primary);
}

/* --------------------------------------------------------------------------
   SECTION 20: INLINE LINKS WITH ARROW
   --------------------------------------------------------------------------
   Links with animated arrow on hover (feature-link, collection-link)
   -------------------------------------------------------------------------- */

/* Link with arrow */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: color 0.2s var(--ease-elegant);
}

.link-arrow::after {
    content: "→";
    transition: transform 0.2s var(--ease-elegant);
}

.link-arrow:hover {
    color: var(--color-primary-hover, rgb(51, 74, 235));
}

.link-arrow:hover::after {
    transform: translateX(4px);
}

/* Link with external icon */
.link-external::after {
    content: "↗";
}

/* Link sizes */
.link-arrow.link-arrow-sm {
    font-size: var(--font-size-sm);
}

.link-arrow.link-arrow-lg {
    font-size: var(--font-size-lg);
}

/* --------------------------------------------------------------------------
   SECTION 21: ICON SVG REPLACEMENT
   --------------------------------------------------------------------------
   Pattern for replacing text with SVG background icons.

   CONTEXT-DRIVEN SIZING: Icon size is set by container context, not HTML classes.
   HTML describes WHAT (semantic), CSS describes HOW (presentation).

   Usage:
     HTML: <span class="icon-svg icon-cart">Cart</span>
     CSS:  Container sets --icon-size, icon inherits automatically
   -------------------------------------------------------------------------- */

/* Icon base - replaces text with SVG background */
.icon-svg {
    display: inline-block;
    width: var(--icon-size, var(--icon-size-md));
    height: var(--icon-size, var(--icon-size-md));
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 0;
    text-indent: -9999px;
    vertical-align: middle;
}

/* --- CONTEXT-DRIVEN SIZING --- */
/* Containers set --icon-size, icons inside inherit automatically */

/* Buttons use small icons */
.command {
    --icon-size: var(--icon-size-sm);
}

/* Inline text uses medium icons */
.icon-inline {
    --icon-size: var(--icon-size-md);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.icon-inline .icon-svg {
    flex-shrink: 0;
}

/* Cards use large icons */
.card-icon {
    --icon-size: var(--icon-size-lg);
}

/* Title/heading context uses XL icons */
.title-with-icon {
    --icon-size: var(--icon-size-xl);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.title-with-icon .icon-svg {
    flex-shrink: 0;
}

/* Hero sections use XXL icons */
.page-hero {
    --icon-size: var(--icon-size-xxl);
}

/* Feature blocks use feature-size icons */
.feature-icon {
    --icon-size: var(--icon-size-feature);
}

/* --- SIZE OVERRIDE CLASSES (Escape Hatch) --- */
/* Use sparingly - prefer context-driven sizing */
.icon-svg.icon-xs { --icon-size: var(--icon-size-xs); }
.icon-svg.icon-sm { --icon-size: var(--icon-size-sm); }
.icon-svg.icon-md { --icon-size: var(--icon-size-md); }
.icon-svg.icon-lg { --icon-size: var(--icon-size-lg); }
.icon-svg.icon-xl { --icon-size: var(--icon-size-xl); }
.icon-svg.icon-xxl { --icon-size: var(--icon-size-xxl); }

/* --------------------------------------------------------------------------
   ICON LIBRARY - Background images for .icon-svg
   Consolidates all icon background-image definitions in one location.

   Naming convention:
   - Default: .icon-svg.icon-{name} uses /images/icon/{name}-black.svg
   - Colors:  Add .icon-primary, .icon-white, .icon-secondary, .icon-danger

   Dark mode uses CSS filter inversion on black icons (see component-library-dark.css)
   -------------------------------------------------------------------------- */

/* ==========================================================================
   COLOR MODIFIERS
   These use CSS filters to colorize icons, avoiding need for separate SVG files
   for every color variant. Works best with black base icons.
   ========================================================================== */

/* Primary color - uses filter to shift black to primary */
.icon-svg.icon-primary {
    filter: brightness(0) saturate(100%) invert(25%) sepia(98%) saturate(2465%) hue-rotate(238deg) brightness(94%) contrast(99%);
}

/* White - inverts black to white */
.icon-svg.icon-white {
    filter: brightness(0) invert(1);
}

/* Secondary/Success - green tint */
.icon-svg.icon-secondary,
.icon-svg.icon-success {
    filter: brightness(0) saturate(100%) invert(52%) sepia(58%) saturate(523%) hue-rotate(93deg) brightness(96%) contrast(90%);
}

/* Danger - red tint */
.icon-svg.icon-danger {
    filter: brightness(0) saturate(100%) invert(27%) sepia(95%) saturate(2267%) hue-rotate(348deg) brightness(89%) contrast(97%);
}

/* ==========================================================================
   ICON DEFINITIONS - Default to black SVGs
   ========================================================================== */

/* Navigation */
.icon-svg.icon-arrow-left { background-image: url(/images/icon/arrow-left-black.svg); }
.icon-svg.icon-arrow-right { background-image: url(/images/icon/arrow-right-black.svg); }
.icon-svg.icon-chevron-left { background-image: url(/images/icon/chevron-left-black.svg); }
.icon-svg.icon-chevron-right { background-image: url(/images/icon/chevron-right-black.svg); }
.icon-svg.icon-chevron-down { background-image: url(/images/icon/chevron-down-black.svg); }
.icon-svg.icon-close { background-image: url(/images/icon/close-black.svg); }
.icon-svg.icon-revert { background-image: url(/images/icon/revert-black.svg); }
.icon-svg.icon-refresh { background-image: url(/images/icon/refresh-black.svg); }
.icon-svg.icon-skip { background-image: url(/images/icon/skip-black.svg); }

/* Status */
.icon-svg.icon-check { background-image: url(/images/icon/check-black.svg); }
.icon-svg.icon-warning { background-image: url(/images/icon/warning-secondary.svg); }
.icon-svg.icon-info { background-image: url(/images/icon/info-circle-black.svg); }
.icon-svg.icon-alert { background-image: url(/images/icon/alert-black.svg); }
.icon-svg.icon-help { background-image: url(/images/icon/help-circle-black.svg); }

/* Time & Calendar */
.icon-svg.icon-calendar { background-image: url(/images/icon/calendar-black.svg); }
.icon-svg.icon-clock { background-image: url(/images/icon/clock-black.svg); }
.icon-svg.icon-hourglass { background-image: url(/images/icon/hourglass-black.svg); }

/* Communication */
.icon-svg.icon-message { background-image: url(/images/icon/message-black.svg); }
.icon-svg.icon-phone { background-image: url(/images/icon/phone-black.svg); }
.icon-svg.icon-send { background-image: url(/images/icon/send-black.svg); }

/* Location */
.icon-svg.icon-pin { background-image: url(/images/icon/pin-black.svg); }
.icon-svg.icon-map { background-image: url(/images/icon/map-black.svg); }

/* Commerce */
.icon-svg.icon-cart { background-image: url(/images/icon/cart-black.svg); }
.icon-svg.icon-bag { background-image: url(/images/icon/bag-black.svg); }
.icon-svg.icon-package { background-image: url(/images/icon/package-black.svg); }
.icon-svg.icon-receipt { background-image: url(/images/icon/receipt-black.svg); }

/* Finance */
.icon-svg.icon-dollar { background-image: url(/images/icon/dollar-black.svg); }
.icon-svg.icon-dollar-circle { background-image: url(/images/icon/dollar-circle-black.svg); }
.icon-svg.icon-hand-cash { background-image: url(/images/icon/hand-cash-black.svg); }
.icon-svg.icon-cash-stack { background-image: url(/images/icon/cash-stack-black.svg); }
.icon-svg.icon-credit-card-stack { background-image: url(/images/icon/credit-card-stack-black.svg); }

/* Analytics */
.icon-svg.icon-graph { background-image: url(/images/icon/graph-black.svg); }
.icon-svg.icon-chart { background-image: url(/images/icon/chart-black.svg); }
.icon-svg.icon-eye { background-image: url(/images/icon/eye-black.svg); }
.icon-svg.icon-heart { background-image: url(/images/icon/heart-black.svg); }

/* People */
.icon-svg.icon-group { background-image: url(/images/icon/group-black.svg); }
.icon-svg.icon-trophy { background-image: url(/images/icon/trophy-black.svg); }

/* Actions */
.icon-svg.icon-upload { background-image: url(/images/icon/upload-black.svg); }
.icon-svg.icon-camera { background-image: url(/images/icon/camera-black.svg); }
.icon-svg.icon-scan-barcode { background-image: url(/images/icon/scan-barcode-primary.svg); }
.icon-svg.icon-trash { background-image: url(/images/icon/trash-black.svg); }
.icon-svg.icon-copy { background-image: url(/images/icon/copy-black.svg); }
.icon-svg.icon-share { background-image: url(/images/icon/share-black.svg); }
.icon-svg.icon-edit { background-image: url(/images/icon/edit-black.svg); }
.icon-svg.icon-print { background-image: url(/images/icon/print-black.svg); }
.icon-svg.icon-list { background-image: url(/images/icon/list-black.svg); }
.icon-svg.icon-plus { background-image: url(/images/icon/plus-black.svg); }
.icon-svg.icon-collection { background-image: url(/images/icon/collection-black.svg); }
.icon-svg.icon-more { background-image: url(/images/icon/more-vert-black.svg); }
.icon-svg.icon-more-vert { background-image: url(/images/icon/more-vert-black.svg); }
.icon-svg.icon-more-horiz { background-image: url(/images/icon/more-horiz-black.svg); }

/* Bookmarks */
.icon-svg.icon-bookmark { background-image: url(/images/icon/bookmark-black.svg); }
.icon-svg.icon-bookmark-solid { background-image: url(/images/icon/bookmark-solid-black.svg); }

/* Zoom */
.icon-svg.icon-zoom-in { background-image: url(/images/icon/zoom-in-black.svg); }
.icon-svg.icon-zoom-out { background-image: url(/images/icon/zoom-out-black.svg); }

/* Navigation */
.icon-svg.icon-globe { background-image: url(/images/icon/globe-black.svg); }

/* Listing Management */
.icon-svg.icon-category { background-image: url(/images/icon/label-black.svg); }
.icon-svg.icon-mode { background-image: url(/images/icon/label-black.svg); }
.icon-svg.icon-variant { background-image: url(/images/icon/box-black.svg); }
.icon-svg.icon-variants { background-image: url(/images/icon/group-black.svg); }

/* Misc */
.icon-svg.icon-lightbulb { background-image: url(/images/icon/lightbulb-black.svg); }
.icon-svg.icon-bolt { background-image: url(/images/icon/bolt-black.svg); }
.icon-svg.icon-sparks { background-image: url(/images/icon/sparks-black.svg); }
.icon-svg.icon-shield { background-image: url(/images/icon/shield-black.svg); }
.icon-svg.icon-shield-check { background-image: url(/images/icon/shield-check-black.svg); }
.icon-svg.icon-lock { background-image: url(/images/icon/lock-black.svg); }
.icon-svg.icon-settings { background-image: url(/images/icon/settings-black.svg); }

/* --------------------------------------------------------------------------
   SECTION 22: TOOLTIPS
   --------------------------------------------------------------------------
   Tooltip triggers and styling (works with ux-tooltip behavior)
   -------------------------------------------------------------------------- */

/* Tooltip trigger - help icon */
.help[ux-tooltip] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-white);
    color: var(--color-background);
    border-radius: 50%;
    cursor: help;
    vertical-align: middle;
    margin-left: var(--spacing-xs);
    transition: background-color 0.2s var(--ease-elegant);
    width: var(--icon-size-md, 20px);
    height: var(--icon-size-md, 20px);
    background-size: var(--icon-size-sm) var(--icon-size-sm);
    background-repeat: no-repeat;
    background-position: center;
    font-size: 0;
    text-indent: -9999px;
    background-image: url(/images/icon/question-mark-black.svg);
}

.help[ux-tooltip]:hover {
    background-color: var(--color-text-muted);
    background-image: url(/images/icon/question-mark-white.svg);
}

/* Tooltip container (created by TypeScript — single global #Tooltip div)
   Structure: #Tooltip.tooltip > .writer + .output
   TypeScript adds .active to .output to show, removes to hide.
   Positioning classes on .output: .top, .left, .right.
   See: WebClientTypescript/model/forms.ts (Tooltip class) */

#Tooltip,
.tooltip {
    position: absolute;
    max-width: 300px;
    z-index: var(--z-index-tooltip, 1000);
}

/* Writer (invisible measurement element) & output — both hidden by default */
    .tooltip .writer,
    .tooltip .output {
        opacity: 0;
        pointer-events: none;
        position: absolute;
        z-index: var(--z-index-tooltip, 1000);
        padding: var(--spacing-sm) var(--spacing-md);
        background: var(--color-text);
        color: var(--color-background);
        border-radius: var(--border-radius-md);
        font-size: var(--font-size-sm);
        line-height: 1.4;
        text-align: left;
        display: inline-block;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        min-width: 250px; max-width:100%;
    }

/* Writer is only for measuring — never visible */
.tooltip .writer {
    visibility: hidden;
}

/* Prepare state — during positioning calculation (no transition) */
.tooltip .output.prepared {
    opacity: 0;
    margin-top: 20px;
    transform: none;
    transition: none;
}

/* Active state — visible tooltip */
.tooltip .output.active {
    opacity: 1;
    margin-top: 10px;
    pointer-events: all;
    transition: margin-top 0.25s ease-in-out, opacity 0.75s ease;
}

/* Top-positioned: extra offset before active transition */
.tooltip .output.top {
    margin-top: 20px;
}

.tooltip .output.active.top {
    margin-top: 10px;
}

/* Arrow — default: bottom of tooltip, pointing down */
.tooltip .output::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--color-text);
    left: 50%;
    bottom: -8px;
    margin-left: -8px;
}

/* Arrow — top-positioned: above tooltip, pointing up */
.tooltip .output.top::after {
    border-top-color: transparent;
    border-bottom: 8px solid var(--color-text);
    top: -16px;
    bottom: auto;
}

/* Arrow — shifted left */
.tooltip .output.left::after {
    left: 12px;
    margin-left: 0;
}

/* Arrow — shifted right */
.tooltip .output.right::after {
    right: 12px;
    left: auto;
    margin-left: 0;
}

/* Info icon variant */
.info[ux-tooltip] {
    background-color: var(--color-primary);
}

.info[ux-tooltip]::before {
    content: "i";
    font-style: italic;
}

/* Warning icon variant */
.warning[ux-tooltip] {
    background-color: var(--color-warning, #f59e0b);
}

.warning[ux-tooltip]::before {
    content: "!";
}

/* --------------------------------------------------------------------------
   SECTION 23: INLINE TIPS
   --------------------------------------------------------------------------
   Always-visible tips and guidance (not tooltips).
   Uses subtle left border accent with tinted background.
   -------------------------------------------------------------------------- */

/* Base tip styles — warm gradients, no left borders (per style guide anti-patterns) */
.tip-important,
.tip-info,
.tip-success,
.tip-error,
.tip-neutral {
    position: relative;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    line-height: 1.65;
    margin: var(--spacing-md) 0;
    border: 1px solid transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Remove margin when first/last child in container */
.tip-important:first-child,
.tip-info:first-child,
.tip-success:first-child,
.tip-error:first-child,
.tip-neutral:first-child {
    margin-top: 0;
}

.tip-important:last-child,
.tip-info:last-child,
.tip-success:last-child,
.tip-error:last-child,
.tip-neutral:last-child {
    margin-bottom: 0;
}

/* Important/Warning tip - amber gradient with warm glow */
.tip-important {
    background: linear-gradient(
        135deg,
        rgba(245, 158, 11, 0.08) 0%,
        rgba(245, 158, 11, 0.03) 100%
    );
    border-color: rgba(245, 158, 11, 0.15);
    color: var(--color-text);
}

.tip-important strong {
    color: var(--color-warning-dark, #b45309);
    font-weight: var(--font-weight-semibold);
}

/* Info tip - primary violet gradient */
.tip-info {
    background: linear-gradient(
        135deg,
        rgba(92, 67, 244, 0.07) 0%,
        rgba(92, 67, 244, 0.02) 100%
    );
    border-color: rgba(92, 67, 244, 0.12);
    color: var(--color-text);
}

.tip-info strong {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

/* Success tip - green gradient */
.tip-success {
    background: linear-gradient(
        135deg,
        rgba(16, 185, 129, 0.08) 0%,
        rgba(16, 185, 129, 0.02) 100%
    );
    border-color: rgba(16, 185, 129, 0.15);
    color: var(--color-text);
}

.tip-success strong {
    color: var(--color-success-dark, #16a34a);
    font-weight: var(--font-weight-semibold);
}

/* Error tip - red gradient */
.tip-error {
    background: linear-gradient(
        135deg,
        rgba(239, 68, 68, 0.08) 0%,
        rgba(239, 68, 68, 0.02) 100%
    );
    border-color: rgba(239, 68, 68, 0.15);
    color: var(--color-text);
}

.tip-error strong {
    color: var(--color-error-dark, #dc2626);
    font-weight: var(--font-weight-semibold);
}

/* Neutral tip - subtle surface gradient */
.tip-neutral {
    background: linear-gradient(
        135deg,
        var(--color-surface) 0%,
        var(--color-background) 100%
    );
    border-color: var(--color-border);
    color: var(--color-text-light);
}

/* Next steps list */
.next-steps {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--color-surface);
    border-radius: var(--border-radius-md);
}

.next-steps .step {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.next-steps .step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--color-primary);
    color: var(--color-background);
    border-radius: 50%;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   SECTION 24: LARGE SECTION TITLES (Homepage Style)
   --------------------------------------------------------------------------
   Large centered section headers for marketing pages.
   See also: §15 Section Headers — shares identical font-size/weight.
   Unique here: .section-header-lg container, .section-title-accent gradient.
   -------------------------------------------------------------------------- */

/* Large section title */
.section-title-lg {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: var(--font-weight-bold);
    text-align: center;
    color: var(--color-text);
    margin: 0 0 1rem 0;
    line-height: 1.2;
}

/* Large section subtitle */
.section-subtitle-lg {
    font-size: var(--font-size-lg);
    text-align: center;
    color: var(--color-text-muted);
    max-width: 700px;
    margin: 0 auto var(--spacing-xl) auto;
    line-height: 1.6;
}

/* Section header container for large headers */
.section-header-lg {
    text-align: center;
    margin-bottom: var(--spacing-xxl);
}

/* Decorative accent under title */
.section-title-accent::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    margin: var(--spacing-md) auto 0;
    border-radius: var(--border-radius-full);
}

/* --------------------------------------------------------------------------
   SECTION 25: SCROLLABLE CONTAINERS
   --------------------------------------------------------------------------
   Scroll containers with custom scrollbar styling.
   Works with ScrollManager TypeScript behavior.
   -------------------------------------------------------------------------- */

/* Base scrollable container */
.scrollable {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable both-edges;
}

/* Horizontal scrollable */
.scrollable-horizontal {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}

/* Firefox scrollbar support */
@supports not selector(::-webkit-scrollbar) {
    .scrollable {
        scrollbar-color: rgba(11, 240, 192, 0.85) transparent;
        scrollbar-width: thin;
    }
}

/* Webkit scrollbar track */
.scrollable::-webkit-scrollbar-track {
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 5px inset;
    border-radius: var(--border-radius-md);
    background-color: transparent;
}

/* Webkit scrollbar base - hidden by default */
.scrollable::-webkit-scrollbar {
    width: 0px;
    background-color: rgba(245, 245, 245, 0.063);
}

/* Show scrollbar when content overflows */
body .scrollable[ux-scrollcontent]::-webkit-scrollbar,
body .scrollable[ux-scrolling]::-webkit-scrollbar {
    width: 6px;
}

/* Scrollbar thumb - custom teal accent color */
.scrollable::-webkit-scrollbar-thumb {
    border-radius: var(--border-radius-md);
    box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 5px inset;
    background-color: rgba(11, 240, 192, 0.85);
}

/* Horizontal scrollbar */
.scrollable-horizontal::-webkit-scrollbar {
    height: 6px;
    width: auto;
}

/* Neutral scrollbar variant */
.scrollable.scrollbar-neutral::-webkit-scrollbar-thumb,
.scroll-container::-webkit-scrollbar-thumb {
    background-color: var(--color-border);
}

.scrollable.scrollbar-neutral::-webkit-scrollbar-thumb:hover,
.scroll-container::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-border-medium);
}

/* Always show scrollbar variant */
.scrollable.scrollbar-visible::-webkit-scrollbar {
    width: 6px;
}

/* --------------------------------------------------------------------------
   SECTION 26: TOUCH SCROLL PATTERNS
   --------------------------------------------------------------------------
   Touch/mouse drag scrolling with ux-touch attributes.
   Works with TouchModel TypeScript behavior.
   -------------------------------------------------------------------------- */

/* Container with horizontal drag scrolling enabled */
[ux-touch][ux-touch-hscroll] {
    cursor: grab;
    user-select: none;
}

[ux-touch][ux-touch-hscroll]:active {
    cursor: grabbing;
}

/* Fade overlay for horizontal scroll hints */
[ux-scrollcontent-hz]::after {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    inset: 0 0 0 auto;
    pointer-events: none;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.9));
    width: 60px;
}

/* Hide fade when scrolled to end */
[ux-scrollcontent-hz][ux-scrollcontent-hz-end]::after {
    display: none;
}

/* Start fade for bidirectional scroll hint - only show when scrolled away from start */
/* Uses ux-scrolled-hz which is set by ScrollManager when scrollLeft > 0 */
[ux-scrollcontent-hz][ux-scrolled-hz]::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    inset: 0 auto 0 0;
    pointer-events: none;
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.9));
    width: 60px;
}

/* --------------------------------------------------------------------------
   SECTION 27: PRODUCT CARD (SEARCH RESULT CARD)
   --------------------------------------------------------------------------
   Extended card pattern for search results with photo, badges, pricing.
   Used in .product-results (buyer) and .stock-results (seller) grids.
   Full implementation in style-shop-search.css and style-listings-search.css
   -------------------------------------------------------------------------- */

/* Product card container - extends base card */
.product-card {
    background: var(--gradient-card-base);
    border-radius: var(--border-radius-card);
    border: 1px solid var(--color-border);
    overflow: hidden;
    transition: var(--transition-card);
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-card);
}

.product-card:hover {
    border-color: var(--color-border-primary-subtle);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-4px);
}

/* Keyboard navigation highlight */
.product-card.active {
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2);
}

/* Focus ring for accessibility */
.product-card:focus {
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

/* Product photo container with aspect ratio */
.product-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    background: var(--color-surface);
    overflow: hidden;
}

.product-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-card-photo);
}

.product-photo:hover img {
    transform: scale(1.03);
}

/* Image rollover — shows second photo on hover when element has multiple images */
[image-rollover] {
    position: relative;
    overflow: hidden;
}

/* Base positioning for second image - must override .product-card img.loaded opacity:1 */
[image-rollover] a:first-child img:not(:first-child),
.product-card [image-rollover] a img.loaded:not(:first-child),
.result-card [image-rollover] a img.loaded:not(:first-child) {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity var(--transition-base);
}

/* On hover: hide first image */
[image-rollover]:hover a:first-child img:first-child,
.product-card [image-rollover]:hover a img.loaded:first-child,
.result-card [image-rollover]:hover a img.loaded:first-child {
    opacity: 0;
}

/* On hover: show second image */
[image-rollover]:hover a:first-child img:nth-child(2),
.product-card [image-rollover]:hover a img.loaded:nth-child(2),
.result-card [image-rollover]:hover a img.loaded:nth-child(2),
#Body [image-rollover]:hover a img.loaded:nth-child(2) {
    opacity: 1;
}

/* ============================================
   IMAGE GALLERY — carousel with zoom support
   ============================================ */

.image-gallery {
    position: relative;
    width: 100%;
    display: block;
}

.image-gallery .panel {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-sm);
}

.image-gallery .panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-fast) var(--ease-out);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.image-gallery[image-gallery-zoom-mode="hover"] .panel:hover img {
    transform: scale(1.05);
}

/* Zoom toggle button */
.zoom-toggle .icon {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    background-size: var(--icon-size-sm) var(--icon-size-sm);
    background-repeat: no-repeat;
    background-position: center;
    font-size: 0;
    text-indent: -9999px;
    background-color: var(--color-glass-semi);
    background-image: url(/images/icon/zoom-in-black.svg);
    border-radius: var(--border-radius-full);
    cursor: pointer;
    transition: background-color var(--transition-fast) var(--ease-out);
}

.zoom-toggle .icon:hover {
    background-color: var(--color-white);
}

[image-gallery-zoom-enabled="true"] .zoom-toggle .icon {
    background-image: url(/images/icon/zoom-out-black.svg);
}

/* ============================================
   PRODUCT GALLERY — vertical scrollable image stack
   Target-style: all images visible, scroll through,
   zoom within frame, optional enlarge to fullscreen.
   Desktop: vertical stack. Mobile: horizontal swipe.
   ============================================ */

.product-gallery {
    position: relative;
    width: 100%;
}

/* --- Vertical image stack (desktop default) --- */
.product-gallery-images {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* --- Individual image cell --- */
.product-gallery-item {
    position: relative;
    border-radius: var(--border-radius-card);
    overflow: hidden;
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
    cursor: default;
}

.product-gallery-item img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.4s var(--ease-elegant);
    transform-origin: center center;
}

/* --- Zoom-active state: image scales, cursor becomes grab for panning --- */
.product-gallery-item[data-gallery-zoom="active"] {
    cursor: grab;
    overflow: hidden;
}

.product-gallery-item[data-gallery-zoom="active"]:active {
    cursor: grabbing;
}

.product-gallery-item[data-gallery-zoom="active"] img {
    transform: scale(2);
    transition: none;
}

/* --- Controls overlay — bottom-right, appear on hover --- */
.product-gallery-controls {
    position: absolute;
    bottom: var(--spacing-md);
    right: var(--spacing-md);
    display: flex;
    gap: var(--spacing-xs);
    opacity: 0;
    transition: opacity 0.2s var(--ease-out);
}

.product-gallery-item:hover .product-gallery-controls {
    opacity: 1;
}

/* Always show controls on touch devices (no hover) */
@media (hover: none) {
    .product-gallery-controls {
        opacity: 1;
    }
}

/* --- Control buttons (zoom, enlarge) --- */
.product-gallery-btn {
    width: var(--icon-size-xl);
    height: var(--icon-size-xl);
    border: none;
    border-radius: var(--border-radius-full);
    background: var(--color-glass-semi);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s var(--ease-out);
    padding: 0;
}

.product-gallery-btn:hover {
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
}

.product-gallery-btn img {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    transition: none;
}

/* Swap zoom icon when active */
.product-gallery-item[data-gallery-zoom="active"] .product-gallery-zoom img {
    content: url(/images/icon/zoom-out-black.svg);
}

/* --- Counter pill — top-right of gallery --- */
.product-gallery-counter {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    background: var(--color-glass-semi);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--color-text);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-full);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s var(--ease-out);
}

.product-gallery-item:hover .product-gallery-counter {
    opacity: 1;
}

@media (hover: none) {
    .product-gallery-counter {
        opacity: 1;
    }
}

/* --- Mobile: horizontal swipe mode --- */
@media (max-width: 768px) {
    .product-gallery-images {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 0;
        scrollbar-width: none;
    }

    .product-gallery-images::-webkit-scrollbar {
        display: none;
    }

    .product-gallery-item {
        flex: 0 0 100%;
        scroll-snap-align: center;
        border-radius: 0;
        box-shadow: none;
    }

    /* Dot indicators for mobile */
    .product-gallery-dots {
        display: flex;
        justify-content: center;
        gap: 6px;
        padding: var(--spacing-sm) 0;
    }

    .product-gallery-dot {
        width: 6px;
        height: 6px;
        border-radius: var(--border-radius-full);
        background: var(--color-border-medium);
        transition: all 0.2s var(--ease-out);
    }

    .product-gallery-dot.active {
        width: 20px;
        background: var(--color-primary);
    }
}

/* Hide dots on desktop */
@media (min-width: 769px) {
    .product-gallery-dots {
        display: none;
    }
}

/* --- Constrained variant: limit height, scroll within --- */
.product-gallery-images.product-gallery-scroll {
    max-height: 80vh;
    overflow-y: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-medium) transparent;
}

.product-gallery-images.product-gallery-scroll::-webkit-scrollbar {
    width: 4px;
}

.product-gallery-images.product-gallery-scroll::-webkit-scrollbar-thumb {
    background: var(--color-border-medium);
    border-radius: var(--border-radius-sm);
}

/* Seller badge - top-left positioned */
.seller-badge {
    position: absolute;
    top: var(--spacing-sm);
    left: var(--spacing-sm);
    background: var(--color-white);
    color: var(--color-text);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    box-shadow: var(--shadow-card);
    z-index: 5;
    transition: background-color 0.2s var(--ease-elegant), transform 0.2s var(--ease-elegant);
}

.seller-badge:hover {
    background: rgba(0, 0, 0, 0.92);
    transform: scale(1.05);
    color: var(--color-primary-on-dark);
    box-shadow: 0 4px 16px var(--color-border-primary-subtle);
}

.seller-badge .seller-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

/* Distance badge - bottom-right positioned */
.distance-badge {
    position: absolute;
    bottom: var(--spacing-sm);
    right: var(--spacing-sm);
    background: rgba(0, 0, 0, 0.8);
    color: var(--color-white);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

/* Product content area */
.product-content {
    padding: var(--spacing-md);
    flex: 1;
}

.product-title {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    line-height: 1.3;
}

.product-title a {
    color: var(--color-text);
    text-decoration: none;
}

.product-title a:hover {
    color: var(--color-primary);
}

/* Product options/pricing section */
.product-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    background: var(--gradient-footer-warm);
    border-top: 1px solid var(--color-border-primary-faint);
    padding: var(--spacing-md);
}

/* Option card within product card */
.option-card {
    background: var(--color-surface);
    border-radius: var(--border-radius-md);
    transition: var(--transition-card);
    display: flex;
    flex-direction: column;
}

.option-card:hover {
    background: var(--color-primary-bg-subtle);
}

/* Option icons via CSS background */
.option-card .option-icon {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 0;
    text-indent: -9999px;
}

.option-card.price-option .option-icon {
    background-image: url(/images/icon/label-black.svg);
}

.option-card.offer-option .option-icon {
    background-image: url(/images/icon/hand-cash-black.svg);
}

.option-card.showcase-option .option-icon {
    background-image: url(/images/icon/trophy-black.svg);
}

/* Pricing display */
.price-value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

.price-unit {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Product results grid */
.product-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 380px));
    gap: var(--spacing-md);
    padding: var(--spacing-lg) 0;
    justify-content: center;
}

/* Loading state */
.product-card[ux-loading] {
    opacity: 0.6;
    pointer-events: none;
}

/* ==========================================================================
   ENHANCED PRODUCT CARD - Buyer-Facing Search Results
   Features: bookmark, stats, quick view, refined hover states
   ========================================================================== */

/* Product card with diagonal accent overlay */
.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-diagonal-accent);
    opacity: 0;
    transition: opacity 0.35s var(--ease-elegant);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

.product-card:hover::before {
    opacity: 1;
}

/* Bookmark button - top-right of photo */
.product-bookmark {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 6;
    transition: var(--transition-card);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.product-bookmark:hover {
    transform: scale(1.1);
    background: var(--color-white);
    box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), 0.2);
}

.product-bookmark:active {
    transform: scale(0.95);
}

.product-bookmark .bookmark-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: var(--color-text-muted);
    -webkit-mask-image: url('/images/icon/bookmark-black.svg');
    mask-image: url('/images/icon/bookmark-black.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: var(--transition-card);
}

.product-bookmark:hover .bookmark-icon {
    background-color: var(--color-primary);
}

.product-bookmark.bookmarked .bookmark-icon {
    background-color: var(--color-primary);
    -webkit-mask-image: url('/images/icon/bookmark-solid-black.svg');
    mask-image: url('/images/icon/bookmark-solid-black.svg');
}

.product-bookmark.bookmarked:hover .bookmark-icon {
    background-color: var(--color-error);
}

.product-bookmark {
    font-size: 0;
}

.product-bookmark[event-running] {
    font-size: 0;
    text-iondent: -9999px
}

/* Bookmark animation on save */
@keyframes bookmarkPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.product-bookmark.just-bookmarked {
    animation: bookmarkPop 0.4s var(--ease-elegant);
}

/* Product stats bar - bottom of photo */
.product-stats {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
    color: var(--color-white);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    z-index: 4;
    transform: translateY(100%);
    opacity: 0;
    transition: var(--transition-card);
}

.product-card:hover .product-stats {
    transform: translateY(0);
    opacity: 1;
}

.product-stat {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.product-stat-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    opacity: 0.9;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.view-count .product-stat-icon {
    -webkit-mask-image: url('/images/icon/eye-black.svg');
    mask-image: url('/images/icon/eye-black.svg');
}

.watcher-count .product-stat-icon {
    -webkit-mask-image: url('/images/icon/heart-black.svg');
    mask-image: url('/images/icon/heart-black.svg');
}

.product-stat-value {
    font-variant-numeric: tabular-nums;
}

/* Quick view button - center of photo on hover */
.product-quick-view {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--border-radius-full);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    cursor: pointer;
    z-index: 5;
    opacity: 0;
    transition: var(--transition-card);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.product-quick-view-icon {
    width: 16px;
    height: 16px;
}

.product-card:hover .product-quick-view {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.product-quick-view:hover {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-button-hover);
}

/* Enhanced distance badge */
.distance-badge {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.distance-badge-icon {
    display: inline-block;
    width: 12px;
    height: 12px;
    opacity: 0.8;
    background-color: currentColor;
    -webkit-mask-image: url('/images/icon/pin-black.svg');
    mask-image: url('/images/icon/pin-black.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Product content enhancements */
.product-content {
    position: relative;
    z-index: 2;
}

.product-category-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: var(--color-surface);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    margin-top: var(--spacing-sm);
    transition: var(--transition-card);
}

.product-card:hover .product-category-badge {
    background: var(--color-primary-lighter);
    color: var(--color-primary);
}

/* Enhanced pricing */
.product-options {
    position: relative;
    z-index: 2;
}

.product-price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.price-main {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs);
}

.price-value {
    font-family: var(--font-family-display);
    letter-spacing: -0.02em;
}

.price-compare {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-decoration: line-through;
}

.price-discount {
    display: inline-flex;
    padding: 2px 6px;
    background: var(--color-success-light);
    color: var(--color-success-dark);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    border-radius: var(--border-radius-sm);
}

/* --- Product Header (wraps title + attributes) --- */
.product-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* --- Product Attributes / Sold-As --- */
.product-attributes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.product-attributes .sold-as {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 2px 8px;
    background: var(--color-surface);
    border-radius: var(--border-radius-sm);
    font-weight: var(--font-weight-medium);
}

/* --- Stats sub-items (view count, watcher count) --- */
.product-stat-label {
    opacity: 0.8;
}

/* --- Option Card Inner Structure --- */
.option-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

.option-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.option-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* --- Regular / Compare Price --- */
.price-regular {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.price-regular .regular-label {
    font-weight: var(--font-weight-normal);
}

.price-regular .regular-value {
    text-decoration: line-through;
}

/* --- Bulk Pricing --- */
.price-bulk {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--spacing-xs);
    padding-top: var(--spacing-xs);
    border-top: 1px dashed var(--color-border);
    font-size: var(--font-size-xs);
}

.bulk-offer {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs);
    color: var(--color-text);
}

.bulk-offer .bulk-qty {
    font-weight: var(--font-weight-semibold);
}

.bulk-offer .bulk-price {
    font-weight: var(--font-weight-bold);
    color: var(--color-success-dark);
}

.bulk-savings {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs);
    color: var(--color-success-dark);
    font-weight: var(--font-weight-medium);
}

/* --- Offer Pricing --- */
.offer-asking {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs);
}

.asking-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.asking-value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    font-family: var(--font-family-display);
    letter-spacing: -0.02em;
}

.asking-unit {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* --- Market Value (Showcase) --- */
.market-value {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs);
}

.market-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.market-price {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

/* --- Showcase-only cards (no action button below) --- */
.product-card > .product-options:last-child {
    border-top: none;
    background: none;
    padding-top: 0;
}

/* Price label (Showcase, Asking) */
.product-price-row .price-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-warm-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Showcase badge when no market value (label is the only child in price-main) */
.product-price-row .price-main .price-label:only-child {
    display: inline-flex;
    padding: 3px 10px;
    background: rgba(92, 67, 244, 0.05);
    border: 1px solid rgba(92, 67, 244, 0.1);
    border-radius: var(--border-radius-full);
    color: var(--color-primary-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

/* --- Product Actions --- */
.product-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
    position: relative;
    z-index: 2;
    text-align: center;
}

.product-actions .primary-action {
    flex: 1;
}

.product-actions .primary-action .command {
    width: 100%;
    text-align: center;
}

.product-actions .primary-action .out-of-stock-badge {
    width: 100%;
    text-align: center;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-warm-muted);
    background: var(--color-background-warm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: default;
}

.product-actions .secondary-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.social-watch-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: all 0.2s var(--ease-out);
    color: var(--color-text-muted);
}

.social-watch-toggle:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-lighter);
}

.social-watch-toggle.watching {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.social-watch-toggle .icon {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
}

/* --- Seller Username (within seller-badge) --- */
.seller-badge .seller-username {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Distance Value (within distance-badge) --- */
.distance-badge .distance-value {
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   LISTING CARD - Seller Stock Management
   Features: status system, metrics, actions, visual hierarchy
   ========================================================================== */

.listing-card {
    background: linear-gradient(160deg, var(--color-background) 0%, var(--color-surface) 100%);
    border-radius: var(--border-radius-card);
    border: 1px solid var(--color-border);
    overflow: hidden;
    transition: var(--transition-card);
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    box-shadow: var(--shadow-card);
}

.listing-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-border-primary-subtle);
}

/* Listing card header */
.listing-header {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    position: relative;
    z-index: 1;
}

.listing-header-content {
    display: flex;
    gap: var(--spacing-md);
    flex: 1;
    min-width: 0;
}

/* Listing photo with badge system */
.listing-photo {
    max-height: 110px;
    flex-shrink: 0;
    position: relative;
}

.listing-photo .photo-main {
    width: 100%;
    height: 100%;
    background: var(--color-surface);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.listing-photo .photo-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.listing-photo .photo-placeholder {
    font-size: 24px;
    color: var(--color-text-muted);
}

/* Photo badges */
.listing-photo .photo-badge {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    border: 2px solid var(--color-background);
    z-index: 2;
}

.listing-photo .photo-badge.bestseller {
    bottom: -4px;
    right: -4px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    box-shadow: 0 2px 8px rgba(var(--color-warning-rgb), 0.4);
}

.listing-photo .photo-badge.trending {
    bottom: -4px;
    right: -4px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    box-shadow: var(--shadow-glow-primary-soft);
}

.listing-photo .photo-badge.needs-attention {
    top: -4px;
    right: -4px;
    background: var(--color-warning);
    box-shadow: 0 2px 8px rgba(var(--color-warning-rgb), 0.4);
}

/* Title section */
.listing-title-section {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.listing-title {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text);
}

/* Status badges row */
.listing-status-row {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.listing-mode-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: var(--color-mode-forsale);
    color: var(--color-white);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.01em;
}

.listing-mode-badge.showcase {
    background: var(--gradient-mode-showcase);
}

.listing-mode-badge.offers {
    background: var(--color-mode-offers);
}

.listing-status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 3px 10px;
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.01em;
}

.listing-status-badge.published {
    background: var(--color-success-light);
    color: var(--color-success-dark);
}

.listing-status-badge.draft {
    background: var(--color-warning-light);
    color: var(--color-warning-text);
}

.listing-status-badge.partial {
    background: var(--color-info-light);
    color: var(--color-info-dark);
}

.listing-status-badge .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Context menu trigger */
.listing-context-menu {
    flex-shrink: 0;
}

.listing-context-menu .menu-trigger {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.2s var(--ease-out);
}

.listing-context-menu .menu-trigger:hover {
    background: var(--color-surface);
    color: var(--color-text);
}

/* Metrics section */
.listing-metrics {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    padding: 0 var(--spacing-md) var(--spacing-md);
    border-bottom: 1px solid var(--color-border-primary-faint);
    position: relative;
    z-index: 1;
}

.metric-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-primary-bg-tint);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    color: rgba(30, 25, 55, 0.72);
    transition: var(--transition-card);
}

.metric-chip .metric-icon {
    font-size: 12px;
    opacity: 0.8;
}

.metric-chip .metric-value {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

/* Interactive metric chips */
.metric-chip.interactive {
    cursor: pointer;
    background: var(--color-primary-lighter);
}

.metric-chip.interactive:hover {
    background: var(--color-primary-light);
    transform: translateY(-1px);
}

.metric-chip.interactive .metric-value {
    color: var(--color-primary);
}

/* Highlight states for metrics */
.metric-chip.highlight {
    background: var(--color-primary-light);
    box-shadow: var(--shadow-outline-primary);
}

.metric-chip.highlight .metric-value {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}

.metric-chip.hot {
    background: linear-gradient(135deg, rgba(var(--color-error-rgb), 0.1) 0%, rgba(var(--color-warning-rgb), 0.1) 100%);
    box-shadow: 0 0 0 1px rgba(var(--color-error-rgb), 0.2);
}

.metric-chip.hot .metric-value {
    color: var(--color-error);
}

/* Summary section */
.listing-summary {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    position: relative;
    z-index: 1;
}

.listing-summary-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.listing-summary-item .summary-icon {
    opacity: 0.6;
    font-size: 12px;
}

.listing-summary-item strong {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

/* Listing footer */
.listing-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    position: relative;
    z-index: 1;
}

.listing-footer-info {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.listing-footer-info .timestamp {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.listing-action {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-button);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s var(--ease-out);
}

.listing-action:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    text-decoration: none;
    box-shadow: var(--shadow-button);
}

.listing-action .action-icon {
    font-size: 14px;
}

/* Primary CTA for draft listings */
.listing-action.primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    box-shadow: var(--shadow-button);
}

.listing-action.primary:hover {
    background: var(--color-primary-hover);
    box-shadow: var(--shadow-button-hover);
    transform: translateY(-1px);
}

/* Needs action indicator - gradient border */
.listing-card[data-needs-action="true"] {
    border-color: transparent;
    background:
        linear-gradient(var(--color-background), var(--color-background)) padding-box,
        var(--gradient-border-glow) border-box;
}

.listing-card[data-needs-action="true"]::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: var(--gradient-border-glow);
    border-radius: calc(var(--border-radius-card) + 1px);
    z-index: -1;
    opacity: 0.3;
    filter: blur(8px);
}

/* Stock results grid for listing cards */
.stock-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 420px));
    gap: var(--spacing-lg);
    padding: var(--spacing-sm) 0;
    justify-content: center;
}

/* --- Listing Card: Status Badge Colors ---
   Hide dot for compact card display; color overrides for status states */

.listing-card .status-badge::before {
    /* Hide dot in listing card context */
    display: none;
}

.listing-card .status-badge.status-live {
    background: var(--color-success-light);
    color: var(--color-success-dark);
}

.listing-card .status-badge.status-draft {
    background: var(--color-warning-light);
    color: var(--color-warning-text);
}

.listing-card .status-badge.status-partial {
    background: var(--color-info-light);
    color: var(--color-info-dark);
}

/* --- Listing Card: Global Metric Chip Styles ---
   These are NOT .listing-card-scoped — shared across all metric chip contexts */

/* metric-label (text label alongside metric-value) */
.metric-chip .metric-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Metric type classes — size only (SVG base pattern in Section 55) */
.metric-chip.views .metric-icon,
.metric-chip.watchers .metric-icon,
.metric-chip.sales .metric-icon,
.metric-chip.offers .metric-icon,
.metric-chip.meetups .metric-icon,
.metric-chip.interest .metric-icon {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
}

/* Active state for offer/meetup metrics */
.metric-chip.offers.active,
.metric-chip.meetups.active {
    background: var(--color-primary-lighter);
    box-shadow: var(--shadow-outline-primary);
}

.metric-chip.offers.active .metric-value,
.metric-chip.meetups.active .metric-value {
    color: var(--color-primary);
}

/* Performance tier classes for interest metric */
.metric-chip.interest.low {
    background: var(--color-surface);
}

.metric-chip.interest.medium {
    background: rgba(var(--color-warning-rgb), 0.1);
    box-shadow: 0 0 0 1px rgba(var(--color-warning-rgb), 0.2);
}

.metric-chip.interest.medium .metric-value {
    color: var(--color-warning);
}

.metric-chip.interest.high {
    background: rgba(var(--color-success-rgb), 0.1);
    box-shadow: 0 0 0 1px rgba(var(--color-success-rgb), 0.2);
}

.metric-chip.interest.high .metric-value {
    color: var(--color-success);
}

/* Inventory warning badge (standalone, not in summary row) */
.listing-card .inventory-warning {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px;
    background: var(--color-warning-light);
    color: var(--color-warning-text);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

/* Listing mode badge — TS-generated mode classes
   Uses semantic --color-mode-* variables from vars.css
   Distinct from --color-primary (buttons) to avoid badge/button confusion */
.listing-mode-badge.mode-for-sale {
    background: var(--color-mode-forsale);
}

.listing-mode-badge.mode-for-sale-\+-offers {
    background: var(--gradient-mode-forsale-offers);
}

.listing-mode-badge.mode-showcase-\+-offers {
    background: var(--gradient-mode-showcase-offers);
}

.listing-mode-badge.mode-showcase {
    background: var(--gradient-mode-showcase);
}

.listing-mode-badge.mode-hidden {
    background: var(--color-mode-hidden);
}

/* Low-inventory & out-of-stock photo badges */
.listing-photo .photo-badge.low-inventory {
    top: -4px;
    right: -4px;
    background: var(--color-warning);
    box-shadow: 0 2px 8px rgba(var(--color-warning-rgb), 0.4);
}

.listing-photo .photo-badge.out-of-stock {
    top: -4px;
    right: -4px;
    background: var(--color-error);
    box-shadow: 0 2px 8px rgba(var(--color-error-rgb), 0.4);
}

/* --- Thumbnail Section (Left) --- */
.listing-card .card-header {
    width: 140px;
    flex-shrink: 0;
    padding: 0;
    align-self: flex-start; /* Don't stretch to full height */
}

.listing-card .header-content {
    width: 100%;
    height: 100%;
}

.listing-card .photo-section {
    width: 100%;
    aspect-ratio: 1 / 1; /* Force square aspect ratio */
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, var(--color-surface) 0%, var(--color-surface-darkened, rgba(0,0,0,0.03)) 100%);
}

.listing-card .photo-section .photo-main {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.listing-card .photo-section .photo-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-card-photo);
}

.listing-card:hover .photo-section .photo-main img {
    transform: scale(1.03);
}

/* Photo badges - small dot indicators */
.listing-card .photo-section .photo-badge {
    position: absolute;
    z-index: 2;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--color-background);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.listing-card .photo-section .photo-badge.bestseller {
    bottom: 6px;
    left: 6px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}

.listing-card .photo-section .photo-badge.low-inventory {
    top: 6px;
    right: 6px;
    background: var(--color-warning);
}

.listing-card .photo-section .photo-badge.out-of-stock {
    top: 6px;
    right: 6px;
    background: var(--color-error);
}

/* No photo placeholder — modern gradient background with subtle icon */
.listing-card .no-photo-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(
        145deg,
        rgba(var(--color-primary-rgb), 0.04) 0%,
        rgba(var(--color-primary-rgb), 0.08) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Subtle pattern overlay for visual interest */
.listing-card .no-photo-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle at 50% 50%,
        rgba(var(--color-primary-rgb), 0.03) 1px,
        transparent 1px
    );
    background-size: 12px 12px;
    opacity: 0.6;
}

.listing-card .no-photo-placeholder .photo-icon {
    width: 28px;
    height: 28px;
    opacity: 0.3;
    /* Icon URL set in search.css */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    z-index: 1;
    transition: opacity 0.2s var(--ease-out);
}

.listing-card:hover .no-photo-placeholder .photo-icon {
    opacity: 0.35;
}

/* --- Full-width details row (between header row and footer) --- */
.listing-card .card-details {
    flex: 1 1 100%;
    padding: var(--spacing-md) var(--spacing-sm);
    border-top: 1px solid var(--color-border-primary-faint);
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
}

/* --- Main Content (Right of photo) --- */
.listing-card .card-body {
    flex: 1 1 calc(100% - 140px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 14px 10px 14px;
    min-width: 0;
    gap: 6px;
    position: relative;
    z-index: 1;
    overflow: hidden; /* Ensure content doesn't overflow */
}

.listing-card .title-section {
    padding: 0;
    padding-right: 40px; /* Space for context menu button */
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 100%;
}

.listing-card .product-title {
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
    margin: 0;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

/* Empty/missing title state - show placeholder text */
.listing-card .product-title:empty::before {
    content: 'Untitled Listing';
    color: var(--color-text-muted);
    font-style: italic;
    font-weight: var(--font-weight-normal);
}

/* Status badges row - horizontal layout with consistent spacing */
.listing-card .status-badges-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 2px;
}

/* Override status-badge sizes for compact, clean display */
.listing-card .status-badge {
    padding: 3px 10px;
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    gap: 5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: var(--border-radius-full);
}

/* Listing mode badge - uses semantic --color-mode-* variables
   Softer pill-style for management context — less loud than solid fills */
.listing-card .listing-mode-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--border-radius-full);
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: var(--color-mode-forsale-tint);
    color: var(--color-mode-forsale-tint-text);
}

/* Mode variants — tinted pill style for seller management context */
.listing-card .listing-mode-badge.mode-showcase {
    background: var(--color-mode-showcase-tint);
    color: var(--color-mode-showcase-tint-text);
}

.listing-card .listing-mode-badge.mode-showcase-+-offers {
    background: var(--color-mode-showcase-tint);
    color: var(--color-mode-showcase-tint-text);
}

.listing-card .listing-mode-badge.mode-for-sale {
    background: var(--color-mode-forsale-tint);
    color: var(--color-mode-forsale-tint-text);
}

.listing-card .listing-mode-badge.mode-for-sale-+-offers {
    background: var(--color-mode-forsale-tint);
    color: var(--color-mode-forsale-tint-text);
}

.listing-card .listing-mode-badge.mode-hidden {
    background: var(--color-mode-hidden-tint);
    color: var(--color-mode-hidden-tint-text);
}

/* --- Metrics Row --- Compact inline display */
.listing-card .metrics-section {
    padding: 0;
    border: none;
    background: none;
    margin-top: var(--spacing-xs);
}

.listing-card .metrics-grid {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    align-items: center;
}

.listing-card .metric-chip {
    background: rgba(var(--color-primary-rgb), 0.04);
    border: 1px solid rgba(var(--color-primary-rgb), 0.08);
    padding: 4px 10px;
    border-radius: var(--border-radius-full);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--color-text-warm-muted);
    transition: var(--transition-colors);
}

.listing-card .metric-chip:hover {
    background: rgba(var(--color-primary-rgb), 0.1);
    color: var(--color-text);
}

.listing-card .metric-chip .metric-icon {
    width: 14px;
    height: 14px;
    opacity: 0.55;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Metric icons via CSS background */
.listing-card .metric-chip.views .metric-icon {
    background-image: url(/images/icon/visibility-black.svg);
}
.listing-card .metric-chip.watchers .metric-icon {
    background-image: url(/images/icon/bookmark-black.svg);
}
.listing-card .metric-chip.sales .metric-icon {
    background-image: url(/images/icon/sell-black.svg);
}
.listing-card .metric-chip.offers .metric-icon {
    background-image: url(/images/icon/local-offer-black.svg);
}
.listing-card .metric-chip.meetups .metric-icon {
    background-image: url(/images/icon/handshake-black.svg);
}
.listing-card .metric-chip.interest .metric-icon {
    background-image: url(/images/icon/trending-up-black.svg);
}

.listing-card .metric-chip .metric-value {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
    font-variant-numeric: tabular-nums;
}

/* Active metrics with primary highlight */
.listing-card .metric-chip.active {
    color: var(--color-primary);
}

.listing-card .metric-chip.active .metric-icon {
    opacity: 0.7;
}

.listing-card .metric-chip.active .metric-value {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

/* Interest tier colors */
.listing-card .metric-chip.interest.high .metric-value {
    color: var(--color-success-dark);
}
.listing-card .metric-chip.interest.medium .metric-value {
    color: var(--color-warning-dark);
}

/* --- Summary Row --- Full-width details strip */
.listing-card .summary-section {
    padding: 8px 0 4px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
    border: none;
    gap: var(--spacing-xs);
}

.listing-card .summary-row {
    display: contents;
}

.listing-card .summary-item {
    display: inline-flex;
    align-items: center;
}

.listing-card .summary-item::after {
    content: '·';
    margin: 0 6px;
    color: var(--color-border-primary-subtle);
    font-weight: var(--font-weight-bold);
}

.listing-card .summary-item:last-child::after {
    display: none;
}

.listing-card .summary-item .summary-label {
    color: var(--color-text-warm-muted);
}

/* Price range — slightly bolder to stand out as key info */
.listing-card .summary-item.price-range .summary-label {
    color: var(--color-text-warm);
    font-weight: var(--font-weight-semibold);
}

.listing-card .summary-item.inventory.in-stock .summary-label {
    color: var(--color-success-dark);
}

.listing-card .summary-item.inventory.out-of-stock .summary-label {
    color: var(--color-error);
}

/* Sales and revenue summary items — seller performance data */
.listing-card .summary-item.sales-info .summary-label {
    color: var(--color-text-warm-body);
}

.listing-card .summary-item.revenue-info .summary-label {
    color: var(--color-success-dark);
    font-weight: var(--font-weight-semibold);
}

/* --- Footer (Full width bottom row) --- */
.listing-card .card-footer {
    flex: 1 1 100%;
    padding: 10px 14px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    background: linear-gradient(180deg, var(--color-surface) 0%, rgba(var(--color-primary-rgb), 0.04) 100%);
    border-top: 1px solid var(--color-border);
    position: relative;
    z-index: 1;
}

.listing-card .footer-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-sm);
}

.listing-card .last-updated {
    font-size: 11px;
    color: var(--color-text-muted);
    line-height: 1.4;
    white-space: nowrap;
}

/* Compact relative time display (e.g., "2h ago") */
.listing-card .last-updated .update-time {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm-body);
}

.listing-card .drift-hint {
    display: none;
}

/* Context menu - always visible for seller dashboard usability */
.listing-card .context-menu-trigger {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    z-index: 2;
    /* Always visible - not hover-only - for daily management workflow */
}

.listing-card .context-menu-trigger .menu-button {
    width: 32px;
    height: 32px;
    background: var(--color-background);
    border: 1px solid var(--color-border-medium, var(--color-border));
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.listing-card .context-menu-trigger .menu-button img {
    width: 18px;
    height: 18px;
    opacity: 0.6;
}

.listing-card .context-menu-trigger .menu-button:hover {
    background: var(--color-primary-bg-subtle);
    border-color: var(--color-border-primary-subtle);
    box-shadow: 0 2px 6px rgba(var(--color-primary-rgb), 0.15);
}

.listing-card .context-menu-trigger .menu-button:hover img {
    opacity: 0.85;
}

.listing-card .context-menu-trigger .menu-button .menu-icon {
    width: 16px;
    height: 16px;
    background-image: url(/images/icon/more-vert-black.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.7;
}

.listing-card .context-menu-trigger .menu-button:hover .menu-icon {
    opacity: 0.8;
}

/* Primary action button */
.listing-card .primary-action {
    flex-shrink: 0;
}

.listing-card .primary-action .command {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: 6px 14px;
    border-radius: var(--border-radius-button);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: var(--transition-fast);
    cursor: pointer;
    white-space: nowrap;
}

.listing-card .primary-action .command.btn-primary {
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    box-shadow: var(--shadow-button);
}

.listing-card .primary-action .command.btn-primary:hover {
    background: var(--color-primary-hover);
    box-shadow: var(--shadow-button-hover);
    transform: translateY(-1px);
}

.listing-card .primary-action .command.btn-secondary {
    background: var(--color-background);
    color: var(--color-text-warm);
    border: 1px solid var(--color-border);
    font-weight: var(--font-weight-semibold);
    box-shadow: var(--shadow-xs);
}

.listing-card .primary-action .command.btn-secondary:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    box-shadow: var(--shadow-button);
}

.listing-card .primary-action .action-icon {
    display: none;
}

/* --- Status-based gradient tints (NOT borders - per style guide) --- */
.listing-card.draft {
    background: linear-gradient(160deg,
        rgba(245, 158, 11, 0.03) 0%,
        var(--color-background) 30%,
        var(--color-surface) 100%);
}

.listing-card.live {
    background: linear-gradient(160deg,
        rgba(34, 197, 94, 0.03) 0%,
        var(--color-background) 30%,
        var(--color-surface) 100%);
}

.listing-card.partial {
    background: linear-gradient(160deg,
        rgba(59, 130, 246, 0.03) 0%,
        var(--color-background) 30%,
        var(--color-surface) 100%);
}

/* --- Grid layout --- Fixed 2-column with consistent gaps for alignment */
.stock-results:has(.listing-card) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    justify-content: stretch;
}

/* Single column on narrow screens */
@media (max-width: 800px) {
    .stock-results:has(.listing-card) {
        grid-template-columns: 1fr;
    }
}

/* Responsive - keep horizontal layout on mobile, just adjust sizes */
@media (max-width: 600px) {
    .listing-card .card-header {
        width: 100px;
    }

    .listing-card .card-body {
        flex: 1 1 calc(100% - 100px);
        padding: 8px 10px 6px 10px;
    }

    .listing-card .card-footer {
        padding: 6px 10px;
    }

    .listing-card .title-section {
        padding-right: 36px;
    }

    .listing-card .product-title {
        font-size: 14px;
    }

    .stock-results:has(.listing-card) {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
}

/* --------------------------------------------------------------------------
   SECTION 28: STICKY STATUS BAR WITH COMMANDS
   --------------------------------------------------------------------------
   Full-width sticky header with status info and command buttons.
   Transitions from sticky to fixed on scroll via body.scrolled class.
   Supports branded (gradient) variant, status badge states,
   pending-changes indicators, and command button variants.
   Site-specific overrides in style-listings-sticky.css.
   -------------------------------------------------------------------------- */

/* --- Container --- */
.sticky-status-bar {
    position: sticky;
    top: 0;
    z-index: var(--z-index-sticky);
    background: var(--color-background);
    border-bottom: 1px solid var(--color-border);
    padding: var(--spacing-md) var(--spacing-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xl);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    margin-bottom: var(--spacing-md);
    overflow: hidden;
}

/* --- Branded variant --- gradient background, light text */
.sticky-status-bar-branded {
    background: var(--gradient-primary-brand);
    border-bottom: none;
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    color: var(--color-primary-on-dark);
}

.sticky-status-bar-branded .listing-name .value,
.sticky-status-bar-branded .listing-name .cmdEdit,
.sticky-status-bar-branded .status-note,
.sticky-status-bar-branded .pending-changes-indicator {
    color: var(--color-primary-on-dark);
}

/* --- Left side: Status Info --- */
.sticky-status-bar .status-info-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

/* Listing name row */
.sticky-status-bar .listing-name {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    /* For now lets do column layout and see if that makes more sense so the caption has more room */
    flex-direction: column;
    align-items: flex-start;
}

.sticky-status-bar .listing-name .value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    line-height: var(--line-height-tight);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    letter-spacing: -0.01em;
    min-width: 0;
}

/* Inline edit command */
.sticky-status-bar .listing-name .cmdEdit {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    cursor: pointer;
    padding: 2px var(--spacing-xs);
    border-radius: var(--border-radius-sm);
    flex-shrink: 0;
    transition: var(--transition-colors);
    display:none; /* Hide for now, force context menu usage instead */
}

.sticky-status-bar .listing-name .cmdEdit:hover {
    background: var(--color-primary-hover-bg);
}

.sticky-status-bar-branded .listing-name .cmdEdit:hover {
    background: var(--color-glass);
}

/* Pending changes indicator — hidden by default, shown via state rules in S72 */
.sticky-status-bar .pending-changes-indicator {
    display: none;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    padding: 2px var(--spacing-sm);
    border-radius: var(--border-radius-full);
    background: var(--color-primary-hover-bg);
    flex-shrink: 0;
    white-space: nowrap;
}

.sticky-status-bar .pending-changes-indicator .indicator-icon {
    font-size: var(--font-size-sm);
    line-height: 1;
}

.sticky-status-bar .pending-changes-indicator .indicator-text {
    font-weight: var(--font-weight-medium);
}

.sticky-status-bar-branded .pending-changes-indicator {
    background: var(--color-glass);
    color: var(--color-primary-on-dark);
}

/* Status details row */
.sticky-status-bar .status-details {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: nowrap;
}

/* --- Status Badge ---
   Base styles inherited from Section 11B .status-badge
   Context-specific overrides only below */
.sticky-status-bar .status-badge {
    /* Sticky-bar-specific: prevent shrinking and add transition */
    flex-shrink: 0;
    transition: var(--transition-fast);
    align-self: flex-start;
}

/* Published state — adds glow ring to dot */
.sticky-status-bar[data-published="true"] .status-badge::before {
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
}

/* Draft/unpublished state — adds glow ring to dot */
.sticky-status-bar[data-published="false"] .status-badge::before {
    box-shadow: var(--shadow-focus-ring-sm);
}

/* Legacy explicit variant classes (deprecated - use .status-draft, .status-live, etc. from Section 11B) */
.sticky-status-bar .status-badge-draft {
    background: var(--color-primary-lighter);
    color: var(--color-primary);
}

.sticky-status-bar .status-badge-published {
    background: rgba(34, 197, 94, 0.1);
    color: var(--color-success-dark);
}

.sticky-status-bar .status-badge-partial {
    background: rgba(var(--color-warning-rgb), 0.1);
    color: var(--color-warning-text);
}

.sticky-status-bar .status-badge-error {
    background: rgba(var(--color-error-rgb), 0.1);
    color: var(--color-error);
}

/* Status note + variants */
.sticky-status-bar .status-note {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-style: italic;
    line-height: var(--line-height-tight);
}

.sticky-status-bar .status-note:empty {
    display: none;
}

.sticky-status-bar .status-note.draft-note {
    color: var(--color-primary);
}

.sticky-status-bar .status-note.offline-note {
    color: var(--color-text-muted);
}

.sticky-status-bar .status-note.partial-note {
    color: var(--color-warning-text);
}

/* --- Right side: Command Buttons --- */
.sticky-status-bar .command-buttons-section {
    display: flex;
    align-items: stretch;
    gap: var(--spacing-md);
    flex-shrink: 0;
}

/* Command button base */
.sticky-status-bar .command-button-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius-button, var(--border-radius-md));
    min-width: 120px;
    text-align: center;
    transition: var(--transition-all);
    border: 1px solid transparent;
    position: relative;
    overflow: visible;
}

.sticky-status-bar .command-button-group::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.25s var(--ease-elegant);
    pointer-events: none;
}

.sticky-status-bar .command-button-group:hover {
    transform: translateY(-2px);
}

.sticky-status-bar .command-button-group:hover::before {
    opacity: 1;
}

.sticky-status-bar .command-button-group:active {
    transform: translateY(0);
}

.sticky-status-bar .command-button-group:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.sticky-status-bar .command-button-group .button-text {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-compact);
}

/* ctaAlt variant — hidden by default (Save Draft is auto-save, user chose to hide it) */
.sticky-status-bar .command-button-group.btn-secondary {
    display: none;
    border-color: transparent;
    color: var(--color-text-muted);
    background: transparent;
    min-width: auto;
    padding: var(--spacing-xs) var(--spacing-sm);
    box-shadow: none;
}

.sticky-status-bar .command-button-group.btn-secondary .button-text {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    position: relative;
}

/* Hide the autosave status button for now so it is not confusing and taking up space  
    potentially show it with the following to indicate a draft timestamp exists
    [data-has-pending-changes="true"] .sticky-status-bar .command-button-group.btn-secondary
*/
.sticky-status-bar .command-button-group.btn-secondary {
    display: none;
} 

/* Subtle underline on hover */
.sticky-status-bar .command-button-group.btn-secondary .button-text::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--color-text-muted);
    opacity: 0;
    transition: opacity 0.2s var(--ease-elegant);
}

.sticky-status-bar .command-button-group.btn-secondary:hover {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--color-text);
    transform: none;
}

.sticky-status-bar .command-button-group.btn-secondary:hover .button-text::after {
    opacity: 0.4;
}

/* Disable gradient overlay on ctaAlt */
.sticky-status-bar .command-button-group.btn-secondary::before {
    display: none;
}

/* ctaAlt timestamp: very subtle */
.sticky-status-bar .command-button-group.btn-secondary .timestamp {
    font-size: 10px;
    color: var(--color-text-muted);
    opacity: 0.6;
}

.sticky-status-bar-branded .command-button-group.btn-secondary {
    border-color: var(--color-glass);
    background: var(--color-glass);
    color: var(--color-primary-on-dark);
}

.sticky-status-bar-branded .command-button-group.btn-secondary:hover {
    background: var(--color-glass-normal);
}

/* ctaPrimary variant — THE primary action (Publish/Update), bold and confident */
.sticky-status-bar .command-button-group.btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.3);
    min-width: 160px;
    padding: var(--spacing-sm) var(--spacing-xl, 32px);
}

.sticky-status-bar .command-button-group.btn-primary .button-text {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
}

.sticky-status-bar .command-button-group.btn-primary:hover {
    background: var(--color-primary-hover, rgb(75, 55, 220));
    box-shadow:
        0 8px 24px rgba(var(--color-primary-rgb), 0.35),
        0 0 0 3px rgba(var(--color-primary-rgb), 0.08);
    transform: translateY(-2px);
}

.sticky-status-bar .command-button-group.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(var(--color-primary-rgb), 0.25);
}

.sticky-status-bar-branded .command-button-group.btn-primary {
    background: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-primary);
}

.sticky-status-bar-branded .command-button-group.btn-primary:hover {
    background: var(--color-glass-heavy);
}

/* Published-complete state — all changes are live */
.sticky-status-bar .command-button-group.btn-primary[ux-publish-complete] {
    background: var(--color-success);
    border-color: var(--color-success);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.25);
}

.sticky-status-bar .command-button-group.btn-primary[ux-publish-complete]:hover {
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.3);
}

/* Subdued "Up to Date" state — no pending changes, nothing to publish */
.sticky-status-bar .command-button-group.btn-primary[ux-publish-complete]:not([data-has-pending-changes="true"]) {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-muted);
    box-shadow: none;
    opacity: 1;
    cursor: default;
}

.sticky-status-bar .command-button-group.btn-primary[ux-publish-complete]:not([data-has-pending-changes="true"]):hover {
    transform: none;
    box-shadow: none;
    background: var(--color-surface);
}

.sticky-status-bar .command-button-group.btn-primary[ux-publish-complete]:not([data-has-pending-changes="true"]) .button-text {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
}

/* Timestamp in subdued state shows as green confirmation */
.sticky-status-bar .command-button-group.btn-primary[ux-publish-complete]:not([data-has-pending-changes="true"]) .timestamp {
    color: var(--color-success);
    opacity: 1;
    font-weight: var(--font-weight-medium);
}

/* Error state */
.sticky-status-bar .command-button-group.btn-primary[ux-tooltip*="error"],
.sticky-status-bar .command-button-group.btn-primary[ux-tooltip*="Error"] {
    background: var(--color-error);
    border-color: var(--color-error);
    box-shadow: 0 2px 8px rgba(var(--color-error-rgb), 0.25);
}

/* --- Timestamps --- */
.sticky-status-bar .command-button-group .timestamp {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-compact);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    white-space: nowrap;
    opacity: 0.75;
}

/* Draft timestamp — inside secondary (ctaAlt) button */
.sticky-status-bar .command-button-group .timestamp.draft-time {
    color: var(--color-text-light);
}

.sticky-status-bar-branded .command-button-group .timestamp.draft-time {
    color: var(--color-glass-heavy);
}

/* Published timestamp — inside ctaAlt (not inside the primary button) */
.sticky-status-bar .command-button-group.btn-secondary .timestamp.published-time {
    color: var(--color-success);
}

/* Timestamps INSIDE primary button — white since bg is colored */
.sticky-status-bar .command-button-group.btn-primary .timestamp {
    color: rgba(255, 255, 255, 0.75);
    font-size: 10px;
}

.sticky-status-bar-branded .command-button-group .timestamp.published-time {
    color: var(--color-glass-heavy);
}

/* Hide timestamps when empty */
.sticky-status-bar .timestamp .time-value:empty,
.sticky-status-bar .timestamp .time-value[data-ticks=""],
.sticky-status-bar .timestamp .time-value[data-ticks="0"] {
    display: none;
}

.sticky-status-bar .timestamp:has(.time-value:empty),
.sticky-status-bar .timestamp:has(.time-value[data-ticks=""]),
.sticky-status-bar .timestamp:has(.time-value[data-ticks="0"]) {
    display: none;
}

/* --- Changes Badge --- count indicator on command buttons (hidden by default, shown via S72) */
.sticky-status-bar .changes-badge {
    display: none;
    align-items: center;
    gap: 2px;
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--color-secondary);
    color: var(--color-text);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    padding: 1px var(--spacing-xs);
    border-radius: var(--border-radius-full);
    line-height: var(--line-height-compact);
    min-width: 20px;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

.sticky-status-bar .changes-badge .badge-icon {
    font-size: 10px;
    line-height: 1;
}

.sticky-status-bar .changes-badge .badge-count {
    font-size: 11px;
    font-weight: var(--font-weight-bold);
}

/* --- Thread Context Variant ---
   Used for Activity/Thread Detail pages.
   Light surface background to match listing-detail pattern.
   Standard dot+pill badges with proper state colors. */

.sticky-status-bar.thread-context {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: var(--spacing-md) var(--spacing-lg);
}

.sticky-status-bar.thread-context .status-info-section {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.sticky-status-bar.thread-context .thread-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text);
    margin: 0;
}

.sticky-status-bar.thread-context .status-badges-row {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    align-items: center;
}

/* Standard badges on light background - inherit from base .status-badge
   State colors come from the standard .status-badge variants */

/* Confirmation link in thread header — simple underlined link, hidden when sticky */
.thread-confirmation-link {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.thread-confirmation-link:hover {
    color: var(--color-primary);
}
/* Hide confirmation link when scrolled down */
body.scrolled .thread-confirmation-link {
    display: none;
}

/* Command buttons in thread context */
.sticky-status-bar.thread-context .command-buttons-section {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.sticky-status-bar.thread-context .command-button-group.btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.sticky-status-bar.thread-context .command-button-group.btn-primary:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.sticky-status-bar.thread-context .command-button-group.btn-ghost {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-primary);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-fast);
}

.sticky-status-bar.thread-context .command-button-group.btn-ghost:hover {
    background: var(--color-border-primary-faint);
    border-color: var(--color-border-primary-subtle);
}

/* Responsive: thread context */
@media (max-width: 768px) {
    .sticky-status-bar.thread-context {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .sticky-status-bar.thread-context .status-info-section {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }

    .sticky-status-bar.thread-context .thread-title {
        font-size: var(--font-size-base);
    }

    .sticky-status-bar.thread-context .status-badges-row {
        gap: var(--spacing-xs);
    }

    .sticky-status-bar.thread-context .command-buttons-section {
        width: 100%;
        flex-wrap: wrap;
    }
}

/* --- Scroll states ---
   Applied by ScrollManager via body class toggles.
   body.scrolled = user has scrolled past threshold (header becomes fixed)
   body.scrolledBack = user scrolling back up (header reveals) */

#Body.scrolled .sticky-status-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-index-fixed);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-fixed);
    border-bottom: 1px solid var(--color-border);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: 0;
    animation: slideDownFixed 0.3s var(--ease-out);
}

#Body.scrolledBack .sticky-status-bar {
    transform: translateY(0);
    transition: transform 0.3s var(--ease-out);
}

/* Compact mode when scrolled: hide edit command and status details */
#Body.scrolled .sticky-status-bar .cmdEdit,
#Body.scrolled .sticky-status-bar .status-details,
#Body.scrolled .sticky-status-bar .pending-changes-indicator {
    display: none;
}

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

/* --- Responsive --- */
@media (max-width: 768px) {
    .sticky-status-bar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
    }

    .sticky-status-bar .status-info-section {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    /* Keep photo layout on mobile - don't center when photo present */
    .sticky-status-bar .status-info-section:has(.sticky-family-photo) {
        flex-direction: row;
        align-items: center;
    }

    .sticky-status-bar .status-info-section:has(.sticky-family-photo) .listing-name,
    .sticky-status-bar .status-info-section:has(.sticky-family-photo) .status-details {
        justify-content: flex-start;
        text-align: left;
    }

    /* Center text when no photo */
    .sticky-status-bar .status-info-section:not(:has(.sticky-family-photo)) .listing-name {
        justify-content: center;
        text-align: center;
        max-width: 100%;
        width: 100%;
        overflow: hidden;
    }

    .sticky-status-bar .status-info-section:not(:has(.sticky-family-photo)) .status-details {
        justify-content: center;
        text-align: center;
        max-width: 100%;
        width: 100%;
        overflow: hidden;
    }

    .sticky-status-bar .command-buttons-section {
        width: 100%;
        justify-content: center;
    }

    .sticky-status-bar .command-button-group {
        flex: 1;
        min-width: auto;
    }
}

@media (max-width: 480px) {
    .sticky-status-bar {
        padding: var(--spacing-sm);
        gap: var(--spacing-sm);
    }

    .sticky-status-bar .listing-name .value {
        font-size: var(--font-size-lg);
    }

    .sticky-status-bar .command-button-group {
        padding: var(--spacing-sm);
    }

    .sticky-status-bar .command-button-group .button-text {
        font-size: var(--font-size-base);
    }

    .sticky-status-bar .status-badge {
        font-size: var(--font-size-xs);
        padding: 2px var(--spacing-xs);
    }

    .sticky-status-bar .pending-changes-indicator .indicator-text {
        display: none;
    }
}

/* --- Accessibility --- */
@media (prefers-contrast: high) {
    .sticky-status-bar .command-button-group {
        border-width: 2px;
    }

    .sticky-status-bar .status-badge {
        border: 2px solid var(--color-text);
    }

    #Body.scrolled .sticky-status-bar {
        background: var(--color-background);
        border-bottom: 3px solid var(--color-text);
        backdrop-filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sticky-status-bar .command-button-group {
        transition: none;
    }

    .sticky-status-bar .command-button-group:hover {
        transform: none;
    }

    #Body.scrolled .sticky-status-bar {
        animation: none;
    }
}

/* --- 28.1 STICKY HEADER PHOTO --- */
.sticky-status-bar .sticky-family-photo {
    flex-shrink: 0;
    width: 55px;
    height: 55px;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.sticky-status-bar .sticky-family-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Text content wrapper - contains listing-name and status-details */
.sticky-status-bar .status-text-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* Adjust status-info-section when photo present */
.sticky-status-bar .status-info-section:has(.sticky-family-photo) {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-md);
}

/* Hide photo when scrolled (compact mode) */
#Body.scrolled .sticky-status-bar .sticky-family-photo {
    display: none;
}

/* Mobile: smaller photo */
@media (max-width: 768px) {
    .sticky-status-bar .sticky-family-photo {
        width: 55px;
        height: 55px;
    }
}

/* --- 28.2 SPLIT BUTTON GROUP --- */
/* Connected menu trigger + primary action as single unified control */

.split-button-group {
    display: inline-flex;
    align-items: stretch;
    border-radius: var(--border-radius-button, var(--border-radius-md));
    overflow: visible;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    position: relative;
}

/* Reset shared styles within split group */
.split-button-group > .command {
    border-radius: 0;
    margin: 0;
    border: none;
}

/* Menu trigger (left side) */
.split-button-group .split-menu-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    padding: 0;
    background: var(--color-primary);
    cursor: pointer;
    transition: background 0.15s var(--ease-elegant);
    border-radius: var(--border-radius-button, var(--border-radius-md)) 0 0 var(--border-radius-button, var(--border-radius-md));
    position: relative;
}

.split-button-group .split-menu-trigger:hover {
    background: var(--color-primary-dark);
}

.split-button-group .split-menu-trigger:active {
    background: color-mix(in srgb, var(--color-primary-dark) 90%, black);
}

/* Menu icon - vertical dots via SVG background */
.split-button-group .split-menu-icon {
    width: 20px;
    height: 20px;
    background-image: url('/images/icon/more-vert-white.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.15s var(--ease-elegant);
}

.split-button-group .split-menu-trigger:hover .split-menu-icon {
    transform: scale(1.1);
}

/* Divider line between menu and primary */
.split-button-group .split-menu-trigger::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: rgba(255, 255, 255, 0.25);
    pointer-events: none;
}

/* Primary action (right side) */
.split-button-group .split-primary-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--color-primary);
    color: var(--color-white);
    cursor: pointer;
    min-width: 120px;
    transition: background 0.15s var(--ease-elegant);
    border-radius: 0 var(--border-radius-button, var(--border-radius-md)) var(--border-radius-button, var(--border-radius-md)) 0;
    position: relative;
}

.split-button-group .split-primary-action:hover {
    background: var(--color-primary-dark);
}

.split-button-group .split-primary-action:active {
    background: color-mix(in srgb, var(--color-primary-dark) 90%, black);
}

.split-button-group .split-primary-action .button-text {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    white-space: nowrap;
}

.split-button-group .split-primary-action .timestamp {
    font-size: var(--font-size-xs);
    opacity: 0.8;
    margin-top: 2px;
}

/* Changes badge on split button */
.split-button-group .changes-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--color-warning, #f59e0b);
    color: var(--color-white);
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    display: none;
}

/* Show badge when there are pending changes */
[data-has-pending-changes="true"] .split-button-group .changes-badge {
    display: block;
}

/* Published/complete state - success color */
.split-button-group[data-state="published"] .split-menu-trigger,
.split-button-group[data-state="published"] .split-primary-action {
    background: var(--color-success, #22c55e);
}

.split-button-group[data-state="published"] .split-menu-trigger:hover,
.split-button-group[data-state="published"] .split-primary-action:hover {
    background: var(--color-success-dark, #16a34a);
}

/* Focus states */
.split-button-group .split-menu-trigger:focus-visible,
.split-button-group .split-primary-action:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: -3px;
    z-index: 1;
}

/* Responsive: split button */
@media (max-width: 768px) {
    .split-button-group {
        flex: 1;
    }

    .split-button-group .split-primary-action {
        flex: 1;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    .split-button-group .split-menu-trigger {
        width: 44px;
        min-width: 44px;
    }

    .split-button-group .split-primary-action {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .split-button-group .split-primary-action .button-text {
        font-size: var(--font-size-sm);
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .split-button-group .split-menu-trigger::after {
        background: var(--color-white);
        width: 2px;
    }

    .split-button-group {
        border: 2px solid var(--color-primary);
    }
}

/* --------------------------------------------------------------------------
   SECTION 29: ACCESSIBILITY PATTERNS
   --------------------------------------------------------------------------
   Responsive breakpoints, reduced motion, high contrast, dark mode,
   focus states, and screen reader support.
   -------------------------------------------------------------------------- */

/* --- 29.1 REDUCED MOTION --- */
/* Global reduced motion - disable all transitions/animations */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Disable hover transforms */
    .card-lift:hover,
    .product-card:hover,
    .command:hover {
        transform: none;
    }

    /* Disable spinners */
    .spinner {
        animation: none;
        border: 2px solid var(--color-primary);
        border-radius: var(--border-radius-sm);
    }

    /* Disable modal animations */
    .modal,
    .dialog-overlay {
        animation: none;
    }

    /* Disable sticky bar slide animation */
    #Body.scrolled .sticky-status-bar {
        animation: none;
    }
}

/* --- 29.2 HIGH CONTRAST MODE --- */
@media (prefers-contrast: high) {
    /* Solid borders instead of subtle ones */
    .card,
    .product-card,
    .option-card,
    .chip,
    .badge {
        border: 2px solid currentColor;
        box-shadow: none;
    }

    /* Solid backgrounds instead of transparent */
    .command.btn-ghost {
        border: 1px solid currentColor;
    }

    /* Remove gradients */
    .command.btn-gradient {
        background: var(--color-primary);
    }

    .card-reveal-gradient::before {
        display: none;
    }

    /* Enhanced focus rings */
    .command:focus,
    .chip:focus,
    [tabindex]:focus {
        outline: 3px solid currentColor;
        outline-offset: 2px;
    }

    /* Remove box shadows */
    .sticky-status-bar,
    .seller-badge,
    #Tooltip {
        box-shadow: none;
        border: 2px solid currentColor;
    }

    /* Ensure text contrast */
    .badge {
        background: var(--color-text);
        color: var(--color-background);
    }

    /* Use underlines instead of color for links */
    .link-arrow,
    .card-link {
        text-decoration: underline;
    }
}

/* --- 29.3 DARK MODE --- */
/* Dark mode styles moved to component-library-dark.css
   Import that file after this one to enable dark mode.
   See: ../css/component-library-dark.css */

/* --- 29.4 FOCUS STATES --- */
/* Keyboard focus only (not mouse) */
.command:focus-visible,
.chip:focus-visible,
.card:focus-visible,
[tabindex="0"]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Remove outline for mouse users */
.command:focus:not(:focus-visible),
.chip:focus:not(:focus-visible),
.card:focus:not(:focus-visible) {
    outline: none;
}

/* Enhanced focus ring class */
.focus-ring:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: var(--shadow-focus-ring-lg);
}

/* Skip link for keyboard users */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-primary);
    color: var(--color-background);
    z-index: 9999;
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
}

.skip-link:focus {
    top: 0;
}

/* --- 29.5 SCREEN READER SUPPORT --- */
/* Visually hidden but accessible to screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Allow element to be focusable when focused */
.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    padding: var(--spacing-sm);
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* --- 29.6 RESPONSIVE PATTERNS --- */
/* Mobile-first responsive grid */
@media (max-width: 768px) {
    /* Stack grids to single column */
    .card-grid,
    .product-results {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    /* Full-width buttons on mobile */
    .command.btn-primary,
    .command.btn-secondary {
        width: auto;
        flex-basis: 100%;
        flex: 1;
        flex-shrink: 0;
        max-width: 320px;
    }

    /* Stack sticky status bar vertically */
    .sticky-status-bar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-md);
        row-gap: var(--spacing-xs);
        padding: var(--spacing-md);
        max-width: 100%;
        overflow: hidden;
    }

    .sticky-status-bar .listing-name {
        max-width: 100%;
        width: 100%;
        overflow: hidden;
        justify-content: center;
    }

    .sticky-status-bar .command-buttons-section {
        justify-content: stretch;
    }

    .sticky-status-bar .command-button-group {
        flex: 1;
    }
}

@media (max-width: 480px) {
    .sticky-status-bar .listing-name {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Smaller text on very small screens */
    .sticky-status-bar .listing-name .value {
        font-size: var(--font-size-md); 
        padding-bottom:var(--spacing-xs);
    }

    /* Stack chips */
    .chip-group {
        flex-wrap: wrap;
    }

    /* Full-width option cards */
    .option-card {
        width: 100%;
    }
}

/* --- 29.7 PRINT STYLES --- */
@media print {
    *,
    *::before,
    *::after {
        background: transparent !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    /* Show link URLs */
    a[href]::after {
        content: " (" attr(href) ")";
    }

    /* Hide interactive elements */
    .command,
    .modal,
    .tooltip,
    .sticky-status-bar,
    .bottom-nav {
        display: none !important;
    }

    /* Prevent page breaks inside cards */
    .card,
    .product-card {
        break-inside: avoid;
    }

    /* Expand collapsed content */
    [ux-expanded="false"] {
        display: block !important;
        max-height: none !important;
    }
}

/* --------------------------------------------------------------------------
   SECTION 30: TESTIMONIAL CARDS
   --------------------------------------------------------------------------
   Glassmorphism cards with quote decoration for testimonials/reviews
   Unified with lift + glow hover system
   -------------------------------------------------------------------------- */

/* Testimonial cards grid */
.testimonial-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
    gap: var(--spacing-lg);
    justify-content: center;
}

/* Single testimonial - full width, centered */
.testimonial-cards-single {
    display: block;
    max-width: 700px;
    margin: 0 auto;
}

.testimonial-cards-single .testimonial-card {
    width: 100%;
}

/* Testimonial card with glass effect */
.testimonial-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--border-radius-card);
    padding: var(--spacing-xl);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: var(--transition-lift);
    position: relative;
    overflow: hidden;
}

/* Decorative quote mark */
.testimonial-card::before {
    content: '"';
    position: absolute;
    top: var(--spacing-md);
    left: var(--spacing-lg);
    font-size: 6rem;
    font-family: var(--font-family-display), Georgia, serif;
    font-weight: var(--font-weight-extrabold);
    color: rgba(var(--color-primary-rgb), 0.15);
    line-height: 1;
    pointer-events: none;
    transition: color 0.4s var(--ease-elegant);
}

/* Diagonal accent overlay */
.testimonial-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.05) 0%, rgba(var(--color-secondary-rgb), 0.03) 100%);
    opacity: 0;
    transition: opacity 0.4s var(--ease-elegant);
    pointer-events: none;
}

.testimonial-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover), var(--shadow-glow-primary-soft);
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--color-primary-border-medium);
}

.testimonial-card:hover::before {
    color: rgba(var(--color-primary-rgb), 0.25);
}

.testimonial-card:hover::after {
    opacity: 1;
}

.testimonial-quote {
    font-size: var(--font-size-lg);
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: var(--spacing-lg);
    font-style: italic;
    position: relative;
    z-index: 1;
}

.testimonial-author {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.8);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    letter-spacing: 0.02em;
}

.testimonial-role {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-secondary);
    margin-top: var(--spacing-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Light background variant */
.testimonial-card.testimonial-light {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    backdrop-filter: none;
}

.testimonial-card.testimonial-light::before {
    color: rgba(var(--color-primary-rgb), 0.1);
}

.testimonial-card.testimonial-light:hover {
    background: var(--color-background);
    border-color: var(--color-primary-border-soft);
}

.testimonial-card.testimonial-light:hover::before {
    color: rgba(var(--color-primary-rgb), 0.2);
}

.testimonial-card.testimonial-light .testimonial-quote {
    color: var(--color-text);
}

.testimonial-card.testimonial-light .testimonial-author {
    color: var(--color-text);
}

.testimonial-card.testimonial-light .testimonial-role {
    color: var(--color-primary);
}

/* Testimonial grid */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
    gap: var(--spacing-lg);
    justify-content: center;
}

/* Testimonials section wrapper - dark background for glass effect */
.testimonials-section {
    padding: 5rem var(--spacing-lg);
    background: linear-gradient(135deg, #2c3e50 0%, #1a1a2e 50%, #16213e 100%);
    color: var(--color-background);
}

.testimonials-section .section-title {
    color: var(--color-background);
}

/* --------------------------------------------------------------------------
   SECTION 31: WORKFLOW STEPS
   --------------------------------------------------------------------------
   Numbered steps for processes, tutorials, how-to guides
   Unified with signature glow and transitions
   -------------------------------------------------------------------------- */

/* Steps container */
.workflow-steps {
    max-width: 800px;
    margin: 0 auto;
}

/* Individual step */
.workflow-step {
    display: flex;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    align-items: flex-start;
    opacity: 1;
    transition: opacity 0.3s var(--ease-elegant);
}

.workflow-step:last-child {
    margin-bottom: 0;
}

/* Step number circle - signature element with glow */
.workflow-step-number {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    background: var(--gradient-primary);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    box-shadow: var(--shadow-button), var(--shadow-glow-primary-soft);
    transition: var(--transition-lift);
    position: relative;
}

/* Subtle ring on hover */
.workflow-step:hover .workflow-step-number {
    transform: scale(1.08);
    box-shadow: var(--shadow-button-hover), var(--shadow-glow-primary);
}

/* Step content */
.workflow-step-content {
    flex-grow: 1;
    min-width: 0;
    padding-top: var(--spacing-sm);
    gap: var(--spacing-sm);
    display: flex;
    flex-direction: column;
}

.workflow-step-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-xs);
    color: var(--color-text);
    transition: color 0.2s var(--ease-out);
}

.workflow-step:hover .workflow-step-title {
    color: var(--color-primary);
}

.workflow-step-description {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    line-height: 1.7;
    margin: 0;
    overflow-wrap: break-word;
}

/* Step meta info (time, duration, etc.) */
.workflow-step-meta {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-xs);
}

/* Step details list */
.workflow-step-details {
    margin-top: var(--spacing-md);
    padding-left: var(--spacing-lg);
}

.workflow-step-details li {
    margin-bottom: var(--spacing-xs);
    color: var(--color-text-muted);
    list-style:disc;
}

/* Connected steps (with gradient line) */
.workflow-steps.workflow-connected .workflow-step {
    position: relative;
}

.workflow-steps.workflow-connected .workflow-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 25px;
    top: 60px;
    width: 2px;
    height: calc(100% - 12px);
    background: linear-gradient(180deg, var(--color-primary-muted) 0%, var(--color-border) 100%);
    border-radius: 1px;
}

/* Horizontal workflow for desktop */
.workflow-steps.workflow-horizontal {
    display: flex;
    max-width: none;
    gap: var(--spacing-xl);
}

.workflow-steps.workflow-horizontal .workflow-step {
    flex-direction: column;
    text-align: center;
    margin-bottom: 0;
    flex: 1;
    position: relative;
}

.workflow-steps.workflow-horizontal .workflow-step-number {
    margin: 0 auto var(--spacing-md) auto;
}

.workflow-steps.workflow-horizontal .workflow-step-content {
    padding-top: 0;
}

/* Horizontal connector line */
.workflow-steps.workflow-horizontal .workflow-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 26px;
    left: calc(50% + 30px);
    width: calc(100% - 60px);
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary-muted) 0%, var(--color-border) 100%);
}

/* Pending/Inactive step state */
.workflow-step.workflow-step-pending .workflow-step-number {
    background: var(--color-surface);
    color: var(--color-text-muted);
    box-shadow: inset 0 0 0 2px var(--color-border);
}

.workflow-step.workflow-step-pending .workflow-step-title {
    color: var(--color-text-muted);
}

.workflow-step.workflow-step-pending .workflow-step-description {
    color: var(--color-text-light);
}

.workflow-step.workflow-step-pending:hover .workflow-step-number {
    transform: none;
    box-shadow: inset 0 0 0 2px var(--color-border);
}

.workflow-step.workflow-step-pending:hover .workflow-step-title {
    color: var(--color-text-muted);
}

/* Complete step state (checkmark) */
.workflow-step.workflow-step-complete .workflow-step-number {
    background: var(--color-success);
    box-shadow: var(--shadow-button), 0 0 12px rgba(16, 185, 129, 0.25);
}

/* Current step state (active, being worked on) */
.workflow-step.workflow-step-current .workflow-step-number {
    background: var(--gradient-primary);
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: var(--shadow-button), var(--shadow-glow-primary-soft); }
    50% { box-shadow: var(--shadow-button), var(--shadow-glow-primary); }
}

/* Ready step state - requirements met, ready to proceed (not completed) */
.workflow-step.workflow-step-ready .workflow-step-number {
    background: var(--color-background);
    border: 3px solid var(--color-success);
    color: var(--color-success);
    box-shadow: var(--shadow-button), 0 0 8px rgba(16, 185, 129, 0.2);
}

.workflow-step.workflow-step-ready .workflow-step-title {
    color: var(--color-success-dark);
}

/* Connected line for pending steps */
.workflow-steps.workflow-connected .workflow-step.workflow-step-pending:not(:last-child)::after {
    background: var(--color-border);
}

/* Small variant */
.workflow-step.workflow-step-sm .workflow-step-number {
    width: 40px;
    height: 40px;
    font-size: var(--font-size-base);
}

.workflow-step.workflow-step-sm .workflow-step-title {
    font-size: var(--font-size-base);
}

.workflow-step.workflow-step-sm .workflow-step-description {
    font-size: var(--font-size-sm);
}

/* --------------------------------------------------------------------------
   SECTION 32: FAQ ACCORDION
   --------------------------------------------------------------------------
   Expandable question/answer component
   Unified with lift effect and accent borders
   -------------------------------------------------------------------------- */

/* FAQ container */
.faq-section {
    max-width: 800px;
    margin: 0 auto;
}

/* FAQ item */
.faq-item {
    background: var(--color-background);
    border-radius: var(--border-radius-card);
    margin-bottom: var(--spacing-md);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border);
    overflow: hidden;
    transition: var(--transition-lift);
}

.faq-item:hover {
    border-color: var(--color-border-primary-subtle);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.faq-item.open {
    border-color: var(--color-primary-muted);
    box-shadow: var(--shadow-card-hover), var(--shadow-glow-primary-soft);
}

.faq-item:last-child {
    margin-bottom: 0;
}

/* Question button */
.faq-question {
    width: 100%;
    padding: var(--spacing-lg);
    background: none;
    border: none;
    text-align: left;
    font-family: var(--font-family-display);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    transition: var(--transition-colors);
}

.faq-question:hover {
    background: var(--gradient-diagonal-accent);
}

.faq-item.open .faq-question {
    color: var(--color-primary);
}

/* Toggle icon - refined */
.faq-question::after {
    content: "";
    width: 28px;
    height: 28px;
    display: block;
    background: var(--color-primary-lighter) url(/images/icon/plus-primary.svg) center / 14px 14px no-repeat;
    border-radius: 50%;
    transition: background 0.2s var(--ease-out);
    flex-shrink: 0;
}

.faq-question:hover::after {
    background-color: var(--color-primary-light);
}

.faq-item.open .faq-question::after {
    background: var(--color-primary) url(/images/icon/close-white.svg) center / 14px 14px no-repeat;
}

/* Answer content */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 var(--spacing-lg);
    transition: max-height 0.4s var(--ease-elegant), padding 0.3s var(--ease-elegant);
}

.faq-item.open .faq-answer {
    max-height: 600px;
    padding: var(--spacing-lg) var(--spacing-lg);
}


.faq-answer-content {
    color: var(--color-text-muted);
    line-height: 1.7;
    font-size: var(--font-size-base);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border);
}

.faq-answer-content p {
    margin: 0 0 var(--spacing-sm) 0;
}

.faq-answer-content p:last-child {
    margin-bottom: 0;
}

/* Bordered variant - with gradient tint */
.faq-item.faq-bordered {
    background: var(--gradient-surface-primary);
}

.faq-item.faq-bordered.open {
    background: var(--gradient-surface-secondary);
}

/* --------------------------------------------------------------------------
   SECTION 32B: EXPAND TOGGLE
   --------------------------------------------------------------------------
   Generic expand/collapse trigger button for any expandable section.
   Works with [ux-expanded] attribute on parent container.

   Structure:
     <div class="expandable-section" ux-expanded="false">
       <div class="section-content">...</div>
       <button class="expand-toggle">
         <span class="toggle-text-collapsed">Show more</span>
         <span class="toggle-text-expanded">Show less</span>
         <span class="toggle-icon">▼</span>
       </button>
     </div>

   Variants:
     .expand-toggle-primary   - Primary/violet themed
     .expand-toggle-muted     - Subtle gray themed
     .expand-toggle-border    - With top border separator
   -------------------------------------------------------------------------- */

/* Base expand toggle */
.expand-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    width: 100%;
    padding: var(--spacing-sm);
    background: var(--color-surface-darkened);
    border: none;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition-fast);
}

.expand-toggle:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
}

/* Primary variant (violet themed) */
.expand-toggle.expand-toggle-primary {
    background: var(--color-primary-lighter);
    color: var(--color-primary);
}

.expand-toggle.expand-toggle-primary:hover {
    background: var(--color-primary-light);
}

/* With border separator */
.expand-toggle.expand-toggle-border {
    border-top: 1px solid var(--color-border-light);
}

.expand-toggle.expand-toggle-primary.expand-toggle-border {
    border-top-color: var(--color-primary-lighter);
}

/* Toggle icon rotation */
.expand-toggle .toggle-icon {
    transition: transform 0.3s var(--ease-elegant);
    font-size: 0.75em;
}

/* Collapsed state: show collapsed text, hide expanded text */
.expand-toggle .toggle-text-expanded {
    display: none;
}

.expand-toggle .toggle-text-collapsed {
    display: inline;
}

/* Expanded state via [ux-expanded] on parent */
[ux-expanded] .expand-toggle {
    background: rgba(var(--color-primary-rgb), 0.08);
}

[ux-expanded] .expand-toggle.expand-toggle-primary {
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.1) 0%, rgba(var(--color-primary-rgb), 0.05) 100%);
}

[ux-expanded] .expand-toggle .toggle-icon {
    transform: rotate(180deg);
}

[ux-expanded] .expand-toggle .toggle-text-collapsed {
    display: none;
}

[ux-expanded] .expand-toggle .toggle-text-expanded {
    display: inline;
}

/* Expandable content (hidden by default) */
.expandable-content {
    display: none;
}

[ux-expanded] .expandable-content {
    display: block;
}

/* --------------------------------------------------------------------------
   SECTION 33: STATS DISPLAY
   --------------------------------------------------------------------------
   Large number displays for metrics, statistics, impact numbers
   Unified with signature typography and glow effects
   -------------------------------------------------------------------------- */

/* Stats container */
.stats-highlight {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xxl);
    flex-wrap: wrap;
}

/* Individual stat */
.stat-item {
    text-align: center;
    padding: var(--spacing-lg);
    position: relative;
}

/* Large number - signature typography */
.stat-number {
    display: block;
    font-family: var(--font-family-display);
    font-size: clamp(2.75rem, 6vw, 4rem);
    font-weight: var(--font-weight-extrabold);
    line-height: 1;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text);
    letter-spacing: -0.03em;
    transition: transform 0.3s var(--ease-elegant);
}

.stat-item:hover .stat-number {
    transform: scale(1.05);
}

/* Label below */
.stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.02em;
}

/* Color variants with glow */
.stat-item.stat-primary .stat-number {
    color: var(--color-primary);
    text-shadow: 0 0 40px rgba(var(--color-primary-rgb), 0.3);
}

.stat-item.stat-success .stat-number {
    color: var(--color-success);
    text-shadow: 0 0 40px rgba(var(--color-success-rgb), 0.3);
}

.stat-item.stat-warning .stat-number {
    color: var(--color-warning);
    text-shadow: 0 0 40px rgba(var(--color-warning-rgb), 0.3);
}

.stat-item.stat-error .stat-number {
    color: var(--color-error);
    text-shadow: 0 0 40px rgba(var(--color-error-rgb), 0.3);
}

/* Card variant - unified hover */
.stat-card {
    background: var(--color-background);
    border-radius: var(--border-radius-card);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border);
    text-align: center;
    transition: var(--transition-lift);
    position: relative;
    overflow: hidden;
}

/* Diagonal accent */
.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-diagonal-accent);
    opacity: 0;
    transition: opacity 0.4s var(--ease-elegant);
}

.stat-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover), var(--shadow-glow-primary-soft);
    border-color: var(--color-border-primary-subtle);
}

.stat-card:hover::before {
    opacity: 1;
}

.stat-card .stat-number {
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    position: relative;
    z-index: 1;
}

.stat-card .stat-label {
    position: relative;
    z-index: 1;
}

/* Stats grid layout */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 280px));
    gap: var(--spacing-lg);
    justify-content: center;
}

/* --------------------------------------------------------------------------
   SECTION 34: CALLOUT BOXES
   --------------------------------------------------------------------------
   Highlighted content blocks for observations, quotes, important info
   Unified with diagonal accent and refined borders
   -------------------------------------------------------------------------- */

/* Observation/Highlight box */
.callout {
    background: var(--color-background);
    border-radius: var(--border-radius-card);
    padding: var(--spacing-xl);
    margin: var(--spacing-lg) 0;
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
    transition: var(--transition-lift);
}

/* Diagonal gradient overlay */
.callout::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.03) 0%, transparent 50%);
    pointer-events: none;
}

.callout:hover {
    box-shadow: var(--shadow-md);
    transform: translateX(4px);
}

.callout-title {
    font-family: var(--font-family-display);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
    position: relative;
}

.callout-content {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    line-height: 1.75;
    position: relative;
}

.callout-content p {
    margin: 0 0 var(--spacing-sm) 0;
}

.callout-content p:last-child {
    margin-bottom: 0;
}

/* Callout variants */
.callout.callout-success::before {
    background: linear-gradient(135deg, rgba(var(--color-success-rgb), 0.05) 0%, transparent 50%);
}

.callout.callout-success .callout-title {
    color: var(--color-success-dark);
}

.callout.callout-warning::before {
    background: linear-gradient(135deg, rgba(var(--color-warning-rgb), 0.05) 0%, transparent 50%);
}

.callout.callout-warning .callout-title {
    color: var(--color-warning-dark);
}

.callout.callout-info::before {
    background: linear-gradient(135deg, rgba(var(--color-info-rgb), 0.05) 0%, transparent 50%);
}

.callout.callout-info .callout-title {
    color: var(--color-info-dark);
}

/* --------------------------------------------------------------------------
   PROSE - Long-form content styling
   --------------------------------------------------------------------------
   For narrative content like About pages, story sections, and articles.
   -------------------------------------------------------------------------- */

.prose {
    max-width: 800px;
    margin: 0 auto;
}

.prose p {
    font-size: var(--font-size-base);
    line-height: 1.8;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-lg);
}

.prose .lead,
.prose p.lead {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    line-height: 1.6;
}

.prose h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: var(--spacing-xl) 0 var(--spacing-md) 0;
}

.prose blockquote {
    margin: var(--spacing-xl) 0;
    padding: var(--spacing-lg) var(--spacing-xl);
    background: var(--gradient-surface-primary-strong);
    border-radius: var(--border-radius-card);
    font-size: var(--font-size-lg);
    font-style: italic;
    color: var(--color-text);
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   CALLOUT FEATURE VARIANT
   --------------------------------------------------------------------------
   Enhanced callout for feature explanations with lists.
   Features gradient background, prominent border, styled bullets.
   -------------------------------------------------------------------------- */

.callout-feature {
    background: linear-gradient(135deg, var(--color-surface) 0%, rgba(var(--color-primary-rgb), 0.04) 100%);
    border-radius: var(--border-radius-card);
    padding: var(--spacing-xl);
    margin: var(--spacing-xl) 0;
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
    transition: var(--transition-lift);
}

/* Diagonal accent overlay */
.callout-feature::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle at top right, rgba(var(--color-secondary-rgb), 0.08) 0%, transparent 70%);
    pointer-events: none;
    transition: opacity 0.4s var(--ease-elegant);
    opacity: 0;
}

.callout-feature:hover {
    box-shadow: var(--shadow-md), 0 0 0 1px rgba(var(--color-primary-rgb), 0.08);
    transform: translateY(-2px);
}

.callout-feature:hover::before {
    opacity: 1;
}

/* Callout feature heading */
.callout-feature h3 {
    font-family: var(--font-family-display);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin: 0 0 var(--spacing-sm) 0;
    position: relative;
}

/* Callout feature paragraph */
.callout-feature > p {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    line-height: 1.7;
    margin: 0 0 var(--spacing-md) 0;
    position: relative;
}

/* Callout feature list */
.callout-feature ul {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

.callout-feature ul li {
    padding: var(--spacing-sm) 0;
    padding-left: calc(var(--spacing-md) + 8px);
    position: relative;
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    line-height: 1.6;
}

/* Custom bullet with primary color */
.callout-feature ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: calc(var(--spacing-sm) + 0.55em);
    width: 6px;
    height: 6px;
    background: var(--color-primary);
    border-radius: 50%;
    transition: transform 0.2s var(--ease-out), background 0.2s;
}

.callout-feature:hover ul li::before {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}

/* Strong labels in list items */
.callout-feature ul li strong {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

/* Callout feature link */
.callout-feature a:not(.btn-cta) {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-md);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    text-decoration: none;
    position: relative;
    transition: color 0.2s, gap 0.2s var(--ease-out);
}

.callout-feature a:not(.btn-cta)::after {
    content: '→';
    transition: transform 0.2s var(--ease-out);
}

.callout-feature a:not(.btn-cta):hover {
    color: var(--color-primary-dark);
    gap: var(--spacing-sm);
}

.callout-feature a:not(.btn-cta):hover::after {
    transform: translateX(2px);
}

/* Pull quote / Blockquote - signature typography */
.blockquote {
    font-family: var(--font-family-display);
    font-size: var(--font-size-xl);
    font-style: italic;
    color: var(--color-text);
    line-height: 1.65;
    margin: var(--spacing-xl) 0;
    padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-xl) var(--spacing-xxl);
    background: var(--gradient-surface-primary-strong);
    border-radius: var(--border-radius-card);
    position: relative;
    box-shadow: var(--shadow-card);
    transition: var(--transition-lift);
}

.blockquote:hover {
    box-shadow: var(--shadow-md), var(--shadow-glow-primary-soft);
    transform: translateX(4px);
}

.blockquote::before {
    content: '"';
    position: absolute;
    top: var(--spacing-md);
    left: var(--spacing-lg);
    font-size: 5rem;
    font-family: var(--font-family-display), Georgia, serif;
    font-weight: var(--font-weight-extrabold);
    color: var(--color-primary);
    line-height: 1;
    opacity: 0.15;
    transition: opacity 0.3s var(--ease-out);
}

.blockquote:hover::before {
    opacity: 0.25;
}

.blockquote-citation {
    display: block;
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
    font-style: normal;
    color: var(--color-primary);
    margin-top: var(--spacing-md);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   SECTION 35: PROFILE CARDS
   --------------------------------------------------------------------------
   Person/founder/team member cards with avatar and bio
   Unified with lift + glow hover and accent borders
   -------------------------------------------------------------------------- */

/* Profile card container */
.profile-card {
    display: flex;
    gap: var(--spacing-xl);
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-xl);
    background: var(--color-background);
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border);
    transition: var(--transition-lift);
    position: relative;
    overflow: hidden;
}

/* Diagonal accent */
.profile-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-diagonal-accent);
    opacity: 0;
    transition: opacity 0.4s var(--ease-elegant);
    pointer-events: none;
}

.profile-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover), var(--shadow-glow-primary-soft);
    border-color: var(--color-border-primary-subtle);
}

.profile-card:hover::before {
    opacity: 1;
}

/* Avatar/Photo area */
.profile-photo {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.profile-photo img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--color-primary-light);
    transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-elegant);
}

.profile-card:hover .profile-photo img {
    border-color: var(--color-primary-muted);
    box-shadow: var(--shadow-glow-primary-soft);
}

/* Placeholder avatar - signature gradient */
.profile-avatar-placeholder {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: var(--gradient-primary-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family-display);
    font-size: 2.75rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    letter-spacing: -0.02em;
    box-shadow: var(--shadow-button);
    transition: box-shadow 0.3s var(--ease-elegant), transform 0.3s var(--ease-elegant);
}

.profile-card:hover .profile-avatar-placeholder {
    box-shadow: var(--shadow-button-hover), var(--shadow-glow-primary);
    transform: scale(1.05);
}

/* Info section */
.profile-info {
    flex-grow: 1;
    position: relative;
    z-index: 1;
}

.profile-name {
    font-family: var(--font-family-display);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-bottom: var(--spacing-xs);
    letter-spacing: -0.01em;
}

.profile-title {
    font-size: var(--font-size-lg);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-xs);
}

.profile-location {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.profile-location::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--color-secondary);
    border-radius: 50%;
}

.profile-bio {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    line-height: 1.75;
    margin: 0;
}

/* Compact profile (for team grids) */
.profile-card.profile-compact {
    flex-direction: column;
    text-align: center;
    max-width: 300px;
    padding: var(--spacing-xl) var(--spacing-lg);
}

.profile-card.profile-compact .profile-photo img,
.profile-card.profile-compact .profile-avatar-placeholder {
    width: 110px;
    height: 110px;
    margin-bottom: var(--spacing-md);
    font-size: 2.25rem;
}

.profile-card.profile-compact .profile-name {
    font-size: var(--font-size-lg);
}

.profile-card.profile-compact .profile-title {
    font-size: var(--font-size-base);
}

.profile-card.profile-compact .profile-location {
    justify-content: center;
}

/* Profile grid */
.profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 340px));
    gap: var(--spacing-lg);
    justify-content: center;
}

@media (max-width: 608px) { 
    .profile-card {
        flex-direction:column;
    }
    .profile-card .profile-info .profile-bio {
        margin-top:var(--spacing-sm);
    }
    .profile-card .profile-info > * {
        justify-self:center; width:auto; margin:auto;
    }
}


/* --------------------------------------------------------------------------
   SECTION 36: COMPARISON CARDS
   --------------------------------------------------------------------------
   Side-by-side comparison with checkmarks/crosses for features
   Unified with lift + glow hover and accent treatments
   -------------------------------------------------------------------------- */

/* Comparison container - typically 2 cards, should be wider */
.comparison-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-lg);
    justify-content: center;
    align-items: stretch;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Individual comparison card */
.comparison-card {
    background: var(--color-background);
    border-radius: var(--border-radius-card);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border);
    transition: var(--transition-lift);
    position: relative;
    overflow: hidden;
}

.comparison-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* "Old way" / Negative variant - subtle gradient, no heavy border */
.comparison-card.comparison-negative {
    border: none;
    background: linear-gradient(135deg, rgba(var(--color-error-rgb), 0.06) 0%, var(--color-background) 100%);
    box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(var(--color-error-rgb), 0.12);
}

.comparison-card.comparison-negative::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--color-error) 0%, rgba(var(--color-error-rgb), 0.3) 100%);
    border-radius: var(--border-radius-card) 0 0 var(--border-radius-card);
}

.comparison-card.comparison-negative:hover {
    box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(var(--color-error-rgb), 0.2);
    background: linear-gradient(135deg, rgba(var(--color-error-rgb), 0.08) 0%, var(--color-background) 100%);
}

/* "New way" / Positive variant - subtle gradient, no heavy border */
.comparison-card.comparison-positive {
    border: none;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.05) 0%, rgba(var(--color-secondary-rgb), 0.02) 50%, var(--color-background) 100%);
    box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(var(--color-primary-rgb), 0.1);
}

.comparison-card.comparison-positive::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    border-radius: var(--border-radius-card) 0 0 var(--border-radius-card);
}

.comparison-card.comparison-positive:hover {
    box-shadow: var(--shadow-md), var(--shadow-glow-primary-soft), inset 0 0 0 1px rgba(var(--color-primary-rgb), 0.15);
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.07) 0%, rgba(var(--color-secondary-rgb), 0.03) 50%, var(--color-background) 100%);
}

/* Card title */
.comparison-card-title {
    font-family: var(--font-family-display);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-lg);
    color: var(--color-text);
    position: relative;
}

/* Comparison list */
.comparison-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comparison-list li {
    padding: var(--spacing-sm) 0;
    padding-left: var(--spacing-xl);
    position: relative;
    color: var(--color-text-muted);
    font-size: var(--font-size-base);
    line-height: 1.6;
    transition: color 0.2s var(--ease-out);
}

.comparison-card:hover .comparison-list li {
    color: var(--color-text-light);
}

/* Negative items (×) */
.comparison-negative .comparison-list li::before {
    content: "×";
    position: absolute;
    left: 0;
    top: var(--spacing-sm);
    color: var(--color-error);
    font-weight: var(--font-weight-bold);
    font-size: 1.25em;
    line-height: 1.6;
}

/* Positive items (✓) */
.comparison-positive .comparison-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: var(--spacing-sm);
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
    font-size: 1.1em;
    line-height: 1.6;
}

/* Highlighted comparison - featured/recommended */
.comparison-card.comparison-highlight {
    box-shadow: var(--shadow-card-lifted), var(--shadow-glow-primary);
    transform: scale(1.03);
    z-index: 1;
    border-width: 2px;
}

.comparison-card.comparison-highlight:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-card-lifted), var(--shadow-glow-combined);
}

/* Comparison with labels */
.comparison-label {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--border-radius-full);
    font-family: var(--font-family-display);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--spacing-md);
}

.comparison-negative .comparison-label {
    background: var(--color-error-light);
    color: var(--color-error-dark);
}

.comparison-positive .comparison-label {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

/* Neutral card variant */
.comparison-card:not(.comparison-negative):not(.comparison-positive) {
    border: 1px solid var(--color-border-medium);
}

.comparison-card:not(.comparison-negative):not(.comparison-positive) .comparison-list li::before {
    content: "•";
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   SECTION 36B: FEE COMPARISON
   --------------------------------------------------------------------------
   Side-by-side fee breakdown comparison. Shows platform fees vs anySKU fees
   with itemized breakdowns and totals.
   -------------------------------------------------------------------------- */

.fee-comparison-visual {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

.fee-comparison-item {
    background: var(--gradient-card-base);
    border-radius: var(--border-radius-card);
    padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border);
    transition: var(--transition-card);
}

.fee-comparison-item:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}

.fee-comparison-item.fee-comparison-highlight {
    border-color: rgba(92, 67, 244, 0.18);
    background:
        linear-gradient(
            160deg,
            rgba(92, 67, 244, 0.035) 0%,
            rgba(0, 255, 203, 0.015) 50%,
            var(--color-background) 100%
        );
    box-shadow:
        0 4px 16px rgba(92, 67, 244, 0.1),
        0 1px 4px rgba(92, 67, 244, 0.06);
}

.fee-comparison-item.fee-comparison-highlight:hover {
    box-shadow:
        0 8px 24px rgba(92, 67, 244, 0.14),
        0 2px 6px rgba(92, 67, 244, 0.08);
    transform: translateY(-3px);
}

.fee-comparison-platform {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-md);
    color: var(--color-text-warm);
    text-align: center;
    padding-bottom: var(--spacing-sm);
    background-image: linear-gradient(
        to right,
        rgba(92, 67, 244, 0.1),
        rgba(0, 255, 203, 0.05) 70%,
        transparent
    );
    background-size: 100% 1px;
    background-position: bottom left;
    background-repeat: no-repeat;
}

.fee-comparison-breakdown {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fee-item {
    font-size: var(--font-size-base);
    color: var(--color-text-warm-body);
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.fee-item:last-of-type {
    border-bottom: none;
}

.fee-item.fee-negative {
    color: rgba(185, 28, 28, 0.78);
}

.fee-item.fee-positive {
    color: rgba(5, 150, 105, 0.85);
    font-weight: var(--font-weight-medium);
}

.fee-total {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-warm);
    padding-top: var(--spacing-sm);
    margin-top: var(--spacing-xs);
    border-top: none;
    background-image: linear-gradient(
        to right,
        rgba(92, 67, 244, 0.12),
        rgba(0, 255, 203, 0.06) 70%,
        transparent
    );
    background-size: 100% 1px;
    background-position: top left;
    background-repeat: no-repeat;
}

.fee-total.highlight {
    color: var(--color-primary);
}

.fee-comparison-note {
    text-align: center;
    font-size: var(--font-size-base);
    color: var(--color-text-warm-body);
    margin-top: var(--spacing-lg);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.fee-comparison-note strong {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

@media (max-width: 768px) {
    .fee-comparison-visual {
        grid-template-columns: 1fr;
        max-width: 380px;
    }
}

/* --------------------------------------------------------------------------
   SECTION 36C: DATA TABLES
   --------------------------------------------------------------------------
   Clean, readable tables for comparisons, pricing, and feature matrices.
   Subtle styling with hover effects and responsive overflow handling.
   -------------------------------------------------------------------------- */

/* Table container - handles overflow on mobile */
.table-container {
    overflow-x: auto;
    margin: var(--spacing-lg) 0;
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-card);
}

/* Base data table */
.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-background);
    font-size: var(--font-size-base);
}

/* Header cells */
.data-table th {
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: left;
    background: linear-gradient(135deg, rgb(45, 33, 140) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    font-family: var(--font-family-display);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    text-transform: none;
    letter-spacing: 0.01em;
    border-bottom: none;
}

.data-table th:first-child {
    border-radius: var(--border-radius-card) 0 0 0;
}

.data-table th:last-child {
    border-radius: 0 var(--border-radius-card) 0 0;
}

/* Body cells */
.data-table td {
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-light);
    transition: background 0.15s var(--ease-out), color 0.15s;
}

/* Row hover */
.data-table tbody tr {
    transition: background 0.15s var(--ease-out);
}

.data-table tbody tr:hover {
    background: var(--color-primary-bg-subtle);
}

.data-table tbody tr:hover td {
    color: var(--color-text);
}

/* Last row - no border */
.data-table tbody tr:last-child td {
    border-bottom: none;
}

/* First column emphasis */
.data-table td:first-child {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

/* Striped variant */
.data-table.data-table-striped tbody tr:nth-child(even) {
    background: var(--color-surface);
}

.data-table.data-table-striped tbody tr:nth-child(even):hover {
    background: var(--color-primary-bg-tint);
}

/* Compact variant */
.data-table.data-table-compact th,
.data-table.data-table-compact td {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
}

/* Borderless variant - subtle lines only */
.data-table.data-table-borderless {
    box-shadow: none;
}

.data-table.data-table-borderless th {
    background: transparent;
    color: var(--color-text-muted);
    border-bottom: 2px solid var(--color-border-medium);
    text-transform: none;
    letter-spacing: normal;
    font-size: var(--font-size-sm);
}

.data-table.data-table-borderless td {
    border-bottom: 1px solid var(--color-border);
}

/* Highlight specific cells */
.data-table .cell-success {
    color: var(--color-success);
    font-weight: var(--font-weight-semibold);
}

.data-table .cell-primary {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.data-table .cell-warning {
    color: var(--color-warning-text);
    font-weight: var(--font-weight-semibold);
}

.data-table .cell-muted {
    color: var(--color-text-muted);
}

/* Responsive: horizontal scroll for wide tables */
.data-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.data-table-scroll .data-table {
    min-width: 700px;
}

/* Responsive: scroll hint on mobile */
@media (max-width: 768px) {
    .table-container {
        position: relative;
    }

    .table-container::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 30px;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9));
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .table-container.is-scrollable::after {
        opacity: 1;
    }

    .data-table th,
    .data-table td {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-sm);
    }
}

/* --------------------------------------------------------------------------
   SECTION 37: FULL-VIEWPORT HERO
   --------------------------------------------------------------------------
   Landing page hero with background image, overlay, and centered content.
   Designed for full-viewport impact with gradient overlays.
   -------------------------------------------------------------------------- */

/* Hero container - full viewport height */
.hero-viewport {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.hero-viewport-compact {
    min-height: 70vh;
    min-height: 70dvh;
}

/* Background image layer */
.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-background picture {
    display: block;
    width: 100%;
    height: 100%;
}

.hero-background img,
.hero-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Gradient overlay - dark blend for photo backgrounds */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 35%, rgba(118, 75, 162, 0.01) 90%);
    z-index: 2;
}

/* Dark overlay variant */
.hero-overlay-dark {
    background: linear-gradient(135deg,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.6) 50%,
        rgba(var(--color-primary-rgb), 0.4) 100%);
}

/* Light overlay variant */
.hero-overlay-light {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.7) 100%);
}

/* Content container */
.hero-content {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: safe center;
    justify-content: center;
    flex: 1;
    padding: var(--spacing-xl);
    padding-top: calc(60px + var(--spacing-xl)); /* Account for header height */
    text-align: center;
    color: var(--color-background);
}

.hero-content-left {
    text-align: left;
    justify-content: flex-start;
}

/* Text wrapper */
.hero-text {
    max-width: 800px;
    margin: 0 auto;
    animation: heroFadeIn 0.8s var(--ease-elegant) forwards;
}

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

/* Hero title */
.hero-title {
    font-family: var(--font-family-display);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: var(--font-weight-extrabold);
    line-height: 1.1;
    margin: 0 0 var(--spacing-lg) 0;
    margin: var(--spacing-lg) 0;
    color: var(--color-background);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    letter-spacing: -0.02em;
}

.hero-title > div {
    display: block;
}

/* Hero subtitle */
.hero-subtitle {
    font-size: clamp(1.1rem, 2.5vw, 1.35rem);
    line-height: 1.6;
    opacity: 0.95;
    max-width: 600px;
    margin: 0 auto var(--spacing-xl) auto;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Mobile/desktop text toggles */
.hero-subtitle-short,
.hero-trust-short {
    display: none;
}

/* Hero action buttons */
.hero-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-lg);
}
.hero-actions .command.btn-cta {
    margin: 0;
} 

.hero-content-left .hero-actions {
    justify-content: flex-start;
}

/* Hero trust line */
.hero-trust {
    font-size: var(--font-size-base);
    opacity: 0.85;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.hero-trust::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

/* Responsive hero */
@media (max-width: 768px) {
    .hero-content {
        padding: var(--spacing-lg);
    }

    .hero-title {
        font-size: clamp(2rem, 8vw, 2.8rem);
        line-height: 1.25;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    /* Show short subtitle on mobile, hide full */
    .hero-subtitle-full {
        display: none;
    }

    .hero-subtitle-short {
        display: inline;
    }

    .hero-actions {
        flex-direction: column;
        align-items: center;
    }

    /* Better contrast for secondary CTA on mobile */
    .hero-actions .command.btn-cta-secondary {
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    .hero-trust {
        font-size: var(--font-size-sm);
        margin-top: var(--spacing-sm);
    }

    .hero-trust::before {
        width: 14px;
        height: 14px;
    }

    .hero-trust-full {
        display: none;
    }

    .hero-trust-short {
        display: inline;
    }
}

/* --------------------------------------------------------------------------
   SECTION 38: JOURNEY/PATH SELECTION CARDS
   --------------------------------------------------------------------------
   Large cards for user journey selection (buyer vs seller, etc.)
   Features icon, title, description, benefits list, and CTA.
   -------------------------------------------------------------------------- */

/* Path cards container */
.path-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
}

@media (max-width: 768px) {
    .path-cards {
        grid-template-columns: 1fr;
    }
}

/* Individual path card */
.path-card {
    background: var(--color-background);
    border-radius: var(--border-radius-card);
    padding: 3rem 2.5rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    border: 3px solid transparent;
    transition: all 0.3s var(--ease-elegant);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

/* Animated top accent bar */
.path-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, #3d54f5 0%, #6563cd 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease-elegant);
}

.path-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
    border-color: rgba(61, 84, 245, 0.4);
}

.path-card:hover::before {
    transform: scaleX(1);
}

/* Path icon */
.path-icon {
    width: var(--icon-size-xl, 64px);
    height: var(--icon-size-xl, 64px);
    flex-shrink: 0;
    border: 2px solid var(--color-primary-muted);
    border-radius: var(--border-radius-full);
    padding: var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: var(--icon-size-xl, 64px) var(--icon-size-xl, 64px);
    background-repeat: no-repeat;
    background-position: center;
    transition: border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
    align-self: flex-start;
}

.path-card:hover .path-icon {
    border-color: var(--color-primary);
    background-color: var(--color-primary-lighter);
}

/* Path title - supports both .path-card-title and plain h3 */
.path-card-title,
.path-card h3 {
    font-family: var(--font-family-display);
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin: 0;
    flex: 1;
    min-width: 200px;
    align-self: center;
    line-height: 1.2;
    flex-basis: calc(100% - var(--icon-size-xl, 64px) - 3rem);
}

/* Path description - supports both .path-card-description and plain p */
.path-card-description,
.path-card > p {
    font-size: 1.1rem;
    color: var(--color-text-light);
    line-height: 1.7;
    flex-basis: 100%;
    margin: 0 0 0.5rem 0;
}

/* Path benefits list */
.path-benefits {
    list-style: disc;
    padding-left: var(--spacing-lg);
    margin: var(--spacing-sm) 0 var(--spacing-lg) 0;
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    max-width: max-content;
    margin-left: auto;
    margin-right: auto;
    list-style:none;
}

.path-benefits li {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    line-height: 2;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Benefit icon in path-benefits list */
.path-benefits .benefit-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Path CTA - button styling for path card actions */
.path-cta {
    display: inline-flex;
    letter-spacing: 0.5px;
    align-self: center;
    justify-self: center;
    margin-left: auto;
    margin-right: auto;
    flex-basis: auto;
}

.path-cta a.btn-cta {
    display: inline-block;
    padding: 1rem 2rem;
    border-radius: var(--border-radius-button);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    font-size: 1rem;
    transition: all 0.3s var(--ease-elegant);
    letter-spacing: 0.01em;
    background-image: linear-gradient(135deg, #3d54f5 0%, #6563cd 100%);
    color: var(--color-background);
    box-shadow: 0 4px 15px rgba(61, 84, 245, 0.3);
    align-self: center;
    justify-self: center;
    margin-left: auto;
    margin-right: auto;
    flex-basis: auto;
}

.path-cta a.btn-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(61, 84, 245, 0.4);
}

.path-cta a.btn-cta:focus {
    outline: rgb(52, 152, 219) solid 2px;
    outline-offset: 2px;
}


/* Path card color variants */
.path-card-primary {
    border-color: var(--color-border-primary-subtle);
}

.path-card-primary:hover {
    border-color: var(--color-primary-border-medium);
}

.path-card-secondary {
    border-color: rgba(var(--color-secondary-rgb), 0.15);
}

.path-card-secondary::before {
    background: var(--gradient-secondary);
}

.path-card-secondary:hover {
    border-color: rgba(var(--color-secondary-rgb), 0.3);
    box-shadow: var(--shadow-card-hover), var(--shadow-glow-secondary-soft);
}

/* Path cards — mobile layout: centered, warm, compact */
@media (max-width: 768px) {
    .path-cards {
        gap: var(--spacing-md);
    }

    .path-card {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        text-align: center;
        padding: 1.5rem 1.25rem 1.25rem;
        gap: var(--spacing-sm);
        background:
            linear-gradient(
                160deg,
                rgba(92, 67, 244, 0.03) 0%,
                rgba(0, 255, 203, 0.015) 100%
            );
        border-color: rgba(92, 67, 244, 0.1);
    }

    .path-card::before {
        display: none;
    }

    .path-card .path-icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
        background-size: 48px 48px;
        padding: var(--spacing-sm);
        border: none;
        background-color: rgba(92, 67, 244, 0.04);
        align-self: center !important;
    }

    .path-card h3,
    .path-card-title {
        font-size: 1.2rem;
        flex: none !important;
        min-width: 0 !important;
        flex-basis: auto !important;
    }

    .path-card > p,
    .path-card-description {
        font-size: var(--font-size-sm);
        line-height: 1.5;
        flex-basis: auto !important;
        color: var(--color-text-warm-muted, rgba(30, 25, 55, 0.6));
        margin: 0;
    }

    /* Hide bullets on mobile — description is enough */
    .path-card .path-benefits {
        display: none !important;
    }

    .path-card .btn-cta,
    .path-card .path-cta {
        flex-basis: auto;
        text-align: center;
        margin-top: var(--spacing-xs);
    }

    .path-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    }
}

/* --------------------------------------------------------------------------
   SECTION 38B: PERSONA CARDS
   --------------------------------------------------------------------------
   Cards for highlighting user personas/audiences with icon, title,
   quote, and link. Used in "Who is X For?" sections.
   -------------------------------------------------------------------------- */

/* Persona cards grid */
.persona-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 270px));
    gap: var(--spacing-lg);
    justify-content: center;
}

/* Individual persona card */
.persona-card {
    background: var(--color-background);
    border-radius: var(--border-radius-card);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-card);
    border: 2px solid transparent;
    transition: var(--transition-lift);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.persona-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-card-hover), var(--shadow-glow-primary-soft);
    border-color: var(--color-primary-border-soft);
}

/* Persona icon - supports both emoji/icons and background images */
.persona-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    border-radius: var(--border-radius-full);
    margin-bottom: var(--spacing-md);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
    transition: transform 0.3s var(--ease-out), filter 0.3s var(--ease-out);
}

.persona-card:hover .persona-icon {
    transform: scale(1.05);
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15));
}

.persona-card h3 {
    font-family: var(--font-family-display);
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin: 0 0 1rem 0;
}

.persona-card p {
    font-size: 1rem;
    color: var(--color-text-light);
    line-height: 1.6;
    font-style: italic;
    margin: 0 0 1.5rem 0;
    flex-grow: 1;
}

/* Persona link */
.persona-link {
    color: var(--color-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s var(--ease-elegant);
    margin-top: auto;
    justify-content: center;
}

.persona-link:hover {
    color: var(--color-primary-dark);
}

/* Responsive */
@media (max-width: 768px) {
    .persona-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .persona-cards {
        grid-template-columns: 1fr;
    }

    .persona-card {
        padding: var(--spacing-lg);
    }
}

/* --------------------------------------------------------------------------
   SECTION 39: COLLECTION CARDS
   --------------------------------------------------------------------------
   Cards for showcasing user collections with cover image, badge,
   collector profile, and description.
   -------------------------------------------------------------------------- */

/* Collection cards grid */
.collection-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
    gap: var(--spacing-lg);
    justify-content: center;
}

/* Individual collection card */
.collection-card {
    background: var(--color-background);
    border-radius: var(--border-radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: 2px solid transparent;
    transition: var(--transition-lift);
}

.collection-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-card-hover), var(--shadow-glow-primary-soft);
    border-color: var(--color-primary-border-soft);
}

/* Collection header/cover */
.collection-header {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.collection-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--ease-elegant);
}

.collection-card:hover .collection-cover {
    transform: scale(1.08);
}

/* Collection badge */
.collection-badge {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--color-background);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    z-index: 2;
}

/* Collection info */
.collection-info {
    padding: var(--spacing-lg);
}

/* Collector profile row */
.collector-profile {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.collector-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius-full);
    object-fit: cover;
    border: 2px solid var(--color-primary);
    flex-shrink: 0;
}

.collector-details {
    flex: 1;
    min-width: 0;
}

.collector-name {
    font-family: var(--font-family-display);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.collector-handle {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0;
}

/* Collection description */
.collection-description {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
}

/* Collection link */
.collection-link {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s var(--ease-elegant);
}

.collection-link:hover {
    color: var(--color-secondary-dark);
    gap: var(--spacing-sm);
}

.collection-link::after {
    content: '→';
    transition: transform 0.2s var(--ease-out);
}

.collection-link:hover::after {
    transform: translateX(2px);
}

/* --------------------------------------------------------------------------
   SECTION 40: FEATURE CARDS
   --------------------------------------------------------------------------
   Large cards showcasing features with image, badge, title,
   description, stats, and benefits.
   -------------------------------------------------------------------------- */

/* Feature cards grid */
.feature-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
    gap: var(--spacing-lg);
    justify-content: center;
}

/* Individual feature card */
.feature-card {
    background: var(--color-background);
    border-radius: var(--border-radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border);
    transition: var(--transition-lift);
    position: relative;
}

.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
}

/* Featured variant - more prominent */
.feature-card.featured {
    box-shadow: var(--shadow-card), var(--shadow-glow-primary-soft);
    border-color: var(--color-primary-border-soft);
}

.feature-card.featured:hover {
    box-shadow: var(--shadow-card-hover), var(--shadow-glow-primary);
}

/* Feature image */
.feature-image {
    height: 200px;
    overflow: hidden;
    position: relative;
}

.feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--ease-elegant);
}

.feature-card:hover .feature-image img {
    transform: scale(1.08);
}

/* Feature content */
.feature-content {
    padding: var(--spacing-lg);
}

/* Feature title */
.feature-title {
    font-family: var(--font-family-display);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin: 0 0 var(--spacing-sm) 0;
    line-height: 1.3;
}

/* Feature description */
.feature-description {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    line-height: 1.7;
    margin-bottom: var(--spacing-md);
}

/* Feature stats row */
.feature-stats {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-md);
}

.feature-stat,
.feature-stats span {
    background: var(--color-surface);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.feature-stat strong {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}

/* Feature benefits */
.feature-benefits {
    list-style: disc;
    padding-left: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.feature-benefits li {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.feature-benefit::before {
    content: '';
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Feature link */
.feature-link {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s var(--ease-elegant);
}

.feature-link:hover {
    color: var(--color-secondary-dark);
    gap: var(--spacing-sm);
}

.feature-link::after {
    content: '→';
    transition: transform 0.2s var(--ease-out);
}

.feature-link:hover::after {
    transform: translateX(2px);
}

@media (max-width: 768px) {
    .collection-cards,
    .feature-cards {
        display: flex;
        flex-direction: column;
    }
}

/* --------------------------------------------------------------------------
   SECTION 41: VALUE PROPOSITION CARDS
   --------------------------------------------------------------------------
   Icon-centered cards for highlighting benefits and value props.
   -------------------------------------------------------------------------- */

/* Value props grid */
.value-props {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 340px));
    gap: 2.5rem;
    justify-content: center;
    margin-top: 3rem;
}

/* Individual value prop card */
.value-prop {
    background: var(--color-background);
    padding: 2.5rem 2rem;
    border-radius: var(--border-radius-card);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 2px solid transparent;
    text-align: center;
    transition: all 0.3s var(--ease-elegant);
}

.value-prop:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    border-color: rgba(61, 84, 245, 0.3);
}

/* Value prop icon */
.value-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem auto;
    border-radius: var(--border-radius-full);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-size: 0;
    text-indent: -9999px;
}

/* Value prop title - supports both class and plain h3 */
.value-prop-title,
.value-prop h3 {
    font-family: var(--font-family-display);
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin: 0 0 1rem 0;
}

/* Value prop description - supports both class and plain p */
.value-prop-description,
.value-prop p {
    font-size: 1rem;
    color: var(--color-text-light);
    line-height: 1.7;
    margin: 0;
}

/* Compact variant for constrained spaces (auth pages, sidebars) */
.value-props-compact {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    margin-top: 0;
}

/* Join page: value props full width, horizontal layout */
.join-content .value-props-compact {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.join-content .value-props-compact .value-prop {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    text-align: left;
}

.join-content .value-props-compact .value-prop:hover {
    transform: none;
    box-shadow: none;
    border-color: transparent;
}

.join-content .value-props-compact .value-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    flex-shrink: 0;
    margin: 0; /* Reset base margin */
    border-radius: var(--border-radius-full);
    background-size: cover;
    background-position: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.join-content .value-props-compact .value-prop h3 {
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 2px 0;
    color: var(--color-text-primary);
}

.join-content .value-props-compact .value-prop p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0;
}

.value-props-compact .value-prop {
    padding: var(--spacing-md);
    text-align: left;
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
}

.value-props-compact .value-prop:hover {
    transform: translateY(-2px);
}

.value-props-compact .value-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
    margin-bottom: 0;
}

.value-props-compact .value-prop h3 {
    font-size: var(--font-size-base);
    margin: 0 0 var(--spacing-sm) 0;
}

.value-props-compact .value-prop p {
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

/* Value CTA - callout box within value props section */
.value-cta {
    margin-top: 4rem;
    text-align: center;
    padding: 3rem 2rem;
    background: var(--color-surface);
    border-radius: var(--border-radius-card);
    border: 2px solid var(--color-secondary);
}

.value-cta h3 {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin: 0 0 1rem 0;
}

.value-cta > p {
    font-size: 1.15rem;
    color: var(--color-text-light);
    margin-bottom: 2rem;
}

.value-cta .cta-note {
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .value-cta {
        padding: 2rem 1.5rem;
    }

    .value-cta h3 {
        font-size: 1.6rem;
    }
}

@media (max-width: 480px) {
    .value-cta h3 {
        font-size: 1.4rem;
    }
}

/* --------------------------------------------------------------------------
   SECTION 42: CTA SECTIONS & CALLOUTS
   --------------------------------------------------------------------------
   Full-width call-to-action sections and highlighted callout boxes.
   -------------------------------------------------------------------------- */

/* Full-width CTA section */
.cta-section {
    background: linear-gradient(135deg,
        var(--color-text) 0%,
        rgb(17, 17, 17) 30%,
        var(--color-primary-darker) 100%);
    color: var(--color-background);
    padding: 5rem var(--spacing-lg);
    text-align: center;
}

/* CTA section with image background */
.cta-section-image {
    position: relative;
    overflow: hidden;
}

.cta-section-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(var(--color-primary-rgb), 0.7) 100%);
    z-index: 1;
}

.cta-section-image > * {
    position: relative;
    z-index: 2;
}

/* CTA content container */
.cta-content {
    max-width: 900px;
    margin: 0 auto;
}

/* CTA title */
.cta-title {
    font-family: var(--font-family-display);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: var(--font-weight-bold);
    color: var(--color-background);
    margin: 0 0 var(--spacing-md) 0;
    line-height: 1.2;
}

/* CTA subtitle */
.cta-subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto var(--spacing-xl) auto;
    line-height: 1.6;
}

/* CTA actions */
.cta-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-lg);
    justify-content: space-around;
    margin-right: auto;
    margin-left: auto;
    justify-self: center;
}

/* CTA note (hint text below buttons) */
.cta-note {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin: var(--spacing-sm) 0 0 0;
    text-align: center;
    line-height: 1.4;
}

/* Trust badges row */
.cta-trust-badges {
    display: flex;
    gap: var(--spacing-lg);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--spacing-md);
}

.trust-badge {
    font-size: var(--font-size-sm);
    opacity: 0.85;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.trust-badge::before {
    content: '';
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Callout box - highlighted content block */
.callout {
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-card);
    margin: var(--spacing-lg) 0;
}

/* Primary callout */
.callout-primary {
    background: var(--color-primary-lighter);
    border: 2px solid var(--color-primary-muted);
}

/* Secondary/Success callout */
.callout-success {
    background: var(--color-secondary-light);
    border: 2px solid var(--color-secondary);
}

/* Warning callout */
.callout-warning {
    background: var(--color-warning-light);
    border: 2px solid var(--color-warning);
}

/* Info callout */
.callout-info {
    background: var(--color-surface);
    border: 2px solid var(--color-border-medium);
}

.callout-title {
    font-family: var(--font-family-display);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin: 0 0 var(--spacing-sm) 0;
}

.callout-text {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    line-height: 1.7;
    margin: 0;
}

/* Responsive CTA */
@media (max-width: 768px) {
    .cta-section {
        padding: 3rem var(--spacing-md);
    }

    .cta-actions {
        flex-direction: column;
        align-items: center;
    }

    .cta-trust-badges {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
}

/* --------------------------------------------------------------------------
   SECTION 43: CTA BUTTON VARIANTS
   --------------------------------------------------------------------------
   Large call-to-action button styles extending base button system.
   -------------------------------------------------------------------------- */

/* Large CTA button - hero and section CTAs */
.command.btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 1.2rem 2.5rem;
    font-size: 1.1rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.01em;
    border-radius: var(--border-radius-button);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s var(--ease-elegant);
    border: none;
    justify-self:center; margin-left:auto; margin-right:auto;
}

/* Extra large CTA for hero sections */
.command.btn-cta-lg {
    padding: 1.4rem 3rem;
    font-size: 1.2rem;
}

/* CTA primary - solid blue background */
.command.btn-cta-primary {
    background: rgb(61, 84, 245);
    color: var(--color-background);
    box-shadow: 0 4px 15px rgba(61, 84, 245, 0.3);
}

.command.btn-cta-primary:hover {
    background: rgb(51, 74, 235);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(61, 84, 245, 0.4);
}

.command.btn-cta-primary:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(61, 84, 245, 0.3);
}

/* CTA secondary - glass/outline on dark backgrounds */
.command.btn-cta-secondary {
    background: rgba(255, 255, 255, 0.15);
    color: var(--color-background);
    border: 2px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.command.btn-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-3px);
}

/* CTA accent - gradient button for path cards and featured actions */
.command.btn-cta-accent {
    background: linear-gradient(135deg, #3d54f5 0%, #6563cd 100%);
    color: var(--color-background);
    box-shadow: 0 4px 15px rgba(61, 84, 245, 0.3);
    border: none;
}

.command.btn-cta-accent:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(61, 84, 245, 0.4);
}

/* CTA outline - for light backgrounds */
.command.btn-cta-outline {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.command.btn-cta-outline:hover {
    background: var(--color-primary);
    color: var(--color-background);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(var(--color-primary-rgb), 0.3);
}

/* Full width CTA */
.command.btn-cta-full {
    width: 100%;
    max-width: 320px;
}

@media (max-width: 768px) {
    .command.btn-cta,
    .command.btn-cta-lg {
        width: 100%;
        max-width: 300px;
        text-align: center;
    }
}

/* --------------------------------------------------------------------------
   SECTION 44: SAFETY/TRUST SECTION
   --------------------------------------------------------------------------
   Feature cards with icons for trust and safety messaging.
   -------------------------------------------------------------------------- */

/* Safety section wrapper */
.safety-section {
    padding: 5rem var(--spacing-lg);
    background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-background-darkened) 100%);
}

/* Safety intro text */
.safety-intro {
    text-align: center;
    font-size: 1.15rem;
    color: var(--color-text-muted);
    max-width: 700px;
    margin: 0 auto 3rem auto;
    line-height: 1.6;
}

/* Safety content grid */
.safety-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

/* Safety features container */
.safety-features {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Individual safety feature card */
.safety-feature {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--color-background);
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-md);
    transition: var(--transition-all);
}

.safety-feature:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Safety icon */
.safety-icon {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--border-radius-full);
    font-size: 0;
    text-indent: -9999px;
}

/* Safety text content */
.safety-text-content h3 {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin: 0 0 0.5rem 0;
}

.safety-text-content p {
    font-size: 1rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0;
}

/* Safety section responsive */
@media (max-width: 992px) {
    .safety-content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

@media (max-width: 768px) {
    .safety-section {
        padding: 3rem var(--spacing-md);
    }

    .safety-feature {
        padding: 1.25rem;
        gap: 1rem;
    }

    .safety-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    .safety-text-content h3 {
        font-size: 1.2rem;
    }

    .safety-text-content p {
        font-size: 0.95rem;
    }
}

/* --------------------------------------------------------------------------
   SECTION 45: SCREENSHOT / FIGURE
   --------------------------------------------------------------------------
   App preview images for workflow steps and feature demos.
   Rounded container with subtle chrome bar and shadow.
   -------------------------------------------------------------------------- */

/* Figure container */
.figure-screenshot {
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border);
    margin-top: var(--spacing-lg);
    background: var(--color-background);
}

/* Mock window chrome bar */
.figure-screenshot-chrome {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: var(--color-surface-darkened);
    border-bottom: 1px solid var(--color-border);
}

.figure-screenshot-chrome-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-border);
}

/* Image and video display */
.figure-screenshot img,
.figure-screenshot video {
    display: block;
    width: 100%;
    height: auto;
}

/* Constrain video figures to viewport height */
.figure-video video {
    max-height: calc(100vh - 120px);
    object-fit: contain;
}

/* Caption below image */
.figure-screenshot figcaption {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    background: var(--color-surface-darkened);
    text-align: center;
    border-top: 1px solid var(--color-border);
}

/* Placeholder when screenshot not yet captured */
.figure-screenshot-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    background: var(--color-surface-darkened);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-style: italic;
}

/* Inside workflow steps - tighten spacing */
.workflow-step-content .figure-screenshot {
    margin-top: var(--spacing-md);
}

/* Responsive */
@media (max-width: 768px) {
    .figure-screenshot {
        border-radius: var(--border-radius-md);
    }
}
@media (max-width: 500px) {
    .figure-screenshot {
        margin: var(--spacing-lg) 0 0 0;
    }

    /* Screenshots inside workflow steps: break out to full width */
    .workflow-step-content .figure-screenshot {
        margin-left: calc(-52px - var(--spacing-lg));
        width: calc(100% + 52px + var(--spacing-lg));
        max-width: none;
    }
}

/* ==========================================================================
   SECTION 45B: SEARCH EMPTY STATES
   Reusable empty state patterns for search results pages.
   Used by: Discover (Product), Activity (Thread), Listings (Stock)
   ========================================================================== */

/* --- Container --- */
.search-empty-state {
    display: none;
    padding: var(--spacing-lg);
    text-align: center;
    background: var(--gradient-surface-branded);
    border-radius: var(--border-radius-lg);
    margin: var(--spacing-lg);
    margin-top: 0;
    box-shadow: var(--shadow-md);
    position: relative;
}

/* Show empty state when module has ux-no-results */
.search-empty-state.is-visible {
    display: block;
    animation: fadeInUp 0.6s var(--ease-out);
}

/* --- Content wrapper --- */
.search-empty-state .empty-state-content {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* --- Hero section --- */
.search-empty-state .empty-hero {
    margin-bottom: var(--spacing-xl);
    position: relative;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.search-empty-state .hero-illustration {
    margin-bottom: var(--spacing-xl);
    animation: fadeInUp 0.8s var(--ease-out);
    position: relative;
}

.search-empty-state .hero-illustration img {
    max-width: 280px;
    height: auto;
    filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.15));
    border-radius: var(--border-radius-lg);
}

.search-empty-state .hero-text h2 {
    margin-bottom: var(--spacing-lg);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    line-height: var(--line-height-compact);
    letter-spacing: -0.02em;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.search-empty-state .hero-text p {
    margin-bottom: var(--spacing-xl);
    font-size: var(--font-size-lg);
    color: var(--color-text-light);
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.search-empty-state .dynamic-search-message {
    font-size: var(--font-size-md);
    color: var(--color-text-muted);
    font-style: italic;
}

/* --- Actions container --- */
.search-empty-state .empty-actions {
    margin-bottom: var(--spacing-xl);
}

/* --- Action groups --- */
.search-empty-state .action-group {
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: var(--color-glass-semi);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-glass-normal);
    position: relative;
    row-gap:var(--spacing-md); display:flex; flex-direction:column;
    align-items:center; justify-content:center;
}

.search-empty-state .action-group:last-child {
    margin-bottom: 0;
}

.search-empty-state .action-group h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    line-height: 1.3;
}

/* --- Action buttons --- */
.search-empty-state .action-buttons {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-md);
}

.search-empty-state .action-buttons .command {
    min-width: 160px;
    background: var(--color-background);
    color: var(--color-primary);
    text-transform: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-button);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    cursor: pointer;
    transition: var(--transition-all);
    border: 1px solid var(--color-primary-muted);
}

.search-empty-state .action-buttons .command:hover {
    background: var(--color-primary-lighter);
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.search-empty-state .action-description {
    font-size: var(--font-size-md);
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* --- Primary actions --- */
.search-empty-state .primary-actions {
    display: flex;
    gap: var(--spacing-lg);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-xl);
}

.search-empty-state .primary-actions .command {
    min-width: 200px;
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--border-radius-button);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s var(--ease-elegant);
    border: 2px solid transparent;
    font-size: var(--font-size-md);
    position: relative;
    overflow: hidden;
}

.search-empty-state .primary-actions .command.btn-primary,
.search-empty-state .primary-actions .command.btn-primary {
    background: var(--gradient-primary);
    color: var(--color-white);
    box-shadow: var(--shadow-button);
}

.search-empty-state .primary-actions .command.btn-primary:hover,
.search-empty-state .primary-actions .command.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-button-hover);
}

/* Secondary button in primary actions row */
.search-empty-state .primary-actions .command.btn-secondary,
.search-empty-state .primary-actions .command.btn-secondary {
    background: var(--color-background);
    color: var(--color-primary);
    border-color: var(--color-primary-muted);
}

.search-empty-state .primary-actions .command.btn-secondary:hover,
.search-empty-state .primary-actions .command.btn-secondary:hover {
    background: var(--color-primary-lighter);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* --- Feature list --- */
.search-empty-state .feature-list {
    display: grid;
    gap: var(--spacing-md);
    text-align: left;
    max-width: 500px;
    margin: 0 auto;
}

.search-empty-state .feature-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
    background: var(--color-glass-semi);
    border-radius: var(--border-radius-md);
    transition: var(--transition-all);
}

.search-empty-state .feature-item:hover {
    background: var(--color-glass-heavy);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.search-empty-state .feature-icon {
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    padding: var(--spacing-xs);
    background-color: rgba(92, 67, 244, 0.08);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-glow-primary-soft);
}

/* Feature icons use primary color for brand consistency */
.search-empty-state .feature-icon.icon-svg.icon-message { background-image: url("/images/icon/message-primary.svg"); }
.search-empty-state .feature-icon.icon-svg.icon-pin { background-image: url("/images/icon/pin-primary.svg"); }
.search-empty-state .feature-icon.icon-svg.icon-hand-cash { background-image: url("/images/icon/hand-cash-primary.svg"); }

.search-empty-state .feature-text {
    font-size: var(--font-size-md);
    color: var(--color-text-light);
    line-height: 1.5;
    font-weight: var(--font-weight-medium);
}

/* --- Suggestion list --- */
.search-empty-state .suggestion-list {
    text-align: left;
    max-width: 500px;
    margin: 0 auto;
    display: grid;
    gap: var(--spacing-md);
}

.search-empty-state .suggestion-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-glass-heavy);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-glass-normal);
    transition: var(--transition-all);
}

.search-empty-state .suggestion-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    background: var(--color-surface-elevated);
}

.search-empty-state .suggestion-icon {
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    padding: var(--spacing-sm);
    background: var(--color-secondary);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-glow-success);
    background-size: var(--icon-size-md) var(--icon-size-md);
    background-repeat: no-repeat;
    background-position: center;
    font-size: 0;
    text-indent: -9999px;
}

.search-empty-state .suggestion-text {
    font-size: var(--font-size-md);
    color: var(--color-text-light);
    line-height: 1.5;
}

/* --- Active filters section --- */
.search-empty-state .active-filters-section {
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: var(--color-warning-tint);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-warning-muted);
    position: relative;

    display:none; /* hide for now */
}

.search-empty-state .active-filters-section h3 {
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.search-empty-state .active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    justify-content: center;
}

.search-empty-state .filter-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-background);
    border: 1px solid var(--color-primary);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-sm);
    box-shadow: 0 2px 10px rgba(var(--color-primary-rgb), 0.15);
    transition: all var(--transition-base);
}

.search-empty-state .filter-tag:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(var(--color-primary-rgb), 0.25);
}

.search-empty-state .filter-label {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.search-empty-state .filter-value {
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
}

.search-empty-state .filter-remove {
    background: var(--color-error);
    border: none;
    color: var(--color-white);
    cursor: pointer;
    padding: 2px;
    border-radius: 50%;
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xs);
}

.search-empty-state .filter-remove:hover {
    background: var(--color-error-dark);
    transform: scale(1.1);
}

/* --- Community CTA (gradient footer) --- */
.search-empty-state .community-cta {
    padding: var(--spacing-lg);
    background: var(--gradient-banner);
    border-radius: var(--border-radius-lg);
    color: var(--color-white);
    position: relative;
    overflow: hidden;
}

.search-empty-state .community-cta .cta-content h3 {
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
}

.search-empty-state .community-cta .cta-content p {
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-md);
    color: var(--color-primary-on-dark);
    line-height: 1.6;
}

.search-empty-state .community-cta .command {
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    cursor: pointer;
    transition: var(--transition-all);
    border: 2px solid var(--color-glass-normal);
    background: var(--color-glass);
    color: var(--color-white);
    min-width: 160px;
    position: relative;
    overflow: hidden;
}

.search-empty-state .community-cta .command:hover {
    background: var(--color-glass-normal);
    border-color: var(--color-glass-semi);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* --- Trending / related links (chip-aligned) --- */
.search-empty-state .trending-links,
.search-empty-state .related-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    justify-content: center;
}

.search-empty-state .trending-link,
.search-empty-state .related-link {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-background);
    color: var(--color-primary);
    border: 1px solid var(--color-primary-muted);
    border-radius: var(--border-radius-full);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: var(--transition-all);
}

.search-empty-state .trending-link:hover,
.search-empty-state .related-link:hover {
    background: var(--color-primary-lighter);
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* --- Distance actions (discover-specific) --- */
.search-empty-state .action-group.distance-actions {
    background: var(--color-warning-lighter);
    border: 1px solid var(--color-warning-light);
}

.search-empty-state .distance-disclaimer {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-style: italic;
    margin-top: var(--spacing-sm);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .search-empty-state {
        margin-left: var(--spacing-sm);
        margin-right: var(--spacing-sm);
        padding: var(--spacing-md);
    }

    .search-empty-state .empty-state-content {
        padding: var(--spacing-sm);
    }

    .search-empty-state .hero-illustration img {
        max-width: 250px;
    }

    .search-empty-state .hero-text h2 {
        font-size: var(--font-size-xl);
    }

    .search-empty-state .hero-text p {
        font-size: var(--font-size-md);
    }

    .search-empty-state .feature-list {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }

    .search-empty-state .primary-actions {
        flex-direction: column;
        align-items: center;
    }

    .search-empty-state .trending-links,
    .search-empty-state .related-links {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .search-empty-state .hero-illustration img {
        max-width: 220px;
    }

    .search-empty-state .suggestion-item {
        flex-direction: column;
        text-align: center;
    }

    .search-empty-state .suggestion-icon {
        align-self: center;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .search-empty-state .hero-illustration,
    .search-empty-state .feature-item,
    .search-empty-state .suggestion-item,
    .search-empty-state .action-buttons .command,
    .search-empty-state .community-cta .command {
        animation: none;
        transition: none;
    }

    .search-empty-state .feature-item:hover,
    .search-empty-state .suggestion-item:hover,
    .search-empty-state .action-buttons .command:hover,
    .search-empty-state .community-cta .command:hover {
        transform: none;
    }
}

/* Focus states */
.search-empty-state .action-buttons .command:focus,
.search-empty-state .primary-actions .command:focus,
.search-empty-state .community-cta .command:focus {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

/* ============================================================================
   SECTION 46: AUTOCOMPLETE
   ============================================================================
   Full-featured autocomplete dropdown with mobile full-screen modal support.

   HTML structure (rendered by TypeScript Forms.Autocomplete):
     .autocompleteContainer / .autocomplete-container   → Positioned wrapper
       .autocomplete-header                             → Mobile-only header (synced input + close)
         input                                          → Secondary input (synced with primary)
         .autocomplete-close / .dialog-close                → Close/dismiss button
       .autocompleteChoices / .autocomplete-choices     → Scrollable suggestion list
         .suggestion / .autocomplete-item               → Individual suggestion item
         .suggestion.active / .autocomplete-item.active → Keyboard-highlighted
         .suggestion.selected / .autocomplete-item.selected → Multi-select picked

   Clean class mapping (replaces legacy camelCase — style-autocomplete.css removed):
     .autocompleteContainer → .autocomplete-container
     .autocompleteChoices   → .autocomplete-choices
     .suggestion            → .autocomplete-item
     .suggestion .path      → .autocomplete-item .autocomplete-path
     .suggestion .matches   → .autocomplete-item .autocomplete-matches
     .dialog-close              → .autocomplete-close

   Variants:
     .autocomplete-fullscreen            → Full-screen modal on mobile (≤767px)
     .suggestion[data-type="N"]          → Type-coded left-border indicators
     .autocompleteChoices[selectable-multiple] → Multi-select with checkboxes
     [ux-loading]                        → Loading spinner / message state
   ============================================================================ */

/* --- Base container (desktop dropdown) --- */
.autocomplete-container {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--z-index-modal, 9000);
    background: var(--color-background);
    border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-top: none;
}

/* --- Scrollable choices list --- */
.autocomplete-choices {
    max-height: 360px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--spacing-xs) 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Thin scrollbar */
.autocomplete-choices::-webkit-scrollbar {
    width: 6px;
}

.autocomplete-choices::-webkit-scrollbar-track {
    background: var(--color-surface);
}

.autocomplete-choices::-webkit-scrollbar-thumb {
    background: var(--color-border-medium);
    border-radius: var(--border-radius-sm);
}

.autocomplete-choices::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}

/* --- Suggestion item --- */
.autocomplete-choices .autocomplete-item {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    line-height: 1.4;
    color: var(--color-text);
    cursor: default;
    user-select: none;
    background-color: var(--color-background);
    transition: background-color var(--transition-fast);
    position: relative;
}

.autocomplete-choices .autocomplete-item:hover {
    background-color: var(--color-surface);
}

/* Suggestion secondary text (breadcrumb path, subcategory, etc.) */
.autocomplete-choices .autocomplete-item .autocomplete-path {
    font-size: var(--font-size-xs);
    line-height: 1.3;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.autocomplete-choices .autocomplete-item .autocomplete-matches {
    font-size: var(--font-size-xs);
    line-height: 1.3;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* Highlighted match text */
.autocomplete-choices .autocomplete-item b {
    font-weight: var(--font-weight-medium);
    color: var(--color-autocomplete-highlight, var(--color-primary));
}

/* --- Active state (keyboard-selected) --- */
.autocomplete-choices .autocomplete-item.active {
    background-color: var(--color-autocomplete-active, var(--color-primary));
    color: var(--color-primary-on-dark);
}

.autocomplete-choices .autocomplete-item.active .autocomplete-path,
.autocomplete-choices .autocomplete-item.active .autocomplete-matches {
    color: var(--color-primary-on-dark);
    opacity: 0.8;
}

.autocomplete-choices .autocomplete-item.active b {
    color: var(--color-primary-on-dark);
    font-weight: var(--font-weight-bold);
}

/* --- Selected state (multi-select picked) --- */
.autocomplete-choices .autocomplete-item.selected {
    background-color: var(--color-primary);
    color: var(--color-primary-on-dark);
}

.autocomplete-choices .autocomplete-item.selected b {
    color: var(--color-primary-on-dark);
}

.autocomplete-choices .autocomplete-item.selected.active {
    background-color: var(--color-primary-dark);
    color: var(--color-primary-on-dark);
}


/* --- Type-coded gradient tint indicators --- */
.autocomplete-choices .autocomplete-item[data-type="1"] {
    background: var(--gradient-tint-primary);
}

.autocomplete-choices .autocomplete-item[data-type="2"] {
    background: var(--gradient-tint-secondary);
}

.autocomplete-choices .autocomplete-item[data-type="3"] {
    background: var(--gradient-tint-success);
}

.autocomplete-choices .autocomplete-item[data-type="4"] {
    background: var(--gradient-tint-info);
}

.autocomplete-choices .autocomplete-item[data-type="5"] {
    background: var(--gradient-tint-warning);
}

/* Active state overrides type indicator tint */
.autocomplete-choices .autocomplete-item[data-type].active {
    background: var(--color-primary);
}


/* --- Multi-select checkbox --- */
.autocomplete-choices[selectable-multiple] .autocomplete-item {
    padding-left: calc(var(--spacing-md) + var(--spacing-lg));
}

.autocomplete-choices[selectable-multiple] .autocomplete-item::before {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--spacing-md);
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--color-border-medium);
    border-radius: var(--border-radius-sm);
    background: var(--color-background);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.autocomplete-choices[selectable-multiple] .autocomplete-item.selected::before {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.autocomplete-choices[selectable-multiple] .autocomplete-item.selected::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(var(--spacing-md) + 5px);
    transform: translateY(-60%) rotate(40deg);
    width: 5px;
    height: 10px;
    border-right: 2px solid var(--color-primary-on-dark);
    border-bottom: 2px solid var(--color-primary-on-dark);
}


/* --- Mobile header (synced input + close) --- */
.autocomplete-header {
    display: none;
}

/* --- Loading state --- */
.autocomplete-container[ux-loading] .autocomplete-choices::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    margin: var(--spacing-lg) auto;
    border: 2.5px solid var(--color-border-medium);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: autocompleteSpinner 0.7s linear infinite;
}

.autocomplete-container[ux-loading] .autocomplete-item {
    display: none;
}

@keyframes autocompleteSpinner {
    to { transform: rotate(360deg); }
}

/* --- Empty state --- */
.autocomplete-choices:empty::after {
    content: "No results";
    display: block;
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-style: italic;
}


/* ============================================================================
   SECTION 46B: AUTOCOMPLETE — MOBILE FULL-SCREEN MODAL
   ============================================================================
   When .autocomplete-fullscreen is added (by TypeScript on mobile),
   the autocomplete transforms into a full-viewport overlay with a
   dedicated header containing a synced input and close button.
   Triggered at ≤767px viewport width.
   ============================================================================ */

@media (max-width: 767px) {
    .autocomplete-fullscreen {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
        border: none;
        box-shadow: none;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        background: var(--color-background);
    }

    /* Mobile header visible */
    .autocomplete-fullscreen .autocomplete-header {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
        background: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
        flex-shrink: 0;
    }

    .autocomplete-fullscreen .autocomplete-header input {
        flex: 1;
        border: 1px solid var(--color-border-medium);
        border-radius: var(--border-radius-md);
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-md);
        background: var(--color-background);
        color: var(--color-text);
        outline: none;
        transition: border-color var(--transition-fast);
        font-family: inherit;
    }

    .autocomplete-fullscreen .autocomplete-header input:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 2px var(--color-primary-light);
    }

    /* Close button */
    .autocomplete-fullscreen .autocomplete-close {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--color-surface-darkened);
        border: none;
        border-radius: 50%;
        cursor: pointer;
        font-size: 0;
        text-indent: -9999px;
        background-image: url("/images/icon/close-black.svg");
        background-size: var(--icon-size-sm, 14px);
        background-position: center;
        background-repeat: no-repeat;
        transition: background-color var(--transition-fast);
    }

    .autocomplete-fullscreen .autocomplete-close:hover {
        background-color: var(--color-border-medium);
    }

    /* Choices fill remaining space — !important overrides inline max-height set by JS _position() */
    .autocomplete-fullscreen .autocomplete-choices {
        flex: 1;
        max-height: none !important;
        height: auto !important;
        overflow-y: auto;
        border-radius: 0;
        padding: var(--spacing-xs) 0;
    }

    /* Larger touch targets on mobile */
    .autocomplete-fullscreen .autocomplete-choices .autocomplete-item {
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: var(--font-size-md);
        min-height: 48px;
        display: flex !important; /* Override legacy inline-block */
        flex-wrap: wrap;
        align-items: center;
        column-gap: 0.25em; /* Restore word spacing lost by flexbox between text nodes */
        border-bottom: 1px solid var(--color-border-light, var(--color-border));
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
        touch-action: manipulation; /* Disable double-tap zoom for faster clicks */
    }

    /* Type indicators thicker on mobile */
    .autocomplete-fullscreen .autocomplete-choices .autocomplete-item[data-type] {
        border-left-width: 4px;
        padding-left: calc(var(--spacing-lg) - 4px);
    }

    /* Freeze body scroll when modal is open */
    body:has(.autocomplete-fullscreen) {
        -deisabled-for-now-overflow: hidden; /* REVIEW: this doesn't make sense - this doesn't mean it is open, it could still be hidden*/
    }
}

/* ============================================================================
   SECTION 46C: AUTOCOMPLETE — ACCESSIBILITY
   ============================================================================ */

/* Focus ring on suggestions (keyboard navigation) */
.autocomplete-choices .autocomplete-item:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    z-index: 1;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .autocomplete-container[ux-loading] .autocomplete-choices::before {
        animation: none;
        border-color: var(--color-primary);
        opacity: 0.5;
    }

    .autocomplete-choices .autocomplete-item {
        transition: none;
    }
}

/* High contrast */
@media (forced-colors: active) {
    .autocomplete-container {
        border: 2px solid ButtonText;
    }

    .autocomplete-choices .autocomplete-item.active {
        background: Highlight;
        color: HighlightText;
        forced-color-adjust: none;
    }

    .autocomplete-choices .autocomplete-item[data-type] {
        border-left-color: ButtonText;
    }

    .autocomplete-choices[selectable-multiple] .autocomplete-item::before {
        border-color: ButtonText;
    }

    .autocomplete-choices[selectable-multiple] .autocomplete-item.selected::before {
        background: Highlight;
        border-color: Highlight;
    }
}


/* ==========================================================================
   SECTION 47: SMART FILTER TABS
   Horizontal scrolling tab bar for filtering search results by category.
   Used by: Listings (/listings), Activity (/activity)
   ========================================================================== */

/* --- Tab Container --- */
.smart-filter-tabs {
    background: linear-gradient(180deg, var(--color-surface) 0%, rgba(var(--color-primary-rgb), 0.02) 100%);
    padding: 0;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .smart-filter-tabs::-webkit-scrollbar {
        display: none;
    }

    .smart-filter-tabs .tab-container {
        display: flex;
        gap: 0.5rem;
    }

        .smart-filter-tabs .tab-container::-webkit-scrollbar {
            display: none;
        }

/* --- Individual Tab --- */
.smart-tab {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 0;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: var(--transition-card);
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
    color: rgba(30, 25, 55, 0.65);
    text-decoration: none;
}

    .smart-tab:hover {
        background: var(--color-primary-bg-subtle);
        color: rgba(30, 25, 55, 0.88);
    }

    .smart-tab.active {
        background: var(--color-background);
        border-color: var(--color-primary);
        color: var(--color-primary);
        z-index: 1;
    }

/* --- Tab Icon --- */
/* Uses .icon-svg base class for display/sizing. Only set context size here. */
.smart-tab .tab-icon {
    --icon-size: var(--icon-size-sm);
}

/* --- Tab Text --- */
.smart-tab .tab-text {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-light);
}

    .smart-tab.active .tab-text {
        font-weight: var(--font-weight-semibold);
        color: var(--color-primary);
    }

/* --- Tab Count Badge --- */
.smart-tab .tab-count {
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    padding: 0.125rem 0.375rem;
    border-radius: var(--border-radius-md);
    min-width: 1.25rem;
    text-align: center;
}

    .smart-tab.active .tab-count {
        background: var(--color-primary-lighter);
        color: var(--color-primary);
    }

/* --- Filter Interface Wrapper (contains tabs + filters) --- */
.search-filter-interface {
    background: linear-gradient(180deg, var(--color-surface) 0%, rgba(var(--color-primary-rgb), 0.015) 100%);
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
    overflow: hidden;
    margin-bottom: var(--spacing-sm);
    border: 0;
    border-bottom: 1px solid var(--color-border-primary-faint);
    box-shadow: 0 1px 3px rgba(var(--color-primary-rgb), 0.04);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
}

    /* Fade on right edge for scroll indication using mask-image (stays fixed while content scrolls) */
    .search-filter-interface .smart-filter-tabs {
        -webkit-mask-image: linear-gradient(to right, black calc(100% - 60px), transparent 100%);
        mask-image: linear-gradient(to right, black calc(100% - 60px), transparent 100%);
    }

    /* Remove fade when scrolled to end */
    .search-filter-interface .smart-filter-tabs[ux-scrollcontent-hz-end] {
        -webkit-mask-image: none;
        mask-image: none;
    }

    /* Disable global scroll fade pseudo-elements (using mask-image instead) */
    .search-filter-interface .smart-filter-tabs::before,
    .search-filter-interface .smart-filter-tabs::after {
        display: none !important;
    }

/* --- Responsive --- */
@media (max-width: 768px) {
    .smart-tab {
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .smart-tab .tab-text {
        font-size: var(--font-size-xs);
    }

    .smart-tab .tab-count {
        font-size: 0.625rem;
        padding: 0.0625rem 0.25rem;
    }
}

/* --- Accessibility --- */
@media (prefers-reduced-motion: reduce) {
    .smart-tab {
        transition: none;
    }
}

.smart-tab:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}


/* ==========================================================================
   SECTION 48: SEARCH WELCOME HEADER
   Banner-style welcome section at top of search modules.
   Used by: Listings (/listings — seller), Activity (/activity — messaging)
   ========================================================================== */

/* --- Welcome Container --- */
.search-welcome-header {
    color: white;
    padding: var(--spacing-md) 0;
    border-radius: var(--border-radius-md);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background: var(--gradient-banner);
    margin-bottom: var(--spacing-sm);
}

    /* Decorative radial overlay */
    .search-welcome-header::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        animation: floatAnimation 6s ease-in-out infinite;
    }

/* Hide decorative ::before for authenticated (surface bg doesn't need radial overlay) */
.search-welcome-header.welcome-authenticated::before,
#Body[ux-anon="0"] .search-welcome-header::before {
    display: none;
}

/* Authenticated variant: inline row layout
   Triggered by .welcome-authenticated class OR #Body[ux-anon="0"] (app auth state) */
    .search-welcome-header.welcome-authenticated,
    #Body[ux-anon="0"] .search-welcome-header {
        color: var(--color-text);
        gap: var(--spacing-md);
        padding: var(--spacing-md) var(--spacing-md);
        margin-top: var(--spacing-sm);
        display: flex;
        flex-direction: row;
        flex-basis: 100%;
        align-self: stretch;
        flex-wrap: nowrap;
        border-bottom: none;
        background-color: transparent;
        background-image: linear-gradient(135deg, var(--color-surface) 0%, rgba(var(--color-primary-rgb), 0.04) 50%, rgba(0, 255, 203, 0.015) 100%), linear-gradient(to right, rgba(var(--color-primary-rgb), 0.15), rgba(0, 255, 203, 0.08) 70%, transparent);
        background-size: 100% 100%, 100% 1px;
        background-position: top left, bottom left;
        background-repeat: no-repeat;
    }

/* --- Welcome Content --- */
.search-welcome-header .welcome-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    flex-basis: 100%;
    align-items: center;
    justify-content: center;
    align-self: stretch;
}

.search-welcome-header.welcome-authenticated .welcome-content,
#Body[ux-anon="0"] .search-welcome-header .welcome-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    column-gap: var(--spacing-md);
}

/* --- Title --- */
.search-welcome-header .welcome-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: var(--font-weight-bold);
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: var(--color-white, #fff);
    width: auto;
    order: -1;
}

.search-welcome-header.welcome-authenticated .welcome-title,
#Body[ux-anon="0"] .search-welcome-header .welcome-title {
    color: rgba(30, 25, 55, 0.88);
    font-size: var(--font-size-xxl);
    line-height: 1;
    font-weight: var(--font-weight-bold);
    text-shadow: none;
    letter-spacing: -0.01em;
}

/* --- Subtitle --- */
.search-welcome-header .welcome-subtitle {
    font-size: var(--font-size-lg);
    opacity: 0.95;
    margin: 0;
    line-height: 1.5;
    align-self: center;
    width: auto;
    flex-basis: 100%;
    order: 2;
    text-align: center;
}

.search-welcome-header.welcome-authenticated .welcome-subtitle,
#Body[ux-anon="0"] .search-welcome-header .welcome-subtitle {
    margin: 0;
    line-height: 1.35;
    margin-bottom: 0;
    font-size: var(--font-size-sm);
    text-align: left;
    color: rgba(30, 25, 55, 0.65);
}

/* --- Action Summary Banner --- */
.search-welcome-header .action-summary-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: 2px var(--spacing-xs);
    background: var(--color-glass);
    border: 1px solid rgba(var(--color-error-rgb), 0.3);
    border-radius: var(--border-radius-md);
    backdrop-filter: blur(10px);
    margin-right: 0;
    margin-left: auto;
    order: -10;
    justify-self: flex-end;
    flex: 0;
}

.search-welcome-header .banner-content {
    display: flex;
    align-items: center;
    padding: 0;
    gap: var(--spacing-sm);
    flex-direction: row;
}

.search-welcome-header .action-count {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-error);
    padding: initial;
    min-width: var(--icon-size-lg);
    min-height: var(--icon-size-md);
    color: white;
    border-radius: 50%;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
}

.search-welcome-header .action-text {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    margin-right: auto;
    flex: 1;
}

/* --- Management Controls --- */
.search-welcome-header .welcome-controls {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    justify-content: center;
    margin-top: 0;
    flex-direction: row-reverse;
}

    .search-welcome-header .welcome-controls .command {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
        padding: var(--spacing-xs) var(--spacing-md);
        background: rgba(var(--color-primary-rgb), 0.04);
        border: 1px solid rgba(var(--color-primary-rgb), 0.15);
        border-radius: var(--border-radius-lg);
        color: var(--color-primary);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        text-decoration: none;
        transition: all 0.3s var(--ease-elegant);
        white-space: nowrap;
    }

        .search-welcome-header .welcome-controls .command:hover {
            background: rgba(var(--color-primary-rgb), 0.08);
            border-color: var(--color-primary);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.1);
        }

.search-welcome-header .control-icon {
    display: inline-block;
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    background-size: var(--icon-size-md) var(--icon-size-md);
    background-repeat: no-repeat;
    background-position: center;
    font-size: 0;
    text-indent: -9999px;
    overflow: hidden;
}

.search-welcome-header .control-text {
    font-weight: var(--font-weight-medium);
}

/* --- Summary Metrics --- */
.search-welcome-header .welcome-metrics {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--spacing-sm);
}

    .search-welcome-header .welcome-metrics .metric-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        min-width: 72px;
    }

    .search-welcome-header .welcome-metrics .metric-value {
        font-size: var(--font-size-xl);
        font-weight: var(--font-weight-bold);
        color: white;
    }

    .search-welcome-header .welcome-metrics .metric-label {
        font-size: var(--font-size-sm);
        opacity: 0.9;
        color: var(--color-primary-on-dark, white);
        margin-top: var(--spacing-xs);
    }

.search-welcome-header.welcome-authenticated .welcome-metrics .metric-value,
#Body[ux-anon="0"] .search-welcome-header .welcome-metrics .metric-value {
    color: var(--color-text);
}

.search-welcome-header.welcome-authenticated .welcome-metrics .metric-label,
#Body[ux-anon="0"] .search-welcome-header .welcome-metrics .metric-label {
    color: var(--color-text-muted);
}

/* --- Realtime Status Indicator --- */
.search-welcome-header .realtime-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    opacity: 0.75;
}

.search-welcome-header .status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-success);
}

    .search-welcome-header .status-indicator.connecting {
        background: var(--color-warning);
        animation: pulse 1.5s infinite;
    }

/* --- Responsive --- */
@media (max-width: 768px) {
    .search-welcome-header {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .search-welcome-header.welcome-authenticated,
    #Body[ux-anon="0"] .search-welcome-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .search-welcome-header .welcome-controls {
        width: 100%;
    }

        .search-welcome-header .welcome-controls .command {
            width: 100%;
            justify-content: center;
        }
}

/* --- Accessibility --- */
@media (prefers-reduced-motion: reduce) {
    .search-welcome-header::before {
        animation: none;
    }

    .search-welcome-header .status-indicator.connecting {
        animation: none;
    }
}


/* ==========================================================================
   SECTION 49: SEARCH MODULE LAYOUT
   Structural layout for search module containers, facet selection bar,
   results grid wrapper, pager, and loading overlay.
   NOTE: Filter dialog/drawer styles live with dialogs — not here.
   ========================================================================== */

/* --- Facet Selection Visibility (state toggles via data-facet-selection-count) ---
   Visual/layout rules are in §49C (.filter-track, .filter-pills, .filter-pill).
   These legacy selectors are ONLY kept for the visibility toggle attribute that
   TypeScript still sets. Remove once TS migrates to [data-filter-count]. */
.searchContainer .facetSelection {
    display: none;
}

.searchContainer[data-facet-selection-count] .facetSelection {
    display: flex;
}

.searchContainer[data-facet-selection-count="0"] .facetSelection {
    display: none;
}

.searchContainer[data-facet-selection-count] .modifyCommands {
    display: flex;
}

.searchContainer[data-facet-selection-count="0"] .modifyCommands {
    display: none;
}


/* --- Results Section Header --- */
.search-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) 0 var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    background-image: linear-gradient(
        to right,
        rgba(var(--color-primary-rgb), 0.1),
        rgba(0, 255, 203, 0.05) 70%,
        transparent
    );
    background-size: 100% 1px;
    background-position: bottom left;
    background-repeat: no-repeat;
}

.search-section-header .section-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: rgba(30, 25, 55, 0.88);
    margin: 0;
    letter-spacing: -0.01em;
}

.search-section-header .result-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.search-section-header .section-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    flex-basis: 100%;
}

/* --- Pager / Load More Button ---
   Supports two structures:
   1. Combined: <div class="command search-load-more">...</div>
   2. Wrapper:  <div class="search-load-more"><div class="command">...</div></div>

   Design: "Curated warmth" - inviting, not clinical. Violet-tinted with subtle gradient.
   ========================================================================== */

/* Container wrapper (when used) */
.search-load-more:not(.command) {
    display: flex;
    justify-content: center;
    padding: var(--spacing-xl) 0;
}

/* Base button styles - applies to both structures */
.search-load-more.command,
.search-load-more > .command {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-2xl);
    min-width: 220px;

    /* Warm gradient background with violet tint */
    background: linear-gradient(
        160deg,
        rgba(92, 67, 244, 0.06) 0%,
        rgba(92, 67, 244, 0.03) 50%,
        rgba(0, 255, 203, 0.02) 100%
    );
    border: 1px solid var(--color-border-primary-subtle);
    border-radius: var(--border-radius-full);

    /* Typography */
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    letter-spacing: -0.01em;
    text-decoration: none;

    /* Interaction */
    cursor: pointer;
    transition: var(--transition-card);

    /* Subtle shadow for depth */
    box-shadow:
        0 2px 8px rgba(92, 67, 244, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Hover state - lift with stronger shadow */
.search-load-more.command:hover,
.search-load-more > .command:hover {
    transform: translateY(-2px);
    background: linear-gradient(
        160deg,
        rgba(92, 67, 244, 0.1) 0%,
        rgba(92, 67, 244, 0.05) 50%,
        rgba(0, 255, 203, 0.03) 100%
    );
    border-color: var(--color-primary-border-soft);
    box-shadow:
        0 6px 20px rgba(92, 67, 244, 0.15),
        0 2px 6px rgba(92, 67, 244, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Active/pressed state */
.search-load-more.command:active,
.search-load-more > .command:active {
    transform: translateY(0);
    box-shadow:
        0 2px 4px rgba(92, 67, 244, 0.1),
        inset 0 1px 2px rgba(92, 67, 244, 0.05);
}

/* Text span styling */
.search-load-more .text {
    color: var(--color-primary);
}

/* Loading spinner styling */
.search-load-more img {
    width: 18px;
    height: 18px;
    opacity: 0;
    transition: opacity 0.2s var(--ease-elegant);
    animation: none;
}

/* Loading state - when search is fetching */
[ux-load-results] .search-load-more img,
.search-load-more[loading] img,
.search-load-more.loading img {
    opacity: 1;
    animation: loadMoreSpin 0.8s linear infinite;
}

/* Loading state - button changes */
[ux-load-results] .search-load-more.command,
[ux-load-results] .search-load-more > .command,
.search-load-more[loading].command,
.search-load-more.loading.command {
    pointer-events: none;
    opacity: 0.85;
}

/* Spinner animation */
@keyframes loadMoreSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Center the load-more when it's a direct child of results list */
.search-results > .search-load-more.command {
    display: flex;
    margin: var(--spacing-xl) auto;
}

/* --- Loading Overlay --- */
[search-module] .busy {
    display: none;
    background-color: var(--color-glass-normal);
    backdrop-filter: blur(2px);
    position: static;
    inset: 0;
    max-height: initial;
    z-index: 3;  /* flex-child stacking — intentionally low for internal layering */
    width: auto;
    box-sizing: border-box;
    height: auto !important;
    overflow: visible !important;
    flex: 1;
    flex-basis: 100%;
    max-width: initial;
    align-items: center;
    justify-content: center;
}

[search-module][ux-load-results] .busy {
    display: block;
}

/* --- Active Filters Display (empty-state filter tags) --- */
.active-filters-section {
    padding: var(--spacing-sm) 0;
}

    .active-filters-section h3 {
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin: 0 0 var(--spacing-sm) 0;
    }

.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
}

/* Standalone filter tags (empty-state context) */
.active-filters .filter-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-full, 100px);
    font-size: var(--font-size-sm);
    line-height: 1.4;
    transition: border-color 0.15s var(--ease-elegant);
}

    .active-filters .filter-tag:hover {
        border-color: var(--color-primary);
    }

    .active-filters .filter-tag .filter-label {
        font-weight: var(--font-weight-medium);
        color: var(--color-text-muted);
    }

    .active-filters .filter-tag .filter-value {
        color: var(--color-text);
        font-weight: var(--font-weight-medium);
    }

    .active-filters .filter-tag .filter-remove {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: none;
        border: none;
        color: var(--color-text-muted);
        cursor: pointer;
        font-size: var(--font-size-base);
        line-height: 1;
        transition: all 0.15s var(--ease-elegant);
        padding: 0;
        margin-left: var(--spacing-xs);
    }

        .active-filters .filter-tag .filter-remove:hover {
            background: var(--color-error);
            color: white;
        }

/* Filter tag variants */
.active-filters .filter-tag.keyword-filter {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

.active-filters .filter-tag.category-filter {
    border-color: var(--color-border);
}

.active-filters .filter-tag.dynamic-filter {
    border-style: dashed;
    border-color: var(--color-border);
}

/* ==========================================================================
   SECTION 49C: FILTER BAR COMPONENT
   Horizontal bar with filter trigger button + scrollable pill track.
   Self-contained component — no parent scope required.

   Architecture:
   - .filter-bar              — Container row (trigger + track)
   - .filter-trigger           — Button that opens the filter drawer
   - .filter-track             — Scrollable horizontal container for pills
   - .filter-pills             — Inner flex row of pill items
   - .filter-pill              — Individual pill (group label, unselected)
   - .filter-pill.active       — Selected/applied filter pill (primary bg)
   - .filter-pill.sort         — Sort label variant (no radius)
   - .active-filter            — Applied filter value (primary bg, contains .filter-tag)
   - .clear-all                — "Clear All" link (auto margin-left)

   Visibility (set by TypeScript):
   - [data-filter-count]       — Shows trigger + pills when count > 0
   - [data-filter-count="0"]   — Hides trigger + pills
   ========================================================================== */

/* --- Container --- */
.filter-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--spacing-sm);
    max-width: 100%;
    overflow: hidden;
}

/* --- Trigger Button --- */
.filter-bar .filter-trigger {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: rgba(var(--color-primary-rgb), 0.03);
    border: 1px solid rgba(var(--color-primary-rgb), 0.1);
    border-radius: var(--border-radius-full, 100px);
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-xs);
    line-height: 25px;
    color: var(--color-text-muted);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.25s var(--ease-elegant);
}

    .filter-bar .filter-trigger:hover {
        border-color: var(--color-primary);
        color: var(--color-text);
        background: var(--color-border-primary-faint);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px var(--color-border-primary-faint);
    }

/* --- Pill Track (scrollable container) --- */
.filter-bar .filter-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1;
    min-width: 0;
}

.filter-bar .filter-track::-webkit-scrollbar {
    display: none;
}

/* Disable global scroll fade pseudo-elements for filter track */
.filter-bar .filter-track::before,
.filter-bar .filter-track::after {
    display: none !important;
}

/* Fade on right edge using mask-image (only when content overflows and not scrolled to end) */
.filter-bar .filter-track[ux-scrollcontent-hz]:not([ux-scrollcontent-hz-end]) {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 40px), transparent 100%);
}

/* --- Filter Pills (inner flex row) --- */
.filter-bar .filter-pills {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--spacing-xs);
    align-items: center;
    height: 40px;
}

/* --- Individual Pill --- */
.filter-bar .filter-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--color-primary-rgb), 0.03);
    border: 1px solid rgba(var(--color-primary-rgb), 0.08);
    border-radius: var(--border-radius-full, 100px);
    padding: 0 10px;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: 15px;
    white-space: nowrap;
    cursor: pointer;
    align-self: stretch;
    flex-shrink: 0;
    transition: all 0.25s var(--ease-elegant);
}

.filter-bar .filter-pill:hover {
    color: var(--color-text);
    background: var(--color-border-primary-faint);
    border-color: var(--color-border-primary-subtle);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px var(--color-border-primary-faint);
}

/* Active/selected pill */
.filter-bar .filter-pill.active {
    background: var(--color-primary);
    color: var(--color-primary-on-dark, white);
}

/* Sort pill variant */
.filter-bar .filter-pill.sort {
    color: var(--color-text);
    border-radius: 0;
    border: none;
    background: transparent;
    margin: 0;
    flex: 0;
    gap: var(--spacing-xs);
    order: -100;
}

.filter-bar .filter-pill.sort:hover {
    color: var(--color-primary);
    background: transparent;
    border: none;
    box-shadow: none;
    transform: none;
}

/* --- Active Filter (applied value with remove button) --- */
.filter-bar .active-filter {
    display: inline-flex;
    align-items: center;
    background: var(--color-primary);
    color: var(--color-primary-on-dark, white);
    border-radius: var(--border-radius-full, 100px);
    padding: 0 10px;
    font-size: var(--font-size-xs);
    line-height: 15px;
    align-self: stretch;
    flex-shrink: 0;
}

.filter-bar .active-filter .filter-tag {
    display: inline-flex;
    flex-direction: row;
    gap: var(--spacing-xs);
    align-items: center;
    cursor: default;
    min-height: 25px;
}

.filter-bar .active-filter .filter-remove {
    width: 20px;
    height: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    transition: opacity 0.15s var(--ease-elegant);
}

.filter-bar .active-filter .filter-remove:hover {
    opacity: 1;
}

/* --- Clear All Link --- */
.filter-bar .clear-all {
    margin-left: auto;
    cursor: pointer;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
    transition: color 0.15s var(--ease-elegant);
}

    .filter-bar .clear-all:hover {
        color: var(--color-primary);
    }

/* --- Visibility (data-filter-count) --- */
.filter-bar .filter-trigger,
.filter-bar .filter-pills {
    /* Hidden until TypeScript sets data-filter-count */
}

.filter-bar[data-filter-count="0"] .filter-trigger,
.filter-bar[data-filter-count="0"] .filter-pills {
    display: none;
}

/* --- Mobile: icon-only trigger --- */
@media (max-width: 500px) {
    .filter-bar .filter-trigger {
        text-indent: -9999px;
        padding-right: 0;
        min-width: 40px;
        width: 40px;
        border-radius: 0;
    }
}


/* --- Accessibility --- */
@media (prefers-reduced-motion: reduce) {
    .search-load-more.command,
    .search-load-more > .command {
        transition: none;
        animation: none;
    }

    .search-load-more img {
        animation: none;
    }
}

.search-load-more.command:focus-visible,
.search-load-more > .command:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    box-shadow:
        0 0 0 4px rgba(92, 67, 244, 0.15),
        0 2px 8px rgba(92, 67, 244, 0.08);
}

/* --- Animations used by search components --- */
@keyframes floatAnimation {
    0%, 100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}


/* ==========================================================================
   SECTION 49D: SEARCH MODULE WRAPPER
   Clean wrapper component for the search module root container.
   Replaces legacy .searchModule + .searchContainer pair.

   Architecture:
   .search-module                — Root flex container (centers child content)
   └── .search-container         — Width-constrained content wrapper
       ├── .search-welcome-header
       ├── .search-filter-interface
       │   ├── .smart-filter-tabs
       │   ├── .filters.form
       │   └── .filter-bar
       └── .search-results

   Legacy dual-class mapping:
   .searchModule  → .search-module   (add alongside, do NOT remove)
   .searchContainer → .search-container (add alongside, do NOT remove)

   NOTE: Section 50 (Context State Toggle) still uses the legacy selectors.
   Those rules work via dual-class — no need to duplicate here.
   ========================================================================== */

.search-module {
    padding-right: var(--spacing-sm, 10px);
    padding-left: var(--spacing-sm, 10px);
}

/* --- Search Module (Root Wrapper) --- */
.search-module[search-context-state] > h2 {
    display: none;
}

.search-module[search-context-state] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(
            180deg,
            rgba(var(--color-primary-rgb), 0.012) 0%,
            rgba(var(--color-primary-rgb), 0.006) 40%,
            rgba(0, 255, 203, 0.004) 100%
        );
}

/* --- Search Container (Width Constraint) --- */
.search-container {
    position: relative;
    width: 100%;
    max-width: var(--container-max-width, 1400px);
    padding-bottom: var(--spacing-2xl, 40px);
}

/* Filter bar within search container */
.search-container .filter-bar {
    max-width: 100%;
    overflow: hidden;
    gap: var(--spacing-sm);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}


/* ==========================================================================
   SECTION 49E: SEARCH RESULTS CONTAINER
   Clean wrapper for the search results content area.
   Replaces legacy .searchResults.

   Architecture:
   .search-results               — Results content wrapper
   ├── .search-section-header     — Section header with title + controls
   ├── [result list]              — Domain-specific results grid/list
   ├── .search-load-more          — Pager / load-more button
   ├── .search-empty-state        — Empty state messages
   └── .hud                       — Loading status display

   Legacy dual-class mapping:
   .searchResults → .search-results (add alongside, do NOT remove)
   ========================================================================== */

/* --- Search Results (Content Area) --- */
.search-module .search-results {
    padding-right: var(--spacing-sm, 10px);
    padding-left: var(--spacing-sm, 10px);
}

/* Results list hidden during loading overlay */
[search-module][ux-load-results] .search-results > .list {
    opacity: 0.7;
    pointer-events: none;
}


/* --- Responsive --- */
@media (max-width: 850px) {
    .search-module .search-results {
        position: relative;
        top: 0;
        left: 0;
    }
}


/* ==========================================================================
   SECTION 49B: SEARCH FILTER DIALOG
   Slide-out filter drawer with facet groups, checkboxes,
   sort/distance option lists, and active filter state management.

   Architecture (clean names):
   - .filters.form               — Fixed drawer container (slides from left)
   - .filter-group               — Section wrapper (sort, facets, distance)
   - .filter-group-sort          — Sort options group
   - .filter-group-facets        — Facet checkbox groups
   - .filter-group-distance      — Distance options group
   - .filter-group-base          — Status/purchase option facets (no drill-down)
   - .filter-close               — Close button (drawer context)
   - .filter-cancel              — Cancel/back button (drawer context)
   - .checkbox-all               — Select-all checkbox
   - .facet                      — Individual facet with caption + choices
   - .checkbox                   — Facet checkbox item
   - .autocomplete-container     — Sort/distance option list wrapper
   - .autocomplete-item.item     — Individual sort/distance option

   Legacy → Clean mapping:
   .filterGroup       → .filter-group
   .filterSort        → .filter-group-sort
   .filterFacets      → .filter-group-facets
   .filterDistance     → .filter-group-distance
   .baseFilterGroup   → .filter-group-base
   .dialog-close (drawer) → .filter-close
   .cmdCancel         → .filter-cancel
   .checkboxAll       → .checkbox-all
   .searchModule      → .search-module (parent — Section 49D)
   .searchContainer   → .search-container (parent — Section 49D)

   State attributes (set by TypeScript):
   - [ux-active-filter]                          — Drawer is open
   - [ux-active-filter="Filters"|"Sort"|"Distance"] — Active group
   - [ux-active-facet]                           — Facet drill-down open
   - [ux-active-filter-focus]                    — Focused facet group
   - [filter-focus]                              — Individual facet focus

   Icon mapping for filter button (.cmdChangeFilters::before) lives in
   search.css because it references an image file path.
   ========================================================================== */

/* --- Drawer Container --- */
.filters.form {
    padding: 0 20px 20px;
    border: 0;
    position: fixed;
    top: 0;
    left: -320px;
    width: 360px;
    max-width: 100dvw;
    box-sizing: border-box;
    box-shadow: var(--shadow-sm);
    z-index: var(--z-index-modal, 251);
    border-radius: 0;
    margin: 0;
    height: 100dvh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    transition: left 0.2s var(--ease-elegant);
    background-color: var(--color-background);
}

.filters.form_Dynamic {
    display: none;
}

/* Show drawer when active */
.search-container[ux-active-filter] .filters.form {
    display: flex;
    left: 0;
    flex-direction: column;
}

/* Drawer title */
.filters.form .title {
    color: var(--color-text);
    line-height: 13px;
    font-size: var(--font-size-base);
    display: none;
    padding-right: 160px;
    position: relative;
    top: 5px;
}

.filters.form .title div {
    display: block;
    float: left;
}

.filters.form .title .value {
    clear: both;
    width: 100%;
    margin-bottom: 7px;
    line-height: 16px;
    font-size: var(--font-size-sm);
}

/* Drawer h3 heading */
.filters.form h3 {
    display: none;
}

/* --- Filter Groups --- */
.search-module .filters .filter-group {
    float: left;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: var(--spacing-md);
}

/* Section heading (h3.subcaption) */
.search-module .filters .filter-group .subcaption,
.search-module .filters h3.subcaption {
    font-family: var(--font-family-base);
    text-transform: none;
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text-light, #333);
    display: none;
}

/* Facet heading (h4) */
.search-module .filters .filter-group h4 {
    margin: 2px 0 4px;
    font-size: var(--font-size-xs);
    line-height: 14px;
    color: var(--color-text);
    font-weight: var(--font-weight-normal);
    font-family: var(--font-family-base);
}

/* --- Individual Facets --- */
.search-module .filters .facet {
    margin-bottom: 4px;
    box-sizing: border-box;
    border-top: 1px solid var(--color-border-light, rgba(0, 0, 0, 0.05));
    padding-bottom: var(--spacing-md-10, 10px);
    padding-top: var(--spacing-md-10, 10px);
}

/* Facet caption (clickable heading inside facet) */
.search-module .filters .facet .caption {
    display: none;
}

/* --- Choices Container (scrollable checkbox list) --- */
.search-module .filters .facet .choices {
    height: auto;
    max-height: 140px;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: var(--spacing-md-10, 10px);
    padding-left: var(--spacing-md-10, 10px);
    border-radius: var(--border-radius-sm);
}

/* Scrollbar styling for choices */
.search-module .filters .facet .choices::-webkit-scrollbar {
    width: 8px;
}

.search-module .filters .facet .choices::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: var(--border-radius-sm);
    transition: var(--transition-fast);
}

.search-module .filters .facet .choices::-webkit-scrollbar-thumb:hover {
    background: var(--color-text);
}

.search-module .filters .facet .choices::-webkit-scrollbar-track-piece {
    background: var(--color-surface);
    border-radius: var(--border-radius-sm);
}

/* --- Checkbox Items --- */
.search-module .filters .filter-group .checkbox {
    margin-bottom: 15px;
    border: 0;
    width: 100%;
    display: inline-flex;
    flex-basis: 100%;
    flex-shrink: 1;
    flex-grow: 1;
    align-self: flex-start;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.search-module .filters .filter-group .checkbox input[type="checkbox"] {
    position: relative;
    opacity: 1;
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.search-module .filters .filter-group .checkbox label {
    font-size: var(--font-size-md);
    line-height: 19px;
    padding-left: 0;
    color: var(--color-text);
    font-weight: var(--font-weight-normal);
    font-family: var(--font-family-base);
    cursor: pointer;
    flex: 1;
}

/* --- Base Filter Group (status/purchase option facets) --- */
.search-module .filter-group-base .facet {
    border: 0;
}

.search-module .filter-group-base .facet .caption {
    display: none;
}

.search-module .filter-group-base .caption label {
    font-size: var(--font-size-md);
    line-height: 20px;
    text-transform: none;
    color: var(--color-text);
    margin-top: 20px;
    margin-bottom: 5px;
    font-weight: var(--font-weight-medium, 500);
    padding-left: 0;
    cursor: pointer;
    position: relative;
    top: 0;
    left: 0;
}

.search-module .filter-group-base .caption label::before {
    content: "";
    display: none;
}

.search-module .filter-group-base .facets .caption.selected label,
.search-module .filter-group-base .facets[ux-selected] .caption label {
    color: var(--color-primary);
}

.search-module .filter-group-base .data label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    cursor: pointer;
}

.search-module .filter-group-base .data.selected label {
    color: var(--color-primary);
}

.search-module .filter-group-base .data label .count {
    background: var(--color-surface);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    line-height: 18px;
    padding-left: 4px;
    padding-right: 4px;
    color: var(--color-text);
    font-weight: var(--font-weight-semibold, 600);
}

.search-module .filter-group-base.filter-group .checkbox-all {
    margin-top: 0;
    margin-bottom: 0;
}

/* --- Sort / Distance Autocomplete Lists --- */
.search-module .filters .autocomplete-container {
    width: 100%;
}

.search-module .filters .autocomplete-choices .autocomplete-item.item {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-md);
    line-height: 20px;
    cursor: pointer;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border-light, rgba(0, 0, 0, 0.05));
    transition: background-color 0.15s var(--ease-elegant);
}

.search-module .filters .autocomplete-choices .autocomplete-item.item:hover {
    background-color: var(--color-surface);
}

.search-module .filters .autocomplete-choices .autocomplete-item.item.selected {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium, 500);
    background-color: var(--color-primary-light);
}

/* --- Close / Cancel Buttons --- */
.filters.form > .filter-close,
.filters.form > .filter-cancel {
    display: none;
}

.search-container[ux-active-filter] .filters.form > .filter-close,
.search-container[ux-active-filter] .filters.form > .filter-cancel {
    display: block;
}

.filters.form > .filter-close {
    position: fixed;
    color: var(--color-text);
    top: 5px;
    left: calc(305px);
    width: 40px;
    height: 30px;
    z-index: var(--z-index-tooltip, 255);
    text-indent: -9999px;
    cursor: pointer;
}

.filters.form > .filter-close::after {
    display: block;
    content: "X";
    text-indent: 0;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 24px;
    line-height: 30px;
    font-family: var(--font-family-base);
    text-align: right;
    cursor: pointer;
}

.filters.form > .filter-cancel {
    position: fixed;
    color: var(--color-primary-on-dark, white);
    bottom: 10px;
    left: 0;
    right: 15px;
    width: 100%;
    height: 30px;
    z-index: var(--z-index-tooltip, 255);
    text-indent: -9999px;
    cursor: pointer;
}

.filters.form > .filter-cancel::after {
    display: block;
    content: "or go back";
    text-indent: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    font-size: var(--font-size-md);
    line-height: 20px;
    font-family: var(--font-family-base);
    text-align: center;
    cursor: pointer;
}

/* In-drawer modify commands */
.filters.form .modifyCommands {
    display: block;
    width: 100%;
    position: relative;
    right: 10px;
    padding: 0;
    margin: 0;
    float: none;
    clear: both;
    height: 30px;
}

.filters.form .modifyCommands .command {
    display: block;
    width: auto;
    padding: 5px;
    float: left;
    background-color: var(--color-primary);
    color: var(--color-primary-on-dark, white);
    margin-left: 10px;
}

/* --- Active Filter States --- */

/* Container state when filter dialog open */
.search-container[ux-active-filter] {
    border: 0;
    box-shadow: var(--shadow-md);
    display: block;
}

/* Show main h3 heading inside dialog */
.search-container[ux-active-filter] .filter-group h3 {
    display: block;
}

/* Group padding when active */
.search-container[ux-active-filter] .filter-group {
    border: 0;
    padding-top: 10px;
}

/* Show subcaptions only for sort & distance */
.search-container[ux-active-filter] .filter-group .subcaption {
    display: none;
}

.search-container[ux-active-filter] .filter-group.filter-group-distance .subcaption,
.search-container[ux-active-filter] .filter-group.filter-group-sort .subcaption {
    display: flex;
}

/* Default: hide all groups when drawer is open, then show the active one */
.search-module[ux-active-filter] .filters .filter-group {
    display: none;
}

.search-module[ux-active-filter="Filters"] .filters .filter-group-facets {
    display: flex;
    flex: 1;
    flex-direction: column;
    flex-shrink: 1;
    flex-grow: 0;
    flex-basis: initial;
}

.search-module[ux-active-filter="Sort"] .filters .filter-group-sort {
    display: flex;
    flex-direction: column;
}

.search-module[ux-active-filter="Distance"] .filters .filter-group-distance {
    display: flex;
    flex-direction: column;
}

/* Default: hide facets within groups, then show based on state */
.search-module[ux-active-filter] .filters .filter-group .facets {
    display: none;
}

.search-module[ux-active-filter] .filters .filter-group .facets .facet {
    display: none;
}

.search-module[ux-active-filter="Filters"] .filters .filter-group .facets {
    display: flex;
    flex-direction: column;
}

.search-module[ux-active-filter="Filters"] .filters .filter-group .facets .facet {
    display: flex;
    flex-direction: column;
}

/* --- Facet Drill-Down (caption → choices) --- */

/* Facet caption visible when inside active drawer */
.search-container[ux-active-filter] .filter-group .facets .facet .caption {
    background-color: var(--color-background);
    display: block;
    font-size: var(--font-size-md);
    line-height: 50px;
    margin: 0 0 4px;
    padding: 0 0 0 10px;
    position: relative;
    top: 0;
    left: 0;
    height: 50px;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.24));
    border-radius: 0;
}

/* Chevron arrow on facet caption */
.search-container[ux-active-filter] .filter-group .facets .facet .caption::after {
    content: "›";
    display: block;
    position: absolute;
    width: 20px;
    font-size: 35px;
    line-height: 40px;
    padding: 0;
    font-weight: var(--font-weight-light, 300);
    inset: 0 0 0 auto;
    margin: auto 0 auto auto;
    height: auto;
    color: var(--color-border, rgba(4, 8, 32, 0.7));
}

/* Hide choices by default in drill-down mode */
.search-container[ux-active-filter] .filter-group .facets .facet .choices {
    display: none;
}

/* Show choices when facet is active */
.search-container[ux-active-filter] .filter-group .facets .facet[ux-active-facet] .choices {
    display: flex;
    max-height: initial;
    min-height: initial;
    flex-basis: 100%;
    flex: 1;
    background-color: var(--color-background);
    padding-top: 10px;
    border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
    flex-direction: column;
}

/* When a facet is drilled-in, hide siblings */
.search-container[ux-active-filter][ux-active-facet] .filter-group .facets .facet {
    display: none;
}

.search-container[ux-active-filter][ux-active-facet] .filter-group .facets .facet[ux-active-facet] {
    display: block;
}

/* Back-arrow on active facet caption */
.search-container[ux-active-filter][ux-active-facet] .filter-group .facets .facet[ux-active-facet] .caption {
    border: 0;
    padding-left: 25px;
}

.search-container[ux-active-filter][ux-active-facet] .filter-group .facets .facet[ux-active-facet] .caption::after {
    right: auto;
    left: 5px;
    content: "‹";
    line-height: 50px;
    top: -3px;
}

/* --- Filter Focus States --- */

/* Focus on specific facet group (e.g., smart_filters) */
.search-module[ux-active-filter-focus] .filters .filter-group .facets {
    display: none;
}

.search-module[ux-active-filter-focus] .filters .filter-group .facets .facet {
    display: none;
}

.search-module[ux-active-filter] .filters .filter-group .facets[filter-focus] {
    display: flex;
    flex-direction: column;
}

.search-module[ux-active-filter] .filters .filter-group .facets .facet[filter-focus] {
    display: flex;
    flex-direction: column;
3}

/* --- Specific Filter ID Sizing --- */
.search-module #Filters_ProductSearch,
.search-module #Filters_StockSearch,
.search-module #Filters_ThreadSearch {
    width: 360px;
    max-width: 100dvw;
    box-sizing: border-box;
    padding-top: 40px;
    transition: none;
}

.search-module[ux-active-facet] #Filters_ProductSearch,
.search-module[ux-active-facet] #Filters_StockSearch,
.search-module[ux-active-facet] #Filters_ThreadSearch {
    padding-top: 0;
}

/* Active filter background */
.search-module[ux-active-filter] .filters {
    background-color: var(--color-background);
    text-align: left;
}

/* --- Responsive: Enlarge checkbox labels on mobile --- */
@media only screen and (max-width: 850px) {
    .search-module .filters .filter-group .checkbox label {
        font-size: var(--font-size-md);
        line-height: 25px;
        padding-left: 35px;
    }

    .search-module .filters .filter-group .checkbox {
        margin-bottom: 15px;
    }
}

/* --- Accessibility --- */
@media (prefers-reduced-motion: reduce) {
    .filters.form {
        transition: none;
    }
}

.filters.form > .filter-close:focus-visible,
.filters.form > .filter-cancel:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.search-module .filters .filter-group .checkbox input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.search-module .filters .autocomplete-choices .autocomplete-item.item:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}


/* ==========================================================================
   SECTION 50: SEARCH CONTEXT STATE
   Controls visibility of search module children based on the
   search-context-state attribute (browse/detail) set by TypeScript.

   The parent wrapper (.searchModule) toggles between "browse" and "detail"
   states. Child elements tagged with [search-context="browse"] or
   [search-context="detail"] are shown/hidden accordingly.

   Architecture:
   - Outer wrappers: #Mod_Products, #Mod_Stock, #Mod_Threads
     (.searchModule.module, set search-context-state by TS)
   - Inner search views: #Mod_ProductSearch, #Mod_StockSearch, #Mod_ThreadSearch
     (.searchModule.searchContainer.module, hidden when parent is detail)
   ========================================================================== */

/* --- Context Toggle System --- */

/* Hide all context-tagged children by default */
.searchModule [search-context] {
    display: none;
}
.searchModule #Mod_ThreadSearch[ux-mode] { display:none; }

/* Show browse-tagged children when module is in browse state */
.searchModule[search-context-state="browse"] [search-context="browse"] {
    display: block;
}
.searchModule[search-context-state="browse"] #Mod_ThreadSearch[ux-mode] {
    display: block;
}

/* Show detail-tagged children when module is in detail state */
.searchModule[search-context-state="detail"] [search-context="detail"] {
    display: block;
}

/* --- Detail State: Hide Inner Search Modules --- */
/* When the parent wrapper is in detail state, hide inner search containers.
   This uses .searchContainer to target inner modules (not the wrapper itself). */
[search-context-state="detail"] .searchModule.searchContainer {
    display: none;
}

/* --- Browse State: Search Container Defaults --- */
.searchModule[search-context-state="browse"] .searchContainer {
    margin-top: 0;
    padding-top: 4px;
}

/* --- Nested Module State Combination --- */
/* When outer module is detail but inner search module is browse,
   show the search container (edge case during transitions). */
[search-context-state="detail"] .searchModule[search-context-state="browse"] .searchContainer {
    display: inline-block;
}

/* --- Breadcrumb Navigation: Default State Rules --- */
/* Breadcrumbs within search modules: detail state layout */
.searchModule[search-context-state="detail"] .breadcrumbs,
.search-module[search-context-state="detail"] .breadcrumb-trail {
    max-width: 1100px;
    margin: 0 auto;
    padding: 10px 20px 10px 40px;
}

/* Breadcrumbs: flexbox list layout when context state is set */
.searchModule[search-context-state] .breadcrumbs ul,
.search-module[search-context-state] .breadcrumb-trail .breadcrumb-list {
    display: flex;
    flex: 1;
    width: auto;
    flex-wrap: nowrap;
    flex-direction: row;
}

.searchModule[search-context-state] .breadcrumbs li,
.search-module[search-context-state] .breadcrumb-trail .breadcrumb-item {
    display: inline;
    white-space: nowrap;
    line-height: 30px;
}


/* ==========================================================================
   SECTION 50B: BREADCRUMB TRAIL
   Clean, self-contained breadcrumb navigation component. Replaces the legacy
   `.searchModule .breadcrumbs` pattern from global/search.css with standalone
   styles that don't require a `.searchModule` parent.

   Architecture:
     .breadcrumb-nav             — Outer wrapper (z-index, positioning)
       .breadcrumb-trail         — Inner container (centering, padding, touch scroll)
         .breadcrumb-list        — <ul> inline-flex list with gap
           .breadcrumb-item      — <li> crumb with ::after separator (›)
             .breadcrumb-link    — <a> styled link

   Dual-class migration:
     .breadcrumb-navigation  → .breadcrumb-nav
     .breadcrumbs            → .breadcrumb-trail
     li.breadcrumb           → .breadcrumb-item
     (no legacy)             → .breadcrumb-list (on <ul>)
     (no legacy)             → .breadcrumb-link (on <a>)

   Used by: Store/ItemsPanel, Seller/ItemsPanel, Messaging/ItemsPanel
   ========================================================================== */

/* --- Outer Wrapper --- */
.breadcrumb-nav {
    position: relative;
    top: 0;
    left: 0;
    z-index: var(--z-index-sticky, 4);
    max-width: 100%;
    overflow: hidden;
}

/* --- Inner Container --- */
.breadcrumb-trail {
    margin: 0 auto;
    width: 100%;
    max-width: var(--container-max-width, 1500px);
    text-align: center;
    margin-bottom: var(--spacing-lg, 20px);
    margin-top: 0;
    padding: var(--spacing-md, 16px);
}

/* --- List --- */
.breadcrumb-trail .breadcrumb-list {
    display: inline-flex;
    width: auto;
    align-items: center;
    gap: var(--spacing-xs, 4px);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --- Item --- */
.breadcrumb-trail .breadcrumb-item {
    display: inline-flex;
    align-items: center;
    position: relative;
}

/* Separator chevron (›) */
.breadcrumb-trail .breadcrumb-item::after {
    content: '\203A';
    font-size: var(--font-size-sm, 12px);
    padding-left: var(--spacing-xs, 4px);
    padding-right: var(--spacing-xs, 4px);
    color: var(--color-text-muted, #666666);
}

/* Hide trailing separator */
.breadcrumb-trail .breadcrumb-item:last-child::after {
    display: none;
}

/* --- Link --- */
.breadcrumb-trail .breadcrumb-link {
    font-size: var(--font-size-xs, 11px);
    line-height: var(--font-size-base, 14px);
    margin: 0;
    color: var(--color-primary, #007bff);
    text-decoration: none;
    transition: var(--transition-fast, 0.15s ease-in-out);
    padding: var(--spacing-xs-2, 2px) var(--spacing-xs, 4px);
    border-radius: var(--border-radius-sm, 3px);
}

.breadcrumb-trail .breadcrumb-link:hover {
    color: var(--color-primary-hover, rgba(62, 77, 255, 0.9));
    background-color: var(--color-surface, rgba(0, 0, 0, 0.05));
}

.breadcrumb-trail .breadcrumb-link:focus-visible {
    outline: 2px solid var(--color-primary, currentColor);
    outline-offset: 2px;
}

/* --- Responsive --- */
@media (max-width: 850px) {
    .breadcrumb-trail {
        padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
    }
}

/* --- Horizontal Scroll (Touch) --- */
.breadcrumb-trail[ux-touch-hscroll] {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.breadcrumb-trail[ux-touch-hscroll]::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.breadcrumb-trail[ux-touch-hscroll] .breadcrumb-list {
    display: inline-flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    min-width: 100%;
}

.breadcrumb-trail[ux-touch-hscroll] .breadcrumb-item {
    flex-shrink: 0;
}


/* ==========================================================================
   SECTION 51: ONBOARDING
   Welcome screens, setup wizards, progress indicators, and first-time user
   experience patterns. Reusable across search modules, dialogs, and pages.
   Used by: Listings (/sell) onboarding, payment/meetup setup, post-signup.
   ========================================================================== */

/* --- Container --- */
.onboarding {
    background: var(--gradient-surface-branded);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    margin: var(--spacing-lg);
    margin-top: var(--spacing-lg);
    box-shadow: var(--shadow-md);
    text-align: center;
}

@media (max-width: 600px) {
    .onboarding {
        padding: var(--spacing-md);
        margin: var(--spacing-sm);
    }
}

.onboarding.is-visible {
    animation: fadeInUp 0.6s var(--ease-out);
}

/* --- Content Wrapper --- */
.onboarding .onboarding-content {
    max-width: 700px;
    margin: 0 auto;
}

/* --- Welcome Hero --- */
.onboarding .welcome-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.onboarding .hero-illustration {
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.12));
    animation: fadeInUp 0.8s var(--ease-out);
    justify-self:center; 
    margin-bottom:var(--spacing-sm);
    display:inline-flex;
}

.onboarding .hero-illustration img {
    max-width: 280px;
    height: auto;
    border-radius: var(--border-radius-lg);
    object-fit: cover;
}

.onboarding .hero-text {
    text-align: center;
}

.onboarding .hero-text h2 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 var(--spacing-sm);
    line-height: 1.3;
}

.onboarding .hero-text p {
    font-size: var(--font-size-md);
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0 0 var(--spacing-lg);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.onboarding .hero-cta {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
}

.onboarding .hero-cta .command.btn-primary,
.onboarding .hero-cta .command.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--gradient-primary);
    color: white;
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius-button);
    box-shadow: var(--shadow-button);
    cursor: pointer;
    transition: var(--transition-all);
    font-size: var(--font-size-md);
}

.onboarding .hero-cta .command.btn-primary:hover,
.onboarding .hero-cta .command.btn-primary:hover {
    box-shadow: var(--shadow-button-hover);
    transform: translateY(-2px);
}

.onboarding .hero-cta .command.btn-primary .icon,
.onboarding .hero-cta .command.btn-primary .icon {
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Hero CTA icon background image */
.onboarding .hero-cta .command .icon.icon-camera {
    background-image: url(/images/icon/camera-white.svg);
}

/* --- How It Works Steps --- */
.onboarding .how-it-works {
    margin-bottom: var(--spacing-xl);
}

.onboarding .how-it-works h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0 0 var(--spacing-md);
}

.onboarding .how-it-works .steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--spacing-md);
}

.onboarding .how-it-works .step {
    position: relative;
    padding: var(--spacing-md);
    padding-top: calc(var(--spacing-md) + 28px);
    background: var(--color-glass-semi);
    border: 1px solid var(--color-glass-normal);
    border-radius: var(--border-radius-md);
    text-align: center;
    transition: var(--transition-all);
}

.onboarding .how-it-works .step:hover {
    background: var(--color-surface-elevated);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.onboarding .how-it-works .step-number {
    position: absolute;
    top: calc(-1 * var(--spacing-xs));
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    background: var(--color-primary);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.3);
}

.onboarding .how-it-works .step-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
}

.onboarding .how-it-works .step-icon {
    width: var(--icon-size-xl);
    height: var(--icon-size-xl);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Step icon background images (from /images/icon/) */
.onboarding .how-it-works .step-icon.icon-camera {
    background-image: url(/images/icon/camera-primary.svg);
}

.onboarding .how-it-works .step-icon.icon-label {
    background-image: url(/images/icon/label-primary.svg);
}

.onboarding .how-it-works .step-icon.icon-bolt {
    background-image: url(/images/icon/bolt-primary.svg);
}

.onboarding .how-it-works .step-icon.icon-star {
    background-image: url(/images/icon/star-primary.svg);
}

.onboarding .how-it-works .step-text {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    line-height: 1.4;
}

/* --- Onboarding Tip --- */
.onboarding .onboarding-tip {
    margin: var(--spacing-md) 0;
}

.onboarding .onboarding-tip .tip-content {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: rgba(var(--color-secondary-rgb), 0.08);
    border: 1px solid rgba(var(--color-secondary-rgb), 0.2);
    border-radius: var(--border-radius-md);
    text-align: left;
    margin:auto;
}

.onboarding .onboarding-tip .tip-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Tip icon background image */
.onboarding .onboarding-tip .tip-icon.icon-lightbulb {
    background-image: url(/images/icon/lightbulb-primary.svg);
}

.onboarding .onboarding-tip .tip-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* --- Location Benefits List (meetup onboarding intro) --- */
.onboarding .location-benefits {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin: var(--spacing-lg) auto;
    max-width: 400px;
}

.onboarding .location-benefits .benefit {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.onboarding .location-benefits .benefit-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.onboarding .location-benefits .benefit-text {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* --- Add More Prompt (shown after first listing) --- */
.onboarding .add-more-prompt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(var(--color-primary-rgb), 0.08);
    border: 1px dashed rgba(var(--color-primary-rgb), 0.3);
    border-radius: var(--border-radius-md);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: var(--transition-all);
}

.onboarding .add-more-prompt:hover {
    background: rgba(var(--color-primary-rgb), 0.12);
    border-style: solid;
    box-shadow: var(--shadow-sm);
}

/* --- Progress Indicator --- */
.onboarding .onboarding-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.onboarding .progress-step {
    width: 32px;
    height: 4px;
    background-color: var(--color-border);
    border-radius: 2px;
    transition: var(--transition-all);
}

.onboarding .progress-step.active {
    background-color: var(--color-primary);
}

.onboarding .progress-step.completed {
    background-color: var(--color-secondary);
}

.onboarding .progress-text {
    margin-left: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* --- Step States (active/completed) --- */
.onboarding .how-it-works .step.active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
}

.onboarding .how-it-works .step.completed {
    border-color: var(--color-secondary);
    background: rgba(var(--color-secondary-rgb), 0.05);
}

.onboarding .how-it-works .step.completed .step-number {
    background: var(--color-secondary);
    color: var(--color-text);
}

/* --- Welcome Screen (full-page variant) --- */
.onboarding.welcome-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-radius: 0;
}

.onboarding .welcome-logo {
    margin-bottom: var(--spacing-lg);
}

.onboarding .welcome-logo img {
    max-width: 180px;
    height: auto;
}

/* --- Warning / Disable State --- */
.onboarding .disable-warning {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: rgba(var(--color-warning-rgb), 0.15);
    border-radius: var(--border-radius-md);
    text-align: left;
}

.onboarding .disable-warning .warning-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.onboarding .disable-warning h5 {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--color-warning-dark);
    margin: 0 0 var(--spacing-xs);
}

.onboarding .disable-warning p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    line-height: 1.4;
}

/* --- Disable Action Card (prominent actionable warning) --- */
.onboarding .disable-action-card {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    background: linear-gradient(
        135deg,
        rgba(245, 158, 11, 0.08) 0%,
        rgba(245, 158, 11, 0.02) 100%
    );
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: var(--border-radius-lg);
    text-align: center;
}

.onboarding .disable-action-card .disable-warning {
    margin-bottom: var(--spacing-md);
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
}

.onboarding .disable-action-card .warning-text {
    text-align: left;
}

.onboarding .disable-action-card .command {
    width: 100%;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .onboarding {
        padding: var(--spacing-lg) var(--spacing-md);
        margin: var(--spacing-md);
        margin-top: 0;
    }

    .onboarding .hero-illustration img {
        max-width: 250px;
    }

    .onboarding .hero-text h2 {
        font-size: var(--font-size-h3);
    }

    .onboarding .how-it-works .steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .onboarding .how-it-works .steps {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-sm);
    }

    .onboarding .hero-cta .command.btn-primary,
    .onboarding .hero-cta .command.btn-primary {
        width: 100%;
        justify-content: center;
    }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    .onboarding .hero-illustration,
    .onboarding .how-it-works .step {
        animation: none;
        transition: none;
    }

    .onboarding .how-it-works .step:hover {
        transform: none;
    }

    .onboarding .hero-cta .command.btn-primary:hover,
    .onboarding .hero-cta .command.btn-primary:hover {
        transform: none;
    }
}

/* --- Focus States --- */
.onboarding .hero-cta .command:focus,
.onboarding .add-more-prompt:focus {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

/* --- Payment Option Cards --- */
.onboarding .payment-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.onboarding .payment-option {
    display: block;
    cursor: pointer;
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md);
    background: var(--color-surface);
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    text-align: left;
}

.onboarding .payment-option:hover {
    border-color: var(--color-border-strong);
    background: var(--color-surface-elevated);
}

.onboarding .payment-option:has(.toggle-checkbox:checked) {
    border-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.04);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.12);
}

.onboarding .payment-option:has(.toggle-checkbox:focus-visible) {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.onboarding .payment-option .option-header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.onboarding .payment-option .option-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    margin-top: 2px;
}

.onboarding .payment-option .option-title {
    flex: 1;
    min-width: 0;
}

.onboarding .payment-option .option-title h4 {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.onboarding .payment-option .option-title h4 .status-badge {
    font-size: var(--font-size-xs);
    padding: 2px 6px;
    vertical-align: middle;
}

.onboarding .payment-option .option-subtitle {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
}

.onboarding .payment-option .option-content {
    padding-left: 44px;
}

.onboarding .payment-option .benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.onboarding .payment-option .benefit {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.onboarding .payment-option .benefit .check {
    color: var(--color-success);
    font-weight: bold;
}

/* Position toggle in header */
.onboarding .payment-option .toggle {
    flex-shrink: 0;
    align-self: center;
}

@media (max-width: 480px) {
    .onboarding .payment-option .benefits {
        grid-template-columns: 1fr;
    }

    .onboarding .payment-option .option-content {
        padding-left: 0;
        margin-top: var(--spacing-sm);
    }

    .onboarding .payment-option .option-icon {
        width: 28px;
        height: 28px;
    }

    .onboarding .payment-option .option-title h4 {
        font-size: var(--font-size-base);
    }

    .onboarding .payment-option .option-title h4 .status-badge {
        font-size: 9px;
        padding: 1px 4px;
    }
}

/* --- Payment Onboarding Dialog — back button visibility --- */
/* Back button hidden on initial selection state and terminal success state */
#Dlg_PaymentOnboarding[ux-state="selection"] > .header .dialog-back,
#Dlg_PaymentOnboarding[ux-state="success"] > .header .dialog-back {
    display: none !important;
}

/* --- Identity Verification Panel (full name collection during payment onboarding) --- */
.onboarding .identity-verification-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    margin-top: var(--spacing-lg);
    text-align: left;
}

.onboarding .identity-panel-header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.onboarding .identity-panel-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    margin-top: 2px;
    background: url(/images/icon/user-scan-primary.svg) center / contain no-repeat;
}

.onboarding .identity-panel-text h4 {
    margin: 0 0 4px;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm-medium);
    text-align: left;
}

.onboarding .identity-panel-text p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
    line-height: 1.5;
    text-align: left;
}

.onboarding .identity-verification-panel .form-group {
    margin-bottom: 0;
}

/* --- Security Notice (prominent trust callout) --- */
.onboarding .security-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: rgba(92, 67, 244, 0.05);
    border: 1px solid rgba(92, 67, 244, 0.12);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.onboarding .security-notice-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 1px;
}

.onboarding .security-notice-text a {
    color: var(--color-primary, #5C43F4);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}

/* --- Security Badges (compact inline trust indicators) --- */
.onboarding .security-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.onboarding .security-badge {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-surface-elevated);
    border-radius: var(--border-radius-pill);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.onboarding .security-badge .badge-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.onboarding .security-badge .badge-text {
    white-space: nowrap;
}

/* --- Select with Floating Label --- */
.textbox.select-wrap {
    position: relative;
}

.textbox.select-wrap > select.form-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-md) center;
    padding-right: calc(var(--spacing-md) * 2 + 12px);
    cursor: pointer;
}

/* Base label position for select (placeholder state) */
.textbox.select-wrap > select.form-input + .form-label {
    position: absolute;
    left: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
    pointer-events: none;
    transition: all 0.2s var(--ease-elegant);
    background: transparent;
    padding: 0;
    margin: 0;
    z-index: 1;
    line-height: 1;
}

/* Float label when select is focused or has a value */
.textbox.select-wrap > select.form-input:focus + .form-label,
.textbox.select-wrap[form-child-filled] > select.form-input + .form-label {
    top: 0;
    transform: translateY(-50%);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    background: var(--color-background);
    padding: 0 var(--spacing-sm);
    left: calc(var(--spacing-md) - var(--spacing-sm));
}

.textbox.select-wrap > select.form-input:focus + .form-label {
    color: var(--color-primary);
}


/* --------------------------------------------------------------------------
   SECTION 52: SELLER SCOPE COMPONENTS
   --------------------------------------------------------------------------
   Seller profile patterns used across marketplace pages.
   52A: Seller Scope Banner — social-media-style header for seller store pages
   52B: Seller Info Card — compact inline card on product detail pages
   Page-specific CSS retains ID-based scope visibility rules and background images.
   -------------------------------------------------------------------------- */

/* ==========================================================================
   52A: SELLER SCOPE BANNER
   Social-media-inspired seller header with banner image, overlapping avatar,
   profile info, stats overlay, and action bar.
   Used by: /discover (seller store), ItemsPanel.cshtml
   ========================================================================== */

/* --- Container --- */
.seller-scope-banner {
    position: relative;
    margin-bottom: var(--spacing-lg);
    border-radius: var(--border-radius-card);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    background: var(--color-surface);
}

/* --- Close/Leave Button --- */
.seller-scope-banner .banner-close {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    z-index: 10;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    cursor: pointer;
    transition: background 0.2s var(--ease-elegant), transform 0.2s var(--ease-elegant);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    color: transparent;
    overflow: hidden;
}

.seller-scope-banner .banner-close:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: scale(1.1);
}

/* --- Banner Header (Image Section) --- */
.seller-scope-banner .banner-header {
    position: relative;
    height: 180px;
    flex-basis: 100%;
    overflow: hidden;
}

.seller-scope-banner .banner-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.seller-scope-banner .banner-image img,
.seller-scope-banner .banner-image .banner-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.seller-scope-banner .banner-image .banner-bg {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Gradient overlay for text readability */
.seller-scope-banner .banner-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.15) 40%, rgba(0, 0, 0, 0.55) 100%);
    z-index: 2;
}

/* --- Banner Content (Stats Overlay) --- */
.seller-scope-banner .banner-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

/* --- Seller Stats (on banner) --- */
.seller-scope-banner .seller-stats {
    display: flex;
    gap: var(--spacing-xs);
}

.seller-scope-banner .seller-stats .stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--color-white, #fff);
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-button);
    min-width: 72px;
}

.seller-scope-banner .seller-stats .stat .stat-number {
    font-size: 1.1rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    color: var(--color-white, #fff);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.seller-scope-banner .seller-stats .stat .stat-label {
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* --- Seller Profile Section (below banner) --- */
.seller-scope-banner .seller-profile {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-surface);
    justify-content: space-between;
}

/* Avatar - overlapping banner */
.seller-scope-banner .seller-avatar {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    margin-top: -50px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--color-surface);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background: var(--color-surface);
    z-index: 2;
}

.seller-scope-banner .seller-avatar .avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Seller info text */
.seller-scope-banner .seller-info {
    flex: 1;
    min-width: 0;
    padding-top: var(--spacing-xs);
    text-align: left;
}

.seller-scope-banner .seller-display-name {
    font-size: 1.25rem;
    font-weight: var(--font-weight-bold);
    margin: 0;
    color: var(--color-text);
    line-height: 1.3;
}

.seller-scope-banner .seller-handle {
    font-size: 0.9rem;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-light);
    margin: 0;
    line-height: 1.3;
}

.seller-scope-banner .seller-tagline {
    font-size: 0.9rem;
    color: var(--color-text-warm-body, rgba(30, 25, 55, 0.72));
    margin: var(--spacing-xs) 0 0 0;
    line-height: 1.5;
    max-width: 60ch;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.seller-scope-banner .seller-tagline.ux-empty {
    display: none;
}

/* --- Meta Line (location · rating · join date) --- */
.seller-scope-banner .seller-meta-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin-top: 6px;
    font-size: 0.82rem;
    color: var(--color-text-warm-muted, rgba(30, 25, 55, 0.6));
}

.seller-scope-banner .seller-meta-line > span {
    display: inline-flex;
    align-items: center;
}

.seller-scope-banner .seller-meta-line > span + span::before {
    content: '\00b7';
    margin: 0 6px;
    color: rgba(92, 67, 244, 0.35);
    font-weight: var(--font-weight-bold);
    font-size: 1.2em;
}

/* --- Trust Tier Badge --- */
.trust-tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 8px;
    border-radius: var(--radius-pill, 100px);
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium, 500);
    letter-spacing: 0.01em;
}

.trust-tier-badge.tier-new {
    background: rgba(255, 255, 255, 0.85);
    color: var(--color-text-warm-muted, rgba(30, 25, 55, 0.6));
    border: 1px solid rgba(30, 25, 55, 0.12);
}

.trust-tier-badge.tier-rising {
    background: rgba(255, 255, 255, 0.85);
    color: rgba(92, 67, 244, 0.85);
    border: 1px solid rgba(92, 67, 244, 0.25);
}

.trust-tier-badge.tier-trusted {
    background: rgba(255, 255, 255, 0.85);
    color: rgba(0, 155, 136, 0.9);
    border: 1px solid rgba(0, 188, 165, 0.25);
}

.trust-tier-badge.tier-topseller {
    background: rgba(255, 255, 255, 0.85);
    color: rgba(178, 135, 20, 0.9);
    border: 1px solid rgba(218, 165, 32, 0.25);
}

.trust-tier-badge.tier-elite {
    background: rgba(255, 255, 255, 0.9);
    color: rgba(160, 120, 10, 0.95);
    border: 1px solid rgba(218, 165, 32, 0.35);
    box-shadow: 0 0 6px rgba(218, 165, 32, 0.15);
}

/* Seller pinned badges - compact inline display on seller profile */
.seller-pinned-badges {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.seller-badge-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--border-radius-full);
    background: var(--color-primary-lighter);
    border: 1px solid var(--color-primary-light);
    cursor: default;
    transition: var(--transition-lift);
}

.seller-badge-pill .icon-svg {
    font-size: var(--font-size-xs);
    color: var(--color-primary);
}

.seller-badge-pill:hover {
    background: var(--color-primary-light);
    transform: translateY(-1px);
}

/* --- Profile Actions (Follow/Share) --- */
.seller-scope-banner .seller-profile-actions {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-xs);
    align-items: flex-start;
    flex-shrink: 0;
    padding-top: var(--spacing-xs);
}

.seller-scope-banner .seller-profile-actions .cmdFollow,
.seller-scope-banner .seller-profile-actions .cmdShare {
    white-space: nowrap;
    text-align: center;
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all 0.25s var(--ease-elegant);
}

.seller-scope-banner .seller-profile-actions .cmdFollow {
    background: var(--color-primary);
    color: var(--color-white, #fff);
    border: 2px solid var(--color-primary);
    padding: 6px var(--spacing-lg);
    font-weight: var(--font-weight-semibold);
    box-shadow: 0 2px 8px rgba(92, 67, 244, 0.2);
}

.seller-scope-banner .seller-profile-actions .cmdFollow:hover {
    filter: brightness(1.08);
    box-shadow: 0 4px 14px rgba(92, 67, 244, 0.3);
    transform: translateY(-1px);
}

.seller-scope-banner .seller-profile-actions .cmdFollow.following {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
    box-shadow: none;
}

.seller-scope-banner .seller-profile-actions .cmdFollow.following:hover {
    border-color: var(--color-error);
    color: var(--color-error);
    background: rgba(239, 68, 68, 0.04);
}

.seller-scope-banner .seller-profile-actions .cmdShare {
    background: transparent;
    color: var(--color-text-warm-muted, rgba(30, 25, 55, 0.6));
    border: 1px solid var(--color-border);
    padding: 7px var(--spacing-md);
    font-weight: var(--font-weight-medium);
}

.seller-scope-banner .seller-profile-actions .cmdShare:hover {
    border-color: var(--color-border-primary-subtle, rgba(92, 67, 244, 0.15));
    color: var(--color-text);
    background: var(--color-primary-bg-subtle, rgba(92, 67, 244, 0.02));
}

/* --- Actions Bar --- */
.seller-scope-banner .banner-actions {
    background: var(--color-surface);
    padding: var(--spacing-xs) var(--spacing-lg) var(--spacing-sm);
    display: flex;
    gap: var(--spacing-sm);
    border-top: none;
    background-image: linear-gradient(
        to right,
        rgba(92, 67, 244, 0.08),
        rgba(0, 255, 203, 0.04) 70%,
        transparent
    );
    background-size: 100% 1px;
    background-position: top left;
    background-repeat: no-repeat;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .seller-scope-banner .banner-header {
        height: 140px;
    }

    .seller-scope-banner .banner-close {
        top: var(--spacing-sm);
        right: var(--spacing-sm);
        width: 32px;
        height: 32px;
    }

    .seller-scope-banner .banner-content {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .seller-scope-banner .seller-stats {
        gap: var(--spacing-xs);
    }

    .seller-scope-banner .seller-stats .stat {
        min-width: 60px;
        padding: 3px var(--spacing-xs);
    }

    .seller-scope-banner .seller-stats .stat .stat-number {
        font-size: 0.95rem;
    }

    .seller-scope-banner .seller-stats .stat .stat-label {
        font-size: 0.6rem;
    }

    .seller-scope-banner .seller-profile {
        padding: var(--spacing-sm) var(--spacing-md);
        gap: var(--spacing-sm);
    }

    .seller-scope-banner .seller-avatar {
        width: 64px;
        height: 64px;
        margin-top: -40px;
        border-width: 3px;
    }

    .seller-scope-banner .seller-display-name {
        font-size: 1.1rem;
    }

    .seller-scope-banner .seller-handle {
        font-size: 0.85rem;
    }

    .seller-scope-banner .seller-tagline {
        font-size: 0.85rem;
        -webkit-line-clamp: 2;
    }

    .seller-scope-banner .seller-meta-line {
        font-size: 0.78rem;
    }

    .seller-scope-banner .banner-actions {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .seller-scope-banner .follow-btn {
        padding: var(--spacing-xs) var(--spacing-md);
        font-size: var(--font-size-xs);
    }

    .seller-scope-banner .share-btn {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-xs);
    }
}

@media (max-width: 480px) {
    .seller-scope-banner .banner-header {
        height: 120px;
    }

    .seller-scope-banner .seller-stats {
        gap: 3px;
    }

    .seller-scope-banner .seller-stats .stat {
        min-width: 52px;
        padding: 2px var(--spacing-xs);
    }

    .seller-scope-banner .seller-avatar {
        width: 56px;
        height: 56px;
        margin-top: -35px;
    }

    .seller-scope-banner .seller-display-name {
        font-size: 1rem;
    }

    .seller-scope-banner .seller-handle {
        font-size: 0.8rem;
    }

    .seller-scope-banner .seller-tagline {
        font-size: 0.8rem;
        -webkit-line-clamp: 2;
    }

    .seller-scope-banner .seller-meta-line {
        font-size: 0.7rem;
    }

    .seller-scope-banner .banner-actions {
        flex-wrap: wrap;
    }

    .seller-scope-banner .seller-profile {
        flex-wrap: wrap;
    }

    .seller-scope-banner .seller-profile-actions {
        width: 100%;
        justify-content: flex-start;
        padding-top: 0;
        margin-top: var(--spacing-xs);
    }
}

@media (min-width: 992px) {
    .seller-scope-banner .banner-header {
        height: 200px;
    }
}

/* --- Focus States --- */
.seller-scope-banner .banner-close:focus,
.seller-scope-banner .follow-btn:focus,
.seller-scope-banner .share-btn:focus {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}


/* ==========================================================================
   52B: SELLER INFO CARD
   Compact inline card showing seller profile on product detail pages.
   Avatar + name/stats + follow/store actions in a horizontal flex layout.
   Used by: /discover product detail, ProductSummaryView.cshtml
   ========================================================================== */

/* --- Container --- */
.seller-info-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    transition: border-color 0.2s var(--ease-elegant), box-shadow 0.2s var(--ease-elegant);
}

.seller-info-card:hover {
    border-color: var(--color-border-medium);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* --- Avatar --- */
.seller-info-card .seller-avatar {
    flex-shrink: 0;
}

.seller-info-card .seller-avatar .avatar-link {
    display: block;
    text-decoration: none;
}

.seller-info-card .seller-avatar .avatar-image {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-border-light);
    transition: border-color 0.2s var(--ease-elegant), box-shadow 0.2s var(--ease-elegant);
}

.seller-info-card .seller-avatar .avatar-link:hover .avatar-image {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* --- Details --- */
.seller-info-card .seller-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.seller-info-card .seller-name-row {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs);
    line-height: 1.3;
}

.seller-info-card .seller-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: rgba(30, 25, 55, 0.88);
    text-decoration: none;
}

/* When display name is visible, demote the @username to a subtle handle */
.seller-info-card .seller-display-name:not(.ux-empty):not(:empty) ~ .seller-name-row .seller-name {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-warm-muted);
}

.seller-info-card .seller-name:hover {
    color: var(--color-primary);
}

/* --- Display Name --- */
.seller-info-card .seller-display-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.seller-info-card .seller-display-name.ux-empty,
.seller-info-card .seller-display-name:empty {
    display: none;
}

/* Hidden by default in compact mode - use .seller-info-card-expanded to show */
.seller-info-card .seller-bio,
.seller-info-card .seller-location {
    display: none;
}

.seller-info-card .seller-stats {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.seller-info-card .seller-stats .follower-count strong {
    font-weight: var(--font-weight-semibold);
    color: rgba(30, 25, 55, 0.72);
}

.seller-info-card .seller-stats .rating {
    color: var(--color-text-light);
}

/* --- Actions --- */
.seller-info-card .seller-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.seller-info-card .cmdFollow {
    padding: 6px 16px;
    font-size: var(--font-size-xs);
    border-radius: var(--border-radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-background);
    color: rgba(30, 25, 55, 0.85);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all 0.2s var(--ease-elegant);
}

.seller-info-card .cmdFollow:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.seller-info-card .cmdFollow.following {
    background: rgba(92, 67, 244, 0.08);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.seller-info-card .cmdViewStore {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-decoration: none;
    padding: 0;
    transition: color 0.2s var(--ease-elegant);
}

.seller-info-card .cmdViewStore:hover {
    color: var(--color-primary);
}

/* --- Focus States --- */
.seller-info-card .cmdFollow:focus,
.seller-info-card .cmdViewStore:focus {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}


/* ==========================================================================
   53. BROWSE CARDS
   --------------------------------------------------------------------------
   Horizontal scrolling card row for category / product-type / brand browse
   links.  Shown in the search-result context so users can refine scope.

   Structure:
     .browse-cards                        ← section wrapper (hidden at 0-1 items)
       .browse-cards-title                ← heading  ("By Category", "By Product", …)
       .browse-cards-container            ← overflow wrapper
         .browse-cards-list               ← horizontal flex row (ul)
           .browse-card                   ← individual card (li)
             .browse-card-content         ← inner wrapper
               a                          ← link
                 .browse-card-photo       ← image container
                   img
                 .browse-card-caption     ← text
                   .browse-card-value     ← label
                   .browse-card-count     ← count badge

   Extends: style-cards.css "Search Browse Cards" (legacy)
   ========================================================================== */

/* --- Container --- */
.browse-cards {
    position: relative;
    margin-bottom: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}

.browse-cards[card-count="0"],
.browse-cards[card-count="1"] {
    display: none;
}
#C_Collections[card-count="1"] {
    display: flex;
}

#C_Collections .browse-card-count {
    display: none;
}

/* --- Title --- */
.browse-cards-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--spacing-md) 0;
    color: rgba(30, 25, 55, 0.88);
    letter-spacing: -0.01em;
}

/* --- Overflow container --- */
.browse-cards-container {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: auto;
    max-width: 100%;
    align-items: flex-start;
    align-self: center;
    flex: 1;
}

/* --- Horizontal card list --- */
.browse-cards-list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    height: auto;
}

/* When horizontally scrollable, left-align */
.browse-cards-container[ux-scrollcontent-hz] .browse-cards-list {
    justify-content: flex-start;
}
.browse-cards-container::after {
    display: none !important; /* already handled by parent container */
}


/* --- Individual card --- */
.browse-card {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    align-self: stretch;
    margin: 0 5px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-card);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-light);
    line-height: 1.2;
    transition: var(--transition-card);
    overflow: hidden;
}

.browse-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
}

/* --- Card content wrapper --- */
.browse-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-md);
}

.browse-card-content a {
    text-decoration: none;
    color: inherit;
}

/* --- Photo --- */
.browse-card-photo {
    width: 140px;
    height: 140px;
    overflow: hidden;
    border-radius: var(--border-radius-md);
}

.browse-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-slow);
}

.browse-card:hover .browse-card-photo img {
    transform: scale(1.1);
}

/* --- Caption --- */
.browse-card-caption {
    margin-top: var(--spacing-xs);
    text-align: center;
    max-width: 140px;
    box-sizing: border-box;
}

.browse-card-value {
    color: var(--color-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.browse-card-count {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    white-space: nowrap;
}

/* --- Right-edge scroll fade overlay --- */
.browse-cards::after {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    bottom: 0;
    width: 80px;
    pointer-events: none;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9));
    opacity: 0;
    transition: opacity 0.3s var(--ease-elegant);
}

/* Show fade only when content is scrollable */
.browse-cards:has([ux-scrollcontent-hz])::after {
    opacity: 1;
}

/* Hide fade when scrolled to end */
.browse-cards:has([ux-scrollcontent-hz-end])::after {
    opacity: 0;
}

/* --- Parent container (searchBrowse) --- */
#Mod_ProductBrowse,
.searchBrowse {
    width: auto;
    max-width: 100vw;
    overflow: hidden;
    box-sizing: border-box;
}

/* --- Mobile: Smaller cards on small screens --- */
@media (max-width: 500px) {
    .browse-card-photo {
        width: 110px;
        height: 110px;
    }

    .browse-card-caption {
        max-width: 110px;
    }
}


/* ==========================================================================
   SECTION 54: INBOX ITEM (Thread/Message Card)
   ==========================================================================
   Full-width card for Activity Center thread/message search results.
   Generated by thread.search.draw.ts DrawItem().

   HTML structure:
   .inbox-item [data-new-message]
     .inbox-content
       .inbox-avatar
         img
       .inbox-info
         .inbox-header
           .inbox-username
           .inbox-meta
             .inbox-date
             .inbox-new-indicator (conditional)
         .inbox-payload (conditional — order number)
         .inbox-message (conditional — message preview)
     .inbox-footer
       .inbox-type .{roleClass}
         .type-icon
       .inbox-status
       .inbox-cta
         .command (a)

   Role classes: conversation, transaction, your-purchase, your-sale

   Migrated from: style-messaging-search.css "INBOX ITEM (Wireframe Layout)"
   ========================================================================== */

/* --- Container --- */
.inbox-item {
    background: var(--color-background);
    border: 1px solid var(--color-border-primary-faint, var(--color-border));
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: var(--transition-fast);
    display: flex;
    flex-direction: column;
}

.inbox-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* Unread state — subtle primary tint background (per style guide: no thick colored borders) */
.inbox-item[data-new-message] {
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.04) 0%, rgba(var(--color-primary-rgb), 0.01) 100%);
    border-color: rgba(var(--color-primary-rgb), 0.2);
    box-shadow: var(--shadow-sm), 0 1px 4px rgba(var(--color-primary-rgb), 0.06);
}

.inbox-item[data-new-message]:hover {
    box-shadow: var(--shadow-md), 0 2px 8px rgba(var(--color-primary-rgb), 0.08);
}

/* --- Main content area --- */
.inbox-item .inbox-content {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    flex: 1;
}

/* --- Avatar --- */
.inbox-item .inbox-avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-border);
    box-shadow: var(--shadow-sm);
}

.inbox-item .inbox-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Item thumbnails (replaces avatar when order has photos) --- */
.inbox-item .inbox-thumbs {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-border);
    box-shadow: var(--shadow-sm);
    position: relative;
}

.inbox-item .inbox-thumbs .inbox-thumb-primary {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.inbox-item .inbox-thumbs .inbox-thumb-more {
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--color-bg-overlay, rgba(0, 0, 0, 0.65));
    color: #fff;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    padding: 2px 4px;
    border-radius: var(--radius-sm) 0 0 0;
}

/* --- Info column --- */
.inbox-item .inbox-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* --- Header row: username + meta --- */
.inbox-item .inbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.inbox-item .inbox-username {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-md);
    color: var(--color-text);
    white-space: nowrap;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-item .inbox-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-shrink: 0;
}

.inbox-item .inbox-date {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* --- New message indicator — colored dot --- */
.inbox-item .inbox-new-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-primary);
    display: inline-block;
    box-shadow: 0 0 4px var(--color-primary);
}

/* --- Payload row (order number + items + total) --- */
.inbox-item .inbox-payload {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0;
}

.inbox-item .inbox-order-summary {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.inbox-item .inbox-order-summary::before {
    content: '\00b7';
    margin: 0 6px;
    color: var(--color-text-muted);
}

.inbox-item .inbox-order-total::before {
    content: '\00b7';
    margin: 0 6px;
    color: var(--color-text-muted);
}

.inbox-item .inbox-order-pending {
    font-style: italic;
    color: var(--color-text-muted);
}

/* --- Message preview --- */
.inbox-item .inbox-message {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.inbox-item[data-new-message] .inbox-message {
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
}

/* --- Footer row: type icon, status, CTA --- */
.inbox-item .inbox-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: var(--spacing-xs) var(--spacing-md);
    background: linear-gradient(180deg, var(--color-surface) 0%, rgba(var(--color-primary-rgb), 0.04) 100%);
    border-top: 1px solid var(--color-border);
    gap: var(--spacing-sm);
}

/* --- Type indicator with SVG icon --- */
.inbox-item .inbox-type {
    display: flex;
    align-items: center;
}

.inbox-item .inbox-type .type-icon {
    width: var(--icon-size-lg, 24px);
    height: var(--icon-size-lg, 24px);
    background-size: var(--icon-size-md, 18px) var(--icon-size-md, 18px);
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    overflow: hidden;
    font-size: 0;
    text-indent: -9999px;
    cursor: help;
}

/* Type icon SVGs based on thread category attribute */
.inbox-item[ux-thread-category="0"] .inbox-type .type-icon {
    background-image: url(/images/icon/message-black.svg);
}

.inbox-item[ux-thread-category="1"] .inbox-type .type-icon {
    background-image: url(/images/icon/hand-cash-black.svg);
}

.inbox-item[ux-thread-category="2"] .inbox-type .type-icon {
    background-image: url(/images/icon/bag-black.svg);
}

/* --- Status badge ---
   MIGRATION: Use class="inbox-status status-badge status-pending" (or status-complete, status-cancelled)
   Base styles inherited from Section 11B .status-badge
   Context-specific overrides only below */
.inbox-item .inbox-status {
    /* Inbox-specific: display order and overflow handling */
    order: -1;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Legacy data-status selectors removed — class-based variants (.status-pending, .status-complete, etc.)
   from Section 11B are now the authoritative source. */

/* --- CTA button --- */
.inbox-item .inbox-cta .command {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--color-background);
    color: var(--color-text-warm);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    transition: var(--transition-fast);
    box-shadow: var(--shadow-xs);
}

.inbox-item .inbox-cta .command:hover {
    transform: translateY(-1px);
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    box-shadow: var(--shadow-button);
}

/* --- Responsive --- */
@media (max-width: 480px) {
    .inbox-item .inbox-content {
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .inbox-item .inbox-footer {
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .inbox-item .inbox-avatar,
    .inbox-item .inbox-thumbs {
        width: 40px;
        height: 40px;
    }
}

/* Thread results grid */
.thread-results {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
}


/* ==========================================================================
   55. ICON UTILITIES
   ==========================================================================
   Reusable SVG icon display pattern. Hides emoji/text fallback and renders
   a background-image SVG icon instead.

   USAGE (clean — new HTML):
     <span class="svg-icon svg-icon-sm">fallback</span>

   USAGE (dual-class — extend existing element):
     <span class="icon svg-icon svg-icon-sm">👁</span>

   Contextual aliases below auto-apply the pattern to existing icon elements
   so no HTML changes are needed. search.css / application.css only provide
   background-image URLs.
   ========================================================================== */

/* --- Base pattern + contextual aliases --- */
/* Note: .svg-icon deprecated - use .icon-svg instead (see Icon Library section) */
.product-stats .stat-item .icon,
.product-actions .cmdSaveFavorite .icon,
.product-actions .social-watch-toggle .icon,
.metric-chip .metric-icon,
.listing-card .hint-icon,
.listing-card .action-icon,
.listing-card .no-photo-placeholder .photo-icon {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    font-size: 0;
    text-indent: -9999px;
    overflow: hidden;
}

/* --- Contextual sizes (existing elements, no HTML changes) --- */
.listing-card .hint-icon {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
}

.listing-card .action-icon {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    background-size: var(--icon-size-md) var(--icon-size-md);
}

/* --- Active state icon inversion (white icon on colored bg) --- */
.metric-chip.active .metric-icon {
    filter: brightness(0) invert(1);
}


/* ==========================================================================
   56. DIALOG
   ==========================================================================
   Clean structural components for dialog panels and drawers.

   Framework state management (positioning, view switching, backdrop)
   is in Section 56D below. Domain-specific overrides are in
   individual style-dialog-*.css files (e.g., style-dialog-shop.css).
   These classes provide the VISUAL layer — typography, spacing, colors.

   LEGACY → CLEAN MAPPING:
     .header (in dialog)    → .dialog-header
     .title (in dialog)     → .dialog-title
     .tip (in header)       → .dialog-subtitle
     .dialog-close (in dialog)  → .dialog-close
     .dialog-back (in dialog)  → .dialog-back
     .content (in dialog)   → .dialog-body
     .board (in dialog)     → .dialog-scroll
     .commands (in dialog)  → .dialog-footer
     .hud (in dialog)       → .dialog-status
     .art.busy (in dialog)  → .dialog-loading

   HTML (dual-class migration):
     <div class="view dialog manageDialog" ...>
       <div class="header dialog-header">
         <div class="command cmdClose dialog-close" ...>Close</div>
         <div class="command cmdStack dialog-back" ...>Back</div>
         <div class="title dialog-title">Title</div>
       </div>
       <div class="content form dialog-body" ...>
         <div class="board scrollable dialog-scroll">...</div>
         <div class="commands dialog-footer">
           <div class="hud dialog-status"></div>
           <div class="command cmdSave ctaPrimary btn-primary" ...>Save</div>
           <div class="command cmdCancel ctaAux btn-ghost" ...>Close</div>
         </div>
       </div>
       <div class="dialogs view"></div>
       <div class="art busy dialog-loading">...</div>
     </div>
   ========================================================================== */

/* --- Dialog Header --- */
.dialog-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: var(--spacing-md) var(--spacing-xl);
    box-sizing: border-box;
    background: linear-gradient(
        180deg,
        var(--color-surface) 0%,
        var(--color-background) 100%
    );
    border-bottom: 1px solid var(--color-border);
    z-index: 1;
}


/* --- Dialog Title --- */
.dialog-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    color: var(--color-text-warm, rgba(30, 25, 55, 0.88));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
    letter-spacing: -0.01em;
}

/* --- Dialog Subtitle --- */
.dialog-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted, rgba(0, 0, 0, 0.55));
    font-weight: var(--font-weight-normal);
    margin-top: var(--spacing-xs);
    line-height: var(--line-height-base);
}

/* --- Dialog Close Button --- */
.dialog-close {
    position: absolute;
    right: var(--spacing-lg);
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-image: url("/images/icon/close-black.svg");
    background-position: center;
    background-size: 14px 14px;
    background-repeat: no-repeat;
    text-indent: -9999px;
    cursor: pointer;
    z-index: 2;
    border: none;
    padding: 0;
    opacity: 0.6;
    transition: opacity 0.15s var(--ease-elegant);
}

.dialog-close:hover {
    opacity: 1;
}

/* --- Dialog Back Button --- */
/* Hidden by default. DialogViewBehavior sets [ux-has-back] when there are
   states in the stack to go back to. */
.dialog-back {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: var(--spacing-lg);
    width: 24px;
    height: 24px;
    background-image: url("/images/icon/arrow-left-black.svg");
    background-position: center;
    background-size: 16px 16px;
    background-repeat: no-repeat;
    text-indent: -9999px;
    cursor: pointer;
    z-index: 2;
    border: none;
    padding: 0;
    display: none;
    opacity: 0.7;
    transition: opacity 0.15s var(--ease-elegant);
}

.dialog-back:hover {
    opacity: 1;
}

/* Show back button when panel has states to go back to */
[ux-has-back] .dialog-back {
    display: inline-block;
}

/* --- Dialog Multi-Panel State Management ---
   For dialogs with multiple .content/.dialog-body panels (Pattern A),
   hide all but the first on initial page load. DialogViewBehavior.UpdatePaneVisibility()
   manages visibility via JS after initialization. */
.dialog > .content ~ .content,
.dialog > .dialog-body ~ .dialog-body {
    display: none;
}

/* --- Dialog Body --- */
.dialog-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 1px;
    box-sizing: border-box;
    align-items: stretch;
}

/* --- Dialog Scroll Area --- */
.dialog-scroll {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden auto;
    gap: var(--spacing-sm);
}

/* --- Dialog Footer --- */
.dialog-footer {
    display: flex;
    flex-direction: column; /* Column layout so HUD (order:-2) appears above buttons */
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
    padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md);
    flex-shrink: 0;
    gap: var(--spacing-sm);
    background: linear-gradient( 180deg, transparent 0%, rgba(var(--color-primary-rgb), 0.015) 100% );
    border-top: 1px solid var(--color-border);
}

/* Button row within footer - horizontal layout for action buttons */
.dialog-footer-buttons,
.dialog-footer > .command:not(.dialog-status) {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: var(--spacing-sm);
}

/* When no explicit button wrapper, put commands in a row */
.dialog-footer:not(:has(.dialog-footer-buttons)) {
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
}

/* But if HUD is present and visible, switch to column so error stacks above buttons */
.dialog-footer:has(.dialog-status:not([style*="display: none"]):not([style*="display:none"]):not(:empty)) {
    flex-direction: column;
    flex-wrap: nowrap;
}

    .dialog-footer .command {
        margin: 0;
    }

    .dialog-footer .btn-primary {
        order: 1000; /* Primary button last */
    }

    .dialog-footer .btn-ghost,
    .dialog-footer .btn-secondary {
        font-size: var(--font-size-sm);
    }

/* --- Dialog Footer: Hide Redundant Navigation Buttons ---
   Header already provides: X close (top-right) and back arrow (top-left when [ux-state-stack]).
   Footer Cancel/Close and Back buttons that use standard events are redundant.
   Custom events are preserved (they have behavior beyond simple navigation).
   See: dialog-back-close-cancel-refactor.md for full analysis.
*/

    /* Hide footer Cancel/Close buttons that duplicate header X */
    .dialog-footer > .command.btn-ghost[event-name="ChangeForm-Close"] {
        display: none;
    }

    /* Hide footer Back buttons that duplicate header back arrow */
    .dialog-footer > .command.btn-ghost[event-name="View-PopStateStack"],
    .dialog-footer > .command.btn-secondary[event-name="View-PopStateStack"] {
        display: none;
    }

/* --- Dialog Status (HUD) ---
   Used for validation error messages and status feedback.
   Validation.throwStatus() appends <p> tags for each message.

   Design: Consumer-friendly validation that feels helpful, not punishing.
   - Clear visual distinction between warning (orange) and error (red) states
   - Icon + text for scanability
   - Compact but readable
   - Smooth reveal animation
   ========================================================================== */
#Body .hud.dialog-status, 
.dialog-status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--spacing-xxs);
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    padding-left: calc(var(--spacing-md) + 28px);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    text-align: left;
    /* Default: error state (red) for validation failures */
    color: var(--color-error);
    background-color: var(--color-state-error-bg, rgba(239, 68, 68, 0.06));
    background-image: url(/images/icon/alert-triangle-red.svg);
    background-repeat: no-repeat;
    background-position: left var(--spacing-sm) top var(--spacing-sm);
    background-size: 18px 18px;
    border: 1px solid rgba(var(--color-error-rgb, 239, 68, 68), 0.2);
    border-radius: var(--border-radius-md);
    box-sizing: border-box;
    /* IMPORTANT: Use order to position ABOVE buttons in flex column layout.
       dialog-footer uses flex-direction: column with btn-primary at order: -1.
       HUD needs order: -2 to appear above all buttons when visible. */
    order: -2;
    /* Smooth reveal */
    animation: hudReveal 0.25s var(--ease-elegant) forwards;
    padding-left: var(--spacing-xl) !important; /* need spacing for the icon */
}

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

/* Warning state (orange) - use for informational/non-blocking messages */
.dialog-status.status-warning {
    color: var(--color-warning);
    background-color: rgba(var(--color-warning-rgb, 245, 158, 11), 0.08);
    background-image: url(/images/icon/alert-circle-orange.svg);
    border-color: rgba(var(--color-warning-rgb, 245, 158, 11), 0.25);
}

/* Info state (blue/primary) - use for neutral information */
.dialog-status.status-info {
    color: var(--color-primary);
    background-color: rgba(var(--color-primary-rgb, 92, 67, 244), 0.06);
    background-image: url(/images/icon/alert-primary.svg);
    border-color: rgba(var(--color-primary-rgb, 92, 67, 244), 0.15);
}

/* Success state (green) - use for confirmation messages */
.dialog-status.status-success {
    color: var(--color-success);
    background-color: rgba(var(--color-success-rgb, 34, 197, 94), 0.06);
    background-image: url(/images/icon/check-circle-green.svg);
    border-color: rgba(var(--color-success-rgb, 34, 197, 94), 0.2);
}

/* When HUD is inside dialog-footer, adjust for flex column layout */
.dialog-footer .dialog-status {
    margin: 0; /* Let flex gap handle spacing */
}

/* Validation messages inside dialog-status (multiple <p> tags from Validation.throwStatus) */
.dialog-status p {
    margin: 0;
    line-height: 1.4;
}

/* Separator between multiple messages */
.dialog-status p + p {
    padding-top: var(--spacing-xs);
    margin-top: var(--spacing-xs);
    border-top: 1px solid currentColor;
    border-top-color: rgba(128, 128, 128, 0.15);
}

/* HUD should not display when empty or has display:none */
.dialog-status:empty,
.dialog-status[style*="display: none"],
.dialog-status[style*="display:none"] {
    display: none;
}

/* --- Dialog Loading Overlay --- */
.dialog-loading {
    display: none;
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(2px);
    z-index: 10;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/* Show loading when parent has ux-busy attribute */
[ux-busy] > .dialog-loading {
    display: flex;
}


/* ==========================================================================
   56A-2. DIALOG CONTENT PATTERNS - Inviting UX
   ==========================================================================
   Simple form dialogs should feel inviting like the homepage - not like
   admin database forms. These patterns:

   1. Center content vertically for simple dialogs (not pushed to top)
   2. Use appropriate input widths (phone ≠ full width)
   3. Keep buttons close to content (not stuck at bottom)
   4. Card-like treatment for the form content
   ========================================================================== */

/* --- Simple Form Dialogs: Centered Content Layout --- */
/* Edit Profile dialogs with single-field forms get centered treatment.
   'safe center' centers when content fits, but aligns to flex-start
   when content would overflow — preventing it from going above viewport. */
#Dlg_EditProfile > .content.form.dialog-body {
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    padding: var(--spacing-xl);
}

#Dlg_EditProfile > .content.form.dialog-body > .dialog-scroll {
    flex: 0 1 auto; /* Don't grow to fill space */
    max-width: 100%;
    overflow: auto;
}

/* Board becomes a centered card container */
#Dlg_EditProfile > .content.form.dialog-body .board {
    background: var(--color-background);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--color-border);
    max-width: 380px;
    margin: 0 auto;
}

/* Footer inside simple dialogs - attached to content or bottom */
#Dlg_EditProfile > .content.form.dialog-body > .dialog-footer {
    flex: 0 0 auto;
    flex-direction: row; /* Side-by-side buttons */
    justify-content: center;
    gap: var(--spacing-md);
    max-width: 380px;
    margin: var(--spacing-lg) auto;
    padding: 0;
    background: none;
    border: none;
}

/* When HUD error is visible, stack error above buttons */
#Dlg_EditProfile > .content.form.dialog-body > .dialog-footer:has(.dialog-status:not([style*="display: none"]):not([style*="display:none"]):not(:empty)) {
    flex-direction: column;
    align-items: stretch;
}

/* --- Upload Content Layout --- */
#Dlg_EditProfile > .content.upload.dialog-body .board {
    max-width: 420px; /* Wider for upload dropzone */
}

/* --- Settings Content Layout (wider for toggle forms) --- */
#Dlg_EditProfile > .content.sellersettings.dialog-body .board,
#Dlg_EditProfile > .content.orderapproval.dialog-body .board,
#Dlg_EditProfile > .content.analytics.dialog-body .board,
#Dlg_EditProfile > .content.discoverability.dialog-body .board,
#Dlg_EditProfile > .content.contact.dialog-body .board,
#Dlg_EditProfile > .content.visibility.dialog-body .board,
#Dlg_EditProfile > .content.deletion.dialog-body .board {
    max-width: 520px; /* Wider for settings forms with toggles */
}

#Dlg_EditProfile > .content.notifications.dialog-body .board {
    min-width: 500px;
    max-width: 100%;
}

#Dlg_EditProfile > .content.notifications.dialog-body > .dialog-footer {
    max-width: 100%;
}

#Dlg_EditProfile > .content.sellersettings.dialog-body > .dialog-footer,
#Dlg_EditProfile > .content.orderapproval.dialog-body > .dialog-footer,
#Dlg_EditProfile > .content.analytics.dialog-body > .dialog-footer,
#Dlg_EditProfile > .content.discoverability.dialog-body > .dialog-footer,
#Dlg_EditProfile > .content.contact.dialog-body > .dialog-footer,
#Dlg_EditProfile > .content.visibility.dialog-body > .dialog-footer,
#Dlg_EditProfile > .content.deletion.dialog-body > .dialog-footer {
    max-width: 520px; /* Match board width */
}

/* --- Field-Specific Input Widths --- */
/* Phone numbers don't need full width */
#Dlg_EditProfile > .content.phone .form-input,
#Dlg_EditProfile > .content.email .form-input {
    max-width: 280px;
}

/* Username - medium width */
#Dlg_EditProfile > .content.username .form-input {
    max-width: 240px;
}

/* Display name - slightly wider */
#Dlg_EditProfile > .content.displayname .form-input {
    max-width: 320px;
}

/* Bio/text area - full width is fine */
#Dlg_EditProfile > .content.bio .form-textarea {
    min-height: 120px;
}

/* --- Tips inside dialog cards --- */
#Dlg_EditProfile .board .tip-info,
#Dlg_EditProfile .board .tip-neutral {
    margin-top: var(--spacing-lg);
    margin-bottom: 0;
}

/* --- Upload state: Wider board for uploader UI --- */
#Dlg_EditProfile > .content.upload .board {
    max-width: 420px;
}


/* ==========================================================================
   56A-3. REUSABLE DIALOG PATTERNS
   ==========================================================================
   Apply these classes to any dialog for consistent, inviting UX.
   ========================================================================== */

/* --- .dialog-form-centered: Simple forms with centered card layout --- */
/* Use for: Edit Profile fields, simple confirmations, single-input dialogs */
.dialog-form-centered > .dialog-body,
.dialog-form-centered > .content.dialog-body {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center content */
    padding: var(--spacing-xl);
}

.dialog-form-centered .dialog-scroll {
    flex: 0 1 auto;
    overflow: visible;
}

.dialog-form-centered .board {
    background: var(--color-background);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--color-border);
    max-width: 400px;
    margin: 0 auto;
}

.dialog-form-centered .dialog-footer {
    flex: 0 0 auto;
    flex-direction: row; /* Side-by-side buttons */
    justify-content: center;
    gap: var(--spacing-md);
    max-width: 400px;
    margin: var(--spacing-lg) auto 0;
    padding: 0;
    background: none;
    border: none;
}

/* Selection card improvements for settings forms */
.dialog-form-centered .selection-card-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.dialog-form-centered .selection-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: var(--transition-all);
    background: var(--color-background);
}

.dialog-form-centered .selection-card:hover {
    border-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.02);
}

.dialog-form-centered .selection-card:has(input:checked) {
    border-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.04);
    box-shadow: 0 0 0 1px var(--color-primary);
}

.dialog-form-centered .selection-content {
    flex: 1;
    align-self: flex-start;
}

.dialog-form-centered .selection-indicator {
    flex-shrink: 0;
}

.dialog-form-centered .selection-indicator input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.dialog-form-centered .selection-label {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm-body);
    margin-bottom: var(--spacing-2xs);
}

.dialog-form-centered .selection-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.4;
}

/* Input group styling for settings forms */
.dialog-form-centered .input-group.compact {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    max-width: 180px;
}

.dialog-form-centered .input-group.compact .form-field {
    flex: 1;
}

.dialog-form-centered .input-group.compact .form-input {
    text-align: center;
    padding: var(--spacing-sm) var(--spacing-md);
}

.dialog-form-centered .input-group .input-prefix,
.dialog-form-centered .input-group .input-suffix {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.dialog-form-centered .input-group.currency {
    max-width: 160px;
}

.dialog-form-centered .input-group.currency .input-prefix {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-warm-body);
}

/* --- .dialog-form-compact: Tighter spacing for inline dialogs --- */
.dialog-form-compact .board {
    padding: var(--spacing-lg);
}

.dialog-form-compact .form-group {
    margin-bottom: var(--spacing-sm);
}

/* --- .dialog-static-labels: Use static labels instead of floating --- */
.dialog-static-labels .form-group .form-label {
    position: static;
    transform: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-warm-body);
    margin-bottom: var(--spacing-xs);
    padding: 0;
    background: none;
}

.dialog-static-labels .form-group .form-input,
.dialog-static-labels .form-group .form-textarea {
    padding-top: var(--spacing-md);
}

.dialog-static-labels .form-group .form-input::placeholder {
    opacity: 0.5;
}

/* --- Input width utilities for dialogs --- */
.dialog-input-narrow .form-input { max-width: 200px; }
.dialog-input-phone .form-input { max-width: 280px; }
.dialog-input-email .form-input { max-width: 320px; }
.dialog-input-medium .form-input { max-width: 300px; }
.dialog-input-wide .form-input { max-width: 400px; }


/* ==========================================================================
   56A-4. UPLOAD DROPZONE
   ==========================================================================
   Drag-and-drop file upload zone for images (avatars, banners, photos).
   Uses the "Dashed Add" invitation pattern from style-guide.md.

   States:
     [default]           - Empty, waiting for file
     [ux-has-preview]    - Showing preview image
     [ux-uploading]      - Upload in progress
     [ux-drag-hover]     - File being dragged over (set via JS)

   Structure:
     .upload-dropzone
       .upload-dropzone-content
         .upload-dropzone-icon
         .upload-dropzone-label
         .upload-dropzone-hint
       .upload-dropzone-preview
         .upload-dropzone-preview-image
         .upload-dropzone-preview-change
       .upload-dropzone-progress
         .upload-dropzone-progress-text
         .upload-dropzone-progress-bar
           .upload-dropzone-progress-fill

   Dual-class migration:
     .uploader     → .upload-dropzone
     .preview      → .upload-dropzone-preview
     .cmdUpload    → .upload-dropzone-content (trigger area)
     .progress     → .upload-dropzone-progress
   ========================================================================== */

/* --- Base Container --- */
.upload-dropzone,
.uploader.upload-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    padding: var(--spacing-xl);
    border: 2px dashed rgba(92, 67, 244, 0.2);
    border-radius: var(--border-radius-lg);
    background: linear-gradient(
        135deg,
        rgba(92, 67, 244, 0.02) 0%,
        rgba(0, 255, 203, 0.015) 100%
    );
    cursor: pointer;
    transition:
        border-color 0.35s var(--ease-elegant),
        background 0.35s var(--ease-elegant),
        transform 0.35s var(--ease-elegant),
        box-shadow 0.35s var(--ease-elegant);
    overflow: hidden;
    min-width:320px;
}

.upload-dropzone:hover {
    border-color: var(--color-primary);
    background: linear-gradient(
        135deg,
        rgba(92, 67, 244, 0.05) 0%,
        rgba(0, 255, 203, 0.03) 100%
    );
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(92, 67, 244, 0.08);
}

.upload-dropzone:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(92, 67, 244, 0.06);
}

/* --- Drag Hover State (enhanced feedback) --- */
/* Supports both [ux-drag-hover] attribute and framework's .dragover class */
.upload-dropzone[ux-drag-hover],
.upload-dropzone.dragover {
    border-color: var(--color-primary);
    border-style: solid;
    background: linear-gradient(
        135deg,
        rgba(92, 67, 244, 0.08) 0%,
        rgba(0, 255, 203, 0.05) 100%
    );
    transform: translateY(-2px) scale(1.01);
    box-shadow:
        0 8px 24px rgba(92, 67, 244, 0.12),
        inset 0 0 0 1px rgba(92, 67, 244, 0.1);
}

.upload-dropzone[ux-drag-hover] .upload-dropzone-icon,
.upload-dropzone.dragover .upload-dropzone-icon {
    transform: scale(1.1);
    color: var(--color-primary);
}

/* --- Click Trigger Wrapper (required by UploadBehavior) --- */
.upload-dropzone-trigger,
.upload-dropzone .cmdUpload.upload-dropzone-trigger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: inherit;
    cursor: pointer;
}

/* --- Empty State Content --- */
.upload-dropzone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    text-align: center;
    transition: opacity 0.25s var(--ease-elegant);
}

.upload-dropzone[ux-has-preview] .upload-dropzone-content,
.upload-dropzone[ux-uploading] .upload-dropzone-content {
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

/* Upload Icon */
.upload-dropzone-icon {
    width: 48px;
    height: 48px;
    margin-bottom: var(--spacing-xs);
    color: rgba(92, 67, 244, 0.4);
    transition:
        transform 0.35s var(--ease-elegant),
        color 0.35s var(--ease-elegant);
}

.upload-dropzone:hover .upload-dropzone-icon {
    color: var(--color-primary);
    transform: translateY(-2px);
}

/* Label text */
.upload-dropzone-label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: rgba(30, 25, 55, 0.78);
}

.upload-dropzone-label strong {
    color: var(--color-primary);
}

/* Hint text (formats, size limits) */
.upload-dropzone-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--spacing-xs);
}

/* --- Preview State --- */
.upload-dropzone-preview,
.upload-dropzone .preview.upload-dropzone-preview {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

.upload-dropzone[ux-has-preview] .upload-dropzone-preview {
    display: flex;
}

/* Preview image container */
.upload-dropzone-preview-image {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--color-background);
    box-shadow:
        0 4px 12px rgba(92, 67, 244, 0.1),
        0 0 0 1px rgba(92, 67, 244, 0.08);
    transition:
        transform 0.35s var(--ease-elegant),
        box-shadow 0.35s var(--ease-elegant);
}

.upload-dropzone:hover .upload-dropzone-preview-image {
    transform: scale(1.02);
    box-shadow:
        0 8px 20px rgba(92, 67, 244, 0.15),
        0 0 0 1px rgba(92, 67, 244, 0.12);
}

.upload-dropzone-preview-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Banner variant - rectangular preview */
.upload-dropzone[data-upload-type="banner"] .upload-dropzone-preview-image {
    width: 100%;
    max-width: 280px;
    height: 80px;
    border-radius: var(--border-radius-md);
}

/* Change button below preview */
.upload-dropzone-preview-change {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--border-radius-full);
    background: rgba(92, 67, 244, 0.06);
    transition: background 0.25s var(--ease-elegant);
}

.upload-dropzone:hover .upload-dropzone-preview-change {
    background: rgba(92, 67, 244, 0.1);
}

/* --- Uploading State --- */
.upload-dropzone-progress,
.upload-dropzone .progress.upload-dropzone-progress {
    display: none;
    position: absolute;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    background: linear-gradient(
        135deg,
        rgba(92, 67, 244, 0.03) 0%,
        rgba(0, 255, 203, 0.02) 100%
    );
    border-radius: var(--border-radius-lg);
}

.upload-dropzone[ux-uploading] .upload-dropzone-progress {
    display: flex;
}

.upload-dropzone[ux-uploading] {
    cursor: default;
    pointer-events: none;
}

.upload-dropzone-progress-text {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: rgba(30, 25, 55, 0.72);
}

.upload-dropzone-progress-bar {
    width: 80%;
    max-width: 200px;
    height: 4px;
    background: rgba(92, 67, 244, 0.1);
    border-radius: var(--border-radius-full);
    overflow: hidden;
    position: relative;
}

.upload-dropzone-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(
        90deg,
        var(--color-primary) 0%,
        rgba(0, 255, 203, 0.8) 100%
    );
    border-radius: var(--border-radius-full);
    transition: width 0.3s ease-out;
}

/* Animated shimmer during upload */
.upload-dropzone[ux-uploading] .upload-dropzone-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%
    );
    animation: upload-shimmer 1.5s infinite;
}

@keyframes upload-shimmer {
    0% { transform: translateX(0); }
    100% { transform: translateX(200%); }
}

/* --- Compact Variant (for inline use) --- */
.upload-dropzone.upload-dropzone-compact {
    min-height: 120px;
    padding: var(--spacing-lg);
}

.upload-dropzone-compact .upload-dropzone-icon {
    width: 36px;
    height: 36px;
}

.upload-dropzone-compact .upload-dropzone-preview-image {
    width: 80px;
    height: 80px;
}

/* --- Focus state for accessibility --- */
.upload-dropzone:focus-visible {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

/* ==========================================================================
   56A-5. UPLOAD PROGRESS MODULE (Framework-generated)
   ==========================================================================
   The UploadProgressModel in WebClientTypescript creates .progress.module
   elements dynamically. This styles them when inside .upload-dropzone.

   Framework structure:
     .progress.module[.running|.complete|.error|.cancelled]
       .content
         .text
         .bar
         .status
         .command.cmdCancel
   ========================================================================== */

/* --- Progress Module inside Upload Dropzone --- */
.upload-dropzone > .progress.module {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(248, 247, 252, 0.95) 100%
    );
    border-radius: var(--border-radius-lg);
    z-index: 10;
    animation: progress-fade-in 0.25s var(--ease-elegant);
}

@keyframes progress-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.upload-dropzone > .progress.module > .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    max-width: 240px;
    padding: var(--spacing-lg);
}

/* Status text */
.upload-dropzone > .progress.module .text {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: rgba(30, 25, 55, 0.72);
    text-align: center;
}

/* Progress bar - framework sets width via inline style */
/* The .bar element IS the fill; we create a track with a wrapper pseudo-element */
.upload-dropzone > .progress.module > .content {
    position: relative;
}

/* Track background - sits behind the bar */
.upload-dropzone > .progress.module > .content::after {
    content: '';
    display: block;
    width: 100%;
    max-width: 200px;
    height: 4px;
    background: rgba(92, 67, 244, 0.1);
    border-radius: var(--border-radius-full);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /* Position at same level as bar */
    order: 1;
}

/* Progress bar fill - sized by framework inline width */
.upload-dropzone > .progress.module .bar {
    height: 4px;
    max-width: 200px;
    background: linear-gradient(
        90deg,
        var(--color-primary) 0%,
        rgba(0, 255, 203, 0.8) 100%
    );
    border-radius: var(--border-radius-full);
    transition: width 0.3s ease-out;
    position: relative;
    z-index: 1;
}

/* Running state - animated shimmer on the bar fill */
.upload-dropzone > .progress.module.running .bar {
    overflow: hidden;
}

.upload-dropzone > .progress.module.running .bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.5) 50%,
        transparent 100%
    );
    animation: upload-shimmer 1.5s infinite;
}

/* Complete state */
.upload-dropzone > .progress.module.complete {
    animation: progress-complete 0.3s var(--ease-elegant);
}

.upload-dropzone > .progress.module.complete .text {
    color: var(--color-success, #22c55e);
}

.upload-dropzone > .progress.module.complete::before {
    content: '';
    width: 40px;
    height: 40px;
    margin-bottom: var(--spacing-sm);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

@keyframes progress-complete {
    0% { transform: scale(0.95); opacity: 0.8; }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); opacity: 1; }
}

/* Error state */
.upload-dropzone > .progress.module.error .text {
    color: var(--color-error, #ef4444);
}

.upload-dropzone > .progress.module.error::before {
    content: '';
    width: 40px;
    height: 40px;
    margin-bottom: var(--spacing-sm);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Cancel button */
.upload-dropzone > .progress.module .cmdCancel {
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--border-radius-full);
    background: rgba(92, 67, 244, 0.06);
    cursor: pointer;
    transition: all 0.25s var(--ease-elegant);
}

.upload-dropzone > .progress.module .cmdCancel:hover {
    background: rgba(92, 67, 244, 0.12);
    color: var(--color-primary);
}

/* Status element (usually hidden) */
.upload-dropzone > .progress.module .status {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    display: none;
}


/* ==========================================================================
   56B. DRAWER VARIANT
   ==========================================================================
   Drawers are dialogs that slide in from the right edge of the viewport.
   Uses the same inner structure (dialog-header, dialog-body, etc.)
   with additional layout overrides for the right-slide presentation.

   In the legacy system, drawers use ux-change-form + ux-workspace-dialog
   attributes. The .dialog-drawer class provides a clean CSS-only layer.

   HTML:
     <div class="view dialog manageDialog dialog-drawer" ux-change-form ...>
       <div class="header dialog-header">...</div>
       <div class="content form dialog-body">...</div>
     </div>
   ========================================================================== */

/* --- Card Appearance (Standalone) ---
   .dialog-drawer should look like a complete card without needing #Interactions.
   Position/visibility is handled by framework; appearance is self-contained. */
.dialog-drawer {
    display: flex;
    flex-direction: column;
    max-height: 100dvh;
    overflow: hidden;

    /* Card appearance - works standalone without parent context */
    background: var(--color-background);
    border-radius: 0;
    box-shadow: var(--shadow-lg);
}

/* --- Mobile: Bottom-sheet style with backdrop peek and swipe-to-close --- */
@media (max-width: 520px) {
    .dialog-drawer:not(.dialog-menu):not(.filter-dialog) {
        max-height: calc(100dvh - 48px);
        margin-top: auto;
        border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
        transition: transform 0.25s var(--ease-elegant);
    }

    /* Grab bar - centered pill above header content */
    .dialog-drawer:not(.dialog-menu):not(.filter-dialog) > .dialog-header::before {
        content: '';
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        background: rgba(0, 0, 0, 0.2);
        border-radius: var(--border-radius-full);
    }

    .dialog-drawer:not(.dialog-menu):not(.filter-dialog) > .dialog-header {
        position: relative;
        padding-top: 18px;
        border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
        cursor: grab;
    }

    /* While being dragged */
    .dialog-drawer:not(.dialog-menu):not(.filter-dialog)[ux-swiping] {
        transition: none;
    }

    /* Menu/filter drawers: swipe right to close */
    .dialog-drawer.dialog-menu,
    .dialog-drawer.filter-dialog {
        transition: transform 0.25s var(--ease-elegant);
    }

    .dialog-drawer.dialog-menu[ux-swiping],
    .dialog-drawer.filter-dialog[ux-swiping] {
        transition: none;
    }

    .dialog-drawer.dialog-menu > .dialog-header,
    .dialog-drawer.filter-dialog > .dialog-header {
        cursor: grab;
    }

    /* Vertical grab handle on left edge of side-sliding drawers */
    .dialog-drawer.dialog-menu::before,
    .dialog-drawer.filter-dialog::before {
        content: '';
        position: absolute;
        left: 4px;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 36px;
        background: rgba(0, 0, 0, 0.15);
        border-radius: var(--border-radius-full);
        z-index: 1;
        pointer-events: none;
    }
}

.dialog-drawer > .dialog-header {
    position: sticky;
    top: 0;
    left: 0;
    min-height: 56px;
    height: auto;
    max-height: none;
    flex-shrink: 0;
    background: linear-gradient(
        180deg,
        var(--color-surface) 0%,
        var(--color-background) 100%
    );
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.dialog-drawer > .dialog-body {
    flex: 1;
    overflow: hidden;
}

.dialog-drawer > .dialog-body > .dialog-scroll {
    flex: 1;
    overflow: hidden auto;
    padding-bottom: var(--spacing-sm);
}

.dialog-drawer .dialog-footer {
    flex-shrink: 0;
    padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-lg);
    background: linear-gradient(
        180deg,
        var(--color-background) 0%,
        var(--color-surface) 100%
    );
    border-top: 1px solid var(--color-border);
}

/* --- Fix: Dialog footer nested inside scroll area ---
   When .dialog-footer is incorrectly nested inside .dialog-scroll (inside .board),
   it inherits the board's padding. Use negative margins to break out and be full-width.
   This provides backwards compatibility while dialogs are migrated to proper structure. */
.dialog-scroll > .dialog-footer,
.board.dialog-scroll > .dialog-footer {
    margin-left: calc(-1 * var(--spacing-lg));
    margin-right: calc(-1 * var(--spacing-lg));
    margin-bottom: calc(-1 * var(--spacing-lg));
    width: calc(100% + var(--spacing-lg) * 2);
    margin-left: 0;
    margin-right: 0;
}


/* --- 56B-2. Menu Drawer Variant ---
   Narrower drawer for navigation menus and context actions.
   Apply .dialog-menu alongside .dialog-drawer for constrained width. */
.dialog-menu {
    max-width: 380px;
}

@media (max-width: 400px) {
    .dialog-menu {
        max-width: 100%;
    }
}


/* ==========================================================================
   56B-3. PUBLISH WIZARD DIALOG
   ==========================================================================
   Multi-state publishing flow dialog. Scoped styles for each wizard state.
   Base structure handled by .dialog-drawer; these add state-specific polish.
   ========================================================================== */

/* --- Shared Publish Wizard Styles --- */
#Dlg_PublishWizard .board {
    padding: var(--spacing-lg) var(--spacing-xl);
    max-width: min(500px, 100%);
    margin: 0 auto;
}

#Dlg_PublishWizard .family-selection {
    margin-bottom: var(--spacing-lg);
}

#Dlg_PublishWizard .impact-section {
    margin-bottom: var(--spacing-md);
}

#Dlg_PublishWizard .impact-section h5 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm-medium);
    margin-bottom: var(--spacing-sm);
}

#Dlg_PublishWizard .impact-list {
    gap: var(--spacing-sm);
}

#Dlg_PublishWizard .impact-list .checklist-item {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-success-light);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
}

/* --- Update State: Polished Pending Changes --- */
#Dlg_PublishWizard .content.update .pending-changes-section {
    margin-bottom: var(--spacing-lg);
}

#Dlg_PublishWizard .content.update .pending-changes-section h5 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm-medium);
    margin-bottom: var(--spacing-sm);
}

#Dlg_PublishWizard .content.update .changes-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

#Dlg_PublishWizard .content.update .change-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    /* Gradient tint instead of hard border-left (per style-guide anti-patterns) */
    background: linear-gradient(
        90deg,
        var(--color-warning-light) 0%,
        var(--color-warning-lighter) 100%
    );
    border-radius: var(--border-radius-md);
}

#Dlg_PublishWizard .content.update .change-item .icon-svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

#Dlg_PublishWizard .content.update .change-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-body);
    line-height: 1.4;
}

/* Live data tip - subtle helper text */
#Dlg_PublishWizard .content.update .live-data-tip {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border-light);
    font-size: var(--font-size-xs);
    color: var(--color-text-warm-muted);
    line-height: 1.5;
}

/* --- Reconciliation State: Mode Change Review --- */
#Dlg_PublishWizard .mode-change-flow {
    display: flex;
    align-items: stretch;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

#Dlg_PublishWizard .mode-change-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--spacing-md);
    border-radius: var(--border-radius-card);
    border: 1px solid var(--color-border);
    background: var(--color-background);
    transition: var(--transition-card);
}

#Dlg_PublishWizard .mode-change-from {
    background: var(--color-surface);
    opacity: 0.8;
}

#Dlg_PublishWizard .mode-change-to {
    border-color: rgba(var(--color-primary-rgb), 0.3);
    box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(var(--color-primary-rgb), 0.08);
}

#Dlg_PublishWizard .mode-change-label {
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-warm-muted);
}

#Dlg_PublishWizard .mode-change-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
}

#Dlg_PublishWizard .mode-change-desc {
    font-size: var(--font-size-xs);
    color: var(--color-text-warm-muted);
    line-height: var(--line-height-relaxed);
}

#Dlg_PublishWizard .mode-change-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
}

#Dlg_PublishWizard .mode-change-arrow .icon-svg {
    width: 16px;
    height: 16px;
    opacity: 0.4;
}

#Dlg_PublishWizard .mode-implications {
    margin-top: 0;
}

#Dlg_PublishWizard .mode-implications ul {
    margin: var(--spacing-xs) 0 0;
    padding-left: var(--spacing-md);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
}

#Dlg_PublishWizard .mode-implications ul li {
    margin-bottom: 2px;
}

/* --- Confirm State: Tighten spacing --- */
#Dlg_PublishWizard .content.confirm .impact-section {
    margin-top: var(--spacing-md);
}

/* --- Success/Uptodate States: Celebration --- */
#Dlg_PublishWizard .content.success .success-illustration,
#Dlg_PublishWizard .content.uptodate .success-illustration {
    text-align: center;
    margin-bottom: var(--spacing-md);
}

#Dlg_PublishWizard .content.success .success-illustration img,
#Dlg_PublishWizard .content.uptodate .success-illustration img {
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
}

#Dlg_PublishWizard .content.success h4,
#Dlg_PublishWizard .content.uptodate h4 {
    text-align: center;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-warm);
    margin-bottom: var(--spacing-xs);
}

#Dlg_PublishWizard .content.success .dialog-subtitle,
#Dlg_PublishWizard .content.uptodate .dialog-subtitle {
    text-align: center;
    color: var(--color-text-warm-muted);
    margin-bottom: var(--spacing-lg);
}

#Dlg_PublishWizard .next-steps-section {
    margin-top: var(--spacing-lg);
}

#Dlg_PublishWizard .next-steps-section h5 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm-medium);
    margin-bottom: var(--spacing-sm);
}

/* Path cards for next actions - compact horizontal layout */
#Dlg_PublishWizard .path-cards {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

#Dlg_PublishWizard .path-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: var(--transition-fast);
}

#Dlg_PublishWizard .path-card:hover {
    background: var(--color-primary-lighter);
    border-color: var(--color-primary-light);
    transform: translateX(2px);
}

#Dlg_PublishWizard .path-card .path-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

#Dlg_PublishWizard .path-card .path-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-warm-body);
}

/* --- Uptodate callout --- */
#Dlg_PublishWizard .uptodate-status {
    margin-bottom: var(--spacing-lg);
}


/* ==========================================================================
   56C. SIMPLE DIALOG (CONFIRMATION / ALERT)
   ==========================================================================
   Small centered overlay dialogs used for confirmations, alerts, and
   simple prompts. These use the global/dialog.css .interactive-content
   container pattern.

   HTML:
     <div id="Dlg_Confirmation" class="dialog dialog-simple">
       <h3 class="dialog-prompt" data-key="prompt"></h3>
       <div class="commands dialog-footer">
         <div class="command ctaPrimary btn-primary" ...>Yes</div>
         <div class="command ctaAlt btn-secondary" ...>Cancel</div>
       </div>
       <div class="art busy dialog-loading">...</div>
     </div>
   ========================================================================== */

.dialog-simple {
    text-align: center;
}

    .dialog-simple .dialog-prompt {
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-medium);
        line-height: var(--line-height-base);
        padding: var(--spacing-lg);
        margin: 0;
        text-transform: none;
    }

    .dialog-simple .dialog-footer {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        gap: var(--spacing-lg);
        padding: var(--spacing-md) var(--spacing-lg);
    }


/* --------------------------------------------------------------------------
   Privacy Choices Dialog
   --------------------------------------------------------------------------
   Lightweight standalone dialog for analytics opt-out, available on all pages.
   Centered modal overlay following the view.dialog pattern.
   Uses form-panel inside for the card-like content area.
   -------------------------------------------------------------------------- */

/* Override the legacy #Interactions .view[ux-modal] rules that force full-screen */
#Interactions .dialog-privacy-choices.view[ux-modal] {
    background-image: none;
    backdrop-filter: none;
    height: auto;
    width: min(460px, calc(100vw - 32px));
    position: static;
    background: var(--color-background);
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--color-border-primary-subtle);
    overflow: hidden;
    align-self: center;
    flex-shrink: 0;
}

    .dialog-privacy-choices > .dialog-header {
        position: relative;
        padding: var(--spacing-md) var(--spacing-lg);
        border-bottom: 1px solid var(--color-border);
        background: var(--color-background);
    }

    .dialog-privacy-choices > .dialog-header .dialog-title {
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-warm);
        margin: 0;
        text-align: center;
        padding: 0 var(--spacing-xl);
    }

    #Interactions .dialog-privacy-choices.view[ux-modal] > .content.dialog-body {
        padding: var(--spacing-lg) var(--spacing-xl);
        overflow-y: auto;
        max-width: none;
        width: auto;
        margin: 0;
        box-sizing: border-box;
    }

    .dialog-privacy-choices > .dialog-body .form-group {
        margin-bottom: var(--spacing-sm);
    }

    #Interactions .dialog-privacy-choices.view .commands.dialog-footer {
        display: flex;
        gap: var(--spacing-sm);
        padding-top: var(--spacing-lg);
        justify-content: center;
        width: auto;
    }

    .dialog-privacy-choices .form-hint a {
        color: var(--color-text-link, var(--color-primary));
        text-decoration: underline;
    }

    .dialog-privacy-choices .form-hint a:hover {
        color: var(--color-text-link-hover, var(--color-primary-hover));
    }

    .dialog-privacy-choices[ux-busy] > .dialog-body {
        display: none;
    }

    .dialog-privacy-choices[ux-busy] > .busy {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 120px;
    }


/* ==========================================================================
   56D. STANDALONE DIALOG UTILITIES
   ==========================================================================
   Component-level utilities that work without framework integration.

   NOTE: Framework integration (#Interactions, body[frozen], etc.) has been
   moved to application.css under "DIALOG FRAMEWORK INTEGRATION".
   ========================================================================== */


/* --------------------------------------------------------------------------
   Frozen Overlay Base Class
   --------------------------------------------------------------------------
   The .frozen class provides full-screen overlay styling.
   Specific IDs (#Frozen_Dialog, etc.) are in application.css.
   -------------------------------------------------------------------------- */

.frozen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: var(--z-index-modal-backdrop, 200);
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 0.8;
    transition: opacity var(--transition-fast) ease-out;
    backdrop-filter: blur(2px);
}


/* --------------------------------------------------------------------------
   Dialog Prepare State (Component-level)
   -------------------------------------------------------------------------- */

.dialog[ux-prepare] .content {
    opacity: 0;
    pointer-events: none;
}

.dialog[ux-prepare] .family-pricing,
.dialog[ux-prepare] .content.family-pricing {
    display: none !important;
}

.dialog[ux-prepare][ux-busy] .loading-overlay {
    display: flex;
}


/* --------------------------------------------------------------------------
   Interactive Dialog System
   --------------------------------------------------------------------------
   The .interactive.dialog system uses [interactive-phase] to switch between
   start, progress, and end content sections.
   -------------------------------------------------------------------------- */

.dialog {
    position: fixed;
    z-index: var(--z-index-modal, 1000);
    width: auto;
    max-width: 90vw;
    max-height: 90vh;
    padding: 0;
    margin: 0;
    background-color: transparent;
    border: none;
    box-sizing: border-box;
    flex-direction:column;
}

.dialog .interactive-content {
    position: relative;
    width: 300px;
    min-width: 280px;
    background-color: var(--color-dialog-background, white);
    border: 1px solid var(--color-dialog-border, rgba(0, 0, 0, 0.2));
    border-radius: var(--border-radius-lg, 0.5rem);
    padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg);
    padding-top: calc(var(--spacing-xl) * 2);
    text-align: center;
    color: var(--color-text);
    box-sizing: border-box;
    margin: 0;
}

.dialog h3 {
    font-size: var(--font-size-xl, 1.5rem);
    font-weight: var(--font-weight-bold);
    text-align: center;
    color: var(--color-text);
    margin: 0;
    line-height: var(--line-height-base);
    letter-spacing: initial;
}

/* Centered interactive dialogs inherit .dialog-close styles from base (Section 56).
   All dialogs use the same SVG close icon for consistency. */

.dialog .interactive-content .commands {
    position: relative;
    background-color: var(--color-surface, rgba(0, 0, 0, 0.02));
    border: 1px solid var(--color-dialog-border, rgba(0, 0, 0, 0.1));
    border-radius: var(--border-radius-sm);
    margin-top: var(--spacing-lg);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
}

.dialog .interactive-content .command {
    width: 100%;
    padding: var(--spacing-md);
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    color: var(--color-text);
    background-color: var(--color-dialog-background, white);
    border: none;
    cursor: pointer;
    text-align: center;
}

.dialog .interactive-content .command:hover {
    background-color: var(--color-surface, rgba(0, 0, 0, 0.05));
}

.dialog .interactive-content .cmdCancel {
    background: none;
    color: var(--color-text-muted, #666);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    text-transform: none;
    padding: var(--spacing-sm);
}

/* Interactive phases */
.interactive .interactive-content {
    display: none;
}

.interactive .interactive-content.start {
    display: block;
}

.dialog.interactive[interactive-phase] .interactive-content {
    display: none;
}

.dialog.interactive[interactive-phase="start"] .interactive-content.start {
    display: block;
}

.dialog.interactive[interactive-phase="progress"] .interactive-content.progress {
    display: block;
}

.dialog.interactive[interactive-phase="end"] .interactive-content.end {
    display: block;
}

/* Form templates hidden */
.interactive.dialog .form .template {
    display: none;
}

/* Loading-reset state */
.interactive-content [loading-reset] * {
    text-indent: -9999px;
}


/* --------------------------------------------------------------------------
   Dialog Autocomplete
   --------------------------------------------------------------------------
   Autocomplete dropdown inside dialog context.
   -------------------------------------------------------------------------- */

.dialog .autocomplete-container {
    display: flex;
    flex-direction: column;
    position: static;
}

.dialog .autocomplete-choices {
    display: flex;
    flex-direction: column;
    max-height: 200px;
    overflow-y: auto;
}


/* ==========================================================================
   57. SELECTION CARD
   ==========================================================================
   Generic selectable card for radio/checkbox options in dialogs and forms.
   Shows a title and description with visual highlight when selected.

   NOT the same as .option-card (Section 27 — product card pricing) or
   .payment-option (Section 51 — onboarding payment setup).

   HTML:
     <div class="selection-card selected">
       <div class="selection-indicator"><input type="radio" checked></div>
       <div class="selection-label">Option Title</div>
       <div class="selection-description">Description text.</div>
     </div>
   ========================================================================== */

.inner-sold-as-options,
.sold-as-options { /* this is not semantically named, how do we reuse the selection container? */
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    align-items: stretch;
    flex: 1;
}

.selection-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: border-color 0.2s var(--ease-elegant), background-color 0.2s var(--ease-elegant), box-shadow 0.2s var(--ease-elegant);
    position: relative;
}

.selection-card:hover {
    border-color: var(--color-border-medium);
    background-color: var(--color-surface);
}

.selection-card.selected {
    border-color: var(--color-primary);
    background-color: var(--color-primary-lighter);
    box-shadow: 0 0 0 1px var(--color-primary-muted);
}

.selection-card.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}
.selection-card.disabled .selection-description {
    font-style: italic;
}

/* Keyboard navigation highlight (active but not yet selected) */
.selection-card.active:not(.selected) {
    border-color: var(--color-primary-light);
    background-color: var(--color-surface-hover);
}

/* Focus ring for accessibility */
.selection-card:focus {
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

.selection-card:focus:not(.selected) {
    border-color: var(--color-border-medium);
}

.selection-card .selection-indicator {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
}

.selection-card .selection-indicator input[type="radio"],
.selection-card .selection-indicator input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.selection-card .selection-label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    padding-right: var(--spacing-xl);
}

.selection-card .selection-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: var(--line-height-relaxed, 1.6);
}

/* Row layout variant — indicator, label, and description inline */
.selection-card.selection-card-row {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-md);
}

.selection-card.selection-card-row .selection-indicator {
    position: static;
    flex-shrink: 0;
}

.selection-card.selection-card-row .selection-label {
    padding-right: 0;
    flex: 1;
}

/* Stock Options — container for vertically stacked selection cards */
.stock-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Selection card as label element (clickable card for radio inputs) */
label.selection-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin: 0;
}

/* Enhanced selection card hover with purple-tinted warmth */
.stock-options .selection-card:hover {
    border-color: var(--color-primary-muted);
    background-color: rgba(124, 58, 237, 0.03);
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.08);
    transform: translateY(-1px);
}

.stock-options .selection-card.selected {
    border-color: var(--color-primary);
    background-color: var(--color-primary-lighter);
    box-shadow: 0 0 0 1px var(--color-primary-muted),
                0 2px 12px rgba(124, 58, 237, 0.12);
}

/* Extended Selection Card — for cards with icon, title, description, and details
   Used in ListingModeDialog and similar option-selection dialogs.

   HTML:
     <div class="selection-cards">
       <div class="selection-card">
         <div class="selection-header">
           <div class="selection-icon"></div>
           <div class="selection-label">Title</div>
           <div class="selection-description">Short description</div>
         </div>
         <div class="selection-details">
           <div class="detail-item">Explanation text</div>
           <div class="detail-item detail-required">Required: ...</div>
         </div>
       </div>
     </div>
   ========================================================================== */

/* Selection cards container — vertical stack */
.selection-cards {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Extended selection card with details section */
.selection-cards .selection-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    background: var(--color-background);
    cursor: pointer;
    transition: all 0.2s var(--ease-elegant);
}

.selection-cards .selection-card:hover {
    border-color: var(--color-primary-muted);
    background-color: rgba(124, 58, 237, 0.03);
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.08);
    transform: translateY(-1px);
}

.selection-cards .selection-card.selected {
    border-color: var(--color-primary);
    background-color: var(--color-primary-lighter);
    box-shadow: 0 0 0 1px var(--color-primary-muted),
                0 2px 12px rgba(124, 58, 237, 0.12);
}

/* Selection header — icon + label + description row */
.selection-header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.selection-header .selection-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    border-radius: var(--border-radius-sm);
}

.selection-header .selection-label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: 2px;
}

.selection-header .selection-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: var(--line-height-relaxed);
}

/* Selection details — expanded explanation section */
.selection-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border-light);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: var(--line-height-relaxed);
}

.selection-details .detail-item {
    padding-left: var(--spacing-sm);
}

.selection-details .detail-item strong {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.selection-details .detail-required {
    color: var(--color-warning-dark);
}

.selection-details .detail-note {
    font-style: italic;
    color: var(--color-text-light);
}


/* ==========================================================================
   57a-1. MERCHANDISE PAYMENT METHOD DIALOG
   ==========================================================================
   Payment method selection for merchandise (how buyer pays seller).
   Enhanced selection cards with icons, content sections, and benefit tags.

   HTML:
     <div class="selection-cards merch-payment-options">
       <label class="selection-card merch-payment-option">
         <div class="selection-indicator"><input type="radio" /></div>
         <div class="selection-icon"><span class="icon icon-card"></span></div>
         <div class="selection-content">
           <div class="selection-label">Card via escrow</div>
           <div class="selection-description">Pay securely through anySKU...</div>
           <div class="selection-benefits">
             <span class="benefit-tag">Buyer protection</span>
           </div>
         </div>
       </label>
     </div>
   ========================================================================== */

/* Payment options container */
.merch-payment-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

/* Individual payment option card */
.merch-payment-option {
    display: grid;
    grid-template-columns: auto 48px 1fr;
    grid-template-areas: "indicator icon content";
    gap: var(--spacing-md);
    align-items: flex-start;
    padding: var(--spacing-lg);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    background: var(--color-background);
    cursor: pointer;
    transition: all 0.25s var(--ease-elegant);
    position: relative;
}

.merch-payment-option:hover {
    border-color: var(--color-primary-muted);
    background: linear-gradient(135deg,
        rgba(var(--color-primary-rgb), 0.02) 0%,
        rgba(var(--color-primary-rgb), 0.04) 100%);
    box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), 0.1);
    transform: translateY(-2px);
}

.merch-payment-option.selected {
    border-color: var(--color-primary);
    background: linear-gradient(135deg,
        rgba(var(--color-primary-rgb), 0.05) 0%,
        rgba(var(--color-primary-rgb), 0.08) 100%);
    box-shadow: 0 0 0 1px var(--color-primary-muted),
                0 4px 20px rgba(var(--color-primary-rgb), 0.15);
}

/* Selection indicator (radio button) */
.merch-payment-option .selection-indicator {
    grid-area: indicator;
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 2px;
}

.merch-payment-option .selection-indicator input[type="radio"] {
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--color-primary);
}

/* Icon container */
.merch-payment-option .selection-icon {
    grid-area: icon;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    border-radius: var(--border-radius-md);
    transition: all 0.25s var(--ease-elegant);
}

.merch-payment-option .selection-icon .icon {
    font-size: 24px;
    color: var(--color-text-muted);
    transition: color 0.25s var(--ease-elegant);
}

.merch-payment-option:hover .selection-icon {
    background: rgba(var(--color-primary-rgb), 0.1);
}

.merch-payment-option:hover .selection-icon .icon,
.merch-payment-option.selected .selection-icon .icon {
    color: var(--color-primary);
}

.merch-payment-option.selected .selection-icon {
    background: rgba(var(--color-primary-rgb), 0.15);
}

/* Content area */
.merch-payment-option .selection-content {
    grid-area: content;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.merch-payment-option .selection-label {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0;
    padding: 0;
}

.merch-payment-option .selection-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: var(--line-height-relaxed);
    margin: 0;
}

/* Benefit tags */
.merch-payment-option .selection-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xs);
}

.merch-payment-option .benefit-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(var(--color-success-rgb, 34, 197, 94), 0.1);
    border-radius: var(--border-radius-full);
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    color: var(--color-success, #22c55e);
}

.merch-payment-option .benefit-tag .icon {
    font-size: 10px;
    color: inherit;
}

/* Selected state benefit tags get slightly more emphasis */
.merch-payment-option.selected .benefit-tag {
    background: rgba(var(--color-success-rgb, 34, 197, 94), 0.15);
}

/* Notice banner in dialog */
.merch-payment-notice {
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

/* Mobile responsive adjustments */
@media (max-width: 480px) {
    .merch-payment-option {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "indicator icon"
            "content content";
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
    }

    .merch-payment-option .selection-icon {
        width: 40px;
        height: 40px;
    }

    .merch-payment-option .selection-icon .icon {
        font-size: 20px;
    }

    .merch-payment-option .selection-content {
        padding-top: var(--spacing-xs);
    }
}


/* ==========================================================================
   57b. PHOTO OPTIONS GRID
   ==========================================================================
   Two-column grid for photo upload/camera option cards.
   Used in VariantPhotoDialog, CreateListingView.

   HTML:
     <div class="photo-options">
       <div class="photo-option upload-option">
         <div class="option-icon"><img src="..." /></div>
         <h4>Upload a Photo</h4>
         <p>Select from your device</p>
       </div>
       <div class="photo-option camera-option">...</div>
     </div>
   ========================================================================== */

.photo-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.photo-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    background: var(--color-surface);
    border: 2px dashed var(--color-border);
    border-radius: var(--border-radius-lg);
    cursor: pointer;
    transition: all 0.2s var(--ease-elegant);
}

.photo-option:hover {
    border-color: var(--color-primary-muted);
    border-style: solid;
    background: rgba(124, 58, 237, 0.03);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.1);
    transform: translateY(-2px);
}

.photo-option:active {
    transform: translateY(0);
}

.photo-option .option-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-option .option-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.photo-option h4 {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.photo-option p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Responsive: stack on mobile */
@media (max-width: 480px) {
    .photo-options {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   57b-1. CREATE LISTING DIALOG - PREMIUM ONBOARDING EXPERIENCE
   ==========================================================================
   Polished, consumer-friendly design matching the payment method onboarding.
   Features large hero illustration, benefit checklists, and premium interactions.

   Design philosophy: Match the warmth and polish of payment method dialog.
   ========================================================================== */

/* --- Outer Container with Gradient Backdrop --- */
#View_CreateListing .content.start .dialog-scroll {
    background: linear-gradient(
        180deg,
        rgba(var(--color-primary-rgb), 0.03) 0%,
        rgba(135, 206, 250, 0.04) 30%,
        var(--color-background) 100%
    );
    border-radius: var(--border-radius-lg);
    margin: calc(var(--spacing-sm) * -1);
    padding: var(--spacing-sm);
}

/* --- Hero Section - Large, Inviting, Marketplace Feel --- */
.create-listing-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md);
    animation: clFadeInDown 0.5s var(--ease-elegant) both;
}

.create-listing-hero .hero-illustration {
    width: 280px;
    height: 200px;
    margin-bottom: var(--spacing-md);
    animation: clFadeInDown 0.5s var(--ease-elegant) 0.1s both;
    position: relative;
}

.create-listing-hero .hero-illustration::after {
    content: "";
    position: absolute;
    inset: 20% 15%;
    background: radial-gradient(
        ellipse at center,
        rgba(var(--color-primary-rgb), 0.12) 0%,
        transparent 70%
    );
    filter: blur(20px);
    z-index: -1;
    animation: clPulseGlow 3s ease-in-out infinite;
}

@keyframes clPulseGlow {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

.create-listing-hero .hero-illustration img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 16px 40px rgba(var(--color-primary-rgb), 0.25));
    transition: transform 0.4s var(--ease-elegant);
}

.create-listing-hero .hero-illustration:hover img {
    transform: scale(1.03) translateY(-2px);
}

.create-listing-hero .hero-content {
    max-width: 420px;
    animation: clFadeInDown 0.5s var(--ease-elegant) 0.15s both;
    flex-direction: column;
    padding: var(--spacing-md) 0px;
    padding-bottom: 0;
}

.create-listing-board {
    padding-top: var(--spacing-sm) !important;
} 

.create-listing-hero .hero-headline {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    line-height: var(--line-height-tight);
}

.create-listing-hero .hero-subtitle {
    margin: 0;
    font-size: var(--font-size-base);
    color: var(--color-text-warm-body);
    line-height: 1.6;
}

/* --- Board Content Area --- */
.create-listing-board {
    padding: var(--spacing-md) var(--spacing-sm) 0;
}

/* --- Enhanced Photo Options Grid --- */
.create-listing-options.photo-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-top: 0;
}

/* --- Photo Option Cards - Premium Inviting Treatment --- */
.create-listing-options .photo-option {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md);
    background: linear-gradient(
        165deg,
        var(--color-background) 0%,
        rgba(var(--color-primary-rgb), 0.02) 100%
    );
    border: 2px solid var(--color-border-light);
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-card);
    animation: clFadeInUp 0.5s var(--ease-elegant) both;
    overflow: hidden;
    transition: var(--transition-card);
    cursor: pointer;
}

/* Subtle shimmer effect on cards */
.create-listing-options .photo-option::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 100%
    );
    transition: left 0.6s var(--ease-elegant);
    pointer-events: none;
}

.create-listing-options .photo-option:hover::before {
    left: 150%;
}

.create-listing-options .photo-option:nth-child(1) {
    animation-delay: 0.2s;
}

.create-listing-options .photo-option:nth-child(2) {
    animation-delay: 0.3s;
}

/* Hover state - inviting purple glow */
.create-listing-options .photo-option:hover {
    border-color: var(--color-primary);
    background: linear-gradient(
        165deg,
        var(--color-background) 0%,
        rgba(var(--color-primary-rgb), 0.05) 50%,
        rgba(var(--color-secondary-rgb), 0.02) 100%
    );
    box-shadow:
        0 12px 32px rgba(var(--color-primary-rgb), 0.15),
        0 4px 12px rgba(var(--color-primary-rgb), 0.08),
        0 0 0 4px rgba(var(--color-primary-rgb), 0.08);
    transform: translateY(-6px);
}

.create-listing-options .photo-option:active {
    transform: translateY(-3px);
    box-shadow:
        0 8px 20px rgba(var(--color-primary-rgb), 0.12),
        0 2px 8px rgba(var(--color-primary-rgb), 0.06);
}

/* --- Option Header (icon + title side by side) --- */
.create-listing-options .option-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.create-listing-options .option-icon-wrapper {
    width: 64px;
    height: 64px;
    min-width: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        145deg,
        rgba(var(--color-primary-rgb), 0.12) 0%,
        rgba(var(--color-secondary-rgb), 0.06) 100%
    );
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(var(--color-primary-rgb), 0.08);
    box-shadow:
        0 4px 12px rgba(var(--color-primary-rgb), 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: var(--transition-card);
}

.create-listing-options .photo-option:hover .option-icon-wrapper {
    transform: scale(1.1) rotate(-2deg);
    background: linear-gradient(
        145deg,
        rgba(var(--color-primary-rgb), 0.18) 0%,
        rgba(var(--color-secondary-rgb), 0.1) 100%
    );
    box-shadow:
        0 8px 20px rgba(var(--color-primary-rgb), 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    border-color: rgba(var(--color-primary-rgb), 0.15);
}

.create-listing-options .photo-option .card-icon {
    width: 36px;
    height: 36px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    filter: drop-shadow(0 2px 4px rgba(var(--color-primary-rgb), 0.2));
    transition: transform 0.3s var(--ease-elegant);
}

/* Upload/folder icon */
.create-listing-options .photo-option .card-icon.icon-folder {
    background-image: url('/images/icon/folder-primary.svg');
}

/* Camera icon */
.create-listing-options .photo-option .card-icon.icon-camera {
    background-image: url('/images/icon/camera-primary.svg');
}

/* Camera-off icon (unavailable state) */
.create-listing-options .photo-option .card-icon.icon-camera-off {
    background-image: url('/images/icon/camera-off-black.svg');
    opacity: 0.4;
}

.create-listing-options .photo-option:hover .card-icon {
    transform: scale(1.05);
}

/* Title group */
.create-listing-options .option-title-group {
    flex: 1;
    min-width: 0;
}

.create-listing-options .photo-option .selection-label {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
    margin-bottom: 2px;
    line-height: var(--line-height-tight);
}

.create-listing-options .photo-option .selection-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
    margin-bottom: 0;
}

/* --- Benefit Checkmarks List --- */
.create-listing-options .option-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs) var(--spacing-lg);
    list-style: none;
    margin: 0 0 var(--spacing-md);
    padding: 0;
}

.create-listing-options .option-benefits li {
    position: relative;
    padding-left: 20px;
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-body);
    line-height: 1.4;
}

.create-listing-options .option-benefits li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310B981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* --- Upload Zone - Inviting Drop Target --- */
.create-listing-options .upload-zone {
    padding: var(--spacing-lg) var(--spacing-lg);
    border: 2px dashed rgba(var(--color-primary-rgb), 0.35);
    border-radius: var(--border-radius-lg);
    background: linear-gradient(
        135deg,
        rgba(var(--color-primary-rgb), 0.03) 0%,
        rgba(var(--color-secondary-rgb), 0.02) 100%
    );
    text-align: center;
    cursor: pointer;
    transition: var(--transition-card);
    position: relative;
    overflow: hidden;
}

/* Animated border effect */
.create-listing-options .upload-zone::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: var(--border-radius-lg);
    background: linear-gradient(
        90deg,
        var(--color-primary) 0%,
        var(--color-secondary) 50%,
        var(--color-primary) 100%
    );
    opacity: 0;
    z-index: -1;
    background-size: 200% 100%;
    animation: clBorderShimmer 2s linear infinite paused;
    transition: opacity 0.3s ease;
}

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

.create-listing-options .upload-zone:hover::before,
.create-listing-options .upload-zone:focus::before {
    opacity: 0.3;
    animation-play-state: running;
}

.create-listing-options .upload-zone:hover,
.create-listing-options .upload-zone:focus {
    border-color: var(--color-primary);
    background: linear-gradient(
        135deg,
        rgba(var(--color-primary-rgb), 0.06) 0%,
        rgba(var(--color-secondary-rgb), 0.04) 100%
    );
    border-style: solid;
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), 0.12);
}

.create-listing-options .upload-zone .upload-text {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin: 0;
    line-height: 1.5;
}

/* Mobile/desktop text toggle — mobile text hidden by default */
.create-listing-options .upload-zone .upload-text .text-mobile { display: none; }

.create-listing-options .upload-zone .upload-hint {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: var(--spacing-xs);
    font-weight: var(--font-weight-normal);
}

/* Add subtle file format hint */
.create-listing-options .uploader {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* --- Camera Button - Exciting Primary Style --- */
.create-listing-options .camera-option .btn-primary {
    width: 100%;
    justify-content: center;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    background: linear-gradient(
        135deg,
        var(--color-primary) 0%,
        rgba(var(--color-primary-rgb), 0.85) 100%
    );
    border-radius: var(--border-radius-md);
    box-shadow:
        0 4px 12px rgba(var(--color-primary-rgb), 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: var(--transition-card);
    position: relative;
    overflow: hidden;
}

.create-listing-options .camera-option .btn-primary::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 100%
    );
    transition: left 0.5s var(--ease-elegant);
}

.create-listing-options .camera-option .btn-primary:hover::before {
    left: 100%;
}

.create-listing-options .camera-option .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 20px rgba(var(--color-primary-rgb), 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.create-listing-options .camera-option .btn-primary:active {
    transform: translateY(0);
    box-shadow:
        0 2px 8px rgba(var(--color-primary-rgb), 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* --- Pro Tip Banner - Teal Accent --- */
.create-listing-tip.notice-banner {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    background: linear-gradient(
        90deg,
        rgba(var(--color-success-rgb), 0.08) 0%,
        rgba(var(--color-success-rgb), 0.03) 100%
    );
    border: 1px solid rgba(var(--color-success-rgb), 0.2);
    border-radius: var(--border-radius-md);
    animation: clFadeInUp 0.5s var(--ease-elegant) 0.4s both;
}

.create-listing-tip .notice-icon {
    color: var(--color-success);
}

.create-listing-tip .notice-content {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-body);
    line-height: var(--line-height-base);
}

/* --- Entrance Animations --- */
@keyframes clFadeInDown {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* --- Mobile Responsive --- */
@media (max-width: 600px) {
    #View_CreateListing .content.start .dialog-scroll {
        margin: calc(var(--spacing-xs) * -1);
        padding: var(--spacing-xs);
    }

    .create-listing-hero {
        padding: var(--spacing-lg) var(--spacing-sm) var(--spacing-md);
    }

    .create-listing-hero .hero-illustration {
        width: 200px;
        margin-bottom: var(--spacing-sm);
    }

    .create-listing-hero .hero-headline {
        font-size: var(--font-size-xl);
    }

    .create-listing-hero .hero-subtitle {
        font-size: var(--font-size-sm);
    }

    .create-listing-options.photo-options {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
        align-self: center;
    }

    /* Camera first on mobile — most users will snap a photo */
    .create-listing-options .camera-option { order: -1; }
    .create-listing-options .camera-unavailable { order: -1; }

    /* Hide desktop-only drag-and-drop hint */
    .create-listing-options .option-benefits .desktop-only { display: none; }

    /* Mobile-friendly upload text */
    .create-listing-options .upload-zone .upload-text .text-desktop { display: none; }
    .create-listing-options .upload-zone .upload-text .text-mobile { display: inline; }

    /* Hide dashed border on mobile — no drag target */
    .create-listing-options .upload-zone {
        border-style: solid;
        border-color: rgba(var(--color-primary-rgb), 0.2);
    }
    .create-listing-options .upload-zone::before { display: none; }

    .create-listing-options .photo-option {
        padding: var(--spacing-md);
    }

    /* Hide shimmer effect on mobile for performance */
    .create-listing-options .photo-option::before {
        display: none;
    }

    .create-listing-options .option-header {
        gap: var(--spacing-sm);
    }

    .create-listing-options .option-icon-wrapper {
        width: 52px;
        height: 52px;
        min-width: 52px;
    }

    .create-listing-options .photo-option .card-icon {
        width: 28px;
        height: 28px;
    }

    .create-listing-options .photo-option .selection-label {
        font-size: var(--font-size-base);
    }

    .create-listing-options .option-benefits {
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .create-listing-options .upload-zone {
        padding: var(--spacing-md);
    }

    .create-listing-options .camera-option .btn-primary {
        padding: var(--spacing-sm) var(--spacing-md);
    }
}

/* --- Dark Mode Support --- */
[data-theme="dark"] #View_CreateListing .content.start .dialog-scroll,
[data-theme="dark-high-contrast"] #View_CreateListing .content.start .dialog-scroll {
    background: linear-gradient(
        180deg,
        rgba(var(--color-primary-rgb), 0.06) 0%,
        rgba(100, 150, 200, 0.04) 30%,
        var(--color-background) 100%
    );
}

/* ==========================================================================
   57b. ANALYSIS ERROR STATE
   ==========================================================================
   Friendly error state when photo analysis fails in Create Listing dialog.
   Encouraging tone with helpful suggestions.
   ========================================================================== */

.analysis-error {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: var(--spacing-md) var(--spacing-sm);
    animation: clFadeInUp 0.4s var(--ease-elegant) both;
    /* Span full grid width when inside category-cards grid */
    grid-column: 1 / -1;
}

/* Hide the category-help banner when error state is showing */
.category-cards-container:has(.analysis-error) ~ .category-help,
.category-cards:has(.analysis-error) ~ .category-help {
    display: none;
}

.analysis-error-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 100%;
    width: 100%;
    padding: var(--spacing-lg) var(--spacing-md);
    background: linear-gradient(
        165deg,
        var(--color-background) 0%,
        rgba(var(--color-primary-rgb), 0.03) 100%
    );
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-card);
}

/* Icon wrapper with subtle amber/warning tint */
.analysis-error .error-icon-wrapper {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        145deg,
        rgba(var(--color-warning-rgb), 0.12) 0%,
        rgba(var(--color-warning-rgb), 0.06) 100%
    );
    border-radius: var(--border-radius-full);
    margin-bottom: var(--spacing-lg);
    animation: clPulseGlow 2.5s ease-in-out infinite;
}

/* Error icon using background-image from /images/icon/ */
.analysis-error .error-icon-wrapper .error-icon {
    width: 36px;
    height: 36px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* Camera-off icon for identification failure */
.analysis-error .error-icon-wrapper .error-icon.icon-camera-off {
    background-image: url('/images/icon/camera-off-primary.svg');
}

/* Search icon for no results state */
.analysis-error .error-icon-wrapper .error-icon.icon-search {
    background-image: url('/images/icon/search-primary.svg');
}

/* Help/question icon for uncertain state */
.analysis-error .error-icon-wrapper .error-icon.icon-help-circle {
    background-image: url('/images/icon/help-circle-primary.svg');
}

/* Content section */
.analysis-error .error-content {
    margin-bottom: var(--spacing-lg);
}

.analysis-error .error-title {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
    line-height: var(--line-height-tight);
}

.analysis-error .error-description {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
    line-height: 1.6;
}

/* Helpful suggestions */
.analysis-error .error-suggestions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background: rgba(var(--color-primary-rgb), 0.02);
    border-radius: var(--border-radius-md);
}

.analysis-error .suggestion-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-xs);
    color: var(--color-text-warm-body);
    white-space: nowrap;
}

/* Suggestion icons using background-image from /images/icon/ */
.analysis-error .suggestion-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.8;
}

/* Lightbulb icon for "good lighting" tip */
.analysis-error .suggestion-icon.icon-lightbulb {
    background-image: url('/images/icon/lightbulb-black.svg');
}

/* Target icon for "center your item" tip */
.analysis-error .suggestion-icon.icon-target {
    background-image: url('/images/icon/target-black.svg');
}

/* Box icon for "show whole product" tip */
.analysis-error .suggestion-icon.icon-box {
    background-image: url('/images/icon/box-black.svg');
}

/* Expand/frame icon for "fill the frame" tip */
.analysis-error .suggestion-icon.icon-maximize {
    background-image: url('/images/icon/maximize-black.svg');
}

/* Action button(s) */
.analysis-error .error-actions {
    width: 100%;
}

.analysis-error .error-actions .btn-primary,
.analysis-error .error-actions .btn-secondary {
    width: 100%;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

/* Button icons using background-image */
.analysis-error .error-actions .btn-icon {
    width: 20px;
    height: 20px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* Camera icon (white for primary button) */
.analysis-error .error-actions .btn-primary .btn-icon.icon-camera {
    background-image: url('/images/icon/camera-white.svg');
}

/* Edit/pencil icon (primary color for secondary button) */
.analysis-error .error-actions .btn-secondary .btn-icon.icon-edit {
    background-image: url('/images/icon/edit-primary.svg');
}

/* Split button layout for two actions */
.analysis-error .error-actions-split {
    display: flex;
    gap: var(--spacing-sm);
}

.analysis-error .error-actions-split .btn-primary,
.analysis-error .error-actions-split .btn-secondary {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
}

/* Uncertain/question icon variant (purple tint instead of amber) */
.analysis-error .error-icon-uncertain {
    background: linear-gradient(
        145deg,
        rgba(var(--color-primary-rgb), 0.12) 0%,
        rgba(var(--color-primary-rgb), 0.06) 100%
    );
}

/* Help-circle icon already defined above with primary color */

/* Mobile adjustments */
@media (max-width: 480px) {
    .analysis-error {
        padding: var(--spacing-lg) var(--spacing-sm);
        min-height: 240px;
    }

    .analysis-error-card {
        padding: var(--spacing-lg) var(--spacing-md);
    }

    .analysis-error .error-icon-wrapper {
        width: 56px;
        height: 56px;
    }

    .analysis-error .error-icon-wrapper .error-icon {
        width: 28px;
        height: 28px;
    }

    .analysis-error .suggestion-icon {
        width: 16px;
        height: 16px;
    }

    .analysis-error .error-suggestions {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-xs);
    }

    .analysis-error .error-actions-split {
        flex-direction: column;
    }

    .analysis-error .error-actions-split .btn-primary,
    .analysis-error .error-actions-split .btn-secondary {
        width: 100%;
    }
}

/* ==========================================================================
   57b-2. CREATE LISTING BUSY/LOADING STATES
   ==========================================================================
   Polished loading states for the photo analysis workflow.
   Phases: Analyzing → Researching Prices → Building Listing
   ========================================================================== */

/* Override dialog-loading for Create Listing to be more polished */
.dialog > .dialog-loading {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.97) 0%,
        rgba(var(--color-primary-rgb), 0.02) 100%
    );
    backdrop-filter: blur(8px);
}

/* Busy content container */
.dialog .busy-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 360px;
    padding: var(--spacing-xl);
    animation: clFadeInUp 0.4s var(--ease-elegant) both;
    align-self:center; justify-self:center; 
}

/* Optional illustration area (for branded graphics) */
.dialog .busy-illustration {
    width: 120px;
    height: 120px;
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Photo preview in busy state */
.dialog .busy-content .photo-preview {
    width: 140px;
    height: 140px;
    margin: 0 auto var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    background: linear-gradient(
        135deg,
        var(--color-surface) 0%,
        rgba(var(--color-primary-rgb), 0.05) 100%
    );
    box-shadow:
        0 8px 32px rgba(var(--color-primary-rgb), 0.12),
        0 4px 12px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.dialog .busy-content .photo-preview::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid rgba(var(--color-primary-rgb), 0.15);
    border-radius: var(--border-radius-lg);
    pointer-events: none;
}

.dialog .busy-content .photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Lottie animation container */
.svgAnimation {
    max-width: 100%;
    max-height: 100%;
    inset: 0;
    margin: auto;
}

.dialog .dialog-loading .svgAnimation,
.dialog .busy-content .svgAnimation {
    width: 200px;
    height: 200px;
    margin: auto;
}

/* Text container */
.dialog .busy-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Base message styling */
.dialog .busy-message {
    text-align: center;
    animation: clFadeInUp 0.3s var(--ease-elegant) both;
}

.dialog .busy-message h3 {
    margin: 0 0 var(--spacing-xs);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
    line-height: var(--line-height-tight);
}

.dialog .busy-message p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
    line-height: 1.5;
    max-width: 280px;
}

/* Default "Loading..." message */
.dialog .busy-text .default-message {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
    font-weight: var(--font-weight-medium);
}

/* Phase-specific message styling */

/* Phase 1: Analyzing/Identifying */
#View_CreateListing .analyzing-message h3 {
    color: var(--color-primary);
}

/* Phase 2: Researching prices */
#View_CreateListing .pricing-message h3 {
    color: var(--color-primary);
}

#View_CreateListing .pricing-message::before {
    content: "";
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto var(--spacing-sm);
    background: linear-gradient(
        145deg,
        rgba(var(--color-primary-rgb), 0.12) 0%,
        rgba(var(--color-secondary-rgb), 0.06) 100%
    );
    border-radius: var(--border-radius-full);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C43F4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='1' x2='12' y2='23'%3E%3C/line%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'%3E%3C/path%3E%3C/svg%3E");
    background-size: 24px;
    background-position: center;
    background-repeat: no-repeat;
}

/* Phase 3: Building/Generating */
#View_CreateListing .generating-message h3 {
    color: var(--color-success);
}

#View_CreateListing .generating-message::before {
    content: "";
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto var(--spacing-sm);
    background: linear-gradient(
        145deg,
        rgba(var(--color-success-rgb), 0.12) 0%,
        rgba(var(--color-success-rgb), 0.06) 100%
    );
    border-radius: var(--border-radius-full);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'%3E%3C/path%3E%3Cpolyline points='14 2 14 8 20 8'%3E%3C/polyline%3E%3Cline x1='16' y1='13' x2='8' y2='13'%3E%3C/line%3E%3Cline x1='16' y1='17' x2='8' y2='17'%3E%3C/line%3E%3Cpolyline points='10 9 9 9 8 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 24px;
    background-position: center;
    background-repeat: no-repeat;
}

/* Progress hint styling */
.dialog .busy-message .progress-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-style: italic;
    margin-top: var(--spacing-sm);
}

/* Progress indicator dots */
.dialog .busy-message .progress-hint::after {
    content: "";
    display: inline-block;
    animation: clLoadingDots 1.4s infinite;
}

@keyframes clLoadingDots {
    0%, 20% { content: ""; }
    40% { content: "."; }
    60% { content: ".."; }
    80%, 100% { content: "..."; }
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .dialog .busy-content {
        padding: var(--spacing-lg) var(--spacing-md);
    }

    .dialog .busy-content .photo-preview {
        width: 120px;
        height: 120px;
    }

    .dialog .busy-message h3 {
        font-size: var(--font-size-base);
    }

    .dialog .busy-message p {
        font-size: var(--font-size-xs);
    }
}

/* ==========================================================================
   57c. DIVIDER WITH TEXT
   ==========================================================================
   Horizontal divider with centered text label.
   Used in VariantPhotoDialog between sections.

   HTML:
     <div class="divider"><span>or add a new photo</span></div>
   ========================================================================== */

.divider {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.divider::before,
.divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.divider span {
    white-space: nowrap;
}


/* ==========================================================================
   57c-1. CREATE LISTING ANALYSIS PHASE
   ==========================================================================
   Visual polish for the market analysis/review state in Create Listing dialog.
   Features: product preview header, market pricing cards with gradient backgrounds,
   listing preview section, and warm visual hierarchy.
   ========================================================================== */

/* Analysis phase scroll area — warm gradient background */
#View_CreateListing .content.analysis .dialog-scroll {
    background: linear-gradient(
        180deg,
        var(--color-background) 0%,
        rgba(var(--color-primary-rgb), 0.015) 100%
    );
}

/* Analysis header — product photo + title */
#View_CreateListing .analysis-header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--gradient-card-base);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-card);
    margin-bottom: var(--spacing-lg);
}

#View_CreateListing .analysis-header .photo-preview-small {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

#View_CreateListing .analysis-header .photo-preview-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#View_CreateListing .analysis-header .analysis-title {
    flex: 1;
    min-width: 0;
}

#View_CreateListing .analysis-header .analysis-title h4 {
    margin: 0 0 var(--spacing-xs);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
    line-height: var(--line-height-tight);
}

#View_CreateListing .analysis-header .analysis-title .form-hint {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
}

/* Pricing section header */
#View_CreateListing .pricing-section h4 {
    margin: 0 0 var(--spacing-xs);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
}

#View_CreateListing .pricing-section .dialog-subtitle {
    margin: 0 0 var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
}

/* Market card grid — responsive grid layout */
#View_CreateListing .market-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

/* Market card — gradient background, no colored borders */
#View_CreateListing .market-card {
    padding: var(--spacing-md);
    background: var(--gradient-card-base);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-card);
    transition: var(--transition-card);
}

#View_CreateListing .market-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}

/* Primary market card — local data, hero treatment */
#View_CreateListing .market-card.primary {
    background: linear-gradient(
        160deg,
        rgba(var(--color-primary-rgb), 0.04) 0%,
        rgba(var(--color-primary-rgb), 0.01) 100%
    );
    border-color: var(--color-border-primary-subtle);
    box-shadow:
        var(--shadow-card),
        0 0 0 1px var(--color-border-primary-faint);
}

#View_CreateListing .market-card.primary:hover {
    box-shadow:
        var(--shadow-card-hover),
        0 4px 16px rgba(var(--color-primary-rgb), 0.1);
    transform: translateY(-3px);
}

/* Market card header with meta info */
#View_CreateListing .market-card-header {
    margin-bottom: var(--spacing-sm);
}

#View_CreateListing .market-card-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: 4px;
}

#View_CreateListing .market-card-meta .meta-icon {
    width: 16px;
    height: 16px;
    opacity: 0.7;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Icon backgrounds using SVG icons */
#View_CreateListing .market-card-meta .icon-location {
    background-image: url('/images/icon/map-pin-primary.svg');
}

#View_CreateListing .market-card-meta .icon-globe {
    background-image: url('/images/icon/globe-black.svg');
}

#View_CreateListing .market-card-meta .icon-map {
    background-image: url('/images/icon/map-black.svg');
}

#View_CreateListing .market-card-meta .icon-user {
    background-image: url('/images/icon/user-black.svg');
}

#View_CreateListing .market-card-meta .icon-store {
    background-image: url('/images/icon/store-black.svg');
}

#View_CreateListing .market-card-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-warm-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

#View_CreateListing .market-card-title {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm-medium);
}

/* Price range display — warm, bold values */
#View_CreateListing .market-card-range {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-sm);
}

#View_CreateListing .market-card-min,
#View_CreateListing .market-card-max {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-warm);
}

#View_CreateListing .market-card.primary .market-card-min,
#View_CreateListing .market-card.primary .market-card-max {
    color: var(--color-primary-dark);
}

#View_CreateListing .market-card-range .price-separator {
    font-size: var(--font-size-md);
    color: var(--color-text-warm-muted);
}

/* Single value display for retail price */
#View_CreateListing .market-card-value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-warm);
    margin-bottom: var(--spacing-sm);
}

/* Stats row within local market card */
#View_CreateListing .market-card-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border);
    margin-bottom: var(--spacing-sm);
}

#View_CreateListing .market-card-stats .stat {
    font-size: var(--font-size-xs);
    color: var(--color-text-warm-muted);
}

#View_CreateListing .market-card-stats .stat strong {
    color: var(--color-text-warm-body);
    font-weight: var(--font-weight-semibold);
}

/* Note/source line at bottom of card */
#View_CreateListing .market-card-note {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Listing preview section */
#View_CreateListing .preview.detail-section,
#View_CreateListing .preview.settings-board {
    background: var(--gradient-card-base);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-card);
    overflow: hidden;
    margin-bottom: var(--spacing-lg);
}

#View_CreateListing .preview .detail-section-header,
#View_CreateListing .preview .settings-board-header {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

#View_CreateListing .preview .detail-section-header h4,
#View_CreateListing .preview .settings-board-header h4 {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm-medium);
}

#View_CreateListing .preview .detail-section-body,
#View_CreateListing .preview .settings-board-body {
    padding: var(--spacing-md);
}

#View_CreateListing .preview .form-group {
    margin-bottom: var(--spacing-md);
}

#View_CreateListing .preview .form-group:last-child {
    margin-bottom: 0;
}

#View_CreateListing .preview .form-label {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-warm-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--spacing-xs);
}

#View_CreateListing .preview .form-static {
    font-size: var(--font-size-base);
    color: var(--color-text-warm-body);
    line-height: var(--line-height-relaxed);
}

#View_CreateListing .preview .form-static.prose {
    color: var(--color-text-warm-body);
    line-height: 1.7;
}

/* Data notice at bottom */
#View_CreateListing .data-notice {
    margin-top: var(--spacing-md);
}

/* Mobile responsive adjustments */
@media (max-width: 480px) {
    #View_CreateListing .market-card-grid {
        grid-template-columns: 1fr;
    }

    #View_CreateListing .analysis-header {
        flex-direction: column;
        text-align: center;
    }

    #View_CreateListing .analysis-header .photo-preview-small {
        margin: 0 auto;
    }

    #View_CreateListing .market-card-min,
    #View_CreateListing .market-card-max,
    #View_CreateListing .market-card-value {
        font-size: var(--font-size-lg);
    }
}

/* Dark mode support */
[data-theme="dark"] #View_CreateListing .content.analysis .dialog-scroll,
[data-theme="dark-high-contrast"] #View_CreateListing .content.analysis .dialog-scroll {
    background: linear-gradient(
        180deg,
        var(--color-background) 0%,
        rgba(var(--color-primary-rgb), 0.04) 100%
    );
}

[data-theme="dark"] #View_CreateListing .market-card.primary,
[data-theme="dark-high-contrast"] #View_CreateListing .market-card.primary {
    background: linear-gradient(
        160deg,
        rgba(var(--color-primary-rgb), 0.08) 0%,
        rgba(var(--color-primary-rgb), 0.03) 100%
    );
}

/* ==========================================================================
   57c-2. ANALYSIS PHASE COMPACT LAYOUT
   ==========================================================================
   Celebratory, warm design for the market analysis review state.
   Features: hero with photo badge, inline price chips, compact preview.
   Follows "curated warmth" aesthetic - boutique marketplace, not database.

   Key design goals:
   - Feels like a moment of success, not just a data dump
   - Staggered reveals create delight on entrance
   - Price chips are accomplishments, not clinical rows
   - Everything uses warm gradients and purple-tinted shadows
   ========================================================================== */

/* Staggered reveal animation for analysis phase entrance */
@keyframes analysisReveal {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes badgePop {
    0% {
        opacity: 0;
        transform: scale(0.6);
    }
    60% {
        transform: scale(1.08);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes checkPop {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-45deg);
    }
    60% {
        transform: scale(1.2) rotate(0deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

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

/* ==========================================================================
   Analysis Phase - Guided Market Research Results
   ==========================================================================
   Celebratory success moment with clear guidance. "Sellers like you" is the
   primary price reference for sellers. Curated warmth aesthetic.
   ========================================================================== */

/* Analysis Hero - Celebratory success moment */
#View_CreateListing .analysis-hero {
    margin-bottom: 0;
    text-align: center;
}

#View_CreateListing .analysis-hero .hero-illustration {
    display: flex;
    justify-content: center;
    padding: 0 var(--spacing-xl);
}

/* Photo frame with celebratory glow */
#View_CreateListing .hero-photo-frame {
    position: relative;
    animation: badgePop 0.6s var(--ease-elegant) 0.15s both;
    max-height: initial;
    min-width: 300px;
}

#View_CreateListing .hero-photo-frame::before {
    content: '';
    position: absolute;
    inset: -12px;
    background: radial-gradient(
        circle,
        rgba(var(--color-success-rgb), 0.15) 0%,
        rgba(var(--color-success-rgb), 0.05) 50%,
        transparent 70%
    );
    border-radius: 50%;
    animation: successPulse 2s ease-in-out infinite;
}

@keyframes successPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.05); opacity: 1; }
}

#View_CreateListing .hero-photo-frame img {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius-lg);
    object-fit: cover;
    border: 3px solid var(--color-background);
    box-shadow:
        0 0 0 1px rgba(var(--color-success-rgb), 0.25),
        0 8px 32px -8px rgba(var(--color-success-rgb), 0.35),
        0 4px 12px rgba(0, 0, 0, 0.08);
}

#View_CreateListing .hero-photo-badge {
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
    border-radius: 50%;
    border: 2px solid var(--color-background);
    box-shadow: 0 2px 8px rgba(var(--color-success-rgb), 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: checkPop 0.5s var(--ease-elegant) 0.4s both;
    z-index: 2;
}

#View_CreateListing .hero-photo-badge .icon-check {
    width: 14px;
    height: 14px;
    background-image: url('/images/icon/check-white.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Hero headline - celebratory and prominent */
#View_CreateListing .analysis-hero .hero-headline {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin-bottom: var(--spacing-xs);
    letter-spacing: -0.02em;
}

#View_CreateListing .analysis-hero .hero-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-body);
    line-height: var(--line-height-relaxed);
    max-width: 380px;
    margin: 0 auto;
}

/* Analysis Board - Contains all sections */
#View_CreateListing .analysis-board {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl) !important;
    padding-top: var(--spacing-md) !important;
}

/* Analysis Section - Clean, spacious sections */
#View_CreateListing .analysis-section {
    animation: analysisReveal 0.5s var(--ease-elegant) both;
    align-self: stretch;
}

#View_CreateListing .analysis-section:nth-child(1) { animation-delay: 0.25s; }
#View_CreateListing .analysis-section:nth-child(2) { animation-delay: 0.35s; }
#View_CreateListing .analysis-section:nth-child(3) { animation-delay: 0.45s; }

#View_CreateListing .analysis-section .section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--spacing-md);
}

#View_CreateListing .analysis-section .section-icon {
    width: 18px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
}

#View_CreateListing .analysis-section .icon-search { background-image: url('/images/icon/search-black.svg'); }
#View_CreateListing .analysis-section .icon-chart { background-image: url('/images/icon/trending-up-primary.svg'); opacity: 0.7; }
#View_CreateListing .analysis-section .icon-document { background-image: url('/images/icon/file-text-black.svg'); }

#View_CreateListing .analysis-section .section-title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
    flex-grow: 1;
    text-align: left;
}

#View_CreateListing .analysis-section .section-badge {
    font-size: 9px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm-muted);
    background: var(--color-surface);
    padding: 4px 10px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#View_CreateListing .analysis-section .section-description {
    margin: 0 0 var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
    line-height: var(--line-height-relaxed);
}

/* What We Identified Section */
#View_CreateListing .analysis-identified .identified-content {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-card);
    padding: var(--spacing-lg) var(--spacing-md);
    text-align: center;
    border: 2px solid rgba(var(--color-primary-rgb), 0.25);
}

#View_CreateListing .analysis-identified .identified-title {
    margin: 0 0 6px;
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
    line-height: var(--line-height-tight);
}

#View_CreateListing .analysis-identified .identified-category {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#View_CreateListing .analysis-identified .identified-category::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-primary);
    opacity: 0.6;
}

/* Market Prices - Grid layout with clear hierarchy */
#View_CreateListing .market-prices {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#View_CreateListing .market-price {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 12px var(--spacing-md);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    transition: all 0.2s var(--ease-elegant);
}

/* Staggered entrance */
#View_CreateListing .market-price:nth-child(1) { animation: analysisReveal 0.4s var(--ease-elegant) 0.45s both; }
#View_CreateListing .market-price:nth-child(2) { animation: analysisReveal 0.4s var(--ease-elegant) 0.5s both; }
#View_CreateListing .market-price:nth-child(3) { animation: analysisReveal 0.4s var(--ease-elegant) 0.55s both; }
#View_CreateListing .market-price:nth-child(4) { animation: analysisReveal 0.4s var(--ease-elegant) 0.6s both; }
#View_CreateListing .market-price:nth-child(5) { animation: analysisReveal 0.4s var(--ease-elegant) 0.65s both; }

#View_CreateListing .market-price:hover {
    background: var(--color-surface);
}

/* RECOMMENDED: "Sellers like you" - Primary highlight */
#View_CreateListing .market-price.recommended {
    background: linear-gradient(
        135deg,
        rgba(var(--color-primary-rgb), 0.08) 0%,
        rgba(var(--color-primary-rgb), 0.03) 100%
    );
    border: 2px solid rgba(var(--color-primary-rgb), 0.25);
    padding: 14px var(--spacing-md);
    box-shadow: 0 2px 12px rgba(var(--color-primary-rgb), 0.1);
}

#View_CreateListing .market-price.recommended:hover {
    border-color: rgba(var(--color-primary-rgb), 0.35);
    box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), 0.15);
}

#View_CreateListing .market-price.recommended .price-label {
    flex-wrap: wrap;
    gap: 6px;
}

#View_CreateListing .market-price.recommended .recommended-badge {
    font-size: 9px;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-dark);
    background: rgba(var(--color-primary-rgb), 0.12);
    padding: 3px 8px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

#View_CreateListing .market-price.recommended .price-range {
    color: var(--color-primary-dark);
    font-size: 1.125rem;
}

#View_CreateListing .market-price.recommended .price-icon {
    opacity: 0.8;
}

#View_CreateListing .market-price .price-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-body);
    min-width: 120px;
}

#View_CreateListing .market-price .price-icon {
    width: 18px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
    flex-shrink: 0;
}

#View_CreateListing .market-price .icon-location { background-image: url('/images/icon/map-pin-black.svg'); }
#View_CreateListing .market-price .icon-globe { background-image: url('/images/icon/globe-black.svg'); }
#View_CreateListing .market-price .icon-map { background-image: url('/images/icon/map-black.svg'); }
#View_CreateListing .market-price .icon-user { background-image: url('/images/icon/user-black.svg'); }
#View_CreateListing .market-price .icon-store { background-image: url('/images/icon/store-black.svg'); }

#View_CreateListing .market-price .price-range,
#View_CreateListing .market-price .price-value {
    margin-left: auto;
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-warm);
    font-variant-numeric: tabular-nums;
}

#View_CreateListing .market-price .range-sep {
    padding: 0 3px;
    opacity: 0.4;
    font-weight: var(--font-weight-normal);
}

#View_CreateListing .market-price.muted {
    opacity: 0.6;
}

#View_CreateListing .market-price .price-stats {
    display: flex;
    gap: var(--spacing-md);
    width: 100%;
    padding-top: var(--spacing-xs);
    margin-top: var(--spacing-xs);
    border-top: 1px dashed var(--color-border);
    font-size: var(--font-size-xs);
    color: var(--color-text-warm-muted);
}

#View_CreateListing .market-price .price-stats .stat {
    display: flex;
    gap: 4px;
}

/* Condition tip */
#View_CreateListing .condition-tip {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(var(--color-primary-rgb), 0.04);
    border-radius: var(--border-radius-sm);
    margin-top: var(--spacing-md);
}

#View_CreateListing .condition-tip .tip-icon {
    width: 16px;
    height: 16px;
    background-image: url('/images/icon/lightbulb-primary.svg');
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
    margin-top: 2px;
}

#View_CreateListing .condition-tip .tip-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-body);
    line-height: var(--line-height-relaxed);
}

/* Listing Card Preview - Product card style */
#View_CreateListing .listing-card-preview {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-card);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-xs);
}

#View_CreateListing .listing-card-preview .preview-title {
    margin: 0 0 var(--spacing-sm);
    font-size: 1.0625rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
    line-height: var(--line-height-tight);
}

#View_CreateListing .listing-card-preview .preview-description {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-body);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Listing Intent Section - Toggle-based listing mode selector */
#View_CreateListing .analysis-section:nth-child(4) { animation-delay: 0.55s; }

#View_CreateListing .analysis-intent .intent-toggles {
    gap: var(--spacing-sm);
}

#View_CreateListing .analysis-intent .intent-toggle {
    display: flex;
    align-items: flex-start;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-card);
    background: var(--color-background);
    transition: border-color 0.25s var(--ease-elegant), background 0.25s var(--ease-elegant);
}

#View_CreateListing .analysis-intent .intent-toggle:has(.toggle-checkbox:checked) {
    border-color: rgba(var(--color-primary-rgb), 0.3);
    background: rgba(var(--color-primary-rgb), 0.03);
}

#View_CreateListing .analysis-intent .toggle-label {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    cursor: pointer;
    user-select: none;
    flex: 1;
}

#View_CreateListing .analysis-intent .toggle-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 2px;
}

#View_CreateListing .analysis-intent .toggle-text {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
}

#View_CreateListing .analysis-intent .toggle-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-warm-muted);
    line-height: var(--line-height-relaxed);
}

#View_CreateListing .intent-mode-summary {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-sm);
    font-size: var(--font-size-xs);
    color: var(--color-text-warm-muted);
    border-radius: var(--border-radius-sm);
    background: var(--color-surface);
    line-height: var(--line-height-relaxed);
}

#View_CreateListing .intent-mode-value {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
    white-space: nowrap;
}

#View_CreateListing .intent-mode-value::after {
    content: '\2014';
    font-weight: var(--font-weight-normal);
    color: var(--color-text-warm-muted);
    margin-left: var(--spacing-xs);
}

#View_CreateListing .intent-mode-description {
    color: var(--color-text-warm-muted);
}

#View_CreateListing .analysis-intent .icon-settings {
    background-image: url('/images/icon/settings-black.svg');
}

/* Price Input (conditional on listing mode) */
#View_CreateListing .analysis-price-input {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    animation: analysisReveal 0.3s var(--ease-elegant) both;
}

#View_CreateListing .analysis-price-input .price-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
    margin-bottom: var(--spacing-xs);
}

#View_CreateListing .analysis-price-input .price-input-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    max-width: 200px;
}

#View_CreateListing .analysis-price-input .price-currency {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm-muted);
}

#View_CreateListing .analysis-price-input .price-field {
    flex: 1;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
    background: var(--color-background);
    outline: none;
    transition: border-color 0.2s ease;
}

#View_CreateListing .analysis-price-input .price-field:focus {
    border-color: var(--color-primary);
}

#View_CreateListing .analysis-price-input .price-field::-webkit-inner-spin-button,
#View_CreateListing .analysis-price-input .price-field::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#View_CreateListing .analysis-price-input .price-field[type=number] {
    -moz-appearance: textfield;
}

#View_CreateListing .analysis-price-input .price-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-warm-muted);
    margin-top: var(--spacing-xs);
    margin-bottom: 0;
}

/* What's Next Notice */
#View_CreateListing .analysis-next-steps {
    animation: analysisReveal 0.5s var(--ease-elegant) 0.65s both;
}

#View_CreateListing .analysis-next-steps .icon-arrow-right {
    background-image: url('/images/icon/arrow-right-primary.svg');
}

/* Mobile responsive */
@media (max-width: 480px) {
    #View_CreateListing .analysis-hero .hero-illustration {
        padding: var(--spacing-lg) 0 var(--spacing-md);
    }

    #View_CreateListing .hero-photo-frame::before {
        inset: -8px;
    }

    #View_CreateListing .hero-photo-badge {
        width: 24px;
        height: 24px;
        bottom: -4px;
        right: -4px;
    }

    #View_CreateListing .hero-photo-badge .icon-check {
        width: 12px;
        height: 12px;
    }

    #View_CreateListing .analysis-hero .hero-headline {
        font-size: 1.25rem;
    }

    #View_CreateListing .analysis-board {
        gap: var(--spacing-lg);
    }

    #View_CreateListing .market-price {
        padding: 10px var(--spacing-sm);
    }

    #View_CreateListing .market-price.recommended {
        padding: 12px var(--spacing-sm);
    }

    #View_CreateListing .market-price .price-label {
        min-width: 100px;
        font-size: var(--font-size-xs);
    }

    #View_CreateListing .market-price .price-range,
    #View_CreateListing .market-price .price-value {
        font-size: var(--font-size-sm);
    }

    #View_CreateListing .market-price.recommended .price-range {
        font-size: 1rem;
    }

    #View_CreateListing .listing-card-preview {
        padding: var(--spacing-md);
    }
}

/* Tablet - grid layout for prices */
@media (min-width: 600px) {
    #View_CreateListing .market-prices {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /* Recommended spans full width for emphasis */
    #View_CreateListing .market-price.recommended {
        grid-column: 1 / -1;
    }
}

/* Dark mode */
[data-theme="dark"] #View_CreateListing .hero-photo-frame::before,
[data-theme="dark-high-contrast"] #View_CreateListing .hero-photo-frame::before {
    background: radial-gradient(
        circle,
        rgba(var(--color-success-rgb), 0.2) 0%,
        rgba(var(--color-success-rgb), 0.08) 50%,
        transparent 70%
    );
}

[data-theme="dark"] #View_CreateListing .hero-photo-frame img,
[data-theme="dark-high-contrast"] #View_CreateListing .hero-photo-frame img {
    border-color: var(--color-surface);
    box-shadow:
        0 0 0 1px rgba(var(--color-success-rgb), 0.35),
        0 8px 32px -8px rgba(var(--color-success-rgb), 0.4),
        0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] #View_CreateListing .analysis-hero .hero-headline,
[data-theme="dark-high-contrast"] #View_CreateListing .analysis-hero .hero-headline {
    color: var(--color-primary-light);
}

[data-theme="dark"] #View_CreateListing .analysis-identified .identified-content,
[data-theme="dark-high-contrast"] #View_CreateListing .analysis-identified .identified-content {
    background: var(--color-surface);
}

[data-theme="dark"] #View_CreateListing .market-price,
[data-theme="dark-high-contrast"] #View_CreateListing .market-price {
    background: var(--color-surface);
}

[data-theme="dark"] #View_CreateListing .market-price.recommended,
[data-theme="dark-high-contrast"] #View_CreateListing .market-price.recommended {
    background: linear-gradient(
        135deg,
        rgba(var(--color-primary-rgb), 0.15) 0%,
        rgba(var(--color-primary-rgb), 0.08) 100%
    );
    border-color: rgba(var(--color-primary-rgb), 0.35);
}

[data-theme="dark"] #View_CreateListing .listing-card-preview,
[data-theme="dark-high-contrast"] #View_CreateListing .listing-card-preview {
    background: var(--color-surface);
}

[data-theme="dark"] #View_CreateListing .condition-tip,
[data-theme="dark-high-contrast"] #View_CreateListing .condition-tip {
    background: rgba(var(--color-primary-rgb), 0.1);
}


/* ==========================================================================
   57d. EXISTING PHOTOS GRID
   ==========================================================================
   Grid for displaying existing photo thumbnails.
   Used in VariantPhotoDialog photo selection.

   HTML:
     <div class="existing-photos-section">
       <div class="section-title">Choose a Photo</div>
       <div class="existing-photos">
         <!-- Photos rendered dynamically -->
       </div>
       <div class="empty-state">...</div>
     </div>
   ========================================================================== */

.existing-photos-section {
    margin-bottom: var(--spacing-md);
}

.existing-photos-section .section-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
}

.existing-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: var(--spacing-sm);
}

.existing-photos .photo-thumb {
    aspect-ratio: 1;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.15s var(--ease-elegant);
}

.existing-photos .photo-thumb:hover {
    border-color: var(--color-primary-muted);
    transform: scale(1.02);
}

.existing-photos .photo-thumb.selected {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-muted);
}

.existing-photos .photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Empty state within photo section */
.existing-photos-section .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-lg);
    color: var(--color-text-muted);
    text-align: center;
}

.existing-photos-section .empty-state .icon {
    font-size: 2rem;
    margin-bottom: var(--spacing-sm);
    opacity: 0.5;
}

.existing-photos-section .empty-state .message {
    font-weight: var(--font-weight-medium);
}


/* ==========================================================================
   57e. ASSIGNMENT OPTIONS (RADIO LIST)
   ==========================================================================
   Vertical radio button list for photo assignment.
   Used in VariantPhotoDialog assign pane.

   HTML:
     <div class="assignment-options">
       <label class="option">
         <input type="radio" name="photo-scope" value="variant">
         <span class="radio-indicator"></span>
         <span class="option-label">This option only</span>
       </label>
     </div>
   ========================================================================== */

.assignment-section {
    margin-top: var(--spacing-md);
}

.assignment-section .section-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
}

.assignment-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.assignment-options .option {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.assignment-options .option:hover {
    background-color: var(--color-surface);
}

.assignment-options .option input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--color-primary);
}

.assignment-options .option .option-label {
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

/* Photo preview in assign pane */
.photo-preview {
    max-width: 200px;
    margin: 0 auto var(--spacing-md);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.photo-preview img {
    width: 100%;
    height: auto;
    display: block;
}


/* ==========================================================================
   57f. OFFER REVIEW
   ==========================================================================
   Offer comparison layout for AcceptOfferView negotiation dialog.
   Style guide: "Curated warmth" — card-based, warm text, clear hierarchy.

   HTML:
     <div class="offer-review">
       <div class="offer-comparison">
         <div class="offer-row offer-highlight">
           <span class="offer-label">Current offer</span>
           <span class="offer-amount">$260.00</span>
         </div>
         <div class="offer-row">
           <span class="offer-label">Asking price</span>
           <span class="offer-amount">$385.00</span>
         </div>
       </div>
       <div class="offer-instructions"><p>...</p></div>
     </div>
   ========================================================================== */

.offer-review {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    padding: var(--spacing-md) 0;
}

.offer-comparison {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.offer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--color-border-light);
}

.offer-row:last-child {
    border-bottom: none;
}

.offer-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-warm-muted);
}

.offer-amount {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
    font-variant-numeric: tabular-nums;
}

/* Highlighted row — the main offer being reviewed */
.offer-row.offer-highlight {
    background: linear-gradient(135deg, rgba(92, 67, 244, 0.04) 0%, rgba(92, 67, 244, 0.01) 100%);
    border-bottom: 1px solid var(--color-border-primary-faint);
}

.offer-row.offer-highlight .offer-label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm-medium);
}

.offer-row.offer-highlight .offer-amount {
    font-size: var(--font-size-xl);
    color: var(--color-primary);
}

/* Counter offer highlight — success tint */
.offer-row.offer-counter {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.04) 0%, rgba(34, 197, 94, 0.01) 100%);
    border-bottom: 1px solid rgba(34, 197, 94, 0.1);
}

.offer-row.offer-counter .offer-amount {
    color: var(--color-success);
}

/* Instructional text */
.offer-instructions {
    padding: 0 var(--spacing-xs);
}

.offer-instructions p {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-warm-muted);
    margin: 0;
    text-align: center;
}

/* Role-based visibility: hide buttons for the wrong role */
/* Seller view: hide buyer-only buttons */
#View_AcceptOffer[ux-seller]:not([ux-buyer]) [ux-buyer] {
    display: none;
}
/* Buyer view: hide seller-only buttons */
#View_AcceptOffer[ux-buyer]:not([ux-seller]) [ux-seller] {
    display: none;
}

/* Rejected state: hide accept and reject buttons — only counter or close make sense */
#View_AcceptOffer[ux-rejected] [event-name="Messaging-AcceptOffer"] {
    display: none;
}
#View_AcceptOffer[ux-rejected] [event-name="Messaging-RejectOffer"] {
    display: none;
}

/* Stacked footer buttons for review offer dialog */
#View_AcceptOffer > .content > .dialog-footer {
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
}

#View_AcceptOffer > .content > .dialog-footer .command {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-sm) var(--spacing-md);
}

/* --- Offer Amount Dialog (Dlg_OfferAmount) --- */
/* Compact subdialog — no need for full viewport height */
#Dlg_OfferAmount {
    max-height: 60dvh;
}

.offer-amount-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    padding: var(--spacing-sm) 0;
    align-self: center;
}

.offer-amount-context {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}

.offer-amount-input {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.offer-amount-input-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm-medium);
}

.offer-amount-input .incrementer {
    align-self: center;
}

.offer-amount-hint {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-warm-muted);
    text-align: center;
    margin: 0;
    padding: 0 var(--spacing-md);
}


/* ==========================================================================
   57g. INTRO / TIP / ERROR SECTIONS
   ==========================================================================
   Text intro blocks, tip banners, and error states used in onboarding flows.
   Used in CreateListingView, VariantPhotoDialog, etc.
   ========================================================================== */

/* Intro text sections */
.photo-requirement-intro,
.camera-intro,
.category-selection-intro {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.photo-requirement-intro h3,
.camera-intro h3,
.category-selection-intro h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0 0 var(--spacing-xs) 0;
}

.photo-requirement-intro p,
.camera-intro p,
.category-selection-intro p {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0;
    line-height: var(--line-height-relaxed);
}

/* Tip banner (icon + text) */
.photo-tip {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--color-info-lighter);
    border-radius: var(--border-radius-md);
    margin-top: var(--spacing-lg);
}

.photo-tip .tip-icon {
    font-size: var(--font-size-lg);
    line-height: 1;
}

.photo-tip .tip-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: var(--line-height-relaxed);
}

/* Error banner */
.photo-error {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--color-error-lighter);
    border: 1px solid var(--color-error-light);
    border-radius: var(--border-radius-md);
    margin-top: var(--spacing-md);
}

.photo-error .error-icon {
    font-size: var(--font-size-lg);
    line-height: 1;
}

.photo-error .error-text {
    font-size: var(--font-size-sm);
    color: var(--color-error);
    font-weight: var(--font-weight-medium);
}


/* ==========================================================================
   57h. CAMERA CONTROLS
   ==========================================================================
   Camera interface for photo capture.
   Used in CreateListingView, VariantPhotoDialog.
   ========================================================================== */

.dialog .camera.content .board {
    flex-grow: 0 !important;
}

.camera-container {
    position: relative;
    width: 100%;
    background: var(--color-text);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    margin: 0 var(--spacing-lg);
    box-sizing: border-box;
    width: auto;
    align-self: stretch;
    justify-self: stretch;
    margin-top: 0;
    margin-bottom: auto;
}
.dia

.camera-preview {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
}

.camera-snapshot {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

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

.camera-controls {
    position: absolute;
    bottom: var(--spacing-lg);
    left: 50%;
    transform: translateX(-50%);
}

.camera-controls .cmdCapture {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    color: white;
    cursor: pointer;
}

.camera-controls .capture-button {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.camera-controls .capture-button:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
}

.camera-controls .capture-inner {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: white;
    transition: transform 0.1s ease;
}

.camera-controls .cmdCapture:active .capture-inner {
    transform: scale(0.9);
}

.camera-controls .cmdCapture span {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* --- Progress Module inside Camera Container ---
   Reuses UploadProgressModel from framework (same as file uploader)
   with dark-background-appropriate colors for the camera overlay. */
.camera-container > .progress.module {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    border-radius: var(--border-radius-md);
    z-index: 10;
    animation: progress-fade-in 0.25s var(--ease-elegant);
}

.camera-container > .progress.module > .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    max-width: 240px;
    padding: var(--spacing-lg);
    position: relative;
}

.camera-container > .progress.module .text {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
}

/* Track background */
.camera-container > .progress.module > .content::after {
    content: '';
    display: block;
    width: 100%;
    max-width: 200px;
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--border-radius-full);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    order: 1;
}

/* Progress bar fill */
.camera-container > .progress.module .bar {
    height: 4px;
    max-width: 200px;
    background: linear-gradient(
        90deg,
        var(--color-primary) 0%,
        rgba(0, 255, 203, 0.8) 100%
    );
    border-radius: var(--border-radius-full);
    transition: width 0.3s ease-out;
    position: relative;
    z-index: 1;
}

/* Running state shimmer */
.camera-container > .progress.module.running .bar {
    overflow: hidden;
}
.camera-container > .progress.module.running .bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.5) 50%,
        transparent 100%
    );
    animation: upload-shimmer 1.5s infinite;
}

/* Complete state */
.camera-container > .progress.module.complete .text {
    color: var(--color-success, #22c55e);
}
.camera-container > .progress.module.complete::before {
    content: '';
    width: 40px;
    height: 40px;
    margin-bottom: var(--spacing-sm);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Error state */
.camera-container > .progress.module.error .text {
    color: var(--color-error, #ef4444);
}
.camera-container > .progress.module.error::before {
    content: '';
    width: 40px;
    height: 40px;
    margin-bottom: var(--spacing-sm);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Hide cancel/status (not used for camera) */
.camera-container > .progress.module .cmdCancel,
.camera-container > .progress.module .status {
    display: none;
}


/* ==========================================================================
   57i. CATEGORY CARDS
   ==========================================================================
   Grid of selectable category cards for product classification.
   Used in CreateListingView category selection state.
   Matches the warm, inviting aesthetic of the upload step.
   ========================================================================== */

/* Category photo context - photo + heading as one connected unit */
.category-photo-context {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
}

.category-photo-frame {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: var(--border-radius-card);
    overflow: hidden;
    border: 2px solid var(--color-border-light);
    box-shadow: var(--shadow-card);
}

.category-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-photo-text h4 {
    margin: 0 0 var(--spacing-xs) 0;
}

.category-photo-text .dialog-subtitle {
    margin: 0;
}

/* Override .card-grid constraints for category selection */
.category-cards-container {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm);
    /* Override card-grid's restrictive max-width columns */
    display: block;
}

.category-cards-container.card-grid {
    /* Override the base .card-grid which uses minmax(280px, 340px) */
    grid-template-columns: unset;
}

.category-cards {
    display: grid;
    /* Use 1fr to ensure cards stretch to fill available width */
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--spacing-md);
    width: 100%;
}

/* --- Category Card Base --- */
.category-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-md);
    background: linear-gradient(
        165deg,
        var(--color-background) 0%,
        rgba(var(--color-primary-rgb), 0.02) 100%
    );
    border: 2px solid var(--color-border-light);
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    transition: var(--transition-card);
    text-align: center;
    animation: clFadeInUp 0.4s var(--ease-elegant) both;
}

.category-card:nth-child(1) { animation-delay: 0.05s; }
.category-card:nth-child(2) { animation-delay: 0.1s; }
.category-card:nth-child(3) { animation-delay: 0.15s; }
.category-card:nth-child(4) { animation-delay: 0.2s; }
.category-card:nth-child(5) { animation-delay: 0.25s; }
.category-card:nth-child(6) { animation-delay: 0.3s; }

/* Hover state */
.category-card:hover {
    border-color: rgba(var(--color-primary-rgb), 0.4);
    background: linear-gradient(
        165deg,
        var(--color-background) 0%,
        rgba(var(--color-primary-rgb), 0.05) 100%
    );
    box-shadow:
        0 8px 24px rgba(var(--color-primary-rgb), 0.12),
        0 4px 8px rgba(var(--color-primary-rgb), 0.06);
    transform: translateY(-4px);
}

/* Selected state */
.category-card.selected {
    border-color: var(--color-primary);
    background: linear-gradient(
        165deg,
        rgba(var(--color-primary-rgb), 0.04) 0%,
        rgba(var(--color-primary-rgb), 0.08) 100%
    );
    box-shadow:
        0 0 0 3px rgba(var(--color-primary-rgb), 0.15),
        0 8px 24px rgba(var(--color-primary-rgb), 0.15);
}

.category-card.selected::after {
    content: "";
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    width: 24px;
    height: 24px;
    background: var(--color-primary);
    border-radius: var(--border-radius-full);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 14px;
    background-position: center;
    background-repeat: no-repeat;
    animation: clPopIn 0.25s var(--ease-spring) both;
}

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

/* Keyboard navigation highlight (active but not yet selected) */
.category-card.active:not(.selected) {
    border-color: var(--color-primary-light);
    background: var(--color-surface-hover);
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.1);
}

/* Focus ring for accessibility */
.category-card:focus {
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

.category-card:focus:not(.selected) {
    border-color: var(--color-border-medium);
}

/* --- Primary Match (Best Result) --- */
.category-card.primary-match {
    border-color: rgba(var(--color-primary-rgb), 0.25);
    background: linear-gradient(
        165deg,
        rgba(var(--color-primary-rgb), 0.03) 0%,
        rgba(var(--color-secondary-rgb), 0.02) 100%
    );
}

.category-card.primary-match::before {
    content: "Best Match";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px var(--spacing-sm);
    background: linear-gradient(135deg, var(--color-primary) 0%, rgba(var(--color-primary-rgb), 0.85) 100%);
    color: white;
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--border-radius-full);
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.3);
    z-index: 1;
}

/* --- Card Image Section --- */
.category-card .card-image {
    position: relative;
    margin-bottom: var(--spacing-sm);
}

.category-card .card-thumbnail {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    background: linear-gradient(
        135deg,
        var(--color-surface) 0%,
        rgba(var(--color-primary-rgb), 0.03) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-card .card-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s var(--ease-elegant);
}

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

/* --- Confidence Badges (using status-badge pattern from badges.html) --- */
/* Positioned at bottom of card-image, uses dot+pill pattern */
.category-card .confidence-badge {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    /* Use status-badge base styling */
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px var(--spacing-sm) 2px 6px;
    border-radius: var(--border-radius-full);
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    z-index: 1;
}

/* The dot - created via ::before pseudo-element */
.category-card .confidence-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* High confidence: green (status-complete pattern) */
.category-card .confidence-badge.high {
    background: rgba(34, 197, 94, 0.12);
    color: var(--color-success-dark, #15803d);
}

.category-card .confidence-badge.high::before {
    background: var(--color-success);
}

/* Medium confidence: amber (status-warning pattern) */
.category-card .confidence-badge.medium {
    background: rgba(245, 158, 11, 0.12);
    color: var(--color-warning-text, #b45309);
}

.category-card .confidence-badge.medium::before {
    background: var(--color-warning);
}

/* --- Card Content --- */
.category-card .card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: var(--spacing-xs);
}

.category-card .card-type {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
    line-height: var(--line-height-tight);
}

.category-card .card-path {
    font-size: 11px;
    order: 100;
    color: var(--color-text-warm-muted);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.category-card .card-label {
    font-size: 10px;
    order: 01;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* --- Fallback Option (None of These) --- */
.category-card.fallback-option {
    border: 2px dashed rgba(var(--color-primary-rgb), 0.25);
    background: linear-gradient(
        135deg,
        rgba(var(--color-primary-rgb), 0.02) 0%,
        rgba(var(--color-secondary-rgb), 0.015) 100%
    );
}

.category-card.fallback-option:hover {
    border-color: var(--color-primary);
    border-style: dashed;
    background: linear-gradient(
        135deg,
        rgba(var(--color-primary-rgb), 0.05) 0%,
        rgba(var(--color-secondary-rgb), 0.03) 100%
    );
}

.category-card.fallback-option .card-thumbnail.fallback {
    background: linear-gradient(
        145deg,
        rgba(var(--color-primary-rgb), 0.08) 0%,
        rgba(var(--color-primary-rgb), 0.04) 100%
    );
}

.category-card.fallback-option .card-thumbnail.fallback .fallback-icon {
    width: 36px;
    height: 36px;
    color: var(--color-primary);
    opacity: 0.7;
    transition: opacity 0.2s var(--ease-default);
}

.category-card.fallback-option:hover .card-thumbnail.fallback .fallback-icon {
    opacity: 1;
}

.category-card.fallback-option .card-label {
    color: var(--color-primary);
}

.category-card.fallback-option .card-path {
    color: var(--color-text-warm-muted);
}

/* --- Mobile Responsive --- */
@media (max-width: 480px) {
    .category-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    .category-card {
        padding: var(--spacing-sm);
    }

    .category-card .card-label {
        font-size: var(--font-size-xs);
    }

    .category-card .card-path {
        font-size: 10px;
        -webkit-line-clamp: 1;
    }

    .category-card.primary-match::before {
        font-size: 9px;
        padding: 2px 6px;
    }
}

/* Category help section */
.category-help {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--spacing-md);
    background: var(--color-surface);
    border-radius: var(--border-radius-md);
}

.category-help .notice-icon {
    display: none;
}

.category-help .notice-actions {
    margin-top: var(--spacing-xs);
}


/* ==========================================================================
   57j. MARKET DATA CARDS
   ==========================================================================
   Pricing/market analysis cards showing price ranges and statistics.
   Used in CreateListingView analysis state.
   ========================================================================== */

.market-data-card {
    padding: var(--spacing-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    margin-bottom: var(--spacing-sm);
}

.market-data-card .market-card-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-xs);
}

.market-data-card .market-card-range {
    margin-bottom: var(--spacing-sm);
}

.market-data-card .price-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: 2px;
}

.market-data-card .price-values {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

.market-data-card .price-separator {
    color: var(--color-text-muted);
    margin: 0 var(--spacing-xs);
}

.market-data-card .market-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border-light);
}

.market-data-card .stat {
    font-size: var(--font-size-sm);
}

.market-data-card .stat-label {
    color: var(--color-text-muted);
}

.market-data-card .stat-value {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.market-data-card .data-source {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    margin-top: var(--spacing-xs);
}

/* Market card variants — DEPRECATED: colored border-left approach
   These classes are kept for backwards compatibility but new implementations
   should use the gradient-based .market-card pattern instead.
   The border-left approach violates the style guide ("never use thick colored borders").
   ================================================================================== */
.market-data-card.market-cardlocal {
    background: var(--gradient-tint-primary);
    border-left: none;
    border-color: var(--color-border-primary-subtle);
}

.market-data-card.market-cardnational {
    background: var(--gradient-tint-info);
    border-left: none;
    border-color: var(--color-state-info-border);
}

.market-data-card.market-cardregional {
    background: var(--gradient-tint-success);
    border-left: none;
    border-color: var(--color-state-success-border);
}

.market-data-card.market-cardprivate {
    background: var(--gradient-tint-warning);
    border-left: none;
    border-color: var(--color-state-warning-border);
}

.market-data-card.market-cardretail {
    background: var(--gradient-tint-neutral);
    border-left: none;
    border-color: var(--color-border-light);
}


/* ==========================================================================
   58. NOTICE BANNER
   ==========================================================================
   Compact inline notice with icon + content for contextual alerts within
   dialogs and forms. Supports semantic variants (info, warning, success, error).

   NOT the same as .tip-* (Section 23 — plain colored text blocks with
   border-left accent) or .callout (Section 34 — full-width content-page blocks).

   HTML:
     <div class="notice-banner notice-info">
       <div class="notice-icon">ℹ️</div>
       <div class="notice-content">Message text here.</div>
     </div>
   ========================================================================== */

.notice-banner {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
}

.notice-banner .notice-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    text-align: center;
    font-size: var(--font-size-base);
    line-height: 1.4;
}

/* CSS icon fallback when .notice-icon is empty */
.notice-banner .notice-icon:empty::before {
    content: "ℹ";
    display: block;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    line-height: 20px;
}

/* Lightning bolt icon for live operation notices */
.notice-banner.notice-info .notice-icon:empty::before {
    content: "⚡";
}

.notice-banner.notice-warning .notice-icon:empty::before {
    content: "⚠";
}

.notice-banner.notice-success .notice-icon:empty::before {
    content: "✓";
}

.notice-banner.notice-error .notice-icon:empty::before {
    content: "✕";
}

/* SVG icon support in notice banners */
.notice-banner .notice-icon.icon-svg {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 0;
    text-indent: -9999px;
}

.notice-banner .notice-icon.icon-lightbulb {
    background-image: url(/images/icon/lightbulb-primary.svg);
}

.notice-banner .notice-icon.icon-info {
    background-image: url(/images/icon/info-circle-secondary.svg);
}

.notice-banner .notice-icon.icon-bolt {
    background-image: url(/images/icon/bolt-primary.svg);
}

.notice-banner .notice-icon.icon-warning {
    background-image: url(/images/icon/warning-secondary.svg);
}

.notice-banner .notice-icon.icon-warning {
    background-image: url(/images/icon/warning-hexagon-primary.svg);
}

.notice-banner .notice-content {
    flex: 1;
    min-width: 0;
}

    .notice-banner .notice-content strong {
        font-weight: var(--font-weight-semibold);
    }

/* --- Semantic variants --- */

.notice-banner.notice-info {
    background-color: var(--color-info-light);
    border-color: rgba(var(--color-info-rgb), 0.25);
    color: var(--color-info-dark);
    align-items:center;
    margin:var(--spacing-sm);
    align-self:center; 
}

@media (max-width: 680px) {
    .notice-banner.category-help {
        flex-direction: row;
        flex-wrap: wrap;
        padding: var(--spacing-xs);
        font-size: var(--font-size-xs);
        text-align: left;
    }

    .notice-banner.category-help .notice-actions {
        flex-basis: 100%;
        justify-content: center;
    }
}

.notice-banner.notice-warning {
    background-color: var(--color-warning-light);
    border-color: rgba(var(--color-warning-rgb), 0.25);
    color: var(--color-warning-dark);
}

.notice-banner.notice-success {
    background-color: var(--color-success-light);
    border-color: rgba(var(--color-success-rgb), 0.25);
    color: var(--color-success-dark);
}

.notice-banner.notice-error {
    background-color: var(--color-error-light);
    border-color: rgba(var(--color-error-rgb), 0.25);
    color: var(--color-error-dark);
}

/* Notice banner with actions (buttons on the right) */
.notice-banner .notice-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-shrink: 0;
    align-items: center;
    margin-left: auto;
}

.notice-banner .notice-actions .btn,
.notice-banner .notice-actions .command {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
}

/* Muted variant for neutral/informational banners */
.notice-banner.notice-muted {
    background-color: var(--color-surface-darkened);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

/* Subscription limit notice inside dialogs */
.notice-banner.subscription-limit {
    margin: var(--spacing-sm) 0;
}

.notice-banner.subscription-limit .limit-title {
    display: block;
    margin-bottom: 2px;
}

.notice-banner.subscription-limit .limit-message {
    margin: 0;
    font-size: var(--font-size-sm);
    opacity: 0.85;
}

/* --- Usage indicators --- */

/* Inline usage indicator (inside dialog headers) */
.usage-indicator {
    font-size: var(--font-size-xs);
    color: var(--color-text-warm-muted);
    margin-top: var(--spacing-xs);
    transition: var(--transition-fast);
}

.usage-indicator.usage-near-limit {
    color: var(--color-warning-dark);
}

.usage-indicator.usage-at-limit {
    color: var(--color-error);
    font-weight: var(--font-weight-semibold);
}

.usage-indicator .link {
    color: var(--color-primary);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(92, 67, 244, 0.3);
}

.usage-indicator .link:hover {
    text-decoration-color: var(--color-primary);
}

/* Usage pills in section headers (compact, inline) */
.usage-pill {
    font-size: 10px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text-warm-muted);
    background: rgba(92, 67, 244, 0.04);
    padding: 1px 6px;
    border-radius: var(--border-radius-full);
    margin-left: var(--spacing-xs);
    letter-spacing: 0.01em;
    vertical-align: middle;
}

.usage-pill.near-limit {
    color: var(--color-warning-dark);
    background: rgba(var(--color-warning-rgb), 0.08);
}

.usage-pill.at-limit {
    color: var(--color-error);
    background: rgba(var(--color-error-rgb), 0.08);
    font-weight: var(--font-weight-semibold);
}

/* Usage Summary Bar (My Listings dashboard) */
.usage-summary-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    border-top: 1px solid var(--color-border-light);
    gap: var(--spacing-md);
}

.usage-summary-items {
    display: flex;
    gap: var(--spacing-lg);
}

.usage-summary-item {
    min-width: 140px;
}

.usage-summary-item .usage-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-warm-muted);
    display: block;
}

.usage-summary-item .usage-value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm-primary);
}

.usage-bar {
    height: 4px;
    background: var(--color-surface-warm-secondary);
    border-radius: var(--border-radius-full);
    margin-top: 3px;
    overflow: hidden;
}

.usage-bar-fill {
    height: 100%;
    border-radius: var(--border-radius-full);
    background: var(--color-primary);
    transition: width var(--transition-fast);
}

.usage-bar-fill.near-limit {
    background: var(--color-warning);
}

.usage-bar-fill.at-limit {
    background: var(--color-error);
}

.usage-summary-plan {
    font-size: var(--font-size-xs);
    color: var(--color-text-warm-muted);
    white-space: nowrap;
}

.usage-summary-plan .plan-name {
    margin-right: var(--spacing-xs);
}

.usage-summary-plan .plan-link {
    color: var(--color-primary);
    text-decoration: none;
}

.usage-summary-plan .plan-link:hover {
    text-decoration: underline;
}

/* Fee Savings Note (Checkout upgrade prompt) */
.fee-savings-note {
    font-size: var(--font-size-xs);
    color: var(--color-text-warm-muted);
    margin-top: var(--spacing-sm);
    line-height: 1.5;
}

.fee-savings-note strong {
    color: var(--color-primary);
}

.fee-savings-link {
    color: var(--color-primary);
    text-decoration: none;
    margin-left: var(--spacing-xxs);
}

.fee-savings-link:hover {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .usage-summary-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    .usage-summary-items {
        width: 100%;
    }
    .usage-summary-item {
        flex: 1;
        min-width: 0;
    }
}


/* Billing Paused Banners */
.billing-paused-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--color-error-bg, #fef2f2);
    border: 1px solid var(--color-error-border, #fecaca);
    border-radius: var(--radius-md, 8px);
    margin-bottom: var(--spacing-md);
}

.billing-paused-banner .icon-alert {
    color: var(--color-error, #dc2626);
    flex-shrink: 0;
    margin-top: 2px;
}

.billing-paused-content {
    flex: 1;
}

.billing-paused-content p {
    margin: var(--spacing-xxs) 0 var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.billing-paused-inline {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-error-bg, #fef2f2);
    border: 1px solid var(--color-error-border, #fecaca);
    border-radius: var(--radius-md, 8px);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.billing-paused-inline strong {
    color: var(--color-error, #dc2626);
}

.billing-paused-inline a {
    color: var(--color-primary);
    text-decoration: underline;
}

/* ==========================================================================
   59. PROGRESS BAR
   ==========================================================================
   Continuous fill bar showing percentage completion.
   For workflows where progress is a percentage, not discrete steps.

   NOT the same as .onboarding-progress (Section 51 — discrete step-dot indicators).

   HTML:
     <div class="progress-bar">
       <div class="progress-fill" style="width: 33%;"></div>
     </div>
     <p class="progress-text">You're 2 steps away from selling!</p>
   ========================================================================== */

.progress-bar {
    width: 100%;
    height: 8px;
    background-color: var(--color-surface-darkened);
    border-radius: var(--border-radius-full, 9999px);
    overflow: hidden;
}

.progress-bar .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary, var(--color-primary-dark)));
    border-radius: var(--border-radius-full, 9999px);
    transition: width 0.4s var(--ease-elegant);
}

.progress-bar.progress-success .progress-fill {
    background: linear-gradient(90deg, var(--color-success), var(--color-success-dark));
}

.progress-bar.progress-warning .progress-fill {
    background: linear-gradient(90deg, var(--color-warning), var(--color-warning-dark));
}

.progress-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: var(--spacing-xs);
}


/* ==========================================================================
   60. CHECKLIST
   ==========================================================================
   Status-tracked item list with indicator, content, and optional action button.
   For onboarding prerequisites, setup wizards, and task completion flows.

   NOT the same as .next-steps (Section 23 — numbered steps without status/action)
   or .how-it-works .step (Section 51 — card-based onboarding steps).

   HTML:
     <div class="checklist">
       <div class="checklist-item completed">
         <div class="checklist-status">✔️</div>
         <div class="checklist-content">
           <div class="checklist-title">Step completed</div>
           <div class="checklist-description">Description text</div>
         </div>
         <div class="checklist-action"></div>
       </div>
       <div class="checklist-item pending">
         <div class="checklist-status">❌</div>
         <div class="checklist-content">
           <div class="checklist-title">Step pending</div>
           <div class="checklist-description">Needs action</div>
         </div>
         <div class="checklist-action">
           <div class="command btn-primary">Set Up</div>
         </div>
       </div>
     </div>
   ========================================================================== */

.checklist {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.checklist-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    background-color: var(--color-background);
    transition: background-color 0.2s var(--ease-elegant), border-color 0.2s var(--ease-elegant);
}

.checklist-item .checklist-status {
    flex-shrink: 0;
    width: 24px;
    text-align: center;
    font-size: var(--font-size-base);
    line-height: 1.5;
    --icon-size: var(--icon-size-sm);
}

.checklist-item .checklist-status .icon-svg {
    vertical-align: middle;
}

.checklist-item .checklist-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.checklist-item .checklist-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.checklist-item .checklist-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: var(--line-height-base);
}

.checklist-item .checklist-action {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* --- State variants --- */

.checklist-item.completed {
    background-color: var(--color-success-light);
    border-color: rgba(var(--color-success-rgb), 0.2);
}

    .checklist-item.completed .checklist-title {
        color: var(--color-success-dark);
    }

    .checklist-item.completed .checklist-description {
        color: var(--color-text-muted);
    }

    .checklist-item.completed .item-details {
        font-size: var(--font-size-sm);
        color: var(--color-text-muted);
        line-height: var(--line-height-base);
    }

.checklist-item.pending {
    background-color: var(--color-background);
    border-color: var(--color-border-medium);
}

.checklist-item.optional {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    opacity: 0.85;
}

    .checklist-item.optional .checklist-title {
        font-weight: var(--font-weight-medium);
        color: var(--color-text-muted);
    }


/* ==========================================================================
   61. STEP INDICATOR
   ==========================================================================
   Compact horizontal step progress for wizards and multi-step dialogs.
   Small numbered circles showing current position in a sequence.

   Different from .workflow-steps (Section 31) which is a content-heavy
   instructional component with titles, descriptions, and connector lines.

   HTML:
     <div class="step-indicator">
       <span class="step step-indicator-dot step-done">1</span>
       <span class="step step-indicator-dot step-active">2</span>
       <span class="step step-indicator-dot">3</span>
       <span class="step-label step-indicator-label">Current Step Name</span>
     </div>
   ========================================================================== */

.step-indicator {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

.step-indicator-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-border-medium);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
    transition: background 0.2s var(--ease-elegant), color 0.2s var(--ease-elegant), box-shadow 0.2s var(--ease-elegant);
}

.step-indicator-dot.step-active {
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: var(--shadow-focus-ring);
}

.step-indicator-dot.step-done {
    background: var(--color-success);
    color: var(--color-white);
}

.step-indicator-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
    margin-left: auto;
}


/* ==========================================================================
   62. SETTINGS SECTION
   ==========================================================================
   Labeled form group for settings, preferences, and configuration dialogs.
   Contains a header (title + descriptive tip) followed by form controls
   like toggles, inputs, or radio groups.

   Used across: EditProfileView (discoverability, contact, seller settings,
   order approval, analytics), AvailabilityDialog, PackagingDialog.

   HTML:
     <div class="settings-section">
       <div class="section-header settings-header">
         <h4>Section Title</h4>
         <div class="section-tip settings-tip">Descriptive help text</div>
       </div>
       <!-- toggles, inputs, radio groups, etc. -->
     </div>

   Highlight variant (for privacy/info blocks with background fill):
     <div class="settings-section settings-highlight">
       <div class="section-header settings-header">
         <h4>Your Rights</h4>
       </div>
       <ul>...</ul>
     </div>
   ========================================================================== */

.settings-section {
    width: 100%;
    max-width: 500px;
    margin-bottom: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
}
.form-panel .settings-section {
    gap: var(--spacing-md);
}


.settings-header {
    margin-bottom: var(--spacing-md);
}

.settings-header h4 {
    text-align: left;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-light);
    margin: 0 0 var(--spacing-xs) 0;
}

.settings-tip {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.4;
}

/* Highlight variant — background fill for info/privacy blocks */
.settings-section.settings-highlight {
    background-color: var(--color-surface);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
}


/* ==========================================================================
   63. DETAIL SECTION
   ==========================================================================
   Reusable section wrapper for detail page units (listing detail, product
   detail, etc.). Each section has a header bar with title, optional help
   tooltip trigger, and optional inline commands.

   HTML (dual-class with legacy .section):
     <div class="section social-analytics detail-section" ux-section-family>
       <div class="header detail-section-header">
         <h3 class="detail-section-title">Performance Analytics</h3>
         <div class="help detail-section-help" ux-tooltip="...">Help</div>
         <div class="command cmdEdit detail-section-command">Edit</div>
       </div>
       <div class="detail-section-body">
         ...content...
       </div>
     </div>
   ========================================================================== */

.detail-section {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-card);
    padding: var(--spacing-lg);
    margin-bottom: 28px;
    box-shadow: var(--shadow-card);
    transition:
        box-shadow 0.35s var(--ease-elegant),
        transform 0.35s var(--ease-elegant);
}

/* Gentle hover lift — makes page feel alive */
.detail-section:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
}

/* Override homepage .section styles when used with detail-section (dual-class pattern).
   .section:nth-child(even) has specificity 0-2-0, so we need at least 0-2-0 here. */
.section.detail-section {
    padding: var(--spacing-lg);
    background: var(--color-background);
    margin-bottom: 28px;
}

.section.detail-section:nth-child(even) {
    background: var(--color-background);
}

/* --- Market Analysis: AI's gift — special standout treatment --- */
.market-analysis.detail-section {
    background:
        linear-gradient(
            135deg,
            rgba(var(--color-primary-rgb), 0.025) 0%,
            rgba(var(--color-secondary-rgb), 0.015) 50%,
            var(--color-background) 100%
        );
    border-color: var(--color-border-primary-subtle);
    box-shadow:
        var(--shadow-card),
        inset 0 1px 0 rgba(var(--color-primary-rgb), 0.06);
}

.market-analysis.detail-section:hover {
    box-shadow:
        var(--shadow-card-hover),
        inset 0 1px 0 rgba(var(--color-primary-rgb), 0.08);
}

/* --- Generated Listing Welcome: celebratory hero banner --- */
.generated-listing-welcome.detail-section {
    background:
        linear-gradient(
            135deg,
            rgba(var(--color-primary-rgb), 0.03) 0%,
            rgba(var(--color-secondary-rgb), 0.02) 50%,
            var(--color-background) 100%
        );
    border-color: var(--color-border-primary-subtle);
    box-shadow:
        0 4px 24px rgba(var(--color-primary-rgb), 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    padding: var(--spacing-xl);
    text-align: center;
}

/* Onboarding content wrapper */
.generated-listing-welcome .onboarding-content {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* Welcome hero section */
.generated-listing-welcome .welcome-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

/* Hero illustration / celebration icon */
.generated-listing-welcome .hero-illustration {
    position: relative;
}

.generated-listing-welcome .celebration-icon {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.12) 0%, rgba(var(--color-secondary-rgb), 0.08) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: gentlePulse 3s ease-in-out infinite;
    box-shadow:
        0 8px 32px rgba(var(--color-primary-rgb), 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.generated-listing-welcome .celebration-icon::before {
    content: '';
    width: 64px;
    height: 64px;
    background-image: url(/images/icon/sparks-primary.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Decorative sparkles */
.generated-listing-welcome .celebration-icon::after {
    content: '';
    position: absolute;
    width: 140px;
    height: 140px;
    background-image:
        radial-gradient(circle at 10% 20%, var(--color-secondary) 2px, transparent 2px),
        radial-gradient(circle at 90% 30%, var(--color-primary) 2px, transparent 2px),
        radial-gradient(circle at 20% 80%, var(--color-primary) 1.5px, transparent 1.5px),
        radial-gradient(circle at 85% 75%, var(--color-secondary) 1.5px, transparent 1.5px),
        radial-gradient(circle at 50% 5%, var(--color-secondary) 1px, transparent 1px),
        radial-gradient(circle at 50% 95%, var(--color-primary) 1px, transparent 1px);
    animation: sparkle 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes gentlePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow:
            0 8px 32px rgba(var(--color-primary-rgb), 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }
    50% {
        transform: scale(1.02);
        box-shadow:
            0 12px 40px rgba(var(--color-primary-rgb), 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }
}

@keyframes sparkle {
    0%, 100% { opacity: 0.6; transform: scale(1) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.05) rotate(5deg); }
}

/* Hero text */
.generated-listing-welcome .hero-text h2 {
    font-size: clamp(1.5rem, 4vw, 1.875rem);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    letter-spacing: -0.02em;
    margin: 0;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.generated-listing-welcome .hero-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-warm-body);
    line-height: 1.6;
    margin: var(--spacing-xs) 0 0 0;
    max-width: 480px;
}

/* Welcome features section */
.generated-listing-welcome .welcome-features {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-card);
    padding: var(--spacing-lg);
    text-align: left;
}

.generated-listing-welcome .welcome-features h4 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm-medium);
    margin: 0 0 var(--spacing-sm) 0;
}

.generated-listing-welcome .feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xs) var(--spacing-md);
}

.generated-listing-welcome .feature-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-body);
    line-height: 1.5;
    margin-bottom:var(--spacing-sm);
    align-self:flex-start;
}

.generated-listing-welcome .feature-list li::before {
    content: '';
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    background-color: var(--color-primary);
    border-radius: 50%;
    margin-top: 7px;
    align-self:flex-start;
}

/* Next steps with action buttons */
.generated-listing-welcome .next-steps-compact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
    width: fit-content;
    margin: 0 auto;
}

.generated-listing-welcome .next-steps-compact .step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
}

.generated-listing-welcome .next-steps-compact .step-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.generated-listing-welcome .next-steps-compact .step-actions {
    display: flex;
    gap: var(--spacing-xs);
    padding-left: calc(24px + var(--spacing-xs));
}

.generated-listing-welcome .next-steps-compact .step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-primary-lighter);
    color: var(--color-primary);
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
}

/* Onboarding tip (reusing component pattern) */
.generated-listing-welcome .onboarding-tip {
    background: linear-gradient(135deg, rgba(var(--color-secondary-rgb), 0.08) 0%, rgba(var(--color-secondary-rgb), 0.04) 100%);
    border: 1px solid rgba(var(--color-secondary-rgb), 0.15);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
}

.generated-listing-welcome .onboarding-tip .tip-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    justify-content: center;
}

.generated-listing-welcome .onboarding-tip .tip-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-image: url(/images/icon/info-secondary.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.generated-listing-welcome .onboarding-tip .tip-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .generated-listing-welcome .feature-list {
        grid-template-columns: 1fr;
    }

    .generated-listing-welcome .next-steps-compact {
        align-items: flex-start;
    }

    .generated-listing-welcome .hero-illustration img {
        width: 160px;
        height: 160px;
    }
}

/* --- Photos section: gallery feel --- */
.photo-manager.detail-section {
    background:
        linear-gradient(
            180deg,
            var(--color-background) 0%,
            rgba(var(--color-primary-rgb), 0.012) 100%
        );
}

/* --- Description section: reading atmosphere --- */
.describe.detail-section {
    background:
        linear-gradient(
            135deg,
            var(--color-background) 0%,
            rgba(var(--color-secondary-rgb), 0.008) 100%
        );
}

.detail-section-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0 0 var(--spacing-md) 0;
    margin-bottom: var(--spacing-md);
    /* Softened gradient underline: violet → teal blend */
    border-bottom: none;
    background-image: linear-gradient(
        to right,
        rgba(var(--color-primary-rgb), 0.12),
        rgba(var(--color-secondary-rgb), 0.06) 70%,
        transparent
    );
    background-size: 100% 1px;
    background-position: bottom left;
    background-repeat: no-repeat;
}

.detail-section-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: rgba(30, 25, 55, 0.78);
    line-height: var(--line-height-tight);
    flex: 1;
    margin: 0;
    text-transform: none;
    letter-spacing: -0.01em;
}

.detail-section-help {
    font-size: var(--font-size-sm);
    color: rgba(var(--color-primary-rgb), 0.4);
    cursor: help;
    flex-shrink: 0;
    padding: var(--spacing-xs);
    border-radius: var(--border-radius-full);
    transition: var(--transition-colors);
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-bg-tint);
}

.detail-section-command {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    cursor: pointer;
    flex-shrink: 0;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-full);
    transition: var(--transition-fast);
    font-weight: var(--font-weight-medium);
    background: var(--color-primary-bg-tint);
}

.detail-section-command:hover {
    background: var(--color-primary-lighter);
    color: var(--color-primary-dark);
}

/* AI-generated content badge */
.ai-generated-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 2px 8px;
    border-radius: var(--border-radius-full);
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.08) 0%, rgba(var(--color-secondary-rgb), 0.06) 100%);
    color: rgba(var(--color-primary-rgb), 0.6);
    border: 1px solid var(--color-border-primary-subtle);
}

.detail-section-body {
    padding: var(--spacing-sm) 0 0 0;
}

/* Count variant — title with inline count badge */
.detail-section-title .detail-section-count {
    font-weight: var(--font-weight-normal);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    margin-left: var(--spacing-xs);
    ])
}

.detail-section-title .detail-text-options {
    font-weight: var(--font-weight-normal);
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

.detail-section-title .detail-section-count::before {
    content: '•';
    font-size: 16px;
    color: var(--color-text);
    margin-right: var(--spacing-sm);
}


/* ==========================================================================
   64. ANALYTICS CARD
   ==========================================================================
   Stat cards for displaying metrics (views, watchers, engagement rate).
   Arranged in a horizontal scrolling grid. Each card has an icon + title
   header and a big-number value with subtitle.

   HTML:
     <div class="analytics-grid analytics-card-grid">
       <div class="analytics-card">
         <div class="card-header analytics-card-header">
           <div class="card-icon analytics-card-icon"></div>
           <div class="card-title analytics-card-title">Total Views</div>
         </div>
         <div class="card-content analytics-card-body">
           <div class="big-number analytics-card-value">1,234</div>
           <div class="card-subtitle analytics-card-label">People who viewed</div>
         </div>
       </div>
     </div>
   ========================================================================== */

/* Grid container — horizontal scroll on mobile */
.analytics-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-md);
}

/* Individual card */
.analytics-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-card);
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    transition: var(--transition-fast);
    box-shadow: var(--shadow-card);
}

.analytics-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
}

/* Card header row */
.analytics-card-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.analytics-card-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--color-primary-lighter);
    border-radius: var(--border-radius-md);
    padding: 4px;
}

.analytics-card-title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Card body */
.analytics-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.analytics-card-value {
    font-size: var(--font-size-3xl, 2rem);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    line-height: 1;
}

.analytics-card-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: var(--line-height-tight);
}

/* Actions area inside card (e.g., "View Watchers" link) */
.analytics-card-actions {
    margin-top: var(--spacing-xs);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border-light);
}

.analytics-card-actions .command {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    cursor: pointer;
    font-weight: var(--font-weight-medium);
}

.analytics-card-actions .command:hover {
    text-decoration: underline;
}

/* Insights badge row — shown below the grid */
.analytics-insights {
    margin-top: var(--spacing-md);
}

.analytics-insight-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--color-warning-light);
    border: 1px solid var(--color-warning);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-sm);
    color: var(--color-warning-text);
    font-weight: var(--font-weight-medium);
}

.analytics-insight-icon {
    width: var(--icon-size-sm, 16px);
    height: var(--icon-size-sm, 16px);
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


/* ==========================================================================
   65. MARKET CARD
   ==========================================================================
   Price range and market data cards for AI-generated market analysis.
   Arranged in a horizontal scrolling grid. Each card shows a header
   with title/subtitle and a price range or stat value.

   HTML:
     <div class="market-data-grid market-card-grid">
       <div class="market-card private-seller primary">
         <div class="market-card-header">
           <h4 class="market-card-title">Suggested Price Range</h4>
           <div class="card-subtitle market-card-label">For private sellers</div>
         </div>
         <div class="price-range market-card-range">
           <span class="price-min market-card-min">$10</span>
           <span class="price-separator"> - </span>
           <span class="price-max market-card-max">$50</span>
         </div>
       </div>
     </div>
   ========================================================================== */

/* Grid container */
.market-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--spacing-md);
}

/* Individual market card — gradient background, not flat surface */
.market-card {
    background:
        linear-gradient(
            160deg,
            var(--color-background) 0%,
            var(--color-surface) 100%
        );
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-card);
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    box-shadow: var(--shadow-card);
    transition: var(--transition-card);
}

.market-card:hover {
    box-shadow:
        0 8px 24px rgba(var(--color-primary-rgb), 0.1),
        0 2px 8px rgba(0, 0, 0, 0.04);
    transform: translateY(-3px);
}

/* Primary variant — hero card with violet glow */
.market-card.primary {
    border-color: var(--color-primary-border-soft);
    background:
        linear-gradient(
            160deg,
            rgba(var(--color-primary-rgb), 0.04) 0%,
            rgba(var(--color-primary-rgb), 0.01) 100%
        );
    box-shadow:
        0 4px 16px rgba(var(--color-primary-rgb), 0.1),
        0 1px 4px rgba(var(--color-primary-rgb), 0.06);
}

.market-card.primary:hover {
    box-shadow:
        0 12px 32px rgba(var(--color-primary-rgb), 0.15),
        0 2px 8px rgba(var(--color-primary-rgb), 0.08);
    transform: translateY(-4px);
}

/* Card header */
.market-card-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.market-card-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0;
}

.market-card-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Price range display */
.market-card-range {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
    margin-top: var(--spacing-xs);
}

.market-card-min,
.market-card-max {
    font-size: var(--font-size-h2, 1.5rem);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

.market-card.primary .market-card-min,
.market-card.primary .market-card-max {
    color: var(--color-primary-dark);
}

.market-card-range .price-separator {
    font-size: var(--font-size-md);
    color: var(--color-text-muted);
}

/* Single value display (retail price) */
.market-card-value {
    font-size: var(--font-size-h2, 1.5rem);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

/* Text content (condition impact, local stats) */
.market-card-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

/* Stat rows for local market data */
.market-card-stats {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.market-card-stats .stat {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.market-card-stats .stat strong {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

/* Meta line with icon and label (e.g., "In Your Area", "Nationwide") */
.market-card-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: 2px;
}

.market-card-meta .meta-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Note/source line at bottom of card */
.market-card-note {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--spacing-xs);
}

/* Info banner above market grid — violet-tinted, not blue info */
.market-info-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-primary-bg-subtle);
    border: 1px solid var(--color-border-primary-faint);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.market-info-banner-icon {
    width: var(--icon-size-md, 20px);
    height: var(--icon-size-md, 20px);
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Info note below market grid */
.market-info-note {
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: var(--line-height-relaxed);
    background: var(--gradient-tint-neutral);
    border-radius: var(--border-radius-md);
}


/* ==========================================================================
   66. LISTING MODE DISPLAY
   ==========================================================================
   Shows the current listing mode with icon, title, description, and a
   change-mode action trigger. Includes pending-change notice when the
   mode has been changed but not yet published.

   HTML:
     <div class="listing-mode-display mode-display" data-current-mode="ForSale">
       <div class="current-mode-info mode-display-info">
         <div class="mode-visual mode-display-visual">
           <div class="mode-icon mode-display-icon"></div>
           <div class="mode-content mode-display-content">
             <div class="mode-title mode-display-title">For Sale</div>
             <div class="mode-description mode-display-desc">Buy now pricing</div>
           </div>
         </div>
         <div class="change-actions mode-display-actions">
           <div class="command cmdChangeMode">Change Mode</div>
         </div>
       </div>
     </div>
   ========================================================================== */

.mode-display {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    background: var(--color-surface);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
}

.mode-display-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
}

.mode-display-visual {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex: 1;
    min-width: 0;
}

.mode-display-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius-full);
    flex-shrink: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--color-primary-lighter);
}

.mode-display-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mode-display-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

.mode-display-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: var(--line-height-relaxed);
}

.mode-display-actions {
    flex-shrink: 0;
}

.mode-display-actions .command {
    font-size: var(--font-size-sm);
    color: var(--color-background);
    cursor: pointer;
    padding: var(--spacing-xs) var(--spacing-md);
    border: 1px solid var(--color-primary);
    border-radius: var(--border-radius-md);
    transition: var(--transition-fast);
    white-space: nowrap;
    background: var(--color-primary);
    font-weight: var(--font-weight-medium);
    box-shadow: var(--shadow-xs);
}

.mode-display-actions .command:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: white;
    box-shadow: var(--shadow-sm);
}

/* Pending mode change notice */
.mode-display-pending {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--gradient-tint-warning);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.mode-display-pending-icon {
    width: var(--icon-size-sm, 16px);
    height: var(--icon-size-sm, 16px);
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.mode-display-pending .live-mode-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-weight: var(--font-weight-medium);
}

.mode-display-pending .publish-reminder {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    margin-top: var(--spacing-xs);
}

/* Mobile: stack mode display vertically */
@media (max-width: 480px) {
    .mode-display-info {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-md);
    }

    .mode-display-visual {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .mode-display-actions {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-xs);
    }

    .mode-display-actions .command {
        width: 100%;
        text-align: center;
    }
}

/* Available modes hint */
.mode-display-hint {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--spacing-xs);
}


/* ==========================================================================
   67. VARIANT BLOCK
   ==========================================================================
   Card-like block for each product variant in the variant manager.
   Contains a header row with photo thumbnail, info column (title,
   subtitle, packaging, meetup location, status), and a settings action.

   HTML:
     <div class="variant variant-block">
       <div class="variant-header variant-block-header">
         <div class="variant-photo variant-block-photo">
           <div class="thumbnail variant-block-thumb">
             <img ... />
           </div>
         </div>
         <div class="variant-info variant-block-info">
           <div class="variant-title variant-block-title">Name</div>
           <div class="variant-subtitle variant-block-subtitle">Option</div>
           <div class="variant-packaging variant-block-packaging">...</div>
           <div class="variant-meetup-location variant-block-meetup">...</div>
           <div class="variant-status variant-block-status">
             <span class="state-badge variant-block-badge">Draft</span>
           </div>
         </div>
         <div class="variant-settings variant-block-actions">...</div>
       </div>
     </div>
   ========================================================================== */

.variant-block {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-card);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    transition: var(--transition-card);
    box-shadow: var(--shadow-card);
    position: relative;
}

.variant-block:hover {
    border-color: var(--color-border-medium);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}

.variant-block:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* State variants — clean card, NO left border. Status shown via badge pill. */
.variant-block[data-state="live"],
.variant-block[data-state="draft"] {
    border-left: 1px solid var(--color-border);
}

/* Draft changes: subtle violet tint instead of thick border */
.variant-block[data-has-draft-changes="true"] {
    border-left: 1px solid var(--color-border);
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.02) 0%, var(--color-background) 100%);
    border-color: var(--color-border-primary-subtle);
}

.variant-block[data-has-draft-changes="true"]:hover {
    border-color: var(--color-primary-border-medium);
}

/* Header row */
.variant-block-header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
}

/* Photo thumbnail */
.variant-block-photo {
    flex-shrink: 0;
    cursor: pointer;
}

.variant-block-thumb {
    width: 72px;
    height: 72px;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    background: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-xs);
}

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

.variant-block-no-photo {
    width: var(--icon-size-lg, 24px);
    height: var(--icon-size-lg, 24px);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.4;
}

/* Photo count badge - positioned on variant thumbnail */
.variant-block-photo {
    position: relative;
}

.variant-block-photo .photo-count-badge {
    position: absolute;
    bottom: 4px;
    right: 4px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    line-height: 20px;
    text-align: center;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    pointer-events: none;
}

/* Info column */
.variant-block-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.variant-block-title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    line-height: var(--line-height-tight);
}

.variant-block-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Packaging row */
.variant-block-packaging {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-xs);
}

.variant-block-packaging .command {
    font-size: var(--font-size-xs);
    color: var(--color-primary);
    cursor: pointer;
}

/* Meetup location row */
.variant-block-meetup {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-xs);
}

.variant-block-meetup .icon {
    width: var(--icon-size-sm, 16px);
    height: var(--icon-size-sm, 16px);
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.variant-block-meetup .text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.variant-block-meetup.needs-setup {
    color: var(--color-warning-text);
}

.variant-block-meetup .command {
    font-size: var(--font-size-xs);
    color: var(--color-primary);
    cursor: pointer;
    flex-shrink: 0;
}

/* Status row */
.variant-block-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xs);
    flex-wrap: wrap;
}

/* Attention badges container */
.variant-attention-badges {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.variant-block-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px var(--spacing-sm) 3px 8px;
    border-radius: var(--border-radius-full);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    text-transform: none;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: var(--transition-fast);
    /* Default: neutral */
    background: var(--color-surface-darkened);
    color: var(--color-text-muted);
}

/* Status dot indicator */
.variant-block-badge::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--color-text-muted);
}

/* Live state: green dot, subtle green pill */
.variant-block-badge.live {
    background: rgba(34, 197, 94, 0.1);
    color: var(--color-success-dark);
}

.variant-block-badge.live::before {
    background: var(--color-success);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
}

/* Draft state: violet dot, subtle violet pill */
.variant-block-badge.draft {
    background: var(--color-primary-lighter);
    color: var(--color-primary);
}

.variant-block-badge.draft::before {
    background: var(--color-primary);
    box-shadow: var(--shadow-focus-ring-sm);
}

/* Offline/Hidden badge */
.variant-block[data-visibility="hidden"] .variant-block-badge {
    background: rgba(107, 114, 128, 0.1);
    color: var(--color-text-muted);
}

.variant-block[data-visibility="hidden"] .variant-block-badge::before {
    background: var(--color-text-muted);
    box-shadow: none;
}

/* Pending changes: extra amber dot after badge text
   Only show for published listings - draft-only listings don't have "pending" changes */
.stock-detail[ux-published] .variant-block[data-has-draft-changes="true"] .variant-block-badge::after {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-warning);
    margin-left: 2px;
    flex-shrink: 0;
}

/* Draft changes indicator — hidden by default, shown via state rules in S72 */
.variant-block-draft-indicator {
    display: none;
    align-items: center;
    gap: 2px;
    font-size: var(--font-size-xs);
    color: var(--color-primary);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Settings action */
.variant-block-actions {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
}

.variant-block-actions .command {
    width: var(--icon-size-lg, 24px);
    height: var(--icon-size-lg, 24px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-sm);
    transition: var(--transition-colors);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.variant-block-actions .command:hover {
    background-color: var(--color-surface-darkened);
}


/* ==========================================================================
   68. SUMMARY CARD STRIP
   ==========================================================================
   Horizontal scrolling row of compact summary cards within a variant block.
   Each card shows a header (with optional live/draft indicator + edit command)
   and a value area (big number + status label). Supports empty states with
   task prompts.

   HTML:
     <div class="variant-summary-container summary-strip-wrap">
       <div class="variant-summary-row summary-strip">
         <div class="summary-card inventory-card">
           <div class="card-header summary-card-header">
             <div class="live-indicator summary-card-indicator"></div>
             <div class="command cmdEdit summary-card-edit"></div>
           </div>
           <div class="card-content summary-card-body">
             <div class="large-number summary-card-value">25</div>
             <div class="sub-status summary-card-label">In Stock</div>
           </div>
         </div>
       </div>
     </div>
   ========================================================================== */

.summary-strip-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: var(--spacing-md);
    padding: var(--spacing-xs) 0;
}

.summary-strip {
    display: flex;
    gap: var(--spacing-sm);
    min-width: min-content;
}

/* Individual summary card — gradient background, warm feel */
/* Summary cards - aligned with market-card styling for consistency */
.summary-card {
    background:
        linear-gradient(
            160deg,
            var(--color-background) 0%,
            var(--color-surface) 100%
        );
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-card);
    padding: var(--spacing-md) var(--spacing-lg);
    min-width: 180px;
    max-width: 300px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    box-shadow: var(--shadow-card);
    transition: var(--transition-card);
}

/* Hover effect - matches market-card strength */
.summary-card:hover {
    box-shadow:
        0 8px 24px rgba(var(--color-primary-rgb), 0.1),
        0 2px 8px rgba(0, 0, 0, 0.04);
    transform: translateY(-3px);
}

/* Card header — indicator + edit action (positioned at top like market-card) */
.summary-card-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

/* Live operation indicator (bolt icon) */
.summary-card-indicator {
    width: var(--icon-size-sm, 16px);
    height: var(--icon-size-sm, 16px);
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.summary-card-edit {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
    transition: var(--transition-fast);
    border-radius: var(--border-radius-sm);
    padding: 2px;
}

.summary-card-edit:hover {
    opacity: 1;
    background-color: var(--color-surface-darkened);
}

/* Card body - matches market-card content layout */
.summary-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    flex: 1;
    align-self:center;
}

/* Value - matches market-card-value sizing */
.summary-card-value {
    font-size: var(--font-size-h2, 1.5rem);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

/* Label - matches market-card-label styling */
.summary-card-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
}

.summary-card-sublabel {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Live operation variant — subtle green tint, no thick border */
/* Live operation variant — subtle success tint like market-card.primary */
.summary-card.live-operation {
    border-color: rgba(34, 197, 94, 0.2);
    background:
        linear-gradient(
            160deg,
            rgba(34, 197, 94, 0.04) 0%,
            rgba(34, 197, 94, 0.01) 100%
        );
    box-shadow:
        var(--shadow-card),
        0 0 0 1px rgba(34, 197, 94, 0.08);
}

.summary-card.live-operation:hover {
    box-shadow:
        0 12px 32px rgba(34, 197, 94, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.04);
    transform: translateY(-4px);
}

/* Draft operation variant — subtle violet tint like market-card.primary */
.summary-card.draft-operation {
    border-color: var(--color-border-primary-subtle);
    background:
        linear-gradient(
            160deg,
            rgba(var(--color-primary-rgb), 0.04) 0%,
            rgba(var(--color-primary-rgb), 0.01) 100%
        );
    box-shadow:
        var(--shadow-card),
        0 0 0 1px var(--color-border-primary-faint);
}

.summary-card.draft-operation:hover {
    box-shadow:
        0 12px 32px rgba(var(--color-primary-rgb), 0.12),
        0 2px 8px rgba(0, 0, 0, 0.04);
    transform: translateY(-4px);
}

/* Required indicator */
.summary-card .required-indicator {
    color: var(--color-error);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
}

/* Empty state inside summary card */
.summary-card .empty-state {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.summary-card .empty-state .empty-message {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-style: italic;
}

.summary-card .empty-state .tasks {
    margin-top: var(--spacing-xs);
}

.summary-card .empty-state .task .command {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    cursor: pointer;
    font-weight: var(--font-weight-medium);
}

.summary-card .empty-state .task .command:hover {
    text-decoration: underline;
}


/* ==========================================================================
   69. ATTRIBUTE FLOW
   ==========================================================================
   Inline flow of attribute key:value tags within a variant block.
   Wraps naturally. Variant-specific attributes can be visually
   distinguished from family-level shared attributes.

   HTML:
     <div class="variant-attributes">
       <div class="attributes-header attribute-flow-header">
         <span class="attributes-label attribute-flow-label">Attributes</span>
         <div class="command cmdEdit attribute-flow-edit">Edit</div>
       </div>
       <div class="attribute-flow">
         <span class="attribute-item" ux-variation>
           <strong>Color:</strong> Red
         </span>
       </div>
     </div>
   ========================================================================== */

.attribute-flow-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border-primary-faint);
}

.attribute-flow-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    text-transform: none;
    letter-spacing: 0;
}

.attribute-flow-edit {
    width: var(--icon-size-sm, 16px);
    height: var(--icon-size-sm, 16px);
    flex-shrink: 0;
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
    transition: var(--transition-fast);
}

.attribute-flow-edit:hover {
    opacity: 1;
}

.attribute-flow {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    padding-top: 2px; /* so you can see hover translates on items */
}

.attribute-item {
    display: inline-flex;
    align-items: center;
    padding: 5px var(--spacing-sm);
    background: var(--color-primary-bg-subtle);
    border: 1px solid var(--color-border-primary-faint);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    white-space: nowrap;
    transition: all 0.25s var(--ease-elegant);
    cursor:pointer;
}

.attribute-item:hover {
    background: var(--color-primary-lighter);
    border-color: var(--color-border-primary-subtle);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.06);
}

.attribute-item strong {
    color: rgba(30, 25, 55, 0.72);
    font-weight: var(--font-weight-semibold);
    margin-right: 3px;
}

/* Variant-specific attribute — highlighted and emphasized */
.attribute-item[ux-variation] {
    border-color: var(--color-primary);
    background: linear-gradient(135deg, var(--color-primary-lighter) 0%, var(--color-primary-bg-tint) 100%);
    font-weight: var(--font-weight-medium);
    box-shadow: 0 1px 3px rgba(var(--color-primary-rgb), 0.15);
}

.attribute-item[ux-variation] strong {
    color: var(--color-primary-dark);
    font-weight: var(--font-weight-bold);
}

.attribute-item[ux-variation]:hover {
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary-lighter) 100%);
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.2);
}

/* Expandable attribute flow wrapper */
.attribute-flow-wrap {
    position: relative;
}

/* Collapsed state: limit to ~2 rows with fade */
.attribute-flow-wrap[ux-expandable]:not([ux-expanded]) .attribute-flow {
    max-height: 72px;
    overflow: hidden;
    position: relative;
}

.attribute-flow-wrap[ux-expandable]:not([ux-expanded]) .attribute-flow::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 28px;
    background: linear-gradient(to bottom, transparent, var(--color-surface));
    pointer-events: none;
}

/* Expanded state */
.attribute-flow-wrap[ux-expanded] .attribute-flow {
    max-height: none;
    overflow: visible;
}

.attribute-flow-wrap[ux-expanded] .attribute-flow::after {
    display: none;
}

/* Expand toggle for attribute flow */
.attribute-flow-wrap .expand-toggle {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: transparent;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    width: auto;
    justify-content: flex-start;
}

.attribute-flow-wrap .expand-toggle:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
}

.attribute-flow-wrap .expand-toggle .toggle-icon {
    transition: transform 0.2s ease;
}

.attribute-flow-wrap[ux-expanded] .expand-toggle .toggle-icon {
    transform: rotate(180deg);
}

.attribute-flow-wrap .expand-toggle .toggle-text-expanded {
    display: none;
}

.attribute-flow-wrap .expand-toggle .toggle-text-collapsed {
    display: inline;
}

.attribute-flow-wrap[ux-expanded] .expand-toggle .toggle-text-collapsed {
    display: none;
}

.attribute-flow-wrap[ux-expanded] .expand-toggle .toggle-text-expanded {
    display: inline;
}

/* Empty state */
.attribute-flow-empty {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-style: italic;
    padding: var(--spacing-sm) 0;
}


/* ==========================================================================
   70. PHOTO CARD
   ==========================================================================
   Sortable photo thumbnail in a drag-and-drop gallery grid. Each card
   has a drag handle, the photo image, an edit command, and a remove action.

   HTML:
     <div class="members photo-gallery">
       <div class="photo photo-card" data-key="guid">
         <div class="handle photo-card-handle">Handle</div>
         <img src="..." />
         <div class="command cmdEdit photo-card-edit">
           <span class="variantList">Edit</span>
         </div>
         <div class="command cmdRemove photo-card-remove">Remove</div>
       </div>
       <div class="command cmdPhoto photo-card-add">
         <div class="cmdUpload">Add Photo(s)</div>
       </div>
     </div>
   ========================================================================== */

.photo-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.photo-card {
    position: relative;
    border-radius: var(--border-radius-card);
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    transition: var(--transition-card);
    box-shadow: var(--shadow-card);
}

.photo-card:hover {
    box-shadow:
        0 12px 28px rgba(var(--color-primary-rgb), 0.12),
        0 4px 10px rgba(0, 0, 0, 0.06);
    border-color: var(--color-primary-border-soft);
    transform: translateY(-4px);
}

/* Image loading transition - smooth fade-in instead of awkward reveal */
.photo-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    transition:
        var(--transition-card-photo),
        opacity 0.4s var(--ease-elegant);
}

/* Images start transparent when loading via loader attribute */
.photo-card img[loader] {
    opacity: 0;
}

/* Smooth fade-in when image loads */
.photo-card img.loaded,
.photo-card img:not([loader]) {
    opacity: 1;
}

/* Subtle zoom on hover for gallery feel */
.photo-card:hover img {
    transform: scale(1.03);
}

/* --------------------------------------------------------------------------
   DRAG HANDLE - Reusable sortable/draggable card handle
   --------------------------------------------------------------------------
   Uses grip-vertical icon (6 dots in 2 columns) for clear drag affordance.
   White backdrop provides contrast against any background.

   Usage: Add .drag-handle to any element inside a sortable card.
   Position and visibility controlled by consuming component/domain CSS.

   Example:
     <div class="card">
         <div class="drag-handle" aria-hidden="true" title="Drag to reorder"></div>
         <!-- content -->
     </div>
   -------------------------------------------------------------------------- */

.drag-handle {
    position: absolute;
    top: 50%;
    left: var(--spacing-xs);
    transform: translateY(-50%);
    width: 24px;
    height: 36px;
    cursor: grab;
    font-size: 0;
    color: transparent;
    z-index: 1;
    /* Grip icon */
    background-image: url(/images/icon/grip-vertical.svg);
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: center;
    /* Backdrop for visibility */
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: var(--border-radius-sm);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: var(--transition-fast);
}

.drag-handle:active {
    cursor: grabbing;
}

/* Hover reveal modifier - handle hidden until parent .card:hover */
.drag-handle.drag-handle-hover {
    opacity: 0;
}

.card:hover > .drag-handle.drag-handle-hover {
    opacity: 1;
}

/* Touch devices: always show hover-hidden handles */
@media (hover: none) {
    .drag-handle.drag-handle-hover {
        opacity: 0.85;
    }
}

/* Edit overlay */
.photo-card-edit {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-sm);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: white;
    font-size: var(--font-size-sm);
    text-align: center;
    cursor: pointer;
    opacity: 0;
    transition: var(--transition-fast);
    font-weight: var(--font-weight-medium);
}

.photo-card:hover .photo-card-edit {
    opacity: 1;
}

/* Remove action */
.photo-card-remove {
    position: absolute;
    top: var(--spacing-xs);
    right: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: white;
    background: rgba(0, 0, 0, 0.6);
    padding: 2px var(--spacing-sm);
    border-radius: var(--border-radius-full);
    cursor: pointer;
    opacity: 0;
    transition: var(--transition-fast);
    z-index: 1;
    backdrop-filter: blur(4px);
}

.photo-card:hover .photo-card-remove {
    opacity: 1;
}

.photo-card-remove:hover {
    background: var(--color-error);
}

/* Menu action (three-dot context menu trigger) */
.photo-card-menu {
    position: absolute;
    top: var(--spacing-xs);
    right: var(--spacing-xs);
    width: 28px;
    height: 28px;
    border-radius: var(--border-radius-full);
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: var(--transition-fast);
    z-index: 1;
    backdrop-filter: blur(4px);
}

.photo-card:hover .photo-card-menu,
.photo-card:focus-within .photo-card-menu {
    opacity: 1;
}

.photo-card-menu:hover {
    background: rgba(0, 0, 0, 0.8);
}

.photo-card-menu .icon-svg {
    width: 16px;
    height: 16px;
    filter: invert(1);
}

/* Add photo button — warm invitation, not admin action */
.photo-card-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    min-height: 150px;
    border: 2px dashed var(--color-primary-border-soft);
    border-radius: var(--border-radius-card);
    background:
        linear-gradient(
            135deg,
            rgba(var(--color-primary-rgb), 0.02) 0%,
            rgba(var(--color-secondary-rgb), 0.015) 100%
        );
    cursor: pointer;
    transition: var(--transition-card);
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

.photo-card-add:hover {
    border-color: var(--color-primary);
    background:
        linear-gradient(
            135deg,
            rgba(var(--color-primary-rgb), 0.05) 0%,
            rgba(var(--color-secondary-rgb), 0.03) 100%
        );
    box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), 0.08);
    transform: translateY(-2px);
}

/* Photo tip - using tip-info component within photo manager */
.photo-manager .tip-info {
    grid-column: 1 / -1;
    margin-top: var(--spacing-sm);
}

/* Legacy photo-nudge class (deprecated - use .tip-info instead) */
.photo-nudge {
    grid-column: 1 / -1;
    text-align: center;
    font-size: var(--font-size-xs);
    color: rgba(30, 25, 55, 0.45);
    padding-top: var(--spacing-xs);
    font-style: italic;
}


/* ==========================================================================
   71. DETAIL PAGE CONTENT
   ==========================================================================
   Page-level containers and content elements for the listing detail page.
   Covers: back navigation, pager, variant commands, taxonomy display,
   and rich description content.

   These are still using camelCase legacy classes; the component library
   classes here provide visual styling via the dual-class approach.
   ========================================================================== */

/* --- Back Navigation --- */
.searchDetail .back-to-search {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    padding: var(--spacing-sm) 0;
}

.searchDetail .back-to-search a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: var(--transition-colors);
}

.searchDetail .back-to-search a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* --- Variant Manager: Add Variant Commands --- */
.primary-commands.commands {
    display: flex;
    justify-content: center;
    padding: var(--spacing-md) 0;
}

.primary-commands .command.cmdAdd {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    border: 2px dashed var(--color-border-medium);
    border-radius: var(--border-radius-md);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: var(--transition-fast);
    background: var(--color-surface);
}

.primary-commands .command.cmdAdd:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-lighter);
    box-shadow: var(--shadow-sm);
}

/* --- Taxonomy / Listing Location Content --- */
.detail-section.taxonomy .data {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 0;
}

.detail-section.taxonomy .saved-value {
    flex: 1;
}

.detail-section.taxonomy .saved-value p {
    margin: 0;
    font-size: var(--font-size-base);
    color: var(--color-text);
    line-height: var(--line-height-normal);
}

.detail-section.taxonomy .saved-value p:first-child {
    font-weight: var(--font-weight-semibold);
}

.detail-section.taxonomy .saved-value p + p {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: 2px;
}

.detail-section.taxonomy .command.cmdChange {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: var(--transition-colors);
    flex-shrink: 0;
}

.detail-section.taxonomy .command.cmdChange:hover {
    background: var(--color-primary-hover-bg);
}

/* --- Item Description Content: magazine-quality reading experience --- */
.detail-section.describe .data {
    padding: var(--spacing-sm) 0;
}

.detail-section.describe .description {
    font-size: var(--font-size-base);
    line-height: 1.75;
    color: rgba(30, 25, 55, 0.75);
    max-width: 680px;
}

/* Main heading — warm, constrained to not overpower page title */
.detail-section.describe .description h1 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--spacing-md) 0;
    color: rgba(30, 25, 55, 0.88);
    line-height: var(--line-height-tight);
    letter-spacing: -0.02em;
}

.detail-section.describe .description h2 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin: var(--spacing-lg) 0 var(--spacing-sm) 0;
    color: rgba(30, 25, 55, 0.82);
    letter-spacing: -0.01em;
}

/* Sub-section headings — editorial violet accent */
.detail-section.describe .description h3 {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    margin: var(--spacing-lg) 0 var(--spacing-sm) 0;
    color: rgba(var(--color-primary-rgb), 0.6);
    text-transform: none;
    letter-spacing: initial;
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--color-border-primary-faint);
}

/* Paragraphs — comfortable reading pace */
.detail-section.describe .description p {
    margin: 0 0 var(--spacing-md) 0;
}

/* Lists — custom violet dot bullets, no browser defaults */
.detail-section.describe .description ul,
.detail-section.describe .description ol {
    margin: var(--spacing-sm) 0 var(--spacing-md) 0;
    padding-left: 0;
    list-style: none;
}

.detail-section.describe .description li {
    position: relative;
    margin-bottom: var(--spacing-sm);
    padding-left: var(--spacing-lg);
    line-height: 1.7;
}

.detail-section.describe .description li::before {
    content: '';
    position: absolute;
    left: var(--spacing-xs);
    top: 10px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-primary-border-medium);
}

/* Emphasis — warm, not harsh */
.detail-section.describe .description strong {
    font-weight: var(--font-weight-semibold);
    color: rgba(30, 25, 55, 0.85);
}

/* --- Page wrapper: stockDetail --- warm canvas, not flat white */
.stock-detail {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: var(--spacing-xxl);
    background:
        linear-gradient(
            180deg,
            rgba(var(--color-primary-rgb), 0.018) 0%,
            rgba(var(--color-primary-rgb), 0.008) 40%,
            rgba(var(--color-secondary-rgb), 0.006) 100%
        );
    min-height: 100vh;
}


/* ==========================================================================
   72. LISTING DETAIL — STATE-DRIVEN CSS
   ==========================================================================
   State rules for the listing detail page. HTML attributes on .stock-detail
   and child elements drive show/hide, color, and animation changes.

   Key state attributes (set on .stock-detail):
     ux-has-product-type   — product type selected (unlocks all sections)
     stock-data-complete   — all required data present
     ux-variant-count="N"  — number of variants
     ux-listed             — listing is live on marketplace
     ux-published          — listing has been published at least once
     ux-draft-only         — listing has never been published
     data-published="true|false"       — current publish state
     data-published-state="published"  — published state indicator
     data-has-pending-changes="true|false"
     data-pending-changes-reason="draft-newer|explicit-changes|draft-only|variant-changes"
     data-has-social-data="true|false"
     data-listing-mode="ForSale|Showcase|..."

   Key state attributes (on child elements):
     data-current-mode     — on .listing-mode-display
     data-loading          — on .listing-mode-display
     data-state            — on .variant-block (live|draft)
     data-visibility       — on .variant-block (visible|hidden)
     data-has-draft-changes — on .variant-block
     data-scope            — on .photo-card (shared|partial)
     ux-filled             — on .data elements
     ux-has-thumbnail      — on thumbnail uploaders
   ========================================================================== */


/* ---- A. Page-Level Section Gating (ux-has-product-type) ---- */

/* Default: all sections behind frosted overlay until product type is set */
.stock-detail > .section::after {
    content: "";
    display: block;
    z-index: 3;
    position: absolute;
    inset: 0;
    background-color: rgba(249, 249, 249, 0.6);
    backdrop-filter: blur(2px);
    border-radius: inherit;
    pointer-events: auto;
}

/* Sections need relative positioning for the overlay */
.stock-detail > .section {
    position: relative;
}

/* When product type IS set, remove all overlays */
.stock-detail[ux-has-product-type] > .section::after {
    display: none;
}

/* Also ensure the sticky bar and taxonomy section never get overlaid */
.stock-detail .sticky-status-bar::after,
.stock-detail > .section.taxonomy::after {
    display: none;
}


/* ---- B. Welcome Section Visibility ---- */

/* Default: welcome section hidden */
.generated-listing-welcome {
    display: none;
}

/* Show welcome for draft-only listings (never published) */
.stock-detail[ux-draft-only] .generated-listing-welcome {
    display: block;
}

/* Force-hide welcome once published */
.stock-detail[ux-published] .generated-listing-welcome {
    display: none !important;
}


/* ---- C. Social Analytics Visibility ---- */

/* Show/hide based on social data availability */
.stock-detail[data-has-social-data="true"] .social-analytics {
    display: flex;
}

.stock-detail[data-has-social-data="false"] .social-analytics {
    display: none;
}


/* ---- D. Sticky Bar — Published State & Timestamp Visibility ---- */

/* Hide published timestamp when listing has never been published */
.sticky-status-bar[data-published="false"] .timestamp.published-time {
    display: none;
}

/* Show draft timestamp for unpublished listings */
.sticky-status-bar[data-published="false"] .timestamp.draft-time {
    display: inline-flex;
}

/* Show both timestamps when published */
.sticky-status-bar[data-published="true"] .timestamp.published-time,
.sticky-status-bar[data-published="true"] .timestamp.draft-time {
    display: inline-flex;
}

/* Subdued publish button when already published and no pending changes
   (reinforces the "Up to Date" state from S5 base rules) */
.stock-detail[data-published-state="published"][data-has-pending-changes="false"]
    .sticky-status-bar .command-button-group.btn-primary {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-muted);
    box-shadow: none;
    cursor: default;
}

.stock-detail[data-published-state="published"][data-has-pending-changes="false"]
    .sticky-status-bar .command-button-group.btn-primary .timestamp {
    color: var(--color-success);
    opacity: 1;
}


/* ---- E. Pending Changes System ---- */

/* Show pending indicator when changes exist (base hidden in S5 line ~5143)
   BUT only for listings that have been published before - not draft-only listings */
.stock-detail[data-has-pending-changes="true"][ux-published] .sticky-status-bar .pending-changes-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

/* IMPORTANT: Never show "Changes pending" for draft-only listings (never published) */
.stock-detail[ux-draft-only] .sticky-status-bar .pending-changes-indicator {
    display: none !important;
}

/* Show changes badge when pending changes exist (base hidden in S5 line ~5429)
   BUT only for listings that have been published before */
.stock-detail[data-has-pending-changes="true"][ux-published] .sticky-status-bar .changes-badge {
    display: block;
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--color-secondary);
    color: var(--color-text);
    border-radius: var(--border-radius-full);
    padding: 2px 6px;
    min-width: 23px;
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    z-index: 10;
    text-align: center;
}

/* IMPORTANT: Never show changes badge for draft-only listings */
.stock-detail[ux-draft-only] .sticky-status-bar .changes-badge {
    display: none !important;
}

/* Pending changes reason text — all hidden by default */
.pending-changes-notice .reason-draft-newer,
.pending-changes-notice .reason-explicit-changes,
.pending-changes-notice .reason-draft-only,
.pending-changes-notice .reason-variant-changes,
.pending-changes-notice .reason-default {
    display: none;
}

/* Show specific reason based on attribute */
.stock-detail[data-pending-changes-reason="draft-newer"] .pending-changes-notice .reason-draft-newer {
    display: inline;
}

.stock-detail[data-pending-changes-reason="explicit-changes"] .pending-changes-notice .reason-explicit-changes {
    display: inline;
}

.stock-detail[data-pending-changes-reason="draft-only"] .pending-changes-notice .reason-draft-only {
    display: inline;
}

.stock-detail[data-pending-changes-reason="variant-changes"] .pending-changes-notice .reason-variant-changes {
    display: inline;
}

/* Fallback: show default reason when there are changes but no specific reason */
.stock-detail[data-has-pending-changes="true"]:not([data-pending-changes-reason]) .pending-changes-notice .reason-default,
.stock-detail[data-has-pending-changes="true"][data-pending-changes-reason=""] .pending-changes-notice .reason-default {
    display: inline;
}

/* Pulse animation on publish button when changes are pending */
@keyframes pulse-pending {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb), 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(var(--color-primary-rgb), 0); }
}

/* Pulse animation only for published listings with pending changes */
.stock-detail[data-has-pending-changes="true"][ux-published] .sticky-status-bar .command-button-group.btn-primary {
    animation: pulse-pending 2s infinite;
}

/* No pulse for draft-only listings - first publish is expected, not urgent */
.stock-detail[ux-draft-only] .sticky-status-bar .command-button-group.btn-primary {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .stock-detail[data-has-pending-changes="true"][ux-published] .sticky-status-bar .command-button-group.btn-primary {
        animation: none;
    }
}


/* ---- E2. Compact Sticky Header for Pending Changes State ----
   Design: Consolidated horizontal layout — the publish button's teal badge
   serves as THE changes indicator. No redundant "Changes pending" badge
   or status note text needed. Creates a clean single-row header.
   ---------------------------------------------------------------- */

/* OVERRIDE: Hide the separate "Changes pending" badge — redundant with the
   publish button's teal count badge. One indicator is enough. */
.stock-detail[data-has-pending-changes="true"][ux-published] .sticky-status-bar .pending-changes-indicator {
    display: none !important;
}

/* OVERRIDE: Hide the status-note ("Unpublished X variant changes") when
   changes pending — the badge count tells the same story more concisely */
.stock-detail[data-has-pending-changes="true"][ux-published] .sticky-status-bar .status-note {
    display: none;
}

/* Ensure status-details row doesn't take space when empty */
.stock-detail[data-has-pending-changes="true"][ux-published] .sticky-status-bar .status-details:not(:has(.attention-badge)) {
    display: none;
}

/* Refined split-button styling for pending changes state */
.stock-detail[data-has-pending-changes="true"][ux-published] .split-button-group {
    /* Subtle glow to draw attention */
    box-shadow:
        0 4px 16px rgba(var(--color-primary-rgb), 0.2),
        0 0 0 1px rgba(var(--color-primary-rgb), 0.1);
}

/* Position the changes badge more prominently */
.stock-detail[data-has-pending-changes="true"][ux-published] .split-button-group .changes-badge {
    top: -10px;
    right: -10px;
    min-width: 26px;
    height: 26px;
    padding: 4px 8px;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 2px 8px rgba(0, 255, 203, 0.3),
        0 0 0 2px var(--color-background);
}

/* Enhance the split-primary-action button text for pending state */
.stock-detail[data-has-pending-changes="true"][ux-published] .split-button-group .split-primary-action {
    min-width: 160px;
}

.stock-detail[data-has-pending-changes="true"][ux-published] .split-button-group .split-primary-action .button-text {
    font-weight: var(--font-weight-bold);
}

/* No pulse animation — the teal badge is attention-grabbing enough */
.stock-detail[data-has-pending-changes="true"][ux-published] .sticky-status-bar .command-button-group.btn-primary,
.stock-detail[data-has-pending-changes="true"][ux-published] .split-button-group {
    animation: none;
}


/* ---- F. Published State Indicators on Summary Cards ---- */

/* Default: live/draft indicators hidden */
.summary-card .live-indicator,
.summary-card .draft-indicator {
    display: none;
}

/* Show live indicator on live-operation cards when published */
.stock-detail[data-published-state="published"] .summary-card.live-operation .live-indicator {
    display: block;
}

/* Show draft indicator on draft-operation cards when published */
.stock-detail[data-published-state="published"] .summary-card.draft-operation .draft-indicator {
    display: block;
}

/* Hide live operation notice when never published */
.stock-detail[stock-published="0"] .live-operation-notice,
.stock-detail:not([ux-published]) .live-operation-notice {
    display: none;
}


/* ---- G. Variant Block Visibility & Draft States ---- */

/* Hidden/offline variant — dimmed */
.variant-block[data-visibility="hidden"] {
    opacity: 0.55;
    background-color: var(--color-surface);
}

.variant-block[data-visibility="hidden"]:hover {
    opacity: 0.75;
}

.variant-block[data-visibility="hidden"] .variant-block-header::before {
    content: 'Offline';
    position: absolute;
    top: var(--spacing-md);
    right: 50px;
    background-color: var(--color-text-muted);
    color: var(--color-background);
    padding: 2px var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    z-index: 10;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Variant header needs relative position for badge */
.variant-block-header {
    position: relative;
}

/* Draft changes on variant — subtle violet tint + "Changes Pending" badge (no left border) */
.variant-block[data-has-draft-changes="true"] {
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.02) 0%, var(--color-background) 100%);
    border-color: var(--color-border-primary-subtle);
}

/* Only show "Changes Pending" badge for published listings */
.stock-detail[ux-published] .variant-block[data-has-draft-changes="true"] .variant-block-title::after {
    content: 'Changes Pending';
    display: inline-flex;
    background: var(--color-secondary);
    color: var(--color-text);
    padding: 2px var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-size: 9px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-left: var(--spacing-sm);
    vertical-align: middle;
}

/* Draft indicator dot on variant — shown when changes exist (base hidden in S67 line ~14655) */
/* Only show for published listings */
.stock-detail[ux-published] .variant-block[data-has-draft-changes="true"] .variant-block-draft-indicator {
    display: inline-flex;
}

/* Subtle pulse on draft indicator */
@keyframes subtle-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.stock-detail[ux-published] .variant-block[data-has-draft-changes="true"] .variant-block-draft-indicator {
    animation: subtle-pulse 3s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .stock-detail[ux-published] .variant-block[data-has-draft-changes="true"] .variant-block-draft-indicator {
        animation: none;
    }
}

/* Published + draft state variant — subtle gradient */
.stock-detail[ux-published] .variant-block[data-state="draft"][data-visibility="visible"] {
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.02) 0%, rgba(var(--color-secondary-rgb), 0.01) 100%);
}

/* Draft-only + hidden variant */
.stock-detail[ux-draft-only] .variant-block[data-visibility="hidden"] {
    background: rgba(136, 136, 136, 0.05);
    opacity: 0.8;
}

/* Listed + visible variant — no left border, status shown via badge */
.stock-detail[ux-listed] .variant-block[data-visibility="visible"] {
    border-color: var(--color-border);
}


/* ---- H. Listing Mode Display — Mode Icons & Loading State ---- */

/* Mode-specific icon backgrounds */
.mode-display[data-current-mode="ForSale"] .mode-display-icon {
    background-image: url(/images/icon/listing-mode-sale.svg);
    background-color: transparent;
}

.mode-display[data-current-mode="Showcase"] .mode-display-icon {
    background-image: url(/images/icon/listing-mode-showcase.svg);
    background-color: transparent;
}

.mode-display[data-current-mode="ShowcaseOffers"] .mode-display-icon {
    background-image: url(/images/icon/listing-mode-showcase-offers.svg);
    background-color: transparent;
}

.mode-display[data-current-mode="ForSaleOffers"] .mode-display-icon {
    background-image: url(/images/icon/listing-mode-sale-offers.svg);
    background-color: transparent;
}

.mode-display[data-current-mode="Hidden"] .mode-display-icon {
    background-image: url(/images/icon/listing-mode-hidden.svg);
    background-color: transparent;
}

/* Loading state — disabled interaction */
.mode-display[data-loading="true"] {
    opacity: 0.7;
    pointer-events: none;
}

.mode-display[data-loading="true"] .mode-display-actions .command {
    background: var(--color-text-muted);
    cursor: not-allowed;
}

.mode-display[data-loading="true"] .mode-display-actions .command::after {
    content: "...";
    animation: dots 1.5s steps(5, end) infinite;
}

@keyframes dots {
    0%, 20% { content: "."; }
    40% { content: ".."; }
    60% { content: "..."; }
    80%, 100% { content: ""; }
}

/* Draft-only listing — subtle violet tint on mode display */
.stock-detail[ux-draft-only] .mode-display {
    background: var(--color-primary-bg-subtle);
}

/* Published listing — subtle green tint on mode display */
.stock-detail[ux-published] .mode-display {
    background: rgba(34, 197, 94, 0.02);
}


/* ---- I. Photo Scope States ---- */

/* Shared photo — subtle green tint (no left border) */
.photo-card[data-scope="shared"] {
    border-color: rgba(34, 197, 94, 0.3);
}

/* Partial scope photo — subtle blue tint (no left border) */
.photo-card[data-scope="partial"] {
    border-color: rgba(var(--color-info-rgb), 0.3);
}

/* Scope badge styling */
.photo-card[data-scope="shared"] .scope-badge {
    background-color: rgba(34, 197, 94, 0.15);
    color: var(--color-success-dark);
}

.photo-card[data-scope="partial"] .scope-badge {
    background-color: rgba(var(--color-info-rgb), 0.15);
    color: var(--color-info);
}

/* Photo edit button — hidden by default, shown with multi-variant */
.photo-card .photo-card-edit .variant-list {
    display: none;
}

.stock-detail[ux-variant-count] .photo-card .photo-card-edit .variant-list {
    display: inline;
}

.stock-detail[ux-variant-count="1"] .photo-card .photo-card-edit .variant-list {
    display: none;
}


/* ---- J. Data Field States (ux-filled) ---- */

/* Taxonomy: show saved value, hide prompt when filled */
.detail-section.taxonomy .saved-value {
    display: none;
}

.detail-section.taxonomy .data[ux-filled] .saved-value {
    display: flex;
    flex-direction: column;
}

.detail-section.taxonomy .data .question {
    display: block;
}

.detail-section.taxonomy .data[ux-filled] .question {
    display: none;
}

/* Taxonomy: show Change command when filled */
.detail-section.taxonomy .data .cmdChange {
    display: none;
}

.detail-section.taxonomy .data[ux-filled] .cmdChange {
    display: inline-flex;
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    cursor: pointer;
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    transition: var(--transition-fast);
}

.detail-section.taxonomy .data[ux-filled] .cmdChange:hover {
    background: var(--color-primary-hover-bg);
}


/* ---- K. Variant Count Gating ---- */

/* "Shared" prefix on family-level attributes heading when multi-variant */
.stock-detail[ux-variant-count] > .section.attributes h3::before {
    content: "Shared ";
}

.stock-detail[ux-variant-count="1"] > .section.attributes h3::before {
    content: "";
}

/* Delete button on variants — hidden for single, shown for multi */
.variant .command.cmdDelete {
    display: none;
}

.stock-detail[ux-variant-count] .variant .command.cmdDelete {
    display: block;
}

.stock-detail[ux-variant-count="1"] .variant .command.cmdDelete {
    display: none;
}

/* Variant subcaption sequence — hidden for single variant */
.stock-detail[ux-variant-count="1"] .variant .subcaption .sequence {
    display: none;
}

/* Variant-specific attribute styling */
.attribute-flow .attribute-item[ux-variation] strong {
    font-weight: var(--font-weight-medium);
}


/* ---- L. Context Notes (Versioning Dialogs) ----
   Context notes inside selection cards should be muted by default.
   Only show prominent styling when the parent card is selected.
   This prevents visual confusion where both cards appear "highlighted". */

/* Default: all context notes are muted */
.context-note {
    color: var(--color-text-muted);
}

/* When card is selected, show appropriate context styling */
.selection-card:has(input:checked) .context-note[data-context="never-published"] {
    color: var(--color-warning-text, #92400e);
}

.selection-card:has(input:checked) .context-note[data-context="published-but-hidden"],
.selection-card:has(input:checked) .context-note[data-context="will-hide"] {
    color: var(--color-text);
}

.selection-card:has(input:checked) .context-note[data-context="already-online"],
.selection-card:has(input:checked) .context-note[data-context="already-offline"] {
    color: var(--color-text-muted);
}

/* Impact summary status emojis */
.impact-item[data-impact="online-published"]::before { content: '\2705 '; }
.impact-item[data-impact="online-not-published"]::before { content: '\1F4DD '; }
.impact-item[data-impact="offline-published"]::before { content: '\1F6AB '; }
.impact-item[data-impact="offline-not-published"]::before { content: '\1F4DD '; }


/* ==========================================================================
   73. PRODUCT SUMMARY (Buyer View)
   ==========================================================================
   Core structural layout for the buyer-facing product detail page and
   quick-view drawer. ProductSummaryView.cshtml renders in two contexts:
     1. Embedded in ProductDetailView (full page)
     2. As View_ProductSummary dialog (quick-view drawer from search)

   All rules must work in both contexts. Step 1 covers the structural
   container hierarchy; subsequent steps add photo gallery, facets,
   purchase sections, etc.

   Legacy classes: .productSummary, .contentSection, .searchDetail,
     .infoView, .pane
   ========================================================================== */

/* --- Product Summary Root --- */
.product-summary {
    width: 100%;
    text-align: left;
    margin: 0;
    padding: 0;
}

/* --- Content Section (shared wrapper for summary + details blocks) --- */
.product-summary .content-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
}

/* --- Summary Section: two-pane layout (photos left, about right) --- */
.product-summary .content-section.summary {
    flex-direction: row;
    gap: var(--spacing-md);
    text-align: left;
    padding: var(--spacing-lg) 0;
    border-bottom: 1px solid var(--color-border-light);
}

/* --- Pane: equal flex columns --- */
.product-summary .content-section > * {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    min-width: 0; /* prevent flex overflow */
}

/* --- Photos Pane --- */
.product-summary .content-section > .photos {
    position: relative;
    max-width: 50%;
}

/* --- About Pane (product info, seller, facets, purchase) --- */
.product-summary .content-section > .about {
    padding: 0 var(--spacing-md);
    gap: var(--spacing-sm);
}

/* --- Info View (wraps title + seller card) --- */
.product-summary .info-view {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* --- Product Title --- */
.product-summary .product-title-section .title {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text);
    margin: 0;
    text-wrap: wrap;
}

.product-summary .product-title-section .title .unit {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
    margin-left: var(--spacing-xs);
}

.product-summary .product-title-section .title .unit:empty {
    display: none;
}

/* --- Product Meta: availability pill + distance + location --- */
.product-summary .product-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-top: var(--spacing-xs);
}

.product-summary .availability-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    white-space: nowrap;
}

.product-summary .availability-pill .dot {
    width: 6px;
    height: 6px;
    border-radius: var(--border-radius-full);
    flex-shrink: 0;
}

/* Available — green */
.product-summary .availability-pill.available {
    background: rgba(34, 197, 94, 0.1);
    color: rgb(22, 128, 61);
}
.product-summary .availability-pill.available .dot {
    background: rgb(34, 197, 94);
}

/* Accepting Offers — blue */
.product-summary .availability-pill.accepting-offers {
    background: rgba(59, 130, 246, 0.1);
    color: rgb(37, 99, 235);
}
.product-summary .availability-pill.accepting-offers .dot {
    background: rgb(59, 130, 246);
}

/* Out of Stock — red */
.product-summary .availability-pill.out-of-stock {
    background: rgba(239, 68, 68, 0.1);
    color: rgb(185, 28, 28);
}
.product-summary .availability-pill.out-of-stock .dot {
    background: rgb(239, 68, 68);
}

/* Showcase Only — gray */
.product-summary .availability-pill.showcase {
    background: var(--color-surface-darkened, rgba(0, 0, 0, 0.05));
    color: var(--color-text-muted);
}
.product-summary .availability-pill.showcase .dot {
    background: var(--color-text-muted);
}

.product-summary .meta-location-info {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.product-summary .meta-separator {
    color: var(--color-border-medium);
}

/* --- Product Details Section (below-fold: caption, SKU, features) --- */
.product-summary .content-section.product-details {
    padding: var(--spacing-lg);
    gap: var(--spacing-sm);
}

.product-summary .content-section.product-details h4 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0;
}

.product-summary .content-section.product-details h5 {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-normal);
    margin: 0;
}

.product-summary .content-section.product-details ul {
    margin: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
    color: var(--color-text-light);
    line-height: var(--line-height-relaxed);
}

.product-summary .content-section.product-details li {
    margin-bottom: var(--spacing-xs);
}

/* --- Step 2: Product Gallery Integration ---
   The buyer gallery uses the product-gallery component (vertical image stack)
   instead of the legacy carousel. These rules neutralize legacy imageGallery
   styles and fit the gallery into the product-summary two-pane layout.
   --- */

/* Neutralize legacy float/inline-block on imageGallery */
/* --- Product Gallery: Target-style grid with hero image ---
   First image full-width hero, subsequent in 2-column grid.
   More than 6 images: collapsed with "show more" expand button.
   Desktop: grid layout with per-item zoom controls.
   Mobile: horizontal swipe carousel with dot indicators.
   --- */

/* Gallery wrapper */
.product-summary .product-gallery {
    display: block;
    float: none;
    width: 100%;
    position: relative;
}

/* Remove height constraints — natural flow, page scrolls */
.product-summary .product-gallery.product-gallery-scroll {
    max-height: none;
    overflow: visible;
}

/* Images: 2-column grid, hero first image spans both */
.product-summary .product-gallery .product-gallery-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xs);
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Gallery items: square cells in 2-column grid */
.product-summary .product-gallery .product-gallery-item {
    position: relative;
    padding: 0;
    margin: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-surface);
    border-radius: var(--border-radius-md);
}

/* Hero first image: full-width across both columns, portrait crop */
.product-summary .product-gallery .product-gallery-item:first-child {
    grid-column: 1 / -1;
    aspect-ratio: 4 / 5;
    border-radius: var(--border-radius-card);
}

/* Images: cover the frame */
.product-summary .product-gallery .product-gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}

/* Hover: subtle zoom peek */
.product-summary .product-gallery .product-gallery-item:hover img {
    transform: scale(1.03);
}

/* Per-item zoom controls: appear on hover, bottom-right */
.product-summary .product-gallery .product-gallery-controls {
    position: absolute;
    bottom: var(--spacing-sm);
    right: var(--spacing-sm);
    display: flex;
    gap: var(--spacing-xs);
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 5;
}

.product-summary .product-gallery .product-gallery-item:hover .product-gallery-controls {
    opacity: 1;
}

/* Per-item zoom toggle: glass pill button */
.product-summary .product-gallery .product-gallery-controls .zoom-toggle {
    width: var(--icon-size-xl);
    height: var(--icon-size-xl);
    border-radius: var(--border-radius-full);
    background: var(--color-glass-semi);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.product-summary .product-gallery .product-gallery-controls .zoom-toggle:hover {
    background: var(--color-white);
}

/* Zoom active state: switch icon to zoom-out */
.product-summary .product-gallery .product-gallery-item[data-gallery-zoom="active"] .zoom-toggle .icon {
    background-image: url(/images/icon/zoom-out-black.svg);
}

/* Prevent framework zoom from changing gallery item dimensions (flicker fix) */
.product-summary .product-gallery .product-gallery-item[image-zoom-mode] {
    max-width: none !important;
    max-height: none !important;
}

/* Collapse images beyond 6th on desktop */
.product-summary .product-gallery .product-gallery-item:nth-child(n+7) {
    display: none;
}

.product-summary .product-gallery[data-gallery-expanded="true"] .product-gallery-item:nth-child(n+7) {
    display: block;
}

/* "Show all photos" expand button */
.product-summary .product-gallery .product-gallery-expand {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    margin-top: var(--spacing-xs);
    grid-column: 1 / -1;
    border-radius: var(--border-radius-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.product-summary .product-gallery .product-gallery-expand:hover {
    background: var(--color-surface-darkened);
    border-color: var(--color-border-medium);
}

/* Toggle expand/collapse text */
.product-summary .product-gallery .product-gallery-expand .collapse-text {
    display: none;
}

.product-summary .product-gallery[data-gallery-expanded="true"] .product-gallery-expand .expand-text {
    display: none;
}

.product-summary .product-gallery[data-gallery-expanded="true"] .product-gallery-expand .collapse-text {
    display: inline;
}

/* Gallery dots — hidden on desktop, shown on mobile */
.product-summary .product-gallery .product-gallery-dots {
    display: none;
}

/* Overlay: absolute, covers hero image area (no bottom — auto-height) */
.product-summary .product-gallery .product-gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 3;
}

.product-summary .product-gallery .product-gallery-overlay > * {
    pointer-events: auto;
}

/* Mobile: horizontal swipe carousel */
@media (max-width: 768px) {
    .product-summary .product-gallery .product-gallery-images {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 0;
        scrollbar-width: none;
        position: relative;
    }

    .product-summary .product-gallery .product-gallery-images::-webkit-scrollbar {
        display: none;
    }

    /* Kill left-side scroll fade on gallery */
    .product-summary .product-gallery .product-gallery-images::before {
        display: none !important;
    }

    /* Soften right-side scroll fade — subtle swipe hint */
    .product-summary .product-gallery .product-gallery-images::after {
        content: "";
        display: block !important;
        position: sticky;
        top: 0;
        right: 0;
        flex: 0 0 0px;
        min-width: 0;
        height: 100%;
        margin-left: -30px;
        width: 30px;
        pointer-events: none;
        background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.06));
        z-index: 1;
    }

    /* Hide right fade at scroll end */
    .product-summary .product-gallery .product-gallery-images[ux-scrollcontent-hz-end]::after {
        display: none !important;
    }

    .product-summary .product-gallery .product-gallery-item {
        flex: 0 0 100%;
        scroll-snap-align: center;
        aspect-ratio: 4 / 5;
        border-radius: 0;
    }

    .product-summary .product-gallery .product-gallery-item:first-child {
        border-radius: 0;
    }

    /* Mobile: show ALL images in swipe (no collapse) */
    .product-summary .product-gallery .product-gallery-item:nth-child(n+7) {
        display: block;
    }

    /* Hide expand button on mobile */
    .product-summary .product-gallery .product-gallery-expand {
        display: none;
    }

    /* Show dot indicators on mobile */
    .product-summary .product-gallery .product-gallery-dots {
        display: flex;
        justify-content: center;
        gap: 6px;
        padding: var(--spacing-sm) 0;
    }

    /* Overlay covers visible image on mobile */
    .product-summary .product-gallery .product-gallery-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    /* Per-item controls always visible on mobile (no hover) */
    .product-summary .product-gallery .product-gallery-controls {
        opacity: 1;
    }

    /* Mobile reorder: title + seller above gallery
       display:contents flattens pane wrappers so children can be reordered */
    .product-summary .content-section > .photos,
    .product-summary .content-section > .about,
    .product-summary .info-view {
        display: contents;
    }

    .product-summary .product-header { order: 1; }
    .product-summary .seller-info-card { order: 2; }
    .product-summary .product-gallery { order: 3; }
    .product-summary .product-facets { order: 4; }
    .product-summary .delivery-location { order: 5; }
    .product-summary .purchase-section { order: 6; }
    .product-summary .product-details { order: 7; }
}

/* --- Step 3: Photo Overlay Controls ---
   Layout and styling for seller badge, distance badge, social controls,
   zoom toggle, and engagement stats that overlay the product gallery.
   Scoped under .product-summary to override generic .product-stats and
   .stat-item rules from the product-card and homepage sections.
   --- */

/* Overlay layout: flex row wrap for badge/control flow */
.product-summary .photo-overlay-controls {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    pointer-events: none;
}

/* Re-enable pointer events on interactive children */
.product-summary .photo-overlay-controls > * {
    pointer-events: auto;
}

/* Badges: override absolute positioning to flow in overlay flex */
.product-summary .photo-overlay-controls .seller-badge {
    position: static;
    white-space: nowrap;
    flex: 0 0 auto;
}

.product-summary .photo-overlay-controls .distance-badge {
    position: static;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* Social + Zoom controls row — stretches full width, second row */
.product-summary .photo-overlay-controls .overlay-controls {
    display: flex;
    flex: 1 1 100%;
    justify-content: space-between;
    align-items: center;
    order: 2;
}

/* Social overlay — neutralize generic .product-stats positioning */
.product-summary .photo-overlay-controls .social-overlay {
    position: static;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: none;
    transform: none;
    opacity: 1;
    padding: 0;
    color: var(--color-white);
    font-size: var(--font-size-xs);
}

/* Watch toggle: glass pill button */
.product-summary .photo-overlay-controls .social-watch-toggle {
    width: var(--icon-size-xl);
    height: var(--icon-size-xl);
    border-radius: var(--border-radius-full);
    background: var(--color-glass-semi);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
}

.product-summary .photo-overlay-controls .social-watch-toggle:hover {
    background: var(--color-glass-heavy);
}

/* Watch toggle icon: SVG via background-image */
.product-summary .photo-overlay-controls .social-watch-toggle .icon {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    background-image: url(/images/icon/bookmark-black.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 0;
    text-indent: -9999px;
}

/* Watching state: solid bookmark */
.product-summary [data-watch-status="watching"] .social-watch-toggle .icon {
    background-image: url(/images/icon/bookmark-solid-black.svg);
}

/* Watcher count — neutralize generic .stat-item styling */
.product-summary .photo-overlay-controls .social-overlay .stat-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 0;
    text-align: left;
}

.product-summary .photo-overlay-controls .social-overlay .stat-item .icon {
    display: none;
}

.product-summary .photo-overlay-controls .social-overlay .stat-item .count {
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    font-size: var(--font-size-xs);
}

.product-summary .photo-overlay-controls .social-overlay .stat-item .label {
    color: var(--color-white);
    opacity: 0.8;
    font-size: var(--font-size-xs);
}

/* Zoom toggle: glass pill button */
.product-summary .photo-overlay-controls .zoom-toggle {
    width: var(--icon-size-xl);
    height: var(--icon-size-xl);
    border-radius: var(--border-radius-full);
    background: var(--color-glass-semi);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
}

.product-summary .photo-overlay-controls .zoom-toggle:hover {
    background: var(--color-glass-heavy);
}

.product-summary .photo-overlay-controls .zoom-toggle .icon {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    background-image: url(/images/icon/zoom-in-black.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 0;
    text-indent: -9999px;
}

/* Stats overlay — view count row, before controls */
.product-summary .photo-overlay-controls .stats-overlay {
    display: flex;
    align-items: center;
    order: 1;
}

/* Neutralize generic .product-stats positioning for stats-overlay context */
.product-summary .photo-overlay-controls .stats-overlay .product-stats {
    position: static;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: none;
    transform: none;
    opacity: 1;
    padding: 0;
    color: var(--color-white);
    font-size: var(--font-size-xs);
}

/* View count stat — neutralize generic .stat-item */
.product-summary .photo-overlay-controls .stats-overlay .stat-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 0;
    text-align: left;
}

.product-summary .photo-overlay-controls .stats-overlay .stat-item .icon {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    background-image: url(/images/icon/eye-black.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 0;
    text-indent: -9999px;
}

.product-summary .photo-overlay-controls .stats-overlay .stat-item .count {
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    font-size: var(--font-size-xs);
}

.product-summary .photo-overlay-controls .stats-overlay .stat-item .label {
    display: none;
}

/* Hide stats when view count is 0 */
.product-summary [data-view-count="0"] .photo-overlay-controls .stats-overlay {
    display: none;
}

/* --- Product Summary: Search Card Pattern for Bookmark/Stats ---
   These rules support the simplified structure matching search cards:
   .product-bookmark (top-right) and .product-stats (bottom bar)
   Now positioned inside .product-gallery-item.hero-image (first image)
   --- */

/* Gallery item needs position relative for absolute children */
.product-summary .product-gallery-item {
    position: relative;
}

/* Bookmark button: positioned top-right on hero image (matches search card style) */
.product-summary .product-gallery-item .product-bookmark {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-card);
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.product-summary .product-gallery-item .product-bookmark:hover {
    transform: scale(1.1);
    background: var(--color-white);
    box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), 0.2);
}

.product-summary .product-gallery-item .product-bookmark .bookmark-icon {
    width: 18px;
    height: 18px;
    background-color: var(--color-text-muted);
    -webkit-mask-image: url('/images/icon/bookmark-black.svg');
    mask-image: url('/images/icon/bookmark-black.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: var(--transition-card);
}

.product-summary .product-gallery-item .product-bookmark:hover .bookmark-icon {
    background-color: var(--color-primary);
}

.product-summary .product-gallery-item .product-bookmark.bookmarked .bookmark-icon {
    -webkit-mask-image: url('/images/icon/bookmark-solid-black.svg');
    mask-image: url('/images/icon/bookmark-solid-black.svg');
    background-color: var(--color-primary);
}

.product-summary .product-gallery-item .product-bookmark.bookmarked:hover .bookmark-icon {
    background-color: var(--color-error);
}

/* Social actions container: holds bookmark + share buttons side by side */
.product-social-actions {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    display: flex;
    flex-direction: row;
    gap: var(--spacing-xs);
    z-index: 6;
}

.product-social-actions .product-bookmark,
.product-social-actions .product-share {
    position: static;
}

/* Share button: same style as bookmark */
.product-share {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-card);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-size: 0;
}

.product-share:hover {
    transform: scale(1.1);
    background: var(--color-white);
    box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), 0.2);
}

.product-share:active {
    transform: scale(0.95);
}

.product-share .share-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: var(--color-text-muted);
    -webkit-mask-image: url('/images/icon/share-black.svg');
    mask-image: url('/images/icon/share-black.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: var(--transition-card);
}

.product-share:hover .share-icon {
    background-color: var(--color-primary);
}

.product-share[event-running] {
    font-size: 0;
    text-indent: -9999px;
}

/* Stats bar: positioned bottom on hero image */
.product-summary .product-gallery-item > .product-stats {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
    z-index: 4;
    /* Override generic .product-stats hidden state */
    transform: none;
    opacity: 1;
}

.product-summary .product-gallery-item > .product-stats .product-stat {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.product-summary .product-gallery-item > .product-stats .product-stat-icon {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    background-color: var(--color-white);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.product-summary .product-gallery-item > .product-stats .view-count .product-stat-icon {
    -webkit-mask-image: url('/images/icon/eye-black.svg');
    mask-image: url('/images/icon/eye-black.svg');
}

.product-summary .product-gallery-item > .product-stats .watcher-count .product-stat-icon {
    -webkit-mask-image: url('/images/icon/heart-black.svg');
    mask-image: url('/images/icon/heart-black.svg');
}

.product-summary .product-gallery-item > .product-stats .product-stat-value {
    color: var(--color-white);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

/* --- Step 4: Product Facets (variant/option selectors) --- */

/* Facets container — hidden by default, shown via data-has-facets */
.product-summary .product-facets {
    display: none;
    margin-top: var(--spacing-sm);
}

.product-summary[data-has-facets] .product-facets {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

/* Facet group — heading + choices row */
.product-summary .product-facets .facet-group {
    width: 100%;
}

/* Facet heading — friendly, not uppercase/clinical */
.product-summary .product-facets .facet-group h4 {
    text-align: left;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-light);
    line-height: var(--line-height-normal);
    margin: 0 0 var(--spacing-xs) 0;
    padding: 0;
    text-transform: none;
    letter-spacing: 0;
}

/* Choices list — flex wrap, reset list styles */
.product-summary .product-facets .facet-choices {
    display: flex;
    flex-flow: wrap;
    gap: var(--spacing-xs);
    margin: 0;
    padding: 0;
    list-style: none;
    height: auto;
}

/* Expanded choices — full-width stacked items */
.product-summary .product-facets .facet-choices.expanded .facet-value {
    width: 100%;
    max-width: none;
    height: auto;
    overflow: visible;
    line-height: var(--line-height-normal);
    padding: var(--spacing-sm) var(--spacing-md);
}

/* Individual facet value chip */
.product-summary .product-facets .facet-value {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-tight);
    text-align: center;
    text-transform: none;
    box-sizing: border-box;
    padding: 0;
    max-width: 120px;
    height: auto;
    overflow: hidden;
    background-color: var(--color-surface);
    color: var(--color-text);
    transition: var(--transition-colors);
    float: none;
    width: auto;
    min-width: 0;
    margin: 0;
}

.product-summary .product-facets .facet-value:hover {
    border-color: var(--color-primary);
    background-color: var(--color-primary-lighter);
    color: var(--color-primary);
    text-decoration: none;
}

/* Selected state — primary fill (matches .chip.selected pattern) */
.product-summary .product-facets .facet-value.selected {
    background-color: var(--color-primary);
    color: var(--color-background);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
    cursor: default;
    background-image: url("/images/skin/icon.selected.png");
    background-repeat: no-repeat;
    background-size: var(--font-size-sm) var(--font-size-sm);
    background-position: right var(--spacing-xs) top 1px;
}

/* Disabled state — muted, non-interactive (matches .chip.disabled pattern) */
.product-summary .product-facets .facet-value.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Photo swatch inside facet value */
.product-summary .product-facets .facet-value img {
    width: 100%;
    height: 40px;
    padding: 0;
    margin: 0;
    object-fit: cover;
    object-position: center center;
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
}

/* Caption text inside facet value */
.product-summary .product-facets .facet-caption {
    padding: var(--spacing-xs) var(--spacing-sm);
    flex-grow: 1;
    align-content: center;
    display: block;
}

/* HR separators in expanded choices */
.product-summary .product-facets .facet-value hr {
    display: block;
    background-color: var(--color-border-light);
    border: 0;
    height: 1px;
    width: 92%;
    margin: 0 auto;
    padding: 0;
}

.product-summary .product-facets .facet-value.selected hr {
    background-color: currentColor;
}

/* Touch horizontal scroll variant */
.product-summary .product-facets .facet-choices[ux-touch-hscroll] {
    flex-flow: row nowrap;
    overflow: hidden;
    cursor: default;
    width: 100%;
    position: relative;
    gap: var(--spacing-xs);
}

.product-summary .product-facets .facet-choices[ux-touch-hscroll] .facet-value {
    display: inline-flex;
    float: none;
    cursor: pointer;
    min-width: 100px;
    flex-shrink: 0;
}

/* Dialog context — smaller facet chips */
#Interactions .product-summary .product-facets .facet-value {
    max-width: 80px;
    min-width: 100px;
}

#Interactions .product-summary .product-facets .facet-caption {
    font-size: var(--font-size-xs);
    line-height: var(--font-size-sm);
    padding: var(--spacing-xs);
}

#Interactions .product-summary .product-facets .facet-value img {
    height: 65px;
}

/* Form context — show/hide facets */
.form .product-summary .product-facets {
    display: none;
}

.form .product-summary[data-has-facets] .product-facets {
    display: flex;
    width: 100%;
    flex-direction: column;
}

/* --- Step 5: Delivery Location (meetup / pickup tabs) --- */

/* Container — full width, block layout */
.product-summary .delivery-location {
    width: 100%;
    display: block;
    box-sizing: border-box;
}

/* Handoff wrapper */
.product-summary .delivery-location .handoff {
    width: 100%;
}

/* Navigation — tab row */
.product-summary .delivery-location .navigation {
    width: 100%;
    display: flex;
    flex-flow: wrap;
    gap: var(--spacing-xs);
    height: auto;
    min-height: 0;
    margin: var(--spacing-sm) 0 0;
    padding: 0;
    list-style: none;
}

/* Nav item — delivery method tab (follows .selection-card border/radius pattern) */
.product-summary .delivery-location .navigation .tab-item {
    position: static;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-xs);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-md);
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text);
    background-color: var(--color-background);
    cursor: pointer;
    text-transform: none;
    transition: border-color 0.2s var(--ease-elegant), background-color 0.2s var(--ease-elegant), box-shadow 0.2s var(--ease-elegant);
    box-sizing: border-box;
}

.product-summary .delivery-location .navigation .tab-item:hover {
    border-color: var(--color-border-medium);
    background-color: var(--color-surface);
}

/* Selected tab — matches .selection-card.selected pattern */
.product-summary .delivery-location .navigation .tab-item.selected {
    font-weight: var(--font-weight-bold);
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    background-color: var(--color-primary-lighter);
    box-shadow: 0 0 0 1px var(--color-primary-muted);
    background-image: url("/images/skin/icon.selected.dark.png");
    background-repeat: no-repeat;
    background-size: var(--font-size-sm) var(--font-size-sm);
    background-position: right var(--spacing-xs) top 1px;
    cursor: default;
}

/* Wait/status text inside tab */
.product-summary .delivery-location .navigation .tab-item .wait {
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
    padding-top: var(--spacing-xs);
    text-align: center;
    color: var(--color-text-light);
}

.product-summary .delivery-location .navigation .tab-item.selected .wait {
    color: var(--color-text);
}

/* Disabled tab — matches .selection-card.disabled */
.product-summary .delivery-location .navigation .tab-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.product-summary .delivery-location .navigation .tab-item.disabled .wait {
    color: var(--color-text-muted);
}

/* Panels — delivery detail content */
.product-summary .delivery-location .panels {
    width: 100%;
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
}

.product-summary .delivery-location .panels .panel {
    display: block;
    width: 100%;
    padding: var(--spacing-md) 0;
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text);
}

.product-summary .delivery-location .panels .panel * {
    display: inline;
}

.product-summary .delivery-location .panels .panel a {
    text-decoration: underline;
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
}

.product-summary .delivery-location .panels .panel a[data-lat="0"] {
    text-decoration: none;
    color: var(--color-text);
    pointer-events: none;
}

/* Form context — delivery location layout */
.form .product-summary .delivery-location {
    display: flex;
    width: 100%;
    flex-direction: column;
    padding-right: var(--spacing-sm);
    box-sizing: border-box;
}

/* --- Step 6: Purchase Sections (buy now, offer, market value, no purchase) --- */

/* All purchase sections — hidden by default, shown via ux-attributes */
.product-summary .purchase-section {
    display: none;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    padding: var(--spacing-sm) 0;
    border-top: 1px solid var(--color-border-light);
}

/* Section heading */
.product-summary .purchase-section .name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    line-height: var(--line-height-normal);
    padding: var(--spacing-xs) 0 var(--spacing-sm);
    margin: 0;
}

/* --- Visibility states (controlled by ux-attributes on .product-summary) --- */
.product-summary[ux-no-purchase] .purchase-section.nopurchase {
    display: flex;
}

.product-summary[ux-show-market] .purchase-section.mkt {
    display: flex;
}

.product-summary[ux-allow-buy-now] .purchase-section.purchase {
    display: flex;
}

.product-summary[ux-allow-offer] .purchase-section.offer {
    display: flex;
}

.product-summary[ux-buy-disabled] .purchase-section.purchase,
.product-summary[ux-buy-disabled] .purchase-section.offer {
    display: none;
}

/* --- Market Value section --- */
.product-summary .purchase-section.mkt > .value.price {
    display: flex;
    align-self: center;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-sm);
    color: var(--color-text);
}

/* --- No Purchase section --- */
.product-summary .purchase-section.nopurchase > .value {
    padding: var(--spacing-sm) 0;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-light);
}

/* --- Purchase View (shared by buy-now and offer forms) --- */
.product-summary .purchase-view {
    width: 100%;
    height: auto;
}

/* Interaction row — quantity + display side by side */
.product-summary .purchase-section .interaction {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.product-summary .purchase-section .interaction .quantity,
.product-summary .purchase-section .interaction .display {
    display: flex;
    flex-direction: column;
    flex-basis: 50%;
    padding: var(--spacing-sm);
    align-items: center;
    justify-content: center;
}

/* Quantity selectors — simple (dropdown) vs bulk (incrementer) */
.product-summary .purchase-section [ux-add-simple] {
    display: none;
}

.product-summary .purchase-view .add {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Incrementer */
.product-summary .purchase-section .incrementer {
    margin-bottom: var(--spacing-xs);
}

/* Availability display */
.product-summary .purchase-section .available {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    padding: var(--spacing-xs);
}

.product-summary .purchase-section .available .onhand,
.product-summary .purchase-section .available .oos,
.product-summary .purchase-section .available .replenish {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    flex-wrap:wrap;
}

.product-summary .purchase-section .available .onhand [data-key="item.onhand"] {
    display: inline-flex;
    margin-right: var(--spacing-xs);
}

/* OOS + replenish hidden by default, shown via data-onhand="0" */
.product-summary .purchase-section .available .oos {
    display: none;
    font-weight: var(--font-weight-bold);
}

.product-summary .purchase-section .available .replenish {
    display: none;
}

.product-summary[data-onhand="0"] .purchase-section .available .onhand {
    display: none;
}

.product-summary[data-onhand="0"] .purchase-section .available .oos {
    display: flex;
}

.product-summary[ux-replenish] .purchase-section .available .replenish {
    display: flex;
}

/* Out of stock — hide incrementer */
.product-summary[data-onhand="0"] .purchase-section .incrementer {
    display: none;
}

/* Single item states — hide quantity controls, just show availability */
.product-summary .purchase-section[ux-max-cart-count="1"] .available .onhand {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

.product-summary .purchase-section[ux-max-cart-count="1"] .available .onhand::before {
    content: 'Only';
    display: inline;
    margin-right: var(--spacing-xs);
}

.product-summary .purchase-section[ux-max-cart-count="1"] .add {
    display: none;
}

/* --- Price display --- */
.product-summary .purchase-view .total {
    width: 100%;
    text-align: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-tight);
    margin-top: var(--spacing-sm);
    color: var(--color-text);
}

.product-summary .purchase-view .unit-price {
    width: 100%;
    text-align: center;
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
    color: var(--color-text-light);
}

.product-summary .purchase-view [data-key="item.price-regular"] {
    color: var(--color-error);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-light);
    width: 100%;
    text-align: center;
    line-height: var(--line-height-normal);
}

.product-summary .purchase-view [data-key="item.price-breaks"] {
    margin-top: var(--spacing-xs);
    width: 100%;
    text-align: center;
}

.product-summary .purchase-view [data-key="item.price-breaks"] .break {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-light);
    text-align: center;
    line-height: var(--line-height-normal);
    display: inline-block;
    width: 60%;
    max-width: 220px;
}

.product-summary .purchase-view [data-key="item.price-breaks"] .break .qty,
.product-summary .purchase-view [data-key="item.price-breaks"] .break .value {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

/* Out of stock — muted price breaks */
.product-summary[data-onhand="0"] .purchase-view [data-key="item.price-breaks"] .break .qty,
.product-summary[data-onhand="0"] .purchase-view [data-key="item.price-breaks"] .break .value {
    color: var(--color-text-muted);
}

/* Offer instruction text */
.product-summary .purchase-view .instruct {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-light);
    text-align: center;
    padding: var(--spacing-sm);
}

/* --- Commands row (submit, remove, cart quantity) --- */
.product-summary .purchase-section .commands {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    margin: 0;
    padding: var(--spacing-sm);
    border: 2px solid var(--color-primary-lighter);
    border-radius: var(--border-radius-md);
    background-color: var(--color-surface);
}

/* Commands — no border when cart empty */
.product-summary .purchase-section[ux-cart-count="0"] .commands {
    border-color: transparent;
    padding: 0;
}

/* HUD status */
.product-summary .purchase-section .commands .hud {
    flex-basis: 100%;
    width: 100%;
    padding: var(--spacing-sm);
    text-align: center;
    font-weight: var(--font-weight-medium);
    color: var(--color-error);
}

/* Command base */
.product-summary .purchase-section .commands .command {
    flex: 1;
    margin: 0;
}

/* Remove button */
.product-summary .purchase-section .commands .cmdRemove {
    background-color: transparent;
    flex-basis: var(--form-input-height);
    width: var(--form-input-height);
    flex-shrink: 0;
    flex-grow: 0;
    background-image: url("/images/skin/icon-delete@2x.png");
    background-size: var(--spacing-md) var(--spacing-md);
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -9999px;
    display: flex;
}

.product-summary .purchase-section[ux-cart-count="0"] .commands .cmdRemove {
    display: none;
}

/* Cart quantity display */
.product-summary .purchase-section .cart-quantity {
    font-size: var(--font-size-md);
    text-align: center;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-height: 50px;
    flex: 1;
}

.product-summary .purchase-section[ux-cart-count="0"] .cart-quantity {
    display: none;
}

/* Submit button — sizing only; visual style comes from .btn-primary / .btn-secondary */
.product-summary .purchase-section .commands .cmdSubmit {
    width: 100%;
    min-width: 100%;
    min-height: 50px;
}

/* Disabled submit (item already in cart — ux-disabled is shopping-specific) */
.product-summary .purchase-section .commands .cmdSubmit[ux-disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Single item — hide submit when max reached */
.product-summary .purchase-section[ux-max-cart-count="1"][ux-cart-count="1"] .cmdSubmit {
    display: none;
}

/* Out of stock — hide submit */
.product-summary[data-onhand="0"] .purchase-section .commands .cmdSubmit {
    display: none;
}

/* Out of stock — muted cart option border */
.product-summary[data-onhand="0"] .purchase-view {
    border-color: var(--color-border-light);
    color: var(--color-text-muted);
}

/* Cart count 0 — neutral background */
.product-summary .purchase-section.purchase[ux-cart-count="0"],
.product-summary .purchase-section.offer[ux-cart-count="0"] {
    background-color: var(--color-surface);
    color: var(--color-text);
    border-radius: 0;
}

/* Form context — purchase layout */
.form .product-summary .purchase-section {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
}

/* --- Search detail container — max-width and centered --- */
.search-detail {
    max-width: var(--container-max-width, 1400px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

/* Hide photo-overlay seller/distance badges on detail page — shown in product-meta instead */
.search-detail .product-summary .seller-badge,
.search-detail .product-summary .distance-badge {
    display: none;
}

/* --- Step 7: Product Description + Specs Table (ProductDetailView) --- */

/* Description — prose typography for AI-generated content */
.search-detail .content-section .product-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-relaxed);
    padding: 0 var(--spacing-md);
    display: block;
    width: 100%;
    text-align: left;
}

/* Specs table — flex-based key/value grid */
.search-detail .content-section .product-specs {
    margin: var(--spacing-sm) var(--spacing-md) var(--spacing-xxl);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-xs);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-self: flex-start;
    float: none;
    text-align: left;
    width: 100%;
    max-width: 100%;
    padding: 0;
    border-radius: var(--border-radius-sm);
    overflow-x: auto;
}

/* Hide table header — visual layout doesn't need it */
.search-detail .content-section .product-specs .thead {
    display: none;
}

/* Table body — flex wrap for multi-column layout */
.search-detail .content-section .product-specs .tbody {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1;
}

/* Table rows — follows .data-table tbody tr pattern */
.search-detail .content-section .product-specs .tbody .tr {
    width: auto;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    flex: 1;
    flex-basis: 33.333%;
    flex-grow: 0;
    margin: 2px 0;
    border-top: 1px solid var(--color-border-light);
    transition: background 0.15s var(--ease-out);
}

.search-detail .content-section .product-specs .tbody .tr:hover {
    background: var(--color-primary-bg-subtle);
}

/* Remove border from first row tier (3-col desktop) */
.search-detail .content-section .product-specs .tbody .tr:nth-child(1),
.search-detail .content-section .product-specs .tbody .tr:nth-child(2),
.search-detail .content-section .product-specs .tbody .tr:nth-child(3) {
    border-top: 0;
}

/* Table cells */
.search-detail .content-section .product-specs .tbody .tr .td {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Key cells — attribute name (follows .data-table td:first-child convention) */
.search-detail .content-section .product-specs .tbody .tr .td.key {
    flex-basis: 35%;
    flex-grow: 0;
    flex-shrink: 1;
    min-width: 0;
    background-color: var(--color-surface);
    align-self: center;
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Value cells — attribute value */
.search-detail .content-section .product-specs .tbody .tr .td.value {
    flex-basis: 65%;
    flex-grow: 0;
    flex-shrink: 1;
    min-width: 0;
    background-color: var(--color-background);
    align-self: center;
    padding: 2px var(--spacing-sm) 2px var(--spacing-lg);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Variant-specific attributes — highlighted with warm gradient tint (no thick borders) */
.search-detail .content-section .product-specs .tbody .tr[data-variant-attr] {
    background: var(--gradient-tint-primary);
    border-color: var(--color-border-primary-faint);
}

.search-detail .content-section .product-specs .tbody .tr[data-variant-attr] .td.key {
    color: var(--color-primary-dark);
    font-weight: var(--font-weight-semibold);
}

.search-detail .content-section .product-specs .tbody .tr[data-variant-attr] .td.value {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
}

/* Responsive: tablet — 2-column grid */
@media (max-width: 1024px) {
    .search-detail .content-section .product-specs .tbody .tr {
        flex-basis: 50%;
    }

    .search-detail .content-section .product-specs .tbody .tr:nth-child(1),
    .search-detail .content-section .product-specs .tbody .tr:nth-child(2) {
        border-top: 0;
    }

    .search-detail .content-section .product-specs .tbody .tr:nth-child(3) {
        border-top: 1px solid var(--color-border-light);
    }
}

/* Responsive: mobile — single column */
@media (max-width: 700px) {
    .search-detail .content-section .product-specs .tbody .tr {
        flex-basis: 100%;
    }

    .search-detail .content-section .product-specs .tbody .tr:nth-child(1) {
        border-top: 0;
    }

    .search-detail .content-section .product-specs .tbody .tr:nth-child(2),
    .search-detail .content-section .product-specs .tbody .tr:nth-child(3) {
        border-top: 1px solid var(--color-border-light);
    }
}

/* --- Step 8: Related Products + Mini Stats (ProductDetailView carousel) --- */

/* Carousel wrapper */
.search-detail .related-products-carousel {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md) 0;
}

/* Section title (e.g. "Related Items", "More from seller") */
.search-detail .related-products-carousel > .title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0 0 var(--spacing-md);
    padding: 0;
}

/* Product list — horizontal scroll row */
.search-detail .related-products-list {
    display: flex;
    gap: var(--spacing-md);
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
}

/* Individual product item — card-like treatment following .product-card conventions */
.search-detail .related-product-item {
    display: flex;
    flex-direction: column;
    min-width: 200px;
    max-width: 250px;
    flex-shrink: 0;
    background: var(--color-background);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-card);
    overflow: hidden;
    transition: var(--transition-all);
}

.search-detail .related-product-item:hover {
    border-color: var(--color-border-medium);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}

/* Photo cell */
.search-detail .related-product-item .td.photo {
    width: 100%;
    overflow: hidden;
}

.search-detail .related-product-item .td.photo a {
    display: block;
}

.search-detail .related-product-item .td.photo ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.search-detail .related-product-item .td.photo img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Price cell */
.search-detail .related-product-item .td.price {
    padding: var(--spacing-sm) var(--spacing-md) 0;
}

.search-detail .related-product-item .td.price .total {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    line-height: var(--line-height-tight);
}

.search-detail .related-product-item .td.price .total .unit {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
}

.search-detail .related-product-item .td.price .regularTotal {
    font-size: var(--font-size-xs);
    color: var(--color-error);
    text-decoration: line-through;
}

.search-detail .related-product-item .td.price .bulk,
.search-detail .related-product-item .td.price .bulkSaving {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: var(--line-height-normal);
}

/* Caption cell */
.search-detail .related-product-item .td.caption {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    line-height: var(--line-height-normal);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Attributes cell */
.search-detail .related-product-item .td.attributes {
    padding: 0 var(--spacing-md);
}

.search-detail .related-product-item .td.attributes .soldAs {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* --- Product Mini Stats (compact inline stats — follows .product-stat pattern) --- */
.product-mini-stats {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-xs) var(--spacing-md);
}

.product-mini-stats .mini-stat {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.product-mini-stats .mini-stat .icon {
    font-size: var(--font-size-xs);
    line-height: 1;
}

.product-mini-stats .mini-stat .count {
    font-weight: var(--font-weight-medium);
}

/* Commands cell */
.search-detail .related-product-item .td.commands {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    border-top: 1px solid var(--color-border-light);
    margin-top: auto;
}

/* Watch toggle in related products — follows .social-watch-toggle pattern */
.search-detail .related-product-item .social-watch-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    cursor: pointer;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    transition: var(--transition-colors);
}

.search-detail .related-product-item .social-watch-toggle:hover {
    color: var(--color-primary);
}

.search-detail .related-product-item .social-watch-toggle.watching {
    color: var(--color-primary);
}

/* Toggle text states */
.search-detail .related-product-item .social-watch-toggle .unwatch-text {
    display: none;
}

.search-detail .related-product-item .social-watch-toggle.watching .watch-text {
    display: none;
}

.search-detail .related-product-item .social-watch-toggle.watching .unwatch-text {
    display: inline;
}

/* Add to cart / View button */
.search-detail .related-product-item .cmdAddToCart {
    margin-left: auto;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    cursor: pointer;
    transition: var(--transition-colors);
}

.search-detail .related-product-item .cmdAddToCart:hover {
    color: var(--color-primary-hover);
}

/* --- Step 9: Emoji → SVG icon replacement --- */

/* Shared icon base — hides emoji text, shows SVG background */
.search-detail .icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: middle;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 0;
    text-indent: -9999px;
    overflow: hidden;
}

/* Seller info card icons */
.search-detail .seller-info-card .icon-star {
    background-image: url(/images/icon/star-primary.svg);
}

.search-detail .seller-info-card .icon-pin {
    background-image: url(/images/icon/pin-primary.svg);
}

/* Mini-stats icons (ProductDetailView) */
.product-mini-stats .mini-stat .icon {
    display: inline-block;
    width: 12px;
    height: 12px;
    vertical-align: middle;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 0;
    text-indent: -9999px;
    overflow: hidden;
}

.product-mini-stats .mini-stat.view-count .icon {
    background-image: url(/images/icon/eye-black.svg);
}

.product-mini-stats .mini-stat.watcher-count .icon {
    background-image: url(/images/icon/heart-black.svg);
}

/* Related product watch toggle icon */
.search-detail .related-product-item .social-watch-toggle .icon {
    display: inline-block;
    width: 12px;
    height: 12px;
    vertical-align: middle;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 0;
    text-indent: -9999px;
    overflow: hidden;
    background-image: url(/images/icon/heart-black.svg);
}

.search-detail .related-product-item .social-watch-toggle.watching .icon {
    background-image: url(/images/icon/heart-solid-black.svg);
}

/* --- 73-D. QUICK-VIEW DIALOG OVERRIDES ---
   Layout adjustments when product summary renders inside the
   #View_ProductSummary drawer. Desktop: two-column layout with photos
   sticky on the left and product info scrolling on the right.
   Mobile: stacks vertically with horizontal swipe gallery.
   All rules namespaced to #View_ProductSummary to avoid affecting
   the full product detail page.
   ---------------------------------------------------------------- */

/* Wider drawer for two-column layout */
#View_ProductSummary[ux-workspace-dialog] {
    width: 720px;
    max-width: max(-40px + 100vw, 320px);
}

/* Scrollable product pane: top-aligned, stretched */
#View_ProductSummary .pane.product.scrollable {
    align-items: stretch;
    justify-content: flex-start;
}

/* Summary section: base dialog overrides (direction set by media queries) */
#View_ProductSummary .content-section.summary {
    gap: var(--spacing-md);
    padding: 0;
    border-bottom: none;
}

/* About pane: compact, left-aligned flow */
#View_ProductSummary .content-section .pane.about {
    padding: 0 var(--spacing-sm);
    gap: var(--spacing-md);
    align-items: flex-start;
    text-align: left;
}

/* Info view: full width, left-aligned */
#View_ProductSummary .info-view {
    align-items: flex-start;
    text-align: left;
    width: 100%;
}

/* Product title: warm dark, comfortable size */
#View_ProductSummary .info-view .title {
    font-size: var(--font-size-lg);
    line-height: 1.3;
    font-weight: var(--font-weight-semibold);
    color: rgba(30, 25, 55, 0.88);
    text-align:left;
}

/* Product details section: top border separator */
#View_ProductSummary .content-section.product-details {
    padding: var(--spacing-md) var(--spacing-sm);
    border-top: 1px solid var(--color-border-light);
}

/* Hide duplicate caption (already shown in info-view) */
#View_ProductSummary .content-section.product-details > h4.caption {
    display: none;
}

/* SKU: subtle uppercase label */
#View_ProductSummary .content-section.product-details > h5 {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Features list: warm body text */
#View_ProductSummary .content-section.product-details [data-key="item.features"] ul {
    margin: 0;
    padding-left: var(--spacing-lg);
    font-size: var(--font-size-sm);
    color: rgba(30, 25, 55, 0.75);
    line-height: 1.6;
}

#View_ProductSummary .content-section.product-details [data-key="item.features"] li {
    margin-bottom: var(--spacing-xs);
}

/* --- 73-E. PRODUCT DESCRIPTION (Prose Typography) ---
   Uses the style guide's reading content pattern:
   warm text, relaxed line-height, scroll containment.
   Rich content (headings, bold, lists) uses warm palette.
   ---------------------------------------------------------------- */

#View_ProductSummary .product-description {
    font-size: var(--font-size-sm);
    color: rgba(30, 25, 55, 0.75);
    line-height: 1.65;
    max-height: 200px;
    overflow-y: auto;
    padding: var(--spacing-sm) 0;
    align-items: flex-start;
    justify-items: flex-start;
}

#View_ProductSummary .product-description ul {
    list-style: circle;
}

#View_ProductSummary .product-description:empty {
    display: none;
}

/* Headings: warm semibold */
#View_ProductSummary .product-description h1,
#View_ProductSummary .product-description h2,
#View_ProductSummary .product-description h3 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: rgba(30, 25, 55, 0.78);
    margin: var(--spacing-sm) 0 var(--spacing-xs);
    line-height: 1.4;
}

#View_ProductSummary .product-description p {
    margin: 0 0 var(--spacing-xs);
}

#View_ProductSummary .product-description strong,
#View_ProductSummary .product-description b {
    font-weight: var(--font-weight-medium);
    color: rgba(30, 25, 55, 0.78);
}

#View_ProductSummary .product-description ul,
#View_ProductSummary .product-description ol {
    padding-left: var(--spacing-md);
    margin: var(--spacing-xs) 0;
}

#View_ProductSummary .product-description li {
    margin-bottom: var(--spacing-xs);
}

/* Purchase sections: compact vertical spacing */
#View_ProductSummary .purchase-section {
    padding: var(--spacing-sm) 0;
}

/* Delivery location: subtle separator */
#View_ProductSummary .delivery-location {
    font-size: var(--font-size-sm);
    padding: var(--spacing-sm) 0;
    border-top: 1px solid var(--color-border-light);
}

/* --- 73-D-desktop. TWO-COLUMN LAYOUT (desktop ≥769px) ---
   Photos sticky-left column, product info scrolls on right.
   Gallery shows hero + 2 thumbnails in single column.
   ---------------------------------------------------------------- */
@media (min-width: 769px) {
    /* Side-by-side columns */
    #View_ProductSummary .content-section.summary {
        flex-direction: row;
        align-items: flex-start;
    }

    /* Photos: left column, sticky while scrolling through about pane */
    #View_ProductSummary .content-section .pane.photos {
        flex: 0 0 45%;
        max-width: 45%;
        position: sticky;
        top: 0;
        align-self: flex-start;
        border-radius: var(--border-radius-lg);
        overflow: hidden;
    }

    /* Gallery: single column in dialog (not 2-col grid) */
    #View_ProductSummary .product-gallery .product-gallery-images {
        grid-template-columns: 1fr;
    }

    /* Hero first image: generous square showcase */
    #View_ProductSummary .product-gallery .product-gallery-item:first-child {
        grid-column: 1;
        aspect-ratio: 1 / 1;
        border-radius: var(--border-radius-card);
    }

    /* Subsequent images: compact landscape thumbnails */
    #View_ProductSummary .product-gallery .product-gallery-item {
        aspect-ratio: 4 / 3;
        border-radius: var(--border-radius-sm);
    }

    /* Show only first 3 images in dialog */
    #View_ProductSummary .product-gallery .product-gallery-item:nth-child(n+4) {
        display: none;
    }

    /* Expanded gallery shows all */
    #View_ProductSummary .product-gallery[data-gallery-expanded="true"] .product-gallery-item:nth-child(n+4) {
        display: block;
    }

    /* About pane: right column, scrolls naturally */
    #View_ProductSummary .content-section .pane.about {
        flex: 1;
        min-width: 0;
    }

    /* Hide dot indicators on desktop dialog */
    #View_ProductSummary .product-gallery .product-gallery-dots {
        display: none;
    }
}

/* --- 73-D-mobile. DIALOG MOBILE (≤768px) ---
   Stacks vertically with horizontal swipe gallery.
   Namespaced to #View_ProductSummary so generic detail-page
   mobile rules don't bleed in.
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Stack panes vertically */
    #View_ProductSummary .content-section.summary {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    /* Prevent generic display:contents from flattening dialog panes */
    #View_ProductSummary .content-section .pane.photos,
    #View_ProductSummary .content-section .pane.about {
        display: flex;
        flex-direction: column;
    }

    /* Photos: full width */
    #View_ProductSummary .content-section .pane.photos {
        max-width: 100%;
        border-radius: var(--border-radius-lg);
        overflow: hidden;
    }

    /* Gallery: horizontal swipe carousel */
    #View_ProductSummary .product-gallery .product-gallery-images {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 0;
        scrollbar-width: none;
    }

    #View_ProductSummary .product-gallery .product-gallery-images::-webkit-scrollbar {
        display: none;
    }

    #View_ProductSummary .product-gallery .product-gallery-item {
        flex: 0 0 100%;
        scroll-snap-align: center;
        aspect-ratio: 4 / 5;
        border-radius: 0;
    }

    #View_ProductSummary .product-gallery .product-gallery-item:first-child {
        border-radius: 0;
    }

    /* Show all images in swipe carousel */
    #View_ProductSummary .product-gallery .product-gallery-item:nth-child(n+4),
    #View_ProductSummary .product-gallery .product-gallery-item:nth-child(n+7) {
        display: block;
    }

    /* Hide expand button on mobile */
    #View_ProductSummary .product-gallery .product-gallery-expand {
        display: none;
    }

    /* Show dot indicators */
    #View_ProductSummary .product-gallery .product-gallery-dots {
        display: flex;
        justify-content: center;
        gap: 6px;
        padding: var(--spacing-sm) 0;
    }

    /* Per-item controls always visible (no hover on touch) */
    #View_ProductSummary .product-gallery .product-gallery-controls {
        opacity: 1;
    }
}

/* --- Responsive: stack panes on narrow screens (detail page) --- */
@media (max-width: 768px) {
    .product-summary .content-section.summary {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .product-summary .content-section .pane.photos {
        max-width: 100%;
    }

    .product-summary .content-section .pane.about {
        padding: 0 var(--spacing-sm);
    }
}


/* ==========================================================================
   73-F. PURCHASE HERO (Mobile Quick-View Pattern)
   ==========================================================================
   Compact inline header showing product thumbnail, title, and price at the
   top of mobile views. Ensures buyers see what they're buying and the
   price immediately without scrolling past a large photo gallery.

   Only visible on mobile; hidden on desktop where the two-column layout
   provides adequate information hierarchy.

   Used by: ProductSummaryView.cshtml (both dialog and detail page contexts)

   Structure:
     .purchase-hero           — horizontal flex container
       .hero-thumbnail        — 56px product photo
       .hero-info             — title + availability meta
         .hero-title          — product name (2-line clamp)
         .hero-meta           — availability badge + distance
       .hero-price            — prominent price display
   ========================================================================== */

/* Base: hidden by default (desktop shows regular layout) */
.purchase-hero {
    display: none;
}

/* Mobile: show purchase hero */
@media (max-width: 768px) {
    .product-summary .purchase-hero {
        display: flex;
        align-items: flex-start;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm) var(--spacing-md);
        background: linear-gradient(
            180deg,
            var(--color-background) 0%,
            rgba(92, 67, 244, 0.015) 100%
        );
        border-bottom: 1px solid var(--color-border-light);
    }

    .product-summary .purchase-hero .hero-thumbnail {
        flex-shrink: 0;
        width: 64px;
        height: 64px;
        border-radius: var(--border-radius-md);
        overflow: hidden;
        background: var(--color-surface);
        box-shadow: var(--shadow-sm);
        display: none; /* Hidden - title/price shown instead */
        text-decoration: none;
        transition: var(--transition-card);
    }

    .product-summary .purchase-hero .hero-thumbnail:hover {
        box-shadow: var(--shadow-card-hover);
        transform: translateY(-1px);
    }

    .product-summary .purchase-hero .hero-thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s var(--ease-elegant);
    }

    .product-summary .purchase-hero .hero-thumbnail:hover img {
        transform: scale(1.05);
    }

    .product-summary .purchase-hero .hero-info {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .product-summary .purchase-hero .hero-title {
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-semibold);
        color: rgba(30, 25, 55, 0.88);
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-decoration: none;
        transition: color 0.15s var(--ease-elegant);
        margin: 0;
    }

    .product-summary .purchase-hero a.hero-title:hover {
        color: var(--color-primary);
    }

    .product-summary .purchase-hero .hero-meta {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
        flex-wrap: wrap;
    }

    .product-summary .purchase-hero .hero-availability {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 2px 8px 2px 6px;
        border-radius: var(--border-radius-full);
        font-size: 10px;
        font-weight: var(--font-weight-semibold);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        background: rgba(34, 197, 94, 0.1);
        color: #15803d;
    }

    .product-summary .purchase-hero .hero-availability .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #22c55e;
    }

    .product-summary .purchase-hero .hero-availability.out-of-stock {
        background: rgba(239, 68, 68, 0.1);
        color: var(--color-error);
    }
    .product-summary .purchase-hero .hero-availability.out-of-stock .dot {
        background: var(--color-error);
    }

    .product-summary .purchase-hero .hero-availability.showcase {
        background: rgba(92, 67, 244, 0.08);
        color: var(--color-primary);
    }
    .product-summary .purchase-hero .hero-availability.showcase .dot {
        background: var(--color-primary);
    }

    .product-summary .purchase-hero .hero-availability.accepting-offers {
        background: rgba(245, 158, 11, 0.1);
        color: #b45309;
    }
    .product-summary .purchase-hero .hero-availability.accepting-offers .dot {
        background: #f59e0b;
    }

    .product-summary .purchase-hero .hero-distance {
        font-size: var(--font-size-xs);
        color: var(--color-text-muted);
    }

    .product-summary .purchase-hero .hero-price {
        flex-shrink: 0;
        text-align: right;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .product-summary .purchase-hero .hero-price .price-value {
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-bold);
        color: rgba(30, 25, 55, 0.92);
        line-height: 1.2;
    }

    .product-summary .purchase-hero .hero-price .price-unit {
        font-size: var(--font-size-xs);
        color: var(--color-text-muted);
    }
}


/* ==========================================================================
   73-G. SELLER INFO CARD — MOBILE RESPONSIVE
   ==========================================================================
   Compact responsive styling for seller-info-card on mobile.
   Same HTML element as desktop, just tighter spacing and smaller avatar.
   ========================================================================== */

/* Side-by-side button row on mobile */
.product-summary .seller-info-card .seller-actions {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-xs);
}

/* Follow: solid purple pill */
.product-summary .seller-info-card .cmdFollow {
    padding: 5px 12px;
    font-size: 11px;
    background: var(--color-primary);
    color: white;
    border: none;
}

.product-summary .seller-info-card .cmdFollow:hover {
    background: var(--color-primary-dark);
}

.product-summary .seller-info-card .cmdFollow.following {
    background: rgba(92, 67, 244, 0.1);
    color: var(--color-primary);
}

.product-summary .seller-info-card .cmdFollow.following:hover {
    background: rgba(92, 67, 244, 0.15);
}

/* Store: ghost pill with border */
.product-summary .seller-info-card .cmdViewStore {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-light);
    border-radius: var(--border-radius-full);
    border: 1px solid var(--color-border);
    background: transparent;
}

.product-summary .seller-info-card .cmdViewStore:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Mobile: compact the seller-info-card with colored side-by-side buttons */
@media (max-width: 768px) {
    .product-summary .seller-info-card {
        padding: var(--spacing-xs) var(--spacing-sm);
        gap: var(--spacing-xs);
        border-radius: var(--border-radius-md);
    }

    .product-summary .seller-info-card .seller-avatar .avatar-image {
        width: 32px;
        height: 32px;
    }

    .product-summary .seller-info-card .seller-details {
        gap: 1px;
    }

    /* Reduce gallery aspect ratio on mobile to save space */
    .product-summary .product-gallery .product-gallery-item {
        aspect-ratio: 1 / 1;
    }

    /* Hide duplicate product header info (shown in purchase hero) */
    .product-summary .product-header {
        display: none;
    }
}


/* ==========================================================================
   73-H. IMPROVED DELIVERY TABS (Meetup/Pickup)
   ==========================================================================
   Enhanced tab styling with violet-tinted gradients and clearer states.
   Makes the active tab more visually distinct with brand colors.
   ========================================================================== */

#View_ProductSummary .delivery-location .navigation {
    display: flex;
    gap: var(--spacing-xs);
    padding: 0;
    margin: 0;
    list-style: none;
}

#View_ProductSummary .delivery-location .navigation .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: var(--transition-card);
    text-align: center;
}

#View_ProductSummary .delivery-location .navigation .tab-item:hover:not(.disabled) {
    border-color: var(--color-border-primary-subtle);
    background: linear-gradient(
        135deg,
        rgba(92, 67, 244, 0.03) 0%,
        var(--color-surface) 100%
    );
    transform: translateY(-1px);
}

#View_ProductSummary .delivery-location .navigation .tab-item.selected {
    background: linear-gradient(
        135deg,
        rgba(92, 67, 244, 0.06) 0%,
        rgba(0, 255, 203, 0.02) 100%
    );
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(92, 67, 244, 0.12);
}

#View_ProductSummary .delivery-location .navigation .tab-item.selected::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: var(--color-primary);
    border-radius: 0 0 2px 2px;
}

#View_ProductSummary .delivery-location .navigation .tab-item {
    position: relative;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-light);
}

#View_ProductSummary .delivery-location .navigation .tab-item.selected {
    color: var(--color-primary);
}

#View_ProductSummary .delivery-location .navigation .tab-item .wait {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
    margin-top: 2px;
}

#View_ProductSummary .delivery-location .navigation .tab-item.selected .wait {
    color: rgba(30, 25, 55, 0.65);
}

#View_ProductSummary .delivery-location .navigation .tab-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--color-surface-darkened, rgba(0,0,0,0.02));
}


/* ==========================================================================
   73-I. ENHANCED PURCHASE SECTION
   ==========================================================================
   More prominent purchase CTA with better visual hierarchy.
   Makes the "Add to Purchase" button stand out as the primary action.
   ========================================================================== */

#View_ProductSummary .purchase-section.purchase {
    background: linear-gradient(
        180deg,
        rgba(var(--color-primary-rgb), 0.02) 0%,
        rgba(var(--color-primary-rgb), 0.05) 100%
    );
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md);
    margin-top: var(--spacing-sm);
    border: 1px solid var(--color-border-primary-faint);
}

/* Section heading — left-aligned label style */
#View_ProductSummary .purchase-section.purchase .name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm-muted);
    letter-spacing: normal;
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--color-border-light);
    text-align: left;
}

/* Interaction row — tighter gap, better alignment */
#View_ProductSummary .purchase-section .interaction {
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) 0 var(--spacing-sm);
}

#View_ProductSummary .purchase-section .interaction .quantity {
    align-items: flex-start;
    justify-content: center;
    padding: var(--spacing-xs) 0;
}

#View_ProductSummary .purchase-section .interaction .display {
    align-items: flex-end;
    justify-content: center;
    padding: var(--spacing-xs) 0;
}

/* Availability — styled as a compact badge, not large centered text */
#View_ProductSummary .purchase-section .available {
    align-items: flex-start;
    text-align: left;
}

#View_ProductSummary .purchase-section .available .onhand {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
    justify-content: flex-start;
}

#View_ProductSummary .purchase-section[ux-max-cart-count="1"] .available .onhand {
    font-size: var(--font-size-base);
}

/* Price — right-aligned, prominent */
#View_ProductSummary .purchase-view .total {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    text-align: right;
}

#View_ProductSummary .purchase-view .unit-price {
    text-align: right;
}

#View_ProductSummary .purchase-view [data-key="item.price-breaks"] {
    text-align: right;
}

#View_ProductSummary .purchase-view [data-key="item.price-breaks"] .break {
    text-align: right;
}

/* Commands area — cleaner separation */
#View_ProductSummary .purchase-section[ux-cart-count="0"] .commands {
    padding-top: var(--spacing-xs);
    border-top: 1px solid var(--color-border-light);
    margin-top: var(--spacing-xs);
}

#View_ProductSummary .purchase-section .commands .cmdSubmit {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-button);
    transition: var(--transition-card);
}

#View_ProductSummary .purchase-section .commands .cmdSubmit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), 0.3);
}

/* Offer section — same card treatment as purchase but with secondary emphasis */
#View_ProductSummary .purchase-section.offer {
    background: var(--color-surface);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md);
    margin-top: var(--spacing-sm);
    border: 1px solid var(--color-border);
}

#View_ProductSummary .purchase-section.offer .name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm-muted);
    letter-spacing: normal;
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--color-border-light);
    text-align: left;
}

/* Offer interaction — stack vertically instead of side-by-side */
#View_ProductSummary .purchase-section.offer .interaction {
    flex-direction: column;
    gap: 0;
}

#View_ProductSummary .purchase-section.offer .interaction .quantity {
    flex-basis: auto;
    align-items: center;
    padding: var(--spacing-xs) 0;
}

#View_ProductSummary .purchase-section.offer .available {
    align-items: center;
    text-align: center;
}

#View_ProductSummary .purchase-section.offer .available .onhand {
    justify-content: center;
}

#View_ProductSummary .purchase-section.offer .interaction .display {
    flex-basis: auto;
    align-items: center;
    padding: 0 0 var(--spacing-xs);
}

#View_ProductSummary .purchase-section.offer .instruct {
    text-align: center;
    color: var(--color-text-warm-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    padding: 0 var(--spacing-md);
}

.product-summary .seller-info-card {
    align-self: stretch;
}


/* Desktop: restore seller card and product header visibility */
@media (min-width: 769px) {
    .product-summary .seller-info-card {
        display: flex;
    }

    .product-summary .product-header {
        display: block;
    }

    /* View full details link in product-meta (dialog only - detail page doesn't need it) */
    #View_ProductSummary .product-meta .view-detail-link {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        color: var(--color-primary);
        text-decoration: none;
        margin-top: var(--spacing-sm);
        padding: var(--spacing-xs) 0;
        transition: color 0.15s var(--ease-elegant), transform 0.15s var(--ease-elegant);
        flex-basis: 100%;
    }

    #View_ProductSummary .product-meta .view-detail-link:hover {
        color: var(--color-primary-dark, rgba(92, 67, 244, 0.85));
        transform: translateX(2px);
    }

    /* Hide view-detail-link on detail page (already on full page) */
    .product-summary .view-detail-link {
        display: none;
    }
}


/* ==========================================================================
   74. Value Card
   ==========================================================================
   Compact display card with icon and value/suffix pair.
   Used for date, time, location, and other small data callouts.

   Structure:
     .value-card              — card container
       .card-icon             — leading icon
       .card-content          — text wrapper
         .value               — primary value text
         .suffix              — secondary/label text
   ========================================================================== */

.value-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-surface-darkened, rgba(0,0,0,0.02));
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-md);
}

.value-card .card-icon {
    font-size: var(--font-size-xl, 1.25rem);
    line-height: 1;
    flex-shrink: 0;
}

.value-card .card-content {
    display: flex;
    flex-direction: column;
}

.value-card .card-content .value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    line-height: 1.3;
}

.value-card .card-content .suffix {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: 1.3;
}


/* ==========================================================================
   75. KV Row
   ==========================================================================
   Horizontal key-value pair row for displaying labeled data.
   Used in subtotals, pricing breakdowns, and summary sections.

   Structure:
     .kv-row                  — flex row (key left, value right)
       .key                   — label text (muted)
       .value                 — data text (medium weight)
     .kv-row.final-total      — emphasized total row with top border
   ========================================================================== */

.kv-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--spacing-xs) 0;
}

.kv-row .key {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.kv-row .value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.kv-row.final-total {
    border-top: 1px solid var(--color-border-medium, var(--color-border-light));
    margin-top: var(--spacing-xs);
    padding-top: var(--spacing-sm);
}

.kv-row.final-total .key {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.kv-row.final-total .value {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}


/* ==========================================================================
   76. Chat Messaging
   ==========================================================================
   Chat messaging components: time headers, directional message bubbles
   with avatars, system messages, and compose form.

   Structure:
     .chat-time-header        — centered date/time divider
     .chat-post               — message row (with post-direction attr)
       .chat-avatar           — sender thumbnail (hidden on outgoing)
       .chat-bubble           — message content bubble
         .text                — message body
         .time                — timestamp
     .chat-post[post-system]  — centered system message
     .chat-form               — compose area wrapper
       .chat-textarea         — textarea container
       .chat-send             — send button
   ========================================================================== */

/* --- 76-A. Time Headers --- */

.chat-time-header {
    text-align: center;
    padding: var(--spacing-sm) 0;
}

.chat-time-header .message .time {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-surface-darkened, rgba(0,0,0,0.04));
    border-radius: var(--border-radius-full, 999px);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
}

/* --- 76-B. Message Posts (Directional Bubbles) --- */

.chat-post {
    display: flex;
    gap: var(--spacing-sm);
    max-width: 85%;
}

.chat-post[post-direction="in"] {
    align-self: flex-start;
}

.chat-post[post-direction="out"] {
    align-self: flex-end;
    flex-direction: row-reverse;
}

/* --- 76-C. Avatars --- */

.chat-avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-full, 999px);
    overflow: hidden;
}

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

.chat-post[post-direction="out"] .chat-avatar {
    display: none;
}

/* --- 76-D. Message Bubble --- */

.chat-bubble {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-md);
    line-height: 1.5;
    word-break: break-word;
}

.chat-post[post-direction="in"] .chat-bubble {
    background: var(--color-surface-darkened, rgba(0,0,0,0.04));
    color: var(--color-text);
    border-bottom-left-radius: var(--border-radius-sm);
}

.chat-post[post-direction="out"] .chat-bubble {
    background: rgba(var(--color-primary-rgb), 0.1);
    color: var(--color-text);
    border-bottom-right-radius: var(--border-radius-sm);
}

.chat-bubble .text {
    font-size: var(--font-size-sm);
}

.chat-bubble .time {
    font-size: 10px;
    margin-top: 4px;
    color: var(--color-text-muted);
}

/* --- 76-E. System Messages --- */

.chat-post[post-system] {
    max-width: 100%;
    align-self: center;
    flex-direction: column;
    align-items: center;
}

.chat-post[post-system] .chat-avatar {
    display: none;
}

.chat-post[post-system] .chat-bubble,
.chat-post[post-system][post-direction="out"] .chat-bubble,
.chat-post[post-system][post-direction="in"] .chat-bubble {
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-style: italic;
    text-align: center;
    padding: var(--spacing-xs);
    box-shadow: none;
    border: none;
}

/* --- 76-F. Message Compose Form --- */

.chat-form {
    border-top: 1px solid var(--color-border-light);
    padding: var(--spacing-md);
}

#Content_ThreadDetail .chat-form.highlight-pulse,
.chat-form.highlight-pulse {
    animation: chatHighlight 0.8s ease-in-out 3 !important;
}

@keyframes chatHighlight {
    0% { box-shadow: inset 0 0 0 0 transparent; }
    35% { box-shadow: inset 0 0 0 200px var(--color-primary-bg-tint, rgba(99, 102, 241, 0.12)); }
    100% { box-shadow: inset 0 0 0 0 transparent; }
}

.chat-form .message {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-sm);
}

.chat-form label {
    display: none;
}

.chat-textarea {
    display: flex;
    flex: 1;
    resize: none;
    position: relative;
    height: auto !important;
    box-shadow: none;
    border: 0;
    padding: 0;
}

.chat-textarea textarea {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    font-family: inherit;
    color: var(--color-text);
    background: var(--color-surface, var(--color-white));
    resize: none;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    box-sizing: border-box;
}

.chat-textarea textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(92, 67, 244, 0.1);
}

.chat-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.chat-send:hover {
    background: var(--color-primary-dark, rgb(72, 47, 224));
    transform: translateY(-1px);
}

.chat-send .send-icon {
    font-size: var(--font-size-md);
    line-height: 1;
}

/* ==========================================================================
   77. Thread Detail View
   ==========================================================================
   Comprehensive styling for the Activity thread detail page following the
   style guide: warm canvas, violet-tinted shadows, sentence-case labels,
   hover lift patterns, and curated warmth aesthetic.

   Structure:
     .thread-detail-view          — page container with warm canvas
       .thread-detail-header      — sticky status bar (styled via S28)
       .thread-detail-columns     — two-column layout
         .thread-sidebar          — left column: order + meetup cards
           .thread-order-card     — order summary with items
           .thread-meetup-card    — meetup details with value cards
         .thread-chat-panel       — right column: conversation
         .thread-action-panel     — action prompts (when applicable)
   ========================================================================== */

/* --- 77-A. Page Container with Warm Canvas --- */

.thread-detail-view {
    background:
        linear-gradient(
            180deg,
            rgba(92, 67, 244, 0.018) 0%,
            rgba(92, 67, 244, 0.008) 40%,
            rgba(0, 255, 203, 0.006) 100%
        );
    min-height: 100vh;
    padding-bottom: var(--spacing-xl);
}

/* --- 77-B. Column Layout --- */

.thread-detail-columns {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: var(--spacing-lg);
    padding: 0;
    max-width: var(--container-max-width, 1400px);
    margin: 0 auto;
}

@media (max-width: 900px) {
    .thread-detail-columns {
        grid-template-columns: 1fr;
        padding: 0;
        margin-top: var(--spacing-md);
    }
}

/* --- 77-C. Thread Sidebar (Order + Meetup) --- */

.thread-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* --- 77-D. Order Card --- */

.thread-order-card {
    background: var(--gradient-card-base, linear-gradient(160deg, var(--color-background) 0%, var(--color-surface) 100%));
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: var(--transition-card);
}

/* Inner item container - gap between order card and meetup card */
#Thread_Order > .item,
.thread-order-card > .item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* Nested card should not have outer card styling */
#Thread_Order > .item > .thread-order-card,
.thread-order-card > .item > .thread-order-card {
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: transparent;
}

.thread-order-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
}

/* Order summary grid - conversational labels */
.thread-order-card .order-summary {
    padding: var(--spacing-lg);
}

.thread-order-card .summary-grid {
    display: flex;
    gap: var(--spacing-sm);
    align-items: stretch;
}

.thread-order-card .summary-item {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: var(--spacing-sm) var(--spacing-xs);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    text-align: center;
    transition: var(--transition-fast);
}

.thread-order-card .summary-item:hover {
    border-color: var(--color-border-primary-subtle);
    box-shadow: var(--shadow-xs);
}

/* Icon at top */
.thread-order-card .summary-item .item-icon {
    width: 16px;
    height: 16px;
    opacity: 0.35;
    order: 0;
    margin-bottom: 4px;
    flex-shrink: 0;
}

/* Value in middle */
.thread-order-card .summary-item .qty,
.thread-order-card .summary-item .value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-warm);
    line-height: 1.1;
    order: 1;
}

/* Label at bottom - allow wrapping, fixed height area */
.thread-order-card .summary-item .target,
.thread-order-card .summary-item .key {
    font-size: 10px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-warm-muted);
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.3;
    order: 2;
    margin-top: 2px;
    min-height: 26px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

/* Order items (expanded product list) */
.thread-order-card .order-items-detail {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: 0 var(--spacing-lg) var(--spacing-lg);
}

.thread-order-card .order-line-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
}

.thread-order-card .order-line-photo {
    display: block;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-card);
    text-decoration: none;
    cursor: pointer;
}

.thread-order-card .order-line-item:hover .order-line-photo {
    box-shadow: 0 6px 16px rgba(92, 67, 244, 0.12);
    transform: translateY(-1px);
}

.thread-order-card .order-line-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-card-photo);
}

.thread-order-card .order-line-item:hover .order-line-photo img {
    transform: scale(1.03);
}

.thread-order-card .order-line-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: var(--spacing-xs);
}

.thread-order-card .order-line-caption {
    font-size: var(--font-size-base);
    color: var(--color-text-warm-body);
    text-decoration: none;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

a.order-line-caption:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.thread-order-card .order-line-sku {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.thread-order-card .order-line-qty {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

/* Payment callout between items and breakdown toggle */
.thread-order-card .order-payment-callout {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-md);
}

.thread-order-card .order-payment-callout .kv-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
}

.thread-order-card .order-payment-callout .kv-key {
    color: var(--color-text-warm-muted);
    font-weight: var(--font-weight-medium);
}

.thread-order-card .order-payment-callout .kv-value {
    color: var(--color-text-warm);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.thread-order-card .order-payment-callout .kv-row-total {
    padding-top: var(--spacing-xs);
    border-top: 1px solid var(--color-border-light);
}

.thread-order-card .order-payment-callout .kv-row-total .kv-key {
    color: var(--color-text-warm);
    font-weight: var(--font-weight-semibold);
}

.thread-order-card .order-payment-callout .kv-row-total .kv-value {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

/* Expand toggle */
.thread-order-card .expand-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    margin: 0 auto var(--spacing-lg);
    width: calc(100% - 2 * var(--spacing-lg));
    max-width: calc(100% - 2 * var(--spacing-lg));
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    cursor: pointer;
    transition: var(--transition-fast);
    box-sizing: border-box;
}

.thread-order-card .expand-toggle:hover {
    background: var(--color-border-primary-faint);
    border-color: var(--color-border-primary-subtle);
}

.thread-order-card .expand-toggle .toggle-icon {
    transition: transform 0.3s var(--ease-elegant);
}

.thread-order-card [ux-state="open"] .expand-toggle .toggle-icon {
    transform: rotate(180deg);
}

.thread-order-card .expand-toggle .toggle-text-expanded {
    display: none;
}

.thread-order-card [ux-state="open"] .expand-toggle .toggle-text-collapsed {
    display: none;
}

.thread-order-card [ux-state="open"] .expand-toggle .toggle-text-expanded {
    display: inline;
}

/* --- 77-D2. Thread Icon Sizing ---
   @deprecated .svg-icon removed - use .icon-svg from Icon Library instead.
   Thread-specific icon sizing kept for backward compatibility. */

/* Icon placement in summary items - see .summary-item .item-icon above */

/* Icon placement in value cards */
.thread-meetup-card .value-card .card-icon {
    margin-right: var(--spacing-sm);
    opacity: 0.7;
}

/* Icon in expand toggle */
.thread-order-card .expand-toggle .toggle-icon.icon-svg {
    transition: transform 0.3s var(--ease-elegant);
}

/* Messaging header icon */
.thread-chat-panel .messaging-header .header-icon {
    margin-right: var(--spacing-sm);
    opacity: 0.7;
}

/* Send button icon */
.thread-chat-panel .chat-send .send-icon {
    margin-right: var(--spacing-xs);
}

/* Back/navigation icons */
.thread-header .back-icon {
    margin-right: var(--spacing-xs);
}

.thread-header .pager-icon {
    opacity: 0.7;
}

/* Order breakdown (expanded) */
.thread-order-card .order-breakdown {
    padding: var(--spacing-lg);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
}

.thread-order-card .order-breakdown .subtotals {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.thread-order-card .order-breakdown .kv-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs) 0;
    font-size: var(--font-size-sm);
}

.thread-order-card .order-breakdown .kv-row .key {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

.thread-order-card .order-breakdown .kv-row .value {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

/* Final total row - highlighted */
.thread-order-card .order-breakdown .final-total {
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border-light);
}

.thread-order-card .order-breakdown .final-total .key {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
}

.thread-order-card .order-breakdown .final-total .value {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-base);
}

/* --- 77-E. Meetup Card --- */

.thread-meetup-card {
    background: var(--gradient-card-base, linear-gradient(160deg, var(--color-background) 0%, var(--color-surface) 100%));
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-card);
    padding: var(--spacing-lg);
    transition: var(--transition-card);
}

.thread-meetup-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
}

/* Meetup title with avatar */
.thread-meetup-card .meetup-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border-light);
    background-image: linear-gradient(
        to right,
        rgba(92, 67, 244, 0.08),
        rgba(0, 255, 203, 0.04) 70%,
        transparent
    );
    background-size: 100% 1px;
    background-position: bottom left;
    background-repeat: no-repeat;
    border-bottom: none;
}

.thread-meetup-card .meetup-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-full);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(92, 67, 244, 0.12);
    flex-shrink: 0;
}

.thread-meetup-card .meetup-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thread-meetup-card .meetup-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
}

.thread-meetup-card .other-party {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

/* Meetup location card (matches checkout/confirmation pattern) */
.thread-meetup-card .meetup-location-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.thread-meetup-card .meetup-location-card > .icon {
    font-size: 1.25rem;
    opacity: 0.7;
    flex-shrink: 0;
}

.thread-meetup-card .meetup-location-info {
    flex: 1;
    min-width: 0;
}

.thread-meetup-card .meetup-location-name {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
}

.thread-meetup-card .meetup-location-postal {
    font-weight: var(--font-weight-normal);
    color: var(--color-text-warm-muted);
    margin-left: var(--spacing-xs);
}

.thread-meetup-card .meetup-location-address {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-body);
    margin-top: 2px;
}

/* Meetup time card */
.thread-meetup-card .meetup-time-card .state-surface {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
}

.thread-meetup-card .meetup-time-card .icon {
    font-size: 1.25rem;
    opacity: 0.7;
    flex-shrink: 0;
    margin-top: 2px;
}

.thread-meetup-card .meetup-time-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.thread-meetup-card .meetup-time-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-warm-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.thread-meetup-card .meetup-time-value {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
}

.thread-meetup-card .meetup-time-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
}

/* --- 77-E2. Thread Detail Primary Icons ---
   @deprecated .svg-icon rules removed - HTML now uses .icon-svg with .icon-primary class.
   Primary coloring is handled by the .icon-primary CSS filter in the Icon Library section. */

/* --- 77-F. Action Panel --- */

.thread-action-panel {
    background: linear-gradient(135deg, rgba(92, 67, 244, 0.025) 0%, rgba(0, 255, 203, 0.015) 50%, var(--color-background) 100%);
    border: 1px solid rgba(92, 67, 244, 0.12);
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-card), inset 0 1px 0 rgba(92, 67, 244, 0.06);
    padding: var(--spacing-lg);
    transition: var(--transition-card);
}

.thread-action-panel .action-header {
    margin-bottom: var(--spacing-md);
}

.thread-action-panel .action-text {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
}

.thread-action-panel .action-expires {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(239, 68, 68, 0.08);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    color: var(--color-error);
    margin-bottom: var(--spacing-md);
}

.thread-action-panel .actionTargets {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.thread-action-panel .action-offer-target,
.thread-action-panel .action-time-target {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--spacing-sm);
    background: rgba(92, 67, 244, 0.02);
    border-radius: var(--border-radius-sm);
}

.thread-action-panel .actionTarget .key {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
}

.thread-action-panel .actionTarget .value {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

/* --- 77-G. Chat Panel --- */

.thread-chat-panel {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    min-height: 500px;
    max-height: 700px;
}

.thread-chat-panel .messaging-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--color-border-light);
    background-image: linear-gradient(
        to right,
        rgba(92, 67, 244, 0.06),
        rgba(0, 255, 203, 0.03) 70%,
        transparent
    );
    background-size: 100% 1px;
    background-position: bottom left;
    background-repeat: no-repeat;
    border-bottom: none;
}

.thread-chat-panel .header-icon {
    font-size: 1.25rem;
}

.thread-chat-panel .header-text {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm-medium);
}

.thread-chat-panel .chat-context-hint {
    padding: var(--spacing-xs) var(--spacing-lg);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: var(--line-height-relaxed);
    border-bottom: 1px solid var(--color-border-light);
    background: var(--color-surface);
}

.thread-chat-panel .chat-container {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md);
}

.thread-chat-panel .chat-posts {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Enhanced system messages — must override direction-specific styles */
.thread-chat-panel .chat-post[post-system] .chat-bubble,
.thread-chat-panel .chat-post[post-system][post-direction="out"] .chat-bubble,
.thread-chat-panel .chat-post[post-system][post-direction="in"] .chat-bubble {
    background: linear-gradient(135deg, rgba(92, 67, 244, 0.04) 0%, rgba(0, 255, 203, 0.02) 100%);
    border: 1px solid var(--color-border-primary-faint);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    font-style: normal;
    color: var(--color-text-warm-body);
    box-shadow: none;
}

.thread-chat-panel .chat-post[post-system] .chat-bubble .text {
    font-weight: var(--font-weight-medium);
}

.thread-chat-panel .chat-post[post-system] .chat-bubble .time {
    font-size: 10px;
    color: var(--color-text-muted);
    font-style: normal;
}

/* Time header styling - more specific to override post-direction and post-system */
.thread-chat-panel .chat-post.chat-time-header .chat-bubble,
.thread-chat-panel .chat-time-header[post-system] .chat-bubble,
.thread-chat-panel .chat-time-header[post-direction] .chat-bubble {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.thread-chat-panel .chat-post.chat-time-header,
.thread-chat-panel .chat-time-header[post-system] {
    max-width: 100%;
    align-self: center;
}

.thread-chat-panel .chat-time-header .chat-bubble .time {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-warm-muted);
}

/* Enhanced outgoing message bubbles — soft tint, not button-weight */
.thread-chat-panel .chat-post[post-direction="out"] .chat-bubble {
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.1) 0%, rgba(var(--color-primary-rgb), 0.06) 100%);
    color: var(--color-text);
    border: 1px solid rgba(var(--color-primary-rgb), 0.15);
    box-shadow: 0 1px 3px rgba(var(--color-primary-rgb), 0.06);
}

/* Enhanced incoming message bubbles */
.thread-chat-panel .chat-post[post-direction="in"] .chat-bubble {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Chat form with warm styling */
.thread-chat-panel .chat-form {
    border-top: 1px solid var(--color-border-light);
    padding: var(--spacing-md) var(--spacing-lg);
    background: linear-gradient(180deg, var(--color-surface) 0%, rgba(92, 67, 244, 0.01) 100%);
}

.thread-chat-panel .chat-send {
    background: linear-gradient(135deg, var(--color-primary) 0%, rgb(72, 47, 224) 100%);
    box-shadow: 0 2px 8px rgba(92, 67, 244, 0.2);
}

.thread-chat-panel .chat-send:hover {
    box-shadow: 0 4px 12px rgba(92, 67, 244, 0.3);
    transform: translateY(-2px);
}

/* --- 77-H. Legacy Override ---
   Override application.css styles to follow style guide:
   - Sentence case labels (no uppercase)
   - Warm rgba text colors
   - Violet-tinted backgrounds and borders */

/* Summary item overrides - ensure sentence case (no uppercase) */
#Content_ThreadDetail .thread-order-card .summary-item .target,
#Content_ThreadDetail .thread-order-card .summary-item .key,
#Content_ThreadDetail .order-rollup .summary-item .target,
#Content_ThreadDetail .order-rollup .summary-item .key {
    text-transform: none;
}

/* Meetup card - violet gradient title */
#Content_ThreadDetail .thread-meetup-card .meetup-title {
    background: transparent;
    border-bottom: none;
    background-image: linear-gradient(
        to right,
        rgba(92, 67, 244, 0.08),
        rgba(0, 255, 203, 0.04) 70%,
        transparent
    );
    background-size: 100% 1px;
    background-position: bottom left;
    background-repeat: no-repeat;
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

/* Meetup avatar - subtle shadow */
#Content_ThreadDetail .thread-meetup-card .meetup-avatar {
    width: 36px;
    height: 36px;
    box-shadow: var(--shadow-sm);
    border: 2px solid var(--color-white);
}

/* Value cards in meetup - use base styles from .thread-meetup-card .value-card */

/* Pending status - amber with warmth */
#Content_ThreadDetail .status-pending {
    background: var(--color-warning-bg, rgba(245, 158, 11, 0.08));
    border: 1px solid var(--color-warning-border, rgba(245, 158, 11, 0.15));
    color: var(--color-warning-text, #b45309);
}

/* Address - subtle surface with warm text (no thick border per style guide) */
#Content_ThreadDetail .meetup-address {
    background: var(--color-surface);
    color: var(--color-text-warm-body);
}

/* Chat panel header - gradient underline */
#Content_ThreadDetail .thread-chat-panel .messaging-header,
#Content_ThreadDetail .paneGroup.messaging .messaging-header {
    background-image: linear-gradient(
        to right,
        rgba(92, 67, 244, 0.06),
        rgba(0, 255, 203, 0.03) 70%,
        transparent
    );
    background-size: 100% 1px;
    background-position: bottom left;
    background-repeat: no-repeat;
    border-bottom: none;
    padding-bottom:var(--spacing-sm);
}

#Content_ThreadDetail .thread-chat-panel .chat-context-hint {
    padding: var(--spacing-sm) var(--spacing-lg);
    display: flex;
}

/* System messages - styled pills instead of italic, override direction styles */
#Content_ThreadDetail .chat-post[post-system] .chat-bubble,
#Content_ThreadDetail .chat-post[post-system][post-direction="out"] .chat-bubble,
#Content_ThreadDetail .chat-post[post-system][post-direction="in"] .chat-bubble {
    background: linear-gradient(135deg, rgba(92, 67, 244, 0.04) 0%, rgba(0, 255, 203, 0.02) 100%);
    border: 1px solid var(--color-border-primary-faint);
    border-radius: var(--border-radius-md);
    font-style: normal;
    color: var(--color-text-warm);
    padding: var(--spacing-sm) var(--spacing-lg);
    box-shadow: none;
}

#Content_ThreadDetail .chat-post[post-system] .chat-bubble .text {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
}

/* Outgoing messages — soft violet tint (primary reserved for CTAs) */
#Content_ThreadDetail .chat-post[post-direction="out"] .chat-bubble {
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.1) 0%, rgba(var(--color-primary-rgb), 0.06) 100%);
    color: var(--color-text);
    border: 1px solid rgba(var(--color-primary-rgb), 0.15);
    box-shadow: 0 1px 3px rgba(var(--color-primary-rgb), 0.06);
}

/* Incoming messages - warm surface */
#Content_ThreadDetail .chat-post[post-direction="in"] .chat-bubble {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
}

/* Chat form - warm footer */
#Content_ThreadDetail .chat-form,
#Content_ThreadDetail .pane.form.messaging.chat-form {
    background: linear-gradient(180deg, var(--color-surface) 0%, rgba(92, 67, 244, 0.01) 100%);
}

/* Send button - gradient with glow */
#Content_ThreadDetail .chat-send {
    background: linear-gradient(135deg, var(--color-primary) 0%, rgb(72, 47, 224) 100%);
    box-shadow: 0 2px 8px rgba(92, 67, 244, 0.2);
}

#Content_ThreadDetail .chat-send:hover {
    box-shadow: 0 4px 12px rgba(92, 67, 244, 0.3);
}

/* --- 77-I. Responsive --- */

@media (max-width: 900px) {
    .thread-sidebar {
        order: 1;
    }

    .thread-chat-panel {
        order: 2;
        min-height: 400px;
        max-height: none;
    }

    .thread-action-panel {
        order: 0;
    }
}

@media (max-width: 600px) {
    /* Meetup time cards stack vertically */
    .thread-meetup-card .time-cards {
        flex-direction: column;
    }

    /* Order summary container - full width */
    .thread-order-card .order-summary {
        padding: var(--spacing-md);
        width: 100%;
        box-sizing: border-box;
    }

    /* Summary cards stack vertically and fill full width */
    .thread-order-card .summary-grid {
        flex-direction: column;
        gap: var(--spacing-sm);
        width: 100%;
    }

    /* Mobile summary items - receipt/checkout style:
       [icon] [label] .................. [value] */
    .thread-order-card .summary-item {
        width: 100% !important;
        min-width: 0;
        flex: none;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm) var(--spacing-md);
        text-align: left;
        box-sizing: border-box;
    }

    /* Icon on far left */
    .thread-order-card .summary-item .item-icon {
        order: 0;
        margin-bottom: 0;
        flex-shrink: 0;
    }

    /* Label next to icon - grows to fill space */
    .thread-order-card .summary-item .target,
    .thread-order-card .summary-item .key {
        order: 1;
        margin-top: 0;
        min-height: auto;
        flex: 1;
        justify-content: flex-start;
        text-align: left;
        color: var(--color-text-warm-body);
    }

    /* Value right-aligned */
    .thread-order-card .summary-item .qty,
    .thread-order-card .summary-item .value {
        order: 2;
        flex-shrink: 0;
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    /* Order items on mobile */
    .thread-order-card .order-items-detail {
        padding: 0 var(--spacing-md) var(--spacing-md);
    }

    .thread-order-card .order-line-photo {
        width: 64px;
        height: 64px;
    }

    /* Full-width expand toggle on mobile */
    .thread-order-card .expand-toggle {
        width: calc(100% - 2 * var(--spacing-md));
        margin: 0 auto var(--spacing-md);
    }

    /* --- Mobile Chat Form - Stacked layout with full-width textarea --- */
    .chat-form {
        padding: var(--spacing-sm);
        border-top: 1px solid var(--color-border-light);
        background: var(--color-surface);
    }

    .chat-form .message {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .chat-textarea {
        width: 100%;
    }

    .chat-textarea textarea {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius-md);
        background: var(--color-white);
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-base);
        resize: none;
    }

    .chat-textarea textarea:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(92, 67, 244, 0.1);
        outline: none;
    }

    .chat-send {
        align-self: flex-end;
        padding: var(--spacing-sm) var(--spacing-lg);
        border-radius: var(--border-radius-md);
        font-size: var(--font-size-sm);
    }

    /* Thread chat panel specific mobile adjustments */
    .thread-chat-panel .chat-form {
        position: sticky;
        bottom: 0;
        z-index: 10;
    }

    .thread-chat-panel .messaging-header {
        padding: var(--spacing-sm) var(--spacing-md);
    }
}


/* ==========================================================================
   83. Schedule Table
   ==========================================================================
   Availability schedule showing days of the week with time slots.
   Used in meetup availability settings (MeetupScheduleView).

   Structure:
     .schedule-table              — card container (alongside legacy board/table)
       .schedule-day              — day group (alongside legacy tbody day)
         .schedule-row            — time-slot row (alongside legacy tr)
           .schedule-label        — day-of-week name (Mon, Tue…)
           .schedule-time         — start / end time value
           .schedule-actions      — edit button column
       [data-empty] .schedule-day — unavailable-day dimming
   ========================================================================== */

/* --- 83-A. Table Container --- */

.schedule-table {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

/* --- 83-B. Day Group --- */

.schedule-day {
    border-bottom: 1px solid var(--color-border-light);
}

.schedule-day:last-child {
    border-bottom: none;
}

/* Unavailable days — muted appearance */
.schedule-day[data-empty] {
    background: var(--color-surface);
}

.schedule-day[data-empty] .schedule-label,
.schedule-day[data-empty] .schedule-time {
    opacity: 0.5;
}

/* --- 83-C. Row --- */

.schedule-row {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    min-height: 44px;
    gap: var(--spacing-sm);
    transition: var(--transition-fast);
}

.schedule-row:hover {
    background: var(--color-primary-bg-subtle);
}

/* --- 83-D. Day Label --- */

.schedule-label {
    flex: 0 0 56px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: rgba(30, 25, 55, 0.78);
    text-transform: none;
    letter-spacing: -0.01em;
}

/* Empty rows in multi-slot days don't repeat the day name */
.schedule-label:empty {
    flex: 0 0 56px;
}

/* --- 83-E. Time Values --- */

.schedule-time {
    flex: 1 1 0;
    font-size: var(--font-size-sm);
    color: rgba(30, 25, 55, 0.72);
    font-variant-numeric: tabular-nums;
}

/* "Unavailable" text styling */
.schedule-day[data-empty] .schedule-time {
    font-style: italic;
    color: var(--color-text-muted);
}

/* --- 83-F. Actions Column --- */

.schedule-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.schedule-actions .command {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    padding: 4px var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}

.schedule-actions .command:hover {
    background: var(--color-primary-bg-subtle);
}

/* --- 83-G. Edit Form: Time Slot Selector --- */

.schedule-table ~ .commands,
.schedule-table + .commands {
    margin-top: var(--spacing-md);
}

/* Time slot items in the selectable grid */
#View_MeetupSchedule .autocomplete-choices .autocomplete-item {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-sm);
    font-variant-numeric: tabular-nums;
    transition: var(--transition-fast);
}

/* --- 83-H. Mobile Responsive --- */

@media (max-width: 768px) {
    .schedule-row {
        padding: var(--spacing-xs) var(--spacing-sm);
        min-height: 40px;
    }

    .schedule-label {
        flex: 0 0 44px;
        font-size: 12px;
    }

    .schedule-time {
        font-size: 12px;
    }
}


/* --- 83-I. Time Proposal Dialog State Rules --- */

/* Hide schedule container when empty */
#View_TimeProposer .time-proposal-schedule:empty {
    display: none;
}

/* Spacing so content doesn't touch edges */
#View_TimeProposer .dialog-scroll {
    padding: var(--spacing-md) var(--spacing-md) 0;
}

/* Submit button disabled until proposals exist */
#View_TimeProposer:not([data-has-proposals]) .time-proposal-submit {
    opacity: 0.4;
    pointer-events: none;
}

/* Meetup note panel — tighten gap to date picker, strengthen heading */
#View_TimeProposer .meetup-note-panel {
    margin-top: 0;
}
#View_TimeProposer .meetup-note-panel .dialog-subtitle {
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-warm);
    font-weight: var(--font-weight-medium);
}

/* --- 83-I-b. Proposed Day Cards --- */

.time-proposal-schedule {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.proposal-day {
    background: var(--color-background);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-card);
    overflow: hidden;
}

/* Day header — date label with icon + action buttons */
.proposal-day-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border-light);
}

.proposal-day-icon {
    --icon-size: var(--icon-size-sm);
    flex-shrink: 0;
}

.proposal-day-label {
    flex: 1;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
}

.proposal-day-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-shrink: 0;
}

.proposal-action {
    --icon-size: var(--icon-size-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}

.proposal-action:hover {
    background: var(--color-primary-bg-subtle);
}

.proposal-action-remove:hover {
    background: rgba(220, 38, 38, 0.08);
}
.proposal-action-remove:hover .icon-svg {
    filter: brightness(0) saturate(100%) invert(21%) sepia(100%) saturate(3000%) hue-rotate(345deg) brightness(90%);
}

/* Time range chips */
.proposal-day-ranges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
}

.proposal-range-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-primary-bg-subtle);
    border: 1px solid var(--color-primary-muted);
    border-radius: var(--border-radius-pill, 999px);
    font-size: var(--font-size-sm);
    color: var(--color-primary-dark);
    font-variant-numeric: tabular-nums;
}

.proposal-range-icon {
    --icon-size: var(--icon-size-xs);
    flex-shrink: 0;
}

.proposal-range-text {
    white-space: nowrap;
}

/* Date choice list — flex-wrap grid of date cards */
#View_TimeProposer .time-proposal-dates {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) 0;
}

#View_TimeProposer .time-proposal-dates .item {
    padding: var(--spacing-sm) var(--spacing-md);
    padding-right: calc(var(--spacing-md) + 20px);
    background: var(--color-background);
    border: 2px dashed var(--color-border);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    position: relative;
    text-align: center;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

#View_TimeProposer .time-proposal-dates .item:hover {
    border-color: var(--color-primary);
    border-style: solid;
    background: var(--color-surface);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
}

#View_TimeProposer .time-proposal-dates .item:active {
    transform: translateY(0);
}

#View_TimeProposer .time-proposal-dates .item .friendly {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
    font-size: var(--font-size-sm);
}

#View_TimeProposer .time-proposal-dates .item .date {
    font-size: var(--font-size-xs);
    color: var(--color-text-warm-muted);
}

/* "+" icon on unfilled date chips */
#View_TimeProposer .time-proposal-dates .item .date-add-icon {
    position: absolute;
    top: 50%;
    right: var(--spacing-sm);
    transform: translateY(-50%);
    --icon-size: 14px;
    opacity: 0.35;
    transition: opacity 0.2s ease;
}

#View_TimeProposer .time-proposal-dates .item:hover .date-add-icon {
    opacity: 0.7;
}

/* Checkmark icon hidden on unfilled */
#View_TimeProposer .time-proposal-dates .item .date-check-icon {
    display: none;
}

/* Filled state — solid border, check replaces plus */
#View_TimeProposer .time-proposal-dates .item.filled {
    background: var(--color-primary-bg-subtle);
    border: 2px solid var(--color-primary);
    border-style: solid;
    padding-right: calc(var(--spacing-md) + 20px);
}

#View_TimeProposer .time-proposal-dates .item.filled .date-add-icon {
    display: none;
}

#View_TimeProposer .time-proposal-dates .item.filled .date-check-icon {
    display: block;
    position: absolute;
    top: 50%;
    right: var(--spacing-sm);
    transform: translateY(-50%);
    --icon-size: 14px;
    color: var(--color-primary);
}

/* --- Nudge banner --- */
.time-proposal-nudge {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-success-bg, #f0fdf4);
    border: 1px solid var(--color-success-border, #bbf7d0);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-sm);
}

.time-proposal-nudge .icon-svg {
    --icon-size: 16px;
    flex-shrink: 0;
    opacity: 0.6;
}

/* --- Submit warning for low slot count --- */
.time-proposal-submit-warn {
    font-size: var(--font-size-xs);
    color: var(--color-warning-text, #92400e);
    text-align: center;
    margin: 0;
    padding: var(--spacing-xs) 0;
}

/* --- Date label updates with state --- */
#View_TimeProposer[data-has-proposals] .time-proposal-date-label::after {
    content: ' (up to 3)';
    font-weight: normal;
    color: var(--color-text-muted);
}

/* --- 83-II. Time Proposal Slots — Range Picker --- */
/* Two-click range picker: tap start time, tap end time to select a block.
   Flex-wrap card grid matching the date picker pattern. */

/* Slot grid — flex-wrap cards */
#Dlg_TimeProposalSlots .time-proposal-slots {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) 0;
    flex-direction: row;
}

/* Base slot — card style matching date picker items, 4-across grid */
#Dlg_TimeProposalSlots .time-proposal-slots .suggestion {
    width: calc(25% - var(--spacing-xs));
    padding: var(--spacing-sm) var(--spacing-xs);
    text-align: center;
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-background);
    color: var(--color-text-warm-muted);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    position: relative;
    user-select: none;
    transition: background-color 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}

/* Hover */
#Dlg_TimeProposalSlots .time-proposal-slots .suggestion:hover {
    border-color: var(--color-primary-muted);
    background: var(--color-surface);
    color: var(--color-text);
}

/* --- Selected: solid primary with guaranteed white text --- */
#Dlg_TimeProposalSlots .time-proposal-slots .suggestion.selected {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    font-weight: var(--font-weight-semibold, 600);
}

#Dlg_TimeProposalSlots .time-proposal-slots .suggestion.selected.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* --- Preselect anchor: bold start marker --- */
#Dlg_TimeProposalSlots .time-proposal-slots .suggestion.preselect {
    background: var(--color-primary-dark);
    color: #fff;
    border-color: var(--color-primary-dark);
    font-weight: var(--font-weight-semibold, 600);
    box-shadow: 0 0 0 3px var(--color-primary-muted);
    z-index: 1;
}

/* --- Adding preview: clearly tinted range --- */
#Dlg_TimeProposalSlots .time-proposal-slots .suggestion.adding {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    opacity: 0.65;
}

/* --- Unselect anchor: danger marker --- */
#Dlg_TimeProposalSlots .time-proposal-slots .suggestion.unselect {
    background: var(--color-danger, #dc2626);
    color: #fff;
    border-color: var(--color-danger, #dc2626);
    font-weight: var(--font-weight-semibold, 600);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.3);
    z-index: 1;
}

/* --- Removing preview: danger-tinted cards --- */
#Dlg_TimeProposalSlots .time-proposal-slots .suggestion.removing {
    background: var(--color-danger, #dc2626);
    border-color: var(--color-danger, #dc2626);
    color: #fff;
    opacity: 0.55;
}

/* Tip always visible */
#Dlg_TimeProposalSlots .time-slot-tip {
    margin-bottom: var(--spacing-sm);
}

/* Evening divider — full-width notice separating daytime from evening slots */
#Dlg_TimeProposalSlots .time-slot-divider {
    flex-basis: 100%;
    margin: var(--spacing-sm) 0;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-xs);
}

/* Subtle muted style for evening slots — still fully selectable */
#Dlg_TimeProposalSlots .time-proposal-slots .suggestion.evening {
    color: var(--color-text-muted);
}
#Dlg_TimeProposalSlots .time-proposal-slots .suggestion.evening:hover {
    color: var(--color-text);
}
/* Evening slots must show white text when selected/adding/preselect */
#Dlg_TimeProposalSlots .time-proposal-slots .suggestion.evening.selected,
#Dlg_TimeProposalSlots .time-proposal-slots .suggestion.evening.adding,
#Dlg_TimeProposalSlots .time-proposal-slots .suggestion.evening.preselect {
    color: #fff;
}

/* Disabled slots — too close to current time (lead-time buffer) */
#Dlg_TimeProposalSlots .time-proposal-slots .suggestion.disabled {
    opacity: 0.35;
    pointer-events: none;
    cursor: default;
    text-decoration: line-through;
}


/* --- 83-III. Time Acceptance View — Buyer Reviews Proposed Times --- */
/* Reuses proposal-day card components (§83-I-b) for day headers.
   Adds selectable range items for buyer to pick one time block. */

/* Toggle hints based on proposal state */
/* Spacing so content doesn't touch edges */
#View_TimeAcceptance .dialog-scroll {
    padding: var(--spacing-md) var(--spacing-md) 0;
}

#View_TimeAcceptance[data-has-proposals] .time-acceptance-empty {
    display: none;
}
#View_TimeAcceptance:not([data-has-proposals]) .time-acceptance-tip {
    display: none;
}

/* Day cards container */
.time-acceptance-days {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Highlight day card when a slot inside it is selected */
#View_TimeAcceptance .proposal-day.selected {
    border-color: var(--color-primary);
}

/* In acceptance view, range groups stack vertically (not wrap like proposer chips) */
#View_TimeAcceptance .proposal-day-ranges {
    flex-direction: column;
    flex-wrap: nowrap;
}

/* Range group — visual grouping of contiguous slots */
.acceptance-range-group {
    padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-sm);
}

.acceptance-range-group + .acceptance-range-group {
    border-top: 1px solid var(--color-border-light);
}

/* Range header — hidden; slots are self-explanatory under the day header */
.acceptance-range-header {
    display: none;
}

.acceptance-range-icon {
    --icon-size: var(--icon-size-xs);
    flex-shrink: 0;
}

.acceptance-range-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* Slot list — selectable individual 30-min windows */
.acceptance-slot-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    flex-direction: row;
}

/* Individual slot item — compact selectable card */
.acceptance-slot-item {
    flex: 0 0 auto;
    min-width: 120px;
    min-height: 44px;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-background);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.acceptance-slot-item:hover {
    border-color: var(--color-primary-muted);
    background: var(--color-surface);
}

.acceptance-slot-item.selected {
    background: var(--color-primary-bg-subtle);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}

.acceptance-slot-text {
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-warm);
    white-space: nowrap;
}

.acceptance-slot-item.selected .acceptance-slot-text {
    color: var(--color-primary-dark);
    font-weight: var(--font-weight-semibold);
}

/* Small screens: full-width stacked slots */
@media (max-width: 500px) {
    .acceptance-slot-item {
        width: 100%;
        min-height: 48px;
        padding: var(--spacing-sm) var(--spacing-lg);
    }
}

/* --- Time Acceptance Footer — selection-driven state --- */
#View_TimeAcceptance .dialog-footer {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Accept button disabled until a slot is selected */
#View_TimeAcceptance:not([ux-has-selection]) .dialog-footer .btn-primary {
    opacity: 0.4;
    pointer-events: none;
}

/* Constrained-width centered buttons */
#View_TimeAcceptance .dialog-footer .btn-primary {
    width: 100%;
    max-width: 320px;
    text-align: center;
    justify-content: center;
}

/* Reject link — understated text link, not a big button */
#View_TimeAcceptance .dialog-footer .time-acceptance-reject {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

#View_TimeAcceptance .dialog-footer .time-acceptance-reject:hover {
    color: var(--color-danger);
}


/* ==========================================================================
   84. CELEBRATION & GAMIFICATION
   Components for achievements, milestones, auth flows, waitlist displays,
   progress indicators, and celebration moments.
   See vars.css for celebration tokens, gamify-plan.md for design guidelines.
   ========================================================================== */

/* --- 84-A. Celebration Number Display --- */

.celebration-number {
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: var(--font-weight-extrabold);
    line-height: 1;
    background: var(--gradient-celebration-number);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
    transition: var(--transition-celebration-number);
}

.celebration-number-lg {
    font-size: clamp(4rem, 12vw, 7rem);
}

.celebration-number-sm {
    font-size: clamp(2rem, 5vw, 3rem);
}

/* Animated counter effect */
.celebration-number[data-animate] {
    animation: celebration-pulse 0.6s var(--ease-elegant);
}

@keyframes celebration-pulse {
    0% { transform: scale(0.9); opacity: 0.5; }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}

/* --- 84-B. Celebration Card --- */

.celebration-card {
    background: var(--color-celebration-surface);
    border-radius: var(--border-radius-xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-celebration-card);
    transition: var(--transition-celebration-glow);
    position: relative;
    overflow: hidden;
}

.celebration-card:hover {
    box-shadow: var(--shadow-celebration-card-hover);
}

/* With ambient glow for special moments */
.celebration-card-glow {
    box-shadow: var(--shadow-celebration-glow);
}

.celebration-card-glow:hover {
    box-shadow: var(--shadow-celebration-glow-intense);
}

/* Glass variant for dark/gradient backgrounds */
.celebration-card-glass {
    background: var(--color-celebration-surface-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* --- 84-C. Celebration Context --- */

.celebration-context {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    text-align: center;
}

.celebration-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.celebration-sublabel {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

/* --- 84-D. Progress Ring --- */

.progress-ring {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.progress-ring svg {
    transform: rotate(-90deg);
}

.progress-ring-track {
    fill: none;
    stroke: var(--color-border-default);
    stroke-width: 8;
}

.progress-ring-fill {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.8s var(--ease-elegant);
}

.progress-ring-value {
    position: absolute;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

/* --- 84-E. Progress Bar (Celebration Variant) --- */

.progress-celebration {
    width: 100%;
    height: 8px;
    background: var(--color-surface-secondary);
    border-radius: var(--border-radius-full);
    overflow: hidden;
}

.progress-celebration-fill {
    height: 100%;
    background: var(--gradient-progress-primary);
    border-radius: var(--border-radius-full);
    transition: width 0.8s var(--ease-elegant);
}

.progress-celebration-fill-success {
    background: var(--gradient-progress-success);
}

/* Animated shimmer effect */
.progress-celebration-fill[data-shimmer] {
    position: relative;
    overflow: hidden;
}

.progress-celebration-fill[data-shimmer]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
    animation: progress-shimmer 2s infinite;
}

@keyframes progress-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* --- 84-F. Referral Badge --- */

.badge-referral {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--gradient-badge-referral);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--border-radius-full);
    box-shadow: 0 2px 8px rgba(251, 146, 60, 0.3);
}

.badge-referral::before {
    content: '★';
    font-size: 0.75em;
}

/* Shimmer animation for special badges */
.badge-referral[data-shimmer] {
    position: relative;
    overflow: hidden;
}

.badge-referral[data-shimmer]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
    animation: badge-shimmer 3s infinite;
}

@keyframes badge-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Badge Size Variants */
.badge-lg {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
}

.badge-lg.badge-referral::before {
    font-size: 0.85em;
}

/* Badge Color Variants */
.badge-accent {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-primary-bg-subtle);
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: var(--border-radius-full);
}

/* --- 84-G. Achievement Badge --- */

.badge-achievement {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--gradient-badge-achievement);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--border-radius-full);
    box-shadow: var(--shadow-glow-primary);
}

.badge-gold {
    background: var(--gradient-badge-gold);
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
}

/* --- 84-H. Milestone Display --- */

.milestone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    text-align: center;
}

.milestone-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-hero);
    border-radius: var(--border-radius-full);
    color: white;
    font-size: var(--font-size-2xl);
    box-shadow: var(--shadow-glow-primary);
}

/* Milestone Icon Variants */
.milestone-icon-discover::before {
    content: '🔍';
}

.milestone-icon-ai::before {
    content: '✨';
}

.milestone-icon-local::before {
    content: '📍';
}

.milestone-icon-success::before {
    content: '✓';
}

.milestone-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.milestone-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    max-width: 280px;
}

/* --- 84-I. Auth Split Layout --- */

.auth-split {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Auth split uses standard hero pattern with contextual overrides */
.auth-split .hero-panel {
    flex: 0 0 var(--auth-hero-width, 55%);
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    align-self: flex-start;
    background: var(--color-text); /* Dark fallback, image covers */
    overflow: hidden;
}

.auth-split .hero-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.auth-split .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.4) 0%,
        rgba(0, 0, 0, 0.25) 40%,
        rgba(0, 0, 0, 0.5) 100%);
}

.auth-split .hero-content {
    position: relative;
    z-index: 2;
    padding: var(--spacing-3xl, 64px) var(--spacing-2xl);
    padding-left: clamp(var(--spacing-xl), 8vw, var(--spacing-3xl, 64px));
    display: flex;
    flex-direction: column;
    align-self: safe center;
    justify-content: safe center;
    height: 100%;
    color: white;
    margin: auto;
    max-width: 600px;
}

.auth-content {
    flex: 0 0 var(--auth-content-width, 45%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    background: var(--color-surface);
}

.auth-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    padding-bottom: calc(var(--spacing-3xl, 64px) + 48px); /* Extra padding for fixed footer */

    /* Independent scrolling while hero stays fixed */
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;

    /* Atmospheric violet backdrop with radial glow */
    background:
        /* Soft spotlight behind the card */
        radial-gradient(
            ellipse 80% 70% at 50% 45%,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(250, 248, 255, 0.9) 35%,
            rgba(245, 243, 255, 0.85) 60%,
            rgba(235, 230, 250, 0.8) 100%
        ),
        /* Subtle diagonal accent from top-right */
        linear-gradient(
            135deg,
            rgba(92, 67, 244, 0.03) 0%,
            transparent 50%,
            rgba(0, 255, 203, 0.02) 100%
        ),
        /* Base surface */
        var(--color-surface-primary-tint);

    /* Subtle inner shadow for depth */
    box-shadow: inset 0 0 120px rgba(92, 67, 244, 0.04);
}

.auth-card > .interactive,
.auth-card > .auth-wizard,
.auth-card > .join-content {
    width: 100%;
    max-width: var(--auth-card-max-width, 420px);
    background: var(--color-background);
    border-radius: var(--border-radius-lg);
    padding: var(--auth-card-padding, var(--spacing-xl));

    /* Enhanced shadow for depth against violet backdrop */
    box-shadow:
        0 4px 6px -1px rgba(92, 67, 244, 0.06),
        0 10px 25px -5px rgba(92, 67, 244, 0.08),
        0 25px 50px -12px rgba(92, 67, 244, 0.12);

    /* Subtle border for definition */
    border: 1px solid rgba(92, 67, 244, 0.06);

    /* Elegant entrance animation - both ensures proper start state */
    animation: auth-card-entrance 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Join page: content layout
   Note: Alignment overrides are in application.css via [page-name="Join"] selector */
.auth-card > .join-content {
    max-width: 780px;
    width: 100%;
    padding: var(--spacing-xl) var(--spacing-2xl);
}

@keyframes auth-card-entrance {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* --- 84-J. Auth Panel Transitions --- */

.auth-panel {
    opacity: 1;
    transform: translateX(0);
    transition: var(--transition-celebration-panel);
}

.auth-panel[hidden],
.auth-panel.panel-hidden {
    display: none;
}

.auth-panel.panel-entering {
    opacity: 0;
    transform: translateX(20px);
}

.auth-panel.panel-exiting {
    opacity: 0;
    transform: translateX(-20px);
}

/* --- 84-K. Waitlist Position Display --- */

.waitlist-position {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-xl) 0;
}

.waitlist-position-number {
    font-size: clamp(4rem, 12vw, 6rem);
    font-weight: var(--font-weight-extrabold);
    line-height: 1;
    background: var(--gradient-celebration-number);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.waitlist-position-context {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
}

.waitlist-position-context strong {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
}

/* --- 84-L. Celebration Actions --- */

.celebration-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    width: 100%;
    margin-top: var(--spacing-lg);
}

.celebration-actions .btn {
    width: 100%;
    justify-content: center;
}

/* Share/referral action with icon */
.celebration-share {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--color-surface-secondary);
    border-radius: var(--border-radius-lg);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
}

.celebration-share:hover {
    background: var(--color-surface-tertiary);
    color: var(--color-text-primary);
}

/* --- 84-M. Mobile Responsive --- */

@media (max-width: 768px) {
    /* IMMERSIVE FULL-BLEED: Hero is fixed backdrop, content scrolls over it */
    .auth-split {
        flex-direction: column;
        min-height: 100vh;
        min-height: 100dvh;
        position: relative;
        z-index: 1; /* Above the fixed hero */
        /* overflow: visible - content scrolls normally */
    }

    /* Hero becomes fixed full-viewport backdrop - content scrolls over it */
    .auth-split .hero-panel {
        position: fixed;
        inset: 0;
        flex: none;
        height: 100vh;
        height: 100dvh;
        align-self: auto; /* Reset sticky alignment */
        min-height: auto;
        max-height: none;
        z-index: 0; /* Behind everything */
    }

    /* Darker overlay for card readability */
    .auth-split .hero-overlay {
        background: linear-gradient(180deg,
            rgba(20, 15, 35, 0.65) 0%,
            rgba(30, 25, 50, 0.75) 50%,
            rgba(20, 15, 40, 0.85) 100%);
    }

    /* Hide hero text on mobile - card has the title */
    .auth-split .hero-content {
        display: none;
    }

    .auth-content {
        flex: 1;
        padding: var(--spacing-md);
        position: relative;
        z-index: 2;
    }

    /* Card floats on top of the immersive backdrop */
    .auth-card {
        position: relative;
        z-index: 2;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: var(--spacing-lg);
        padding-top: var(--spacing-2xl);
        padding-bottom: calc(var(--spacing-2xl) + 60px);

        /* Reset desktop scroll container - whole page scrolls on mobile */
        max-height: none;
        overflow-y: visible;

        /* Transparent - let the hero show through */
        background: transparent;
        box-shadow: none;
    }

    /* Glassmorphism card effect against dark backdrop */
    .auth-card > .interactive,
    .auth-card > .auth-wizard,
    .auth-card > .join-content {
        background: rgba(255, 255, 255, 0.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.25),
            0 2px 8px rgba(0, 0, 0, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }

    /* Trust badges need to be visible on dark background */
    .auth-card .trust-badges {
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        padding: var(--spacing-sm) var(--spacing-md);
        border-radius: var(--border-radius-lg);
        margin-top: var(--spacing-md);
    }

    .celebration-number {
        font-size: clamp(2.5rem, 10vw, 4rem);
    }

    .celebration-number-lg {
        font-size: clamp(3rem, 12vw, 5rem);
    }

    .waitlist-position-number {
        font-size: clamp(3rem, 15vw, 5rem);
    }
}

/* Tablet breakpoint - transition between layouts */
@media (min-width: 769px) and (max-width: 1024px) {
    .auth-split .hero-panel {
        flex: 0 0 45%;
    }

    .auth-card {
        flex: 0 0 55%;
    }
}

/* --- 84-N. Auth Content Patterns ---
   Reusable component patterns for auth pages.
   Page-specific overrides are in application.css.
*/

/* Auth Title and Subtitle */
.auth-title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    text-align: center;
    margin: 0 0 var(--spacing-xs) 0;
}

.auth-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    text-align: center;
    margin: 0 0 var(--spacing-lg) 0;
}

/* Auth Form Container */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Auth Form Buttons - slightly more rounded for friendly feel, but not pill */
.auth-form .command.btn-primary,
.auth-form .command.btn-secondary {
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

.auth-form .command.btn-lg {
    padding: var(--spacing-md) var(--spacing-xl);
    min-height: 48px;
}

/* Ensure full-width buttons stretch in auth forms */
.auth-form .command.btn-block {
    margin: auto;
    width: 100%;
}

/* Auth Form Ghost/Link Buttons */
.auth-form .command.btn-ghost {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    padding: var(--spacing-xs) var(--spacing-sm);
}

.auth-form .command.btn-ghost:hover {
    color: var(--color-primary);
    background: transparent;
}

/* Auth Status/Progress Text */
.auth-form .auth-status,
.auth-panel .auth-status {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-align: center;
    padding: var(--spacing-sm);
    font-style: italic;
}

/* Auth Instructions (contextual help text, not a heading) */
.auth-instructions {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
    text-align: center;
    line-height: 1.5;
    margin: 0 0 var(--spacing-lg) 0;
}

/* Auth Description Text */
.auth-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-align: center;
    line-height: 1.5;
    margin: 0;
}

/* Auth Context (location explanation) */
.auth-context {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    text-align: center;
    margin: var(--spacing-xs) 0 0 0;
}

/* Auth Links Container */
.auth-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
}

/* Username URL Preview */
.form-url-preview {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-surface-secondary, #f5f5f5);
    border-radius: var(--border-radius-sm);
    font-family: var(--font-family-mono, monospace);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    overflow: hidden;
    min-width: 0;
    word-break: break-all;
}

.form-url-preview-label {
    color: var(--color-text-secondary);
}

.form-url-preview-edit {
    margin-left: auto;
    font-size: var(--font-size-xs);
    color: var(--color-primary);
    cursor: pointer;
    font-family: var(--font-family-base, sans-serif);
}

.form-url-preview-edit:hover {
    text-decoration: underline;
}

.form-group-inline {
    margin-top: var(--spacing-sm);
}

/* Username Validation Message */
.form-validation-message {
    font-size: var(--font-size-xs);
    margin-top: var(--spacing-xs);
}

.form-validation-message.validation-success {
    color: var(--color-success, #22c55e);
}

.form-validation-message.validation-error {
    color: var(--color-danger, #ef4444);
}

/* Username Validation Icon (inline status indicator) */
.form-input-status {
    position: absolute;
    right: var(--spacing-sm);
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
}

.form-input-status.status-checking::after {
    content: "...";
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.form-input-status.status-valid::after {
    content: "\2713";
    color: var(--color-success, #22c55e);
    font-weight: bold;
}

.form-input-status.status-invalid::after {
    content: "\2717";
    color: var(--color-danger, #ef4444);
    font-weight: bold;
}

/* Onboarding Avatar Upload */
.onboarding-avatar-upload {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
}

.onboarding-avatar-preview {
    width: 80px;
    height: 80px;
    min-width: 80px;
    border-radius: 50%;
    background: var(--color-surface-secondary, #f4f4f5);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.onboarding-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.onboarding-avatar-dropzone {
    flex: 1;
    border: none !important;
    padding: 0 !important;
    min-height: auto !important;
    background: none !important;
}

.onboarding-avatar-dropzone .upload-dropzone-trigger {
    padding: 0;
    min-height: auto;
}

.onboarding-avatar-dropzone .upload-dropzone-content,
.onboarding-avatar-dropzone .upload-dropzone-preview {
    text-align: left;
}

.onboarding-avatar-dropzone .upload-dropzone-label,
.onboarding-avatar-dropzone .upload-dropzone-preview-change {
    color: var(--color-primary);
    cursor: pointer;
    font-weight: 500;
}

.onboarding-avatar-dropzone .upload-dropzone-label:hover,
.onboarding-avatar-dropzone .upload-dropzone-preview-change:hover {
    text-decoration: underline;
}

/* HUD Semantic Variants (generic, reusable across app)
   Use with .hud class for JS framework compatibility.
   Simpler than notice-banner - just text in a colored box.
   For structured notices with icons, use .notice-banner instead. */
.hud-error,
.hud.hud-error {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-error-bg);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-error);
    text-align: center;
}

.hud-info,
.hud.hud-info {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-info-bg);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-info);
    text-align: center;
}

.hud-success,
.hud.hud-success {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-success-bg);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-success);
    text-align: center;
}

.hud-warning,
.hud.hud-warning {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-warning-bg);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-warning);
    text-align: center;
}

/* Auth Icon Base */
.auth-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-2xl);
}

.auth-icon-success {
    background: var(--color-success);
    color: white;
}

.auth-icon-success::before {
    content: '✓';
}

.auth-icon-waitlist {
    background: var(--gradient-hero);
    color: white;
}

.auth-icon-waitlist::before {
    content: '🎟️';
}

/* Auth Illustration */
.auth-illustration {
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.auth-illustration img {
    max-width: 200px;
    border-radius: var(--border-radius-lg);
    margin: 0 auto;
}

.auth-illustration .placeholder {
    font-size: 4rem;
}

/* Explainer Card (generic centered info blocks)
   Use for contextual explanations, onboarding hints, feature callouts.
   For notices with icons and semantic colors, use .notice-banner instead. */
.explainer-card,
.info-card {
    background: var(--color-surface-secondary);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.explainer-card-highlight,
.info-card-highlight {
    background: linear-gradient(135deg,
        rgba(251, 146, 60, 0.08) 0%,
        rgba(251, 191, 36, 0.05) 100%);
    border: 1px solid rgba(251, 146, 60, 0.15);
}

.explainer-card-title,
.info-card-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-xs) 0;
}

.explainer-card-text,
.info-card-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Share Section */
.share-section {
    border-top: 1px solid var(--color-border-default);
    padding-top: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.share-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    text-align: center;
    margin: 0 0 var(--spacing-xs) 0;
}

.share-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-align: center;
    margin: 0 0 var(--spacing-md) 0;
}

.share-input-group {
    display: flex;
    gap: var(--spacing-sm);
}

.share-input-group .command.btn-icon {
    flex-shrink: 0;
}

.share-input-group .command.btn-icon .icon-svg {
    min-width: var(--icon-size-md);
    min-height: var(--icon-size-md);
}

.share-input {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 400px) {
    .share-input-group {
        flex-wrap: wrap;
    }

    .share-input {
        flex: 1 1 100%;
    }
}

.share-stats {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-align: center;
    margin-top: var(--spacing-md);
}

/* Celebration Card (waitlist status) */
.celebration-card {
    background: var(--color-celebration-surface-glass);
    border-radius: var(--border-radius-xl);
    padding: var(--spacing-lg);
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.celebration-card-glow {
    box-shadow: var(--shadow-celebration-glow);
}

/* Celebration Position Display */
.celebration-position {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
}

.celebration-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.celebration-number {
    font-size: clamp(3rem, 10vw, 4.5rem);
    font-weight: var(--font-weight-extrabold);
    line-height: 1;
    background: var(--gradient-celebration-number);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.celebration-context {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

.celebration-progress {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-sm);
}

/* Badge Region */
.badge-region {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-primary-bg-subtle);
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: var(--border-radius-full);
    margin-top: var(--spacing-sm);
}

/* Referral Indicator */
.referral-indicator {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(251, 146, 60, 0.1);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--spacing-lg);
}

.referral-indicator .referral-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Invite-only card - centered value prop card matching homepage style */
.auth-invite-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--spacing-lg) var(--spacing-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-xs);
}

.auth-invite-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--border-radius-full);
    overflow: hidden;
    margin-bottom: var(--spacing-sm);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.auth-invite-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.auth-invite-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-xs) 0;
}

.auth-invite-text {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
    max-width: 300px;
}

/* Auth Wizard Progress Phase Styling */
.auth-wizard .interactiveContent.progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    min-height: 120px;
}

.auth-wizard .interactiveContent.progress > .title {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-align: center;
    margin-top: var(--spacing-md);
}

.auth-wizard .interactiveContent.progress > .busy {
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: auth-spinner 0.8s linear infinite;
}

@keyframes auth-spinner {
    to { transform: rotate(360deg); }
}

/* Auth Wizard State Icons - using PNG graphics */
.auth-wizard .interactiveContent.progress .icon,
.auth-wizard .interactiveContent.end .icon,
.auth-wizard .interactiveContent.failure .icon {
    width: 100px;
    height: 100px;
    margin: 0 auto var(--spacing-lg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    border-radius: 0;
}

/* Hide the default checkmark/icon pseudo-element for auth wizard */
.auth-wizard .interactiveContent.progress .icon::before,
.auth-wizard .interactiveContent.end .icon::before,
.auth-wizard .interactiveContent.failure .icon::before {
    content: none;
}

/* Auth Progress Icon */
.auth-wizard .interactiveContent.progress .icon {
    background-image: url(/images/skin/login-success.png);
    animation: auth-icon-pulse 2s ease-in-out infinite;
    display: flex !important;
    width: auto !important;
    height: auto !important;
    flex: 1;
    min-height: 200px;
    max-width: 100%;
}

/* Auth Success Icon */
.auth-wizard .interactiveContent.end .icon {
    background-image: url(/images/skin/login-success.png);l
    animation: auth-icon-bounce-in 0.6s ease-out;
    display: flex !important;
    width: auto !important;
    height: auto !important;
    flex: 1;
    min-height: 200px;
    max-width: 100%;
}

/* Auth Failure Icon */
.auth-wizard .interactiveContent.failure .icon {
    background-image: url(/images/skin/icons/icon.sorry.png);
    animation: auth-icon-shake 0.6s ease-in-out;
    display: block !important;
}

@keyframes auth-icon-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(0.95); }
}

@keyframes auth-icon-bounce-in {
    0% { opacity: 0; transform: scale(0.3); }
    50% { transform: scale(1.05); }
    70% { transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes auth-icon-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
    20%, 40%, 60%, 80% { transform: translateX(3px); }
}

/* Responsive auth icons */
@media (max-width: 768px) {
    .auth-wizard .interactiveContent.progress .icon,
    .auth-wizard .interactiveContent.end .icon,
    .auth-wizard .interactiveContent.failure .icon {
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 480px) {
    .auth-wizard .interactiveContent.progress .icon,
    .auth-wizard .interactiveContent.end .icon,
    .auth-wizard .interactiveContent.failure .icon {
        width: 60px;
        height: 60px;
    }
}

/* --- 84-N-1. Interactive Phase Visibility System ---
   Controls which .interactiveContent container is visible.

   INLINE interactives (.interactive, .auth-wizard):
   - Only .start is shown by default
   - Progress/End/Failure are ALWAYS hidden (JS framework creates these dynamically)

   DIALOG interactives (.dialog.interactive):
   - Phase attribute controls visibility via CSS
*/

/* Base: Hide all interactiveContent containers by default */
.interactive .interactiveContent,
.auth-wizard .interactiveContent {
    display: none;
}

/* DEFAULT: Show .interactiveContent.start for inline interactives */
.interactive .interactiveContent.start,
.auth-wizard .interactiveContent.start {
    display: block;
}

/* --- Phase visibility rules for auth-wizard and dialogs --- */
/* Hide all phases by default, show based on interactive-phase attribute */

.auth-wizard .interactiveContent.progress,
.auth-wizard .interactiveContent.end,
.auth-wizard .interactiveContent.failure {
    display: none;
}

/* Show auth-wizard phases when active (set by JS framework) */
.auth-wizard[interactive-phase="progress"] .interactiveContent.progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.auth-wizard[interactive-phase="end"] .interactiveContent.end {
    display: block;
}

.auth-wizard[interactive-phase="failure"] .interactiveContent.failure {
    display: block;
}

/* Dialog phase visibility rules */
.dialog.interactive[interactive-phase] .interactiveContent {
    display: none;
}

.dialog.interactive[interactive-phase="start"] .interactiveContent.start {
    display: block;
}

.dialog.interactive[interactive-phase="progress"] .interactiveContent.progress {
    display: block;
}

.dialog.interactive[interactive-phase="end"] .interactiveContent.end {
    display: block;
}

.dialog.interactive[interactive-phase="failure"] .interactiveContent.failure {
    display: block;
}

/* --- 84-N-2. Progress State Styling --- */

.interactiveContent.progress {
    padding: var(--spacing-xl);
    min-height: 160px;
    text-align: center;
}

/* Progress Spinner */
.interactiveContent.progress .busy,
.interactiveContent.progress .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-border-default);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: interactive-spinner 0.8s linear infinite;
    margin: 0 auto var(--spacing-md);
}

@keyframes interactive-spinner {
    to { transform: rotate(360deg); }
}

/* Progress Title Text */
.interactiveContent.progress .title,
.interactiveContent.progress .progress-title {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 0;
    animation: interactive-pulse 2s ease-in-out infinite;
}

@keyframes interactive-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Progress Icon (alternative to spinner) */
.interactiveContent.progress .icon {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xl);
    animation: interactive-pulse 2s ease-in-out infinite;
}

/* --- 84-N-3. End State (Success) Styling --- */

.interactiveContent.end {
    padding: var(--spacing-xl);
    text-align: center;
}

/* End State Icon - generic (not auth-wizard which uses PNG images) */
:not(.auth-wizard) > .interactiveContent.end .icon,
.interactiveContent.end .success-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-success);
    color: white;
    font-size: var(--font-size-2xl);
    border-radius: 50%;
    animation: interactive-bounce-in 0.5s var(--ease-bounce);
}

:not(.auth-wizard) > .interactiveContent.end .icon::before,
.interactiveContent.end .success-icon::before {
    content: '✓';
}

@keyframes interactive-bounce-in {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* End State Title */
.interactiveContent.end .title,
.interactiveContent.end .success-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-sm) 0;
}

/* End State Response/Message */
.interactiveContent.end .response,
.interactiveContent.end .success-message {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* End State Commands/Actions */
.interactiveContent.end .commands {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}

/* --- 84-N-4. Failure State Styling --- */

.interactiveContent.failure {
    padding: var(--spacing-xl);
    text-align: center;
}

/* Failure Icon - generic (not auth-wizard which uses PNG images) */
:not(.auth-wizard) > .interactiveContent.failure .icon,
.interactiveContent.failure .error-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-error);
    color: white;
    font-size: var(--font-size-2xl);
    border-radius: 50%;
    animation: interactive-shake 0.5s ease-out;
}

:not(.auth-wizard) > .interactiveContent.failure .icon::before,
.interactiveContent.failure .error-icon::before {
    content: '!';
    font-weight: var(--font-weight-bold);
}

@keyframes interactive-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Failure Title */
.interactiveContent.failure .title,
.interactiveContent.failure .error-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-error);
    margin: 0 0 var(--spacing-sm) 0;
}

/* Failure Message */
.interactiveContent.failure .response,
.interactiveContent.failure .error-message {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Failure Commands/Retry Actions */
.interactiveContent.failure .commands {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}

/* Hide default workspace icon, title, and bottom commands in auth wizard */
.auth-wizard > .title {
    display: none;
}

.auth-wizard .workspace > .icon:first-child:empty,
.auth-wizard .workspace > .icon:first-child {
    display: none;
}

.auth-wizard > .commands,
.auth-wizard > .interactiveContent > .commands {
    display: none;
}

/* Auth Panel Animation */
.auth-panel {
    animation: auth-panel-appear 0.4s var(--ease-elegant);
}

@keyframes auth-panel-appear {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Auth Split Hero Title & Subtitle overrides */
.auth-split .hero-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    margin: 0 0 var(--spacing-md) 0;
    color: white;
}

.auth-split .hero-subtitle {
    font-size: var(--font-size-lg);
    opacity: 0.9;
    line-height: 1.5;
    margin: 0;
    max-width: 400px;
    color: white;
}

/* Auth Mobile Responsive - Additional refinements */
@media (max-width: 768px) {
    .celebration-number {
        font-size: clamp(2.5rem, 12vw, 3.5rem);
    }

    /* Compact progress state on mobile */
    .interactiveContent.progress {
        padding: var(--spacing-lg);
        min-height: 120px;
    }
}

@media (max-width: 480px) {
    /* Tighter card padding on small phones */
    .auth-card > .interactive,
    .auth-card > .auth-wizard,
    .auth-card > .join-content {
        padding: var(--spacing-md);
    }

    .auth-title {
        font-size: var(--font-size-xl);
    }

    .auth-subtitle {
        font-size: var(--font-size-sm);
    }
}

/* --- 84-O. Join Page Content Patterns ---
   Benefits list and CTA sections used on Join page.
   Note: Value props now use the .value-props pattern from callouts section.
*/

/* Join Header - Context for mobile (hero text hidden) */
.join-header {
    display: none; /* Hidden on desktop - hero provides context */
    text-align: center;
}

.join-header .auth-title {
    margin-top: var(--spacing-sm);
}

.join-header .auth-subtitle {
    margin-top: var(--spacing-xs);
}

@media (max-width: 768px) {
    .join-header {
        display: block; /* Show on mobile where hero text is hidden */
    }
}

/* Compact value props need photo icon styling - ROUND like homepage */
.value-props-compact .value-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--border-radius-full); /* Round like homepage */
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .value-props-compact .value-icon {
    filter: brightness(0.85) contrast(1.05);
}

/* Callout with Icon Layout */
.callout .callout-icon {
    width: var(--icon-size-lg, 32px);
    height: var(--icon-size-lg, 32px);
    min-width: var(--icon-size-lg, 32px);
    min-height: var(--icon-size-lg, 32px);
    border-radius: var(--border-radius-full);
    flex-shrink: 0;
}

.callout.callout-info {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
    padding: var(--spacing-lg);
    margin: 0;
}

.callout.callout-info .callout-content {
    flex: 1;
}

.callout.callout-info .callout-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--spacing-xs);
}

.callout.callout-info .callout-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* CTA Note in Auth Context - closer to button, tip style */
.join-content .cta-note,
.auth-card .cta-note {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin: var(--spacing-xs) 0 0 0; /* Closer to button */
    text-align: center;
    opacity: 0.8;
}

/* Check List - Benefits List */
.check-list {
    list-style: none;
    padding: 0;
    margin: var(--spacing-md) 0 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.check-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.check-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-success);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    border-radius: var(--border-radius-full);
}

.check-icon::before {
    content: '✓';
}

/* Info Card Highlight Variant */
.info-card-highlight {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.1) 0%, rgba(92, 67, 244, 0.05) 100%);
    border: 1px solid rgba(251, 146, 60, 0.2);
}

/* Trust Badges */
.trust-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-lg);
    margin-top: var(--spacing-sm);
}

.badge.badge-trust {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: transparent;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    text-transform: none !important;
    letter-spacing: normal;
    border-radius: var(--border-radius-md);
    opacity: 0.8;
}

/* Join Page Mobile Responsive */
@media (max-width: 768px) {
    .trust-badges {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--spacing-xs);
    }

    .badge.badge-trust {
        font-size: 11px;
    }
}

/* Auth/Join page inline footer */
.auth-footer {
    margin-top: auto;
    padding-top: var(--spacing-lg);
    text-align: center;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.auth-footer a {
    color: var(--color-text-secondary);
    text-decoration: none;
    margin: 0 var(--spacing-sm);
}

.auth-footer a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* ==========================================================================
   SECTION 84: SHOPPING CART PAGE
   ==========================================================================
   Shopping cart page components for displaying grouped cart items by seller
   and transaction type. Uses card patterns with warm shadows and hover lift.

   Demo: wwwroot/components/cart.html (TODO)
   ========================================================================== */

/* --- 84-A. Cart Page Container --- */
.cart-validation-messages {
    max-width: var(--container-max-width);
    margin: 0 auto var(--spacing-md);
    padding: 0 var(--spacing-lg);
    box-sizing: border-box;
}
.cart-validation-message {
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-xs);
    background: var(--color-warning-bg, #fff8e1);
    border: 1px solid var(--color-warning-border, #ffe082);
    border-radius: var(--border-radius-sm, 4px);
    color: var(--color-text-warm, #333);
    font-size: var(--font-size-body, 14px);
}

.cart-page {
    width: 100%;
    max-width: var(--container-max-width);
    padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-xl);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.cart-page .cart-header {
    margin-bottom: var(--spacing-md);
}

.cart-page .cart-title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
    margin: 0;
}

.cart-page .cart-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* Hide cart content when empty */
.cart-page[ux-empty] .cart-content {
    display: none;
}

/* --- 84-B. Cart Summary Bar --- */
.cart-summary {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--gradient-card-base);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-card);
}

.cart-summary-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-lg);
}

.cart-summary-count .qty {
    font-weight: var(--font-weight-bold);
    color: var(--color-text-warm);
}

.cart-summary-subtotal {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.cart-summary-subtotal::before {
    content: '•';
    color: var(--color-text-muted);
    margin-right: var(--spacing-xs);
}

.cart-summary-label {
    color: var(--color-text-warm-body);
}

.cart-summary-value {
    font-weight: var(--font-weight-bold);
    color: var(--color-text-warm);
}

.cart-summary-offer {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

/* --- 84-C. Cart Summary Stats --- */
.cart-summary-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border);
}

.cart-stat {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
}

.cart-stat[data-value="0"] {
    display: none;
}

.cart-stat-icon {
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.6;
}

.cart-stat-value {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm-body);
    background: rgba(var(--color-primary-rgb), 0.08);
    padding: 0 var(--spacing-sm);
    border-radius: var(--border-radius-full);
}

/* --- 84-D. Cart Item Groups Container --- */
.cart-groups {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* --- 84-E. Cart Group (Seller Transaction Card) --- */
.cart-group {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: var(--transition-card);
}

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

/* --- 84-F. Cart Group Header --- */
/* --- Cart Group Header: Unified Transaction Summary --- */
/* Style guide: "Curated warmth" with consistent icon weight and warm text hierarchy */
.cart-group-header {
    --header-icon-size: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--gradient-tint-primary);
    border-bottom: 1px solid var(--color-border);
}

/* Row 1: Purchase Type - the "headline" */
.cart-group-type {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.cart-group-type-icon {
    width: var(--header-icon-size);
    height: var(--header-icon-size);
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.85; /* Match icon opacity with text warmth */
}

/* Purchase mode icon (data-purchase="0") */
.cart-group[data-purchase="0"] .cart-group-type-icon {
    background-image: url(/images/icon/cart-black.svg);
}

/* Offer mode icon (data-purchase="1") */
.cart-group[data-purchase="1"] .cart-group-type-icon {
    background-image: url(/images/icon/handshake-black.svg);
}

.cart-group-type-label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    letter-spacing: -0.01em;
}

/* Row 2: Transaction (Seller) - body level */
.cart-group-transaction {
    display: flex;
    align-items: center;
    gap: 0.35em; /* Natural word spacing for text flow */
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-body);
}

/* Seller avatar - sized to match header icons */
.cart-group-seller-avatar {
    width: var(--header-icon-size);
    height: var(--header-icon-size);
    flex-shrink: 0;
    margin-right: var(--spacing-xs); /* Extra space after avatar */
}

.cart-group-seller-avatar img {
    width: var(--header-icon-size);
    height: var(--header-icon-size);
    border-radius: var(--border-radius-full);
    object-fit: cover;
    border: 1.5px solid var(--color-border);
    transition: var(--transition-fast);
}

.cart-group-seller-avatar img:hover {
    border-color: var(--color-primary-light);
}

.cart-group-delivery {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-warm-body);
}

.cart-group-with {
    color: var(--color-text-warm-muted);
}

.cart-group-seller {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: var(--transition-fast);
}

.cart-group-seller:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* Row 3: Location - muted/supporting level */
.cart-group-location {
    --icon-size: var(--header-icon-size); /* Match other header icons */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35em; /* Natural word spacing for text flow */
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
}

.cart-group-location > .icon-svg:first-child {
    width: var(--header-icon-size);
    height: var(--header-icon-size);
    flex-shrink: 0;
    opacity: 0.6;
    margin-right: var(--spacing-xs); /* Extra space after icon */
}

/* @deprecated Use .icon-svg.icon-pin instead */
.cart-group-location-icon {
    width: var(--header-icon-size);
    height: var(--header-icon-size);
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    opacity: 0.5;
}

.cart-group-location .icon-svg {
    opacity: 0.5;
}

.cart-group-location-name,
.cart-group-location-postal {
    font-weight: var(--font-weight-regular);
    color: var(--color-text-warm-body);
}

.cart-group-location-in {
    color: var(--color-text-warm-muted);
}

.cart-group-map-link {
    color: var(--color-primary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    margin-left: var(--spacing-2xs);
}

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

/* --- 84-G. Cart Group Items Container --- */
.cart-group-items {
    display: flex;
    flex-direction: column;
}

/* --- 84-H. Cart Item --- */
.cart-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    position: relative;
    border-bottom: 1px solid var(--color-border);
    transition: var(--transition-fast);
}

.cart-item:last-child {
    border-bottom: none;
}

.cart-item:hover {
    background: var(--color-primary-bg-subtle);
}

/* --- 84-I. Cart Item Photo --- */
.cart-item-photo {
    width: 100px;
    min-width: 100px;
    height: 100px;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    background: var(--color-surface);
    flex-shrink: 0;
}

.cart-item-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* --- 84-J. Cart Item Info --- */
.cart-item-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    flex: 1;
    min-width: 0;
    padding-right: var(--spacing-xl);
}

.cart-item-price,
.cart-item-request {
    font-size: var(--font-size-base);
    color: var(--color-text-warm-body);
}

.cart-item-qty {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
}

.cart-item-total {
    font-weight: var(--font-weight-bold);
    color: var(--color-text-warm);
    font-size: var(--font-size-lg);
}

.cart-item-unit {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
}

.cart-item-offer {
    color: var(--color-text-warm-body);
}

.cart-item-asking {
    color: var(--color-text-warm-muted);
}

.cart-item-anyoffer {
    color: var(--color-warning-dark);
    font-style: italic;
}

.cart-item-caption {
    display: block;
    font-size: var(--font-size-base);
    color: var(--color-text-warm-body);
    text-decoration: none;
    line-height: 1.4;
    margin-top: var(--spacing-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cart-item-caption:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* --- 84-K. Cart Item Context Menu (uses shared context-menu-trigger pattern) --- */
.cart-item .context-menu-trigger {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    z-index: 2;
}

.cart-item .context-menu-trigger .menu-button {
    width: 32px;
    height: 32px;
    background: var(--color-background);
    border: 1px solid var(--color-border-medium, var(--color-border));
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.cart-item .context-menu-trigger .menu-button .menu-icon {
    width: 16px;
    height: 16px;
    background-image: url(/images/icon/more-vert-black.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.7;
}

.cart-item .context-menu-trigger .menu-button:hover {
    background: var(--color-primary-bg-subtle);
    border-color: var(--color-border-primary-subtle);
    box-shadow: 0 2px 6px rgba(var(--color-primary-rgb), 0.15);
}

.cart-item .context-menu-trigger .menu-button:hover .menu-icon {
    opacity: 0.8;
}

/* --- 84-L. Cart Group Footer --- */
.cart-group-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--gradient-footer-warm);
    border-top: 1px solid var(--color-border);
}

.cart-group-summary {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.cart-group-count {
    font-size: var(--font-size-base);
    color: var(--color-text-warm-body);
}

.cart-group-count .qty {
    font-weight: var(--font-weight-bold);
    color: var(--color-text-warm);
}

.cart-group-seller-info {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
}

.cart-group-total {
    font-size: var(--font-size-lg);
    color: var(--color-text-warm-body);
}

.cart-group-asking-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
    margin-right: var(--spacing-xs);
}

.cart-group-total-value {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xl);
    color: var(--color-text-warm);
}

.cart-group-anyoffer {
    color: var(--color-warning-dark);
    font-style: italic;
}

.cart-group-actions {
    display: flex;
    align-items: center;
}

.cart-group-actions .cmdCheckout {
    white-space: nowrap;
}

/* --- 84-M. Empty Cart State --- */
.cart-empty {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-3xl) var(--spacing-lg);
    margin: var(--spacing-lg) 0;
}

.cart-page[ux-empty] .cart-empty {
    display: flex;
}

.cart-empty-icon {
    width: 120px;
    height: 120px;
    margin-bottom: var(--spacing-lg);
    background-image: url("/images/icon/cart-black.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.3;
}

.cart-empty-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
    margin: 0 0 var(--spacing-sm);
}

.cart-empty-text {
    font-size: var(--font-size-base);
    color: var(--color-text-warm-muted);
    margin: 0 0 var(--spacing-lg);
    max-width: 300px;
}

.cart-empty-cta {
    text-decoration: none;
}

/* --- 84-M2. Cart Change Banner (redirect from checkout) --- */
.cart-change-banner {
    margin: 0 0 var(--spacing-lg);
    animation: cartBannerSlideIn 0.4s var(--ease-elegant);
}

.cart-change-banner strong {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-base);
}

.cart-change-banner p {
    margin: var(--spacing-xs) 0 0;
    color: var(--color-text-warm-body);
}

.cart-change-banner ul {
    margin: var(--spacing-xs) 0 0;
    padding: 0;
    list-style: none;
}

.cart-change-banner ul li {
    position: relative;
    padding-left: var(--spacing-md);
    margin-bottom: var(--spacing-xs);
    color: var(--color-text-warm-body);
    line-height: 1.5;
}

.cart-change-banner ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.5);
}

@keyframes cartBannerSlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- 84-N. Cart Mobile Responsive --- */
@media (max-width: 600px) {
    .cart-page {
        padding: var(--spacing-md) var(--spacing-sm) var(--spacing-lg);
    }

    .cart-summary {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .cart-summary-main {
        font-size: var(--font-size-base);
    }

    .cart-summary-stats {
        gap: var(--spacing-sm);
    }

    .cart-stat {
        font-size: var(--font-size-xs);
    }

    .cart-group-header,
    .cart-item,
    .cart-group-footer {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .cart-item-photo {
        width: 80px;
        min-width: 80px;
        height: 80px;
    }

    .cart-item-info {
        padding-right: var(--spacing-lg);
    }

    .cart-item-caption {
        font-size: var(--font-size-sm);
    }

    .cart-item-options {
        width: 32px;
        height: 32px;
        top: var(--spacing-sm);
        right: var(--spacing-sm);
    }

    .cart-group-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .cart-group-actions {
        justify-content: center;
        margin-top: var(--spacing-sm);
    }

    .cart-group-actions .cmdCheckout {
        width: 100%;
        justify-content: center;
    }

    .cart-empty {
        padding: var(--spacing-xl) var(--spacing-md);
    }

    .cart-empty-icon {
        width: 80px;
        height: 80px;
    }
}

/* ==========================================================================
   SECTION 85: CHECKOUT & ORDER LAYOUT
   ==========================================================================
   Layout components for checkout flow and order confirmation pages.
   Combines with existing components: .detail-section, .workflow-steps,
   .celebration-card, .state-surface, .next-steps, .chip-selectable, .kv-row.

   Demo: wwwroot/components/checkout.html
   ========================================================================== */

/* --- 85-A. Checkout Layout (Two-Column Grid) --- */
.checkout-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--spacing-lg);
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-md) var(--spacing-xl) var(--spacing-xl);
}

@media (max-width: 968px) {
    .checkout-layout {
        grid-template-columns: 1fr;
        padding: var(--spacing-lg);
    }
}

@media (max-width: 600px) {
    .checkout-layout {
        padding: var(--spacing-md);
        gap: var(--spacing-lg);
    }
}

/* --- 85-B. Checkout Main (Left Column) --- */
.checkout-main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* --- 85-C. Checkout Sidebar (Right Column) --- */
.checkout-sidebar {
    position: sticky;
    top: var(--spacing-lg);
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

@media (max-width: 968px) {
    .checkout-sidebar {
        position: static;
        order: -1; /* Move summary to top on mobile */
    }
}

/* --- 85-D. Cart Photo Strip --- */
.checkout-cart-strip {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    padding: var(--spacing-sm) 0;
}

/* --- 85-E. Cart Item (Photo Thumbnail) --- */
.checkout-cart-item {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}

.checkout-cart-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Larger variant for order confirmation */
.checkout-cart-item.cart-item-lg {
    width: 80px;
    height: 80px;
}

/* --- 85-F. Quantity Badge --- */
.qty-badge {
    position: absolute;
    bottom: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--color-primary);
    color: white;
    border-radius: var(--border-radius-full);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Hide badge when quantity is 1 */
.qty-badge[data-qty="1"],
.qty-badge:empty {
    display: none;
}

/* --- 85-G. Order Summary Card --- */
.order-summary {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-card);
    transition: var(--transition-card);
}

.order-summary:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
}

.order-summary-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--spacing-md) 0;
    color: var(--color-text);
}

/* Summary rows using .kv-row pattern */
.order-summary .kv-row {
    padding: var(--spacing-xs) 0;
}

.order-summary .kv-row-total {
    border-top: 1px solid var(--color-border);
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    font-weight: var(--font-weight-semibold);
}

.order-summary .kv-row-total .kv-value {
    font-size: var(--font-size-lg);
    color: var(--color-text);
}

/* --- 85-H. Checkout Section States --- */
/* Use with .detail-section for checkout steps */
.checkout-section[data-complete] .detail-section-header::after {
    content: "✓";
    color: var(--color-success);
    margin-left: var(--spacing-sm);
}

.checkout-section[data-active] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}

/* --- 85-I. Order Confirmation Hero (legacy) --- */
/* Left-aligned header matching checkout-page-header layout */
.checkout-page-header .order-confirmation-hero {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    width: 100%;
}

.order-confirmation-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.order-confirmation-hero .confirmationCode {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.confirmation-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.order-confirmation-hero .order-number {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* --- 85-I2. Order Confirmation Success Banner --- */
/* Full-width celebration banner that replaces the plain checkout-style header.
   Uses brand gradient (violet → teal) with an animated checkmark ring to
   create a clear "success moment" distinct from the checkout page. */

.order-confirmation-page .confirmation-banner {
    position: relative;
    overflow: hidden;
    padding: 48px var(--spacing-xl) 40px;
    text-align: center;
}

.confirmation-banner-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 120% at 50% -20%, rgba(16, 185, 129, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse 60% 80% at 30% 80%, rgba(92, 67, 244, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 50% 70% at 80% 90%, rgba(0, 255, 203, 0.05) 0%, transparent 50%),
        linear-gradient(180deg, rgba(16, 185, 129, 0.04) 0%, rgba(92, 67, 244, 0.02) 60%, transparent 100%);
    pointer-events: none;
}

.confirmation-banner-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    max-width: 560px;
    margin: 0 auto;
}

/* Animated check ring — emerald circle with white checkmark */
.confirmation-check-ring {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 4px 20px rgba(16, 185, 129, 0.3),
        0 0 0 6px rgba(16, 185, 129, 0.08),
        0 0 0 12px rgba(16, 185, 129, 0.04);
    animation: confirmationPop 0.5s var(--ease-elegant) both;
    margin-bottom: var(--spacing-xs);
}

.confirmation-check-icon::before {
    content: '✓';
    font-size: 32px;
    font-weight: var(--font-weight-bold);
    color: white;
    line-height: 1;
    animation: checkDraw 0.3s var(--ease-elegant) 0.25s both;
}

@keyframes confirmationPop {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    70% {
        transform: scale(1.08);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes checkDraw {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-15deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.confirmation-title {
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-warm);
    letter-spacing: -0.02em;
    margin: 0;
    animation: confirmFadeUp 0.4s var(--ease-elegant) 0.15s both;
}

.confirmation-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-warm-body);
    margin: 0;
    line-height: 1.5;
    animation: confirmFadeUp 0.4s var(--ease-elegant) 0.25s both;
}

@keyframes confirmFadeUp {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Cancelled/rejected state overrides */
.confirmation-banner-cancelled .confirmation-banner-bg {
    background:
        radial-gradient(ellipse 80% 120% at 50% -20%, rgba(var(--color-danger-rgb, 239, 68, 68), 0.10) 0%, transparent 60%),
        linear-gradient(180deg, rgba(var(--color-danger-rgb, 239, 68, 68), 0.03) 0%, transparent 100%);
}

.confirmation-cancelled-ring {
    background: linear-gradient(135deg, var(--color-text-warm-muted, #9ca3af) 0%, var(--color-text-warm-body, #6b7280) 100%);
    box-shadow:
        0 4px 20px rgba(107, 114, 128, 0.2),
        0 0 0 6px rgba(107, 114, 128, 0.06),
        0 0 0 12px rgba(107, 114, 128, 0.03);
}

.confirmation-cancelled-icon::before {
    content: '✕';
    font-size: 30px;
    font-weight: var(--font-weight-bold);
    color: white;
    line-height: 1;
    animation: checkDraw 0.3s var(--ease-elegant) 0.25s both;
}

.confirmation-details {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--spacing-xs);
    animation: confirmFadeUp 0.4s var(--ease-elegant) 0.35s both;
}

.confirmation-detail-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-full);
    box-shadow: var(--shadow-xs);
}

.confirmation-detail-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-warm-muted);
    font-weight: var(--font-weight-medium);
}

.confirmation-detail-value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
}

.confirmation-detail-value.code-display {
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.04em;
}

.confirmation-details .status-badge {
    animation: none;
}

/* --- 85-J. Mobile Order Actions --- */
@media (max-width: 600px) {
    /* Full-width buttons on mobile */
    .order-confirmation-hero .btn {
        width: 100%;
    }

    .order-confirmation-page .confirmation-banner {
        padding: 36px var(--spacing-md) 28px;
    }

    .confirmation-check-ring {
        width: 60px;
        height: 60px;
    }

    .confirmation-check-icon::before {
        font-size: 26px;
    }

    .confirmation-title {
        font-size: 24px;
    }

    .confirmation-details {
        flex-direction: column;
    }

    /* Stack cart items more compactly */
    .checkout-cart-strip {
        gap: var(--spacing-xs);
    }

    .checkout-cart-item {
        width: 56px;
        height: 56px;
    }

    .checkout-cart-item.cart-item-lg {
        width: 64px;
        height: 64px;
    }
}

/* --- 85-J2. Print Styles for Order Receipt --- */
@media print {
    /* Hide navigation, header chrome, footer, dialogs, and non-essential UI */
    header, footer, nav,
    .site-header, .site-footer, .site-nav,
    .app-header-primary, .app-header-secondary, .app-header-location,
    .app-header-user, .app-header-nav, .app-header-search,
    .app-header-logo,
    #Hdr_Primary, #Hdr_Content,
    #QuickNav, #BottomNav, .bottom-nav,
    .topBar, .navBar,
    #Header, #Ftr_Main, #Copyright,
    .no-print,
    .section.actions,
    .checkout-location-card .btn,
    #Template_Dialogs, #Geo_Results,
    #Interactions, #Overlay_UI,
    #Frozen_Dialog, #Frozen_Header, #Frozen_All,
    #AutocompleteBlock,
    #Tooltip, #Hud_Status, #Hud_Main,
    #Progress_Indeterminate, #Progress_Uploader,
    .view.dialog, .view.manageDialog,
    [id^="View_"], [id^="Dlg_"],
    .tooltip {
        display: none !important;
    }

    /* Reset page background and layout */
    body, .checkout-page, .order-confirmation-page {
        background: white !important;
        min-height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Flatten the two-column layout to single column */
    .checkout-layout {
        display: block !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .checkout-main, .checkout-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Simplify banner for print */
    .order-confirmation-page .confirmation-banner {
        padding: 24px 0 16px !important;
        border-bottom: 2px solid #333 !important;
        margin-bottom: 16px !important;
    }

    .confirmation-banner-bg {
        display: none !important;
    }

    .confirmation-check-ring,
    .confirmation-cancelled-ring {
        display: none !important;
    }

    .confirmation-title {
        font-size: 22px !important;
        animation: none !important;
        color: #000 !important;
    }

    .confirmation-subtitle {
        animation: none !important;
        color: #333 !important;
    }

    /* Ensure detail sections print cleanly */
    .detail-section, .checkout-section {
        break-inside: avoid;
        page-break-inside: avoid;
        border: none !important;
        box-shadow: none !important;
        margin-bottom: 12px !important;
    }

    .detail-section-title {
        color: #000 !important;
        font-size: 14px !important;
    }

    /* Order items */
    .cart-item, .order-line-item {
        break-inside: avoid;
    }

    /* Force lazy-loaded images (background-image via loader attr) to print */
    .cart-item-photo img, .order-line-photo img,
    img[loader], img.loaded {
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    /* Order summary */
    .order-summary {
        border: 1px solid #ccc !important;
        padding: 12px !important;
        box-shadow: none !important;
    }

    .kv-row-total {
        border-top: 1px solid #333 !important;
        padding-top: 8px !important;
        font-weight: bold !important;
    }

    /* State surfaces — ensure background prints */
    .state-surface {
        box-shadow: none !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Expandable sections — force open for print */
    .accordianContent, [ux-expanding] {
        display: block !important;
    }

    /* Links should show URL in print */
    a[href^="/"] {
        text-decoration: underline;
    }

    /* Page margins */
    @page {
        margin: 0.75in;
    }
}

/* --- 85-K. Checkout Page Header --- */
.checkout-page {
    background: var(--gradient-canvas-settings);
    min-height: 100vh;
    padding: 0;
}

.checkout-page-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-sm);
    max-width: 1200px;
    margin: 0 auto;
}

.checkout-page-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0;
}

.checkout-page-badge {
    font-size: var(--font-size-xs);
    text-transform: none;
    letter-spacing: normal;
}

/* --- 85-L. Checkout Section Styling --- */
.checkout-section {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-card);
}

.checkout-section-required {
    border-color: var(--color-warning);
    box-shadow: var(--shadow-card), 0 0 0 1px var(--color-warning-light);
}

.checkout-section .detail-section-header {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-border-light);
}

.checkout-section .detail-section-body {
    padding: var(--spacing-md);
}

/* Inline seller avatar in section titles (checkout, order confirmation) */
.seller-avatar-inline {
    display: inline-flex;
    vertical-align: middle;
    margin-right: var(--spacing-xs);
}
.seller-avatar-inline img {
    width: 24px;
    height: 24px;
    border-radius: var(--border-radius-full);
    object-fit: cover;
    border: 1.5px solid var(--color-border);
}

.checkout-section .detail-section-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.checkout-item-count {
    color: var(--color-text-secondary);
}

.checkout-subtotal {
    color: var(--color-text);
}
.checkout-subtotal-pending {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    font-style: italic;
}

/* Compact cart strip */
.checkout-section[data-section="cart"] .checkout-cart-strip {
    padding: 0;
}

.checkout-section[data-section="cart"] .detail-section-body {
    padding: var(--spacing-sm) var(--spacing-md);
}

/* --- 85-M. Checkout Location Card --- */
.checkout-location-card {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md) !important;
}

.checkout-location-card .icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.checkout-location-card .icon-pin {
    background-image: url(/images/icon/pin-primary.svg);
}

.checkout-location-info {
    flex: 1;
    min-width: 0;
}

.checkout-location-name {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--spacing-xs);
}

.checkout-location-postal {
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
    margin-left: var(--spacing-xs);
}

.checkout-location-address {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.checkout-location-private {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-style: italic;
    color: var(--color-text-muted);
}

.checkout-location-private .icon-lock {
    width: 14px;
    height: 14px;
    background-image: url(/images/icon/lock-primary.svg);
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
}

/* --- 85-N. Checkout Meetup Time (as completion card) --- */
.checkout-meetup-card {
    margin-top: var(--spacing-md);
}

.checkout-meetup-card .state-surface {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) !important;
}

.checkout-meetup-info {
    flex: 1;
    min-width: 0;
}

.checkout-meetup-label {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}

.checkout-meetup-value {
    display: block;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.checkout-meetup-description {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* --- 85-OA. Own Arrangements --- */
.checkout-own-arrangements-link {
    margin-top: var(--spacing-sm);
}

.checkout-own-arrangements-link a {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
    text-decoration: underline;
    transition: var(--transition-colors);
}

.checkout-own-arrangements-link a:hover {
    color: var(--color-primary);
}

.checkout-own-arrangements-card {
    margin-top: var(--spacing-md);
}

.checkout-own-arrangements-card .checkout-location-name {
    color: var(--color-text-warm-medium);
}

.checkout-own-arrangements-card .checkout-location-details p {
    margin: 0 0 var(--spacing-xs);
    color: var(--color-text-warm-body);
}

.checkout-own-arrangements-card .own-arrangements-safety {
    color: var(--color-text-warm-muted);
    font-size: var(--font-size-sm);
}

/* Own arrangements dialog — uses .onboarding .payment-option card pattern from Section 49 */

/* --- 85-O. Checkout Completion Cards --- */
.checkout-completion-card {
    margin-bottom: var(--spacing-md);
}

.checkout-completion-card:last-child {
    margin-bottom: 0;
}

.checkout-completion-card .state-surface {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) !important;
}

/* SVG icons for checkout cards - all use primary (purple) for brand consistency
   Card backgrounds (state-success, state-muted) provide semantic meaning,
   while icons stay consistently branded */
.checkout-completion-card .icon,
.checkout-location-card .icon,
.checkout-meetup-card .icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.checkout-completion-card .icon-check {
    background-image: url(/images/icon/check-primary.svg);
}

/* Payment method icons - primary color for brand consistency */
.icon-card {
    width: 16px;
    height: 16px;
    background-image: url(/images/icon/credit-card-stack-primary.svg);
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    margin-right: var(--spacing-xs);
}

.icon-cash {
    width: 16px;
    height: 16px;
    background-image: url(/images/icon/hand-cash-primary.svg);
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    margin-right: var(--spacing-xs);
}

.checkout-completion-info {
    flex: 1;
    min-width: 0;
}

.checkout-completion-label {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}

.checkout-completion-value {
    display: block;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

/* --- 85-P. Checkout Add Card (Empty State) --- */
.checkout-add-card {
    flex-direction: column !important;
    align-items: center !important;
    gap: var(--spacing-sm) !important;
    text-align: center;
}

.checkout-add-card .btn-primary {
    max-width: 280px;
    width: 100%;
}

.checkout-add-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.checkout-add-title {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.checkout-add-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Toggle completed/empty states on checkout-completion-card via ux-empty attribute */
.checkout-completion-card[ux-empty] > .state-success { display: none; }
.checkout-completion-card:not([ux-empty]) > .checkout-add-card { display: none; }
.checkout-completion-card:not([ux-empty]) { }
.checkout-completion-card[ux-empty] { }

.checkout-payment-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.checkout-payment-options {
    margin-top: var(--spacing-sm);
}

/* --- 85-Q. Checkout Payment Dialog (cpd-*) --- */

/* No-card state: prominent add-card CTA */
.cpd-add-card-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg) var(--spacing-xl);
    margin: var(--spacing-lg) auto var(--spacing-md);
    max-width: 280px;
    background: var(--color-primary);
    color: white;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: background-color 0.2s var(--ease-elegant),
                transform 0.15s var(--ease-elegant),
                box-shadow 0.2s var(--ease-elegant);
    box-shadow: 0 2px 12px rgba(var(--color-primary-rgb), 0.25);
}

.cpd-add-card-cta:hover {
    background: var(--color-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), 0.35);
}

.cpd-add-card-cta:active {
    transform: translateY(0);
}

.cpd-add-card-cta .icon-svg {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
}

.cpd-footer-note {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: var(--line-height-relaxed, 1.6);
    margin-top: var(--spacing-md);
}

/* Has-card state: card row */
.cpd-card-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    margin: var(--spacing-lg) 0;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    background: var(--color-surface);
}

.cpd-card-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
}

.cpd-card-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.cpd-card-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cpd-card-name {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cpd-card-expiry {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.cpd-card-change {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    cursor: pointer;
    flex-shrink: 0;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    transition: background-color 0.15s var(--ease-elegant);
}

.cpd-card-change:hover {
    background-color: var(--color-primary-lighter);
}

/* Single-method summary (no choice needed) */
.cpd-single-method {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    padding: var(--spacing-md);
    background: var(--color-surface);
    border-radius: var(--border-radius-md);
    line-height: var(--line-height-relaxed, 1.6);
}

/* Checkout completion meta line (e.g., "$3.50 service fee + purchase") */
.checkout-completion-meta {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* Recommended badge */
.badge-recommended {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    background: var(--color-primary-lighter);
    padding: 1px var(--spacing-xs);
    border-radius: var(--border-radius-sm);
    margin-left: var(--spacing-xs);
    vertical-align: middle;
}

.checkout-validation {
    margin-top: var(--spacing-sm);
    margin-bottom: 0;
}

/* --- 85-Q. Required Marker --- */
.required-marker {
    color: var(--color-error);
    margin-left: 2px;
}

/* --- 85-R. Help Icon --- */
.help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 11px;
    background: var(--color-text-muted);
    color: var(--color-background);
    border-radius: var(--border-radius-full);
    cursor: help;
    vertical-align: middle;
    margin-left: var(--spacing-xs);
}

.help-icon-sm {
    width: 14px;
    height: 14px;
    font-size: 10px;
}

/* --- 85-S. Order Summary Enhancements --- */
.order-summary-pending .kv-value-pending {
    font-style: italic;
    color: var(--color-warning-dark);
}

.order-summary-breakdown {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px dashed var(--color-border-light);
}

.kv-row-muted {
    opacity: 0.7;
}

.kv-row-muted .kv-key,
.kv-row-muted .kv-value {
    font-size: var(--font-size-sm);
}

.order-summary-help {
    margin-top: var(--spacing-md);
    font-size: var(--font-size-sm);
}

.order-summary-help summary {
    cursor: pointer;
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

.order-summary-help summary:hover {
    text-decoration: underline;
}

.order-summary-notes {
    padding-top: var(--spacing-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
}

.order-summary-notes p {
    margin: 0 0 var(--spacing-xs) 0;
}

.order-summary-notes p:last-child {
    margin-bottom: 0;
}

/* --- 85-T. Checkout Timeline Card --- */
.checkout-timeline {
    padding: var(--spacing-md);
}

.checkout-timeline-header {
    margin-bottom: var(--spacing-md);
}

.checkout-timeline-status {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
}

.checkout-timeline-status.status-pending {
    color: var(--color-warning-dark);
}

.checkout-timeline-status.status-ready {
    color: var(--color-success-dark);
}

/* Smaller steps in checkout timeline */
.checkout-timeline .workflow-step {
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.checkout-timeline .workflow-step-number {
    width: 36px;
    height: 36px;
    font-size: var(--font-size-sm);
}

.checkout-timeline .workflow-step-title {
    font-size: var(--font-size-base);
    margin-bottom: 0;
}

.checkout-timeline .workflow-step-description {
    font-size: var(--font-size-sm);
}

.checkout-timeline .workflow-step-content {
    padding-top: var(--spacing-xs);
}

/* Adjust connector line position for smaller circles */
.checkout-timeline .workflow-steps.workflow-connected .workflow-step:not(:last-child)::after {
    left: 17px;
    top: 42px;
}

/* --- 85-U. Task List in Timeline --- */
.taskList {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.task-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
}

.task-item::before {
    content: '○';
    color: var(--color-warning);
    font-size: 10px;
}

.task-item.task-incomplete {
    color: var(--color-text-secondary);
}

/* Task ready state - shows when all requirements are met */
.task-ready {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--color-success-dark);
    font-weight: var(--font-weight-medium);
}

.task-ready::before {
    content: '●';
    color: var(--color-success);
    font-size: 10px;
}

/* --- 85-U2. Checkout Timeline Compact/Expandable --- */

/* Compact step indicators - horizontal row with numbers and labels */
.checkout-timeline-compact {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

/* Hide compact view when details are expanded */
.checkout-timeline:has(.checkout-timeline-details[open]) .checkout-timeline-compact {
    display: none;
}

.compact-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    text-align: center;
}

.compact-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    color: var(--color-text-muted);
    transition: var(--transition-fast);
}

.compact-step-label {
    font-size: 10px;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
}

.compact-step-item.step-current .compact-step-number {
    background: var(--gradient-primary);
    border-color: var(--color-primary);
    color: white;
    box-shadow: var(--shadow-glow-primary-soft);
}

.compact-step-item.step-current .compact-step-label {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.compact-step-item.step-ready .compact-step-number {
    background: var(--color-background);
    border-color: var(--color-success);
    color: var(--color-success);
    border-width: 3px;
}

.compact-step-item.step-ready .compact-step-label {
    color: var(--color-success-dark);
    font-weight: var(--font-weight-semibold);
}

.compact-step-item.step-pending {
    opacity: 0.5;
}

/* Step details disclosure - styled like order-summary-help */
.checkout-timeline-details {
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.checkout-timeline-details summary {
    cursor: pointer;
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.checkout-timeline-details summary::-webkit-details-marker {
    display: none;
}

.checkout-timeline-details summary::before {
    content: '▶';
    font-size: 8px;
    transition: transform var(--duration-fast) var(--ease-out);
}

.checkout-timeline-details[open] summary::before {
    transform: rotate(90deg);
}

.checkout-timeline-details summary:hover {
    text-decoration: underline;
}

.checkout-timeline-details .workflow-steps {
    margin-top: var(--spacing-md);
}

/* Desktop: Keep compact view visible, details toggle available */
@media (min-width: 969px) {
    .checkout-timeline-details .workflow-steps {
        display: flex;
        flex-direction: column;
        margin-top: var(--spacing-sm);
    }
}

/* --- 85-V. Checkout Submit Section --- */
.checkout-submit {
    margin-top: auto;
}

.checkout-submit .sticky-action-bar {
    box-shadow: var(--shadow-card);
    flex-direction:column;
}

#Body .checkout-submit .hud.dialog-status {
    margin-bottom: var(--spacing-sm);
    align-items: center;
    text-align: center;
}

/* --- 85-X. Mobile Checkout Layout Fix --- */
/* Restructures checkout for better mobile UX:
   1. Order summary compact at top (full-width)
   2. Main content sections in logical order
   3. Timeline collapsed/hidden
   4. True fixed footer for submit button */

@media (max-width: 968px) {
    /* Use flexbox with proper ordering and tighter gaps */
    .checkout-layout {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
        padding-bottom: 100px; /* Space for fixed footer */
    }

    /* Sidebar spans full width and sits at top */
    .checkout-sidebar {
        order: 1;
        position: static;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
    }

    /* Main content comes after summary */
    .checkout-main {
        order: 2;
        gap: var(--spacing-md);
    }

    /* Order summary: full-width, compact, subtle background */
    .checkout-sidebar .order-summary {
        width: 100%;
        padding: var(--spacing-md);
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius-md);
    }

    .checkout-sidebar .order-summary-title {
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-semibold);
        margin-bottom: var(--spacing-sm);
    }

    /* Compact timeline on mobile - essential for educating users about meetup flow */
    .checkout-sidebar .checkout-timeline {
        padding: var(--spacing-sm);
        background: var(--gradient-surface-primary);
        border: 1px solid var(--color-border-primary-faint);
        border-radius: var(--border-radius-md);
    }

    .checkout-sidebar .checkout-timeline-header {
        margin-bottom: 0;
        padding: var(--spacing-xs) 0;
    }

    .checkout-sidebar details.checkout-timeline[open] > .checkout-timeline-header {
        margin-bottom: var(--spacing-sm);
        padding-bottom: var(--spacing-sm);
        border-bottom: 1px solid var(--color-border-light);
    }

    .checkout-sidebar .checkout-timeline-status {
        font-size: var(--font-size-sm);
    }

    /* Show toggle icon prominently on mobile */
    .checkout-sidebar .checkout-timeline-toggle {
        width: 28px;
        height: 28px;
        background: var(--color-surface);
        border-radius: var(--border-radius-full);
        color: var(--color-text-secondary);
    }

    /* Mobile: Show compact horizontal step indicators */
    .checkout-sidebar .checkout-timeline-compact {
        gap: var(--spacing-xs);
        margin-top: var(--spacing-sm);
    }

    /* Mobile: Workflow steps shown via details expansion */
    .checkout-sidebar .checkout-timeline .workflow-steps {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .checkout-sidebar .checkout-timeline .workflow-step {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        margin-bottom: 0;
        gap: var(--spacing-sm);
    }

    .checkout-sidebar .checkout-timeline .workflow-step-number {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: var(--font-size-xs);
    }

    .checkout-sidebar .checkout-timeline .workflow-step-content {
        padding: 0;
        flex: 1;
    }

    .checkout-sidebar .checkout-timeline .workflow-step-title {
        font-size: var(--font-size-sm);
        line-height: 1.3;
        margin: 0 0 2px 0;
    }

    .checkout-sidebar .checkout-timeline .workflow-step-description {
        display: block;
        font-size: var(--font-size-xs);
        color: var(--color-text-secondary);
        line-height: 1.4;
    }

    /* Hide connector lines on mobile */
    .checkout-sidebar .checkout-timeline .workflow-steps.workflow-connected .workflow-step:not(:last-child)::after {
        display: none;
    }

    /* Submit button becomes true fixed footer */
    .checkout-sidebar .checkout-submit {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: var(--z-index-fixed);
        margin: 0;
        background: var(--color-background);
    }

    .checkout-sidebar .checkout-submit .sticky-action-bar {
        border-radius: 0;
        border-top: 1px solid var(--color-border);
        box-shadow: 0 -4px 24px rgba(92, 67, 244, 0.08), 0 -2px 8px rgba(0, 0, 0, 0.06);
        padding: var(--spacing-sm) var(--spacing-md);
        padding-bottom: calc(var(--spacing-sm) + env(safe-area-inset-bottom));
    }

    /* Compact breakdown on mobile - hide verbose details */
    .order-summary-breakdown {
        display: none;
    }

    /* Tighter section spacing */
    .checkout-section {
        margin-bottom: 0;
    }

    .checkout-section .detail-section-header {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .checkout-section .detail-section-body {
        padding: var(--spacing-sm) var(--spacing-md);
    }
}

/* --- 85-Y. Mobile Order Summary Compact Mode --- */
@media (max-width: 600px) {
    /* Tighter layout for small screens */
    .checkout-layout {
        padding: var(--spacing-sm);
        padding-bottom: 120px; /* Extra space for stacked footer */
        gap: var(--spacing-sm);
    }

    /* Compact order summary */
    .checkout-sidebar .order-summary {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    /* Smaller text for line items */
    .checkout-sidebar .order-summary .kv-row:not(.kv-row-total) {
        font-size: var(--font-size-sm);
        padding: 2px 0;
    }

    .checkout-sidebar .order-summary .kv-row .kv-key,
    .checkout-sidebar .order-summary .kv-row .kv-value {
        font-size: var(--font-size-sm);
    }

    /* Emphasize total row */
    .checkout-sidebar .order-summary .kv-row-total {
        margin-top: var(--spacing-xs);
        padding-top: var(--spacing-sm);
    }

    .checkout-sidebar .order-summary .kv-row-total .kv-value {
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-bold);
        color: var(--color-text);
    }

    /* Compact checkout sections */
    .checkout-section {
        border-radius: var(--border-radius-md);
    }

    /* Tighter main content gap */
    .checkout-main {
        gap: var(--spacing-sm);
    }

    /* Stack footer vertically on small screens */
    .checkout-sidebar .checkout-submit .sticky-action-bar {
        flex-direction: column;
        gap: var(--spacing-xs);
        text-align: center;
    }


    .checkout-sidebar .checkout-submit .action-bar-actions {
        width: 100%;
        justify-content: center;
    }

    .checkout-sidebar .checkout-submit .action-bar-actions .btn {
        width: 100%;
        justify-content: center;
        padding: var(--spacing-sm) var(--spacing-lg);
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-semibold);
    }

    /* Compact cart strip */
    .checkout-cart-strip {
        gap: var(--spacing-xs);
    }

    /* Compact location and meetup cards */
    .checkout-location-card,
    .checkout-meetup-card .state-surface {
        padding: var(--spacing-sm) !important;
    }

    .checkout-meetup-card {
        margin-top: var(--spacing-sm);
    }

    /* Ultra-compact timeline for small screens */
    .checkout-sidebar .checkout-timeline {
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    /* Keep header visible but more compact - needed for expand/collapse */
    .checkout-sidebar .checkout-timeline-header {
        padding: var(--spacing-xs) 0;
    }

    .checkout-sidebar .checkout-timeline-status {
        font-size: var(--font-size-xs);
    }

    /* Smaller compact steps for small screens */
    .checkout-sidebar .checkout-timeline-compact {
        gap: 2px;
    }

    .compact-step-number {
        width: 22px;
        height: 22px;
        font-size: 9px;
    }

    .compact-step-label {
        font-size: 9px;
    }

    /* Smaller workflow steps for small screens */
    .checkout-sidebar .checkout-timeline .workflow-step-number {
        width: 24px;
        height: 24px;
        min-width: 24px;
        font-size: 10px;
    }

    .checkout-sidebar .checkout-timeline .workflow-step-title {
        font-size: var(--font-size-xs);
    }

    .checkout-sidebar .checkout-timeline .workflow-step-description {
        font-size: 10px;
    }
}

/* --- 85-Z0. Order Confirmation Mobile Overrides --- */
/* Confirmation reuses checkout classes but needs different mobile behavior:
   - Content first (items, location, payment), summary second
   - No fixed submit footer, so no padding compensation
   - Payment breakdown visible (it's the final receipt)
   - Action buttons naturally at the bottom (in sidebar, which is now order:2) */

@media (max-width: 968px) {
    .viewOrderConfirmation .checkout-layout {
        padding-bottom: var(--spacing-lg);
    }

    /* Reverse the checkout mobile order: content first, summary second */
    .viewOrderConfirmation .checkout-main {
        order: 1;
    }

    .viewOrderConfirmation .checkout-sidebar {
        order: 2;
    }

    /* Show payment breakdown on confirmation (hidden on checkout mobile) */
    .viewOrderConfirmation .order-summary-breakdown {
        display: block;
    }
}

@media (max-width: 600px) {
    .viewOrderConfirmation .checkout-layout {
        padding-bottom: var(--spacing-md);
    }

    /* Center action buttons on mobile */
    .viewOrderConfirmation .checkout-sidebar .section.actions {
        align-items: center;
    }
}

/* --- 85-Z1. Highlight Required Animation --- */
/* Used when user clicks submit with incomplete fields */
@keyframes highlight-glow {
    0% {
        box-shadow: 0 0 0 0 rgba(92, 67, 244, 0.3), var(--shadow-card);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(92, 67, 244, 0.15), var(--shadow-card);
    }
    100% {
        box-shadow: 0 0 0 2px rgba(92, 67, 244, 0.1), var(--shadow-card);
    }
}

.highlight-required {
    animation: highlight-glow 0.8s var(--ease-elegant) forwards;
    border-color: var(--color-primary) !important;
}

/* Checkout section specific highlight */
.checkout-section.highlight-required {
    border-color: var(--color-primary) !important;
}

/* Completion card highlight */
.checkout-completion-card.highlight-required .state-surface {
    border-color: var(--color-primary) !important;
    animation: highlight-glow 0.8s var(--ease-elegant) forwards;
}

/* --- 85-Z2. Optional: Collapsible Order Summary --- */
/* Add [data-collapsed] attribute via JS for collapsible summary */
.order-summary[data-collapsed] .order-summary-details,
.order-summary[data-collapsed] .order-summary-breakdown {
    display: none;
}

.order-summary[data-collapsed] .order-summary-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.order-summary[data-collapsed] .order-summary-title::after {
    content: '';
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%235c43f4'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-size: contain;
    transition: transform 0.2s ease;
}

.order-summary[data-collapsed][data-expanded] .order-summary-title::after {
    transform: rotate(180deg);
}

.order-summary[data-collapsed][data-expanded] .order-summary-details {
    display: block;
}

/* --- 85-W. Status Icon Colors --- */
.icon-check-success {
    width: 18px;
    height: 18px;
    background-image: url(/images/icon/check-primary.svg);
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
}

/* Clock icon for meetup time */
.checkout-meetup-card .icon-clock {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-image: url(/images/icon/clock-primary.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

/* ==========================================================================
   SECTION 86: FOOTERS & STICKY ACTION BARS
   ==========================================================================
   Page-level sticky action bars for checkout, auth, and form pages.
   Parallels headers (Section 6) with multiple footer variants.

   Hierarchy:
   - #Ftr_Main / .site-footer — Site-level footer (application.css)
   - .sticky-action-bar — Page-level sticky action bar (this section)
   - .commands-sticky — Dialog-level sticky bar (Section 7)

   Demo: wwwroot/components/footers.html
   ========================================================================== */

/* --- 86-A. Sticky Action Bar --- */
.sticky-action-bar {
    position: sticky;
    bottom: 0;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    padding-bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom));
    box-shadow: var(--shadow-card);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-lg);
    z-index: var(--z-index-sticky);
}

/* --- 86-E. Action Bar Actions (Right Side) --- */
.sticky-action-bar .action-bar-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

/* --- 86-F. Mobile Responsive --- */
@media (max-width: 600px) {
    .sticky-action-bar {
        padding: var(--spacing-sm) var(--spacing-md);
        padding-bottom: calc(var(--spacing-sm) + env(safe-area-inset-bottom));
    }

    .sticky-action-bar .action-bar-actions {
        width: 100%;
        justify-content: stretch;
    }

    .sticky-action-bar .action-bar-actions .btn {
        flex: 1;
    }
}

/* --- 86-G. Site Footer --- */
.site-footer {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: var(--spacing-lg) var(--spacing-xl);
    text-align: center;
}

.site-footer .copyright {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0 0 var(--spacing-sm) 0;
}

.site-footer .copyright .name {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.site-footer .footer-links {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.site-footer .footer-links a {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.site-footer .footer-links a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* ==========================================================================
   SECTION 87: SETTINGS LAYOUT
   ==========================================================================

   Account settings pages with horizontal card strips for organized display.

   Structure:
   - .settings-board          → Section container (header + cards)
   - .settings-cards          → Horizontal scrolling card strip
   - .settings-card           → Individual setting card
   - .settings-values         → Key-value display inside cards
   - .settings-empty          → Empty state with CTA
   - .plan-card               → Subscription plan comparison
   - .schedule-table          → Meetup schedule display

   For first-time setup onboarding, REUSE Section 51 patterns:
   - .onboarding + .welcome-hero for intro screens
   - .how-it-works + .steps for benefit cards
   - .onboarding-tip for contextual tips
   - .checklist for setup prerequisites

   Demo: settings.html
   ========================================================================== */

/* 87-A. Settings Board — Section Container
   ========================================================================== */

/* Settings panel content container (for use in modules, not dialogs) */
.settings-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.settings-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--spacing-lg);
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 600px) {
    .settings-scroll {
        padding: var(--spacing-sm);
    }
}

/* Page-level warm canvas */
.settings-page,
[page-name="Account"] .content {
    background: var(--gradient-canvas-settings);
    min-height: 100vh;
    position: relative;
}

/* Subtle texture overlay for depth */
.settings-page::before,
[page-name="Account"] .content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 20%, var(--color-primary-bg-light) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(0, 255, 203, 0.02) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Ensure content sits above the texture */
.settings-page > *,
[page-name="Account"] .content > * {
    position: relative;
    z-index: 1;
}

.settings-board {
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-lg) var(--spacing-xl);
    background: var(--color-section-glass);
    border-radius: var(--border-radius-xl);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

@media (max-width: 600px) {
    .settings-board {
        padding: var(--spacing-md) var(--spacing-md);
        border-radius: var(--border-radius-lg);
    }
}

.settings-board-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    /* Gradient underline */
    background-image: linear-gradient(
        to right,
        var(--color-primary-border-soft),
        var(--color-border-primary-light) 50%,
        rgba(0, 255, 203, 0.08) 80%,
        transparent
    );
    background-size: 100% 2px;
    background-position: bottom left;
    background-repeat: no-repeat;
}

.settings-board-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-warm);
    margin: 0;
    letter-spacing: -0.02em;
}

.settings-board-command {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    cursor: pointer;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    transition: var(--transition-fast);
}

.settings-board-command:hover {
    color: var(--color-primary-dark);
    background: var(--color-primary-hover-bg);
    transform: translateY(-1px);
}

.settings-board-help {
    color: var(--color-text-warm-body);
    font-size: var(--font-size-sm);
    line-height: 1.75;
    margin-bottom: var(--spacing-lg);
    max-width: 680px;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--gradient-tint-primary);
    border-radius: var(--border-radius-sm);
}

.settings-board-help p {
    margin: 0 0 var(--spacing-xs);
}

.settings-board-help p:last-child {
    margin-bottom: 0;
}

.settings-board-help p:first-child {
    color: var(--color-text-warm-medium);
    font-weight: var(--font-weight-medium);
}

/* 87-B. Settings Cards — Horizontal Scrolling Strip
   ========================================================================== */

.settings-cards {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--spacing-md);
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    padding-right: var(--spacing-lg);
}

.settings-cards::-webkit-scrollbar {
    display: none;
}

/* Right-edge fade when scrollable — matches filter-track pattern */
.settings-cards[ux-scrollcontent-hz]:not([ux-scrollcontent-hz-end]) {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 60px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 60px), transparent 100%);
}

/* Remove mask when scrolled to end */
.settings-cards[ux-scrollcontent-hz-end] {
    -webkit-mask-image: none;
    mask-image: none;
}

/* 87-C. Settings Card — Individual Card
   ========================================================================== */

.settings-card {
    flex-shrink: 0;
    min-width: 280px;
    max-width: 340px;
    background: var(--gradient-card-base);
    border: 1px solid var(--color-border-primary-faint);
    border-radius: var(--border-radius-card);
    scroll-snap-align: start;
    box-shadow: var(--shadow-card);
    transition: var(--transition-card);
    overflow: hidden;
    padding: var(--spacing-sm);
}

@media (max-width: 600px) {
    .settings-card {
        min-width: calc(100% - 40px);
        max-width: calc(100% - 40px);
    }
}

.settings-card:hover {
    border-color: var(--color-border-primary-subtle);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-3px);
}

/* Empty state — inviting marketplace-style invitation card */
.settings-card[ux-empty] {
    border: 2px dashed var(--color-primary-border-soft);
    background: var(--gradient-card-hover);
    box-shadow: inset 0 0 20px var(--color-primary-bg-light);
    position: relative;
}

/* Subtle shimmer hint on empty cards */
.settings-card[ux-empty]::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: var(--gradient-shimmer);
    animation: shimmer 3s ease-in-out infinite;
    animation-delay: 1s;
}

.settings-card[ux-empty]:hover {
    border-color: var(--color-primary);
    background: var(--gradient-surface-primary);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}

.settings-card[ux-empty]:hover::after {
    animation: none;
}

/* Needs action — amber warning with subtle glow */
.settings-card[ux-needs-action] {
    border-color: var(--color-warning);
    background: var(--gradient-tint-warning);
    box-shadow: var(--shadow-card), var(--shadow-outline-primary);
}

.settings-card[ux-needs-action]:hover {
    box-shadow: var(--shadow-card-hover), 0 0 0 1px var(--color-warning-light);
}

/* Double-wide card variant — for cards with more content like Primary Location */
.settings-card.primarylocation-card,
.settings-card.settings-card-wide {
    min-width: 400px;
    max-width: 500px;
}

@media (max-width: 600px) {
    .settings-card.primarylocation-card,
    .settings-card.settings-card-wide {
        min-width: calc(100% - 40px);
        max-width: calc(100% - 40px);
    }
}

.settings-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--gradient-surface-primary);
    border-bottom: 1px solid var(--color-border-primary-faint);
}

.settings-card-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Icon in card title */
.settings-card-title .icon {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    opacity: 0.7;
    flex-shrink: 0;
}

.settings-card-action {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    cursor: pointer;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    transition: var(--transition-fast);
}

.settings-card-action:hover {
    background: var(--color-primary-hover-bg);
    transform: translateY(-1px);
}

.settings-card-body {
    padding: var(--spacing-sm) var(--spacing-md);
}

/* Toggle visibility of values vs empty state based on ux-empty attribute */
.settings-card:not([ux-empty]) .settings-empty,
.settings-card:not([ux-empty]) .tasks {
    display: none;
}

.settings-card[ux-empty] .settings-values {
    display: none;
}

/* 87-D. Settings Values — Key-Value Display
   ========================================================================== */

.settings-values {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.settings-value-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--spacing-xs);
    padding: 2px 0;
    flex-direction:column;
}

/* Subtle separator between rows */
.settings-value-row + .settings-value-row {
    border-top: 1px solid var(--color-border-primary-faint);
    padding-top: var(--spacing-xs);
}

.settings-key {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-body);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.settings-key .icon {
    opacity: 0.7;
}

.settings-value {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm);
    text-align: left;
    word-break: break-word;
    font-weight: var(--font-weight-medium);
}

/* Highlight modifier for important values */
.settings-value.highlight {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

/* Warning modifier for attention-needed values */
.settings-value-row.warning .settings-key,
.settings-value-row.warning .settings-value {
    color: var(--color-warning-dark, #b45309);
}

/* Image values (avatar, banner preview) */
.settings-value.settings-value-image {
    text-align: center;
}

.settings-value.settings-value-image img {
    max-width: 100%;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
}

/* 87-E. Settings Empty State
   ========================================================================== */

.settings-empty {
    text-align: center;
    padding: var(--spacing-sm) var(--spacing-md);
}

.settings-empty-text,
.settings-empty-prompt .options {
    color: var(--color-text-warm-muted);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    margin-bottom: var(--spacing-sm);
    font-style: italic;
}

.settings-empty-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    cursor: pointer;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-md);
    background: var(--color-primary-lighter);
    transition: var(--transition-fast);
}

.settings-empty-cta:hover {
    color: var(--color-primary-dark);
    background: var(--color-primary-light);
    transform: translateY(-1px);
    box-shadow: var(--shadow-focus-ring-sm);
}

/* Settings empty prompt (legacy compatibility) */
.settings-empty-prompt {
    text-align: center;
    padding: var(--spacing-xs) 0;
}

.settings-empty-prompt + .settings-empty-prompt {
    border-top: 1px solid var(--color-border-primary-faint);
    margin-top: var(--spacing-xs);
    padding-top: var(--spacing-sm);
}

/* 87-F. Plan Cards — Subscription Comparison
   ========================================================================== */

.plan-cards {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--spacing-md);
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    padding: var(--spacing-sm) 0 var(--spacing-md);
    padding-right: var(--spacing-lg);
}

/* Right-edge fade when scrollable */
.plan-cards[ux-scrollcontent-hz]:not([ux-scrollcontent-hz-end]) {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 60px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 60px), transparent 100%);
}

.plan-cards[ux-scrollcontent-hz-end] {
    -webkit-mask-image: none;
    mask-image: none;
}

.plan-card {
    flex-shrink: 0;
    min-width: 260px;
    max-width: initial;
    background: var(--gradient-card-base);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-card);
    padding: var(--spacing-lg);
    scroll-snap-align: start;
    box-shadow: var(--shadow-card);
    transition: var(--transition-card);
    position: relative;
}

@media (max-width: 600px) {
    .plan-card {
        min-width: calc(100% - 40px);
        max-width: calc(100% - 40px);
    }
}

.plan-card:hover {
    border-color: var(--color-border-primary-subtle);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-3px);
}

/* Current plan highlight — violet tint */
.plan-card.plan-card-current {
    border-color: var(--color-primary);
    background: var(--gradient-surface-primary-strong);
    box-shadow: var(--shadow-ambient-primary);
}

/* Popular plan highlight — success glow */
.plan-card.plan-card-popular {
    border-color: var(--color-success);
    background:
        linear-gradient(
            160deg,
            rgba(34, 197, 94, 0.03) 0%,
            var(--color-background) 100%
        );
}

/* Badge (Most Popular / Current Plan) */
.plan-card .plan-badge {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.5px;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    background: var(--color-success);
    color: white; 
    align-self:center;  
}

.plan-card .plan-badge.plan-badge-current {
    background: var(--color-primary);
}

.plan-card-header {
    text-align: center;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    /* Gradient divider */
    background-image: linear-gradient(
        to right,
        transparent,
        var(--color-border-primary-light),
        transparent
    );
    background-size: 100% 1px;
    background-position: bottom center;
    background-repeat: no-repeat;
}

.plan-card-name {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
    margin: 0 0 var(--spacing-xs);
    letter-spacing: -0.01em;
}

.plan-card-price {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.plan-card-features {
    margin-bottom: var(--spacing-lg);
}

.plan-feature {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-sm) 0;
    font-size: var(--font-size-sm);
    border-bottom: 1px solid var(--color-border-primary-faint);
    gap: var(--spacing-sm);
}

@media (max-width: 600px) {
    .plan-feature {
        flex-direction: column;
        gap: 2px;
    }
}

.plan-feature:last-child {
    border-bottom: none;
}

.plan-feature-name {
    color: var(--color-text-warm-muted);
}

.plan-feature-value {
    color: var(--color-text-warm);
    font-weight: var(--font-weight-semibold);
}

.plan-card-actions {
    text-align: center;
    padding-top: var(--spacing-sm);
}


/* 87-F2. Promotion Cards & Badge Collection — Plan page
   ========================================================================== */

/* Active promotion card — subtle success tint */
.card.promotion-active {
    background: linear-gradient(160deg, rgba(34, 197, 94, 0.03) 0%, var(--color-background) 100%);
    border-color: rgba(34, 197, 94, 0.15);
}

.card.promotion-active .settings-card-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.card.promotion-active .status-badge {
    margin-left: auto;
}

.promotion-end-date {
    color: var(--color-text-warm-muted);
    font-size: var(--font-size-sm);
}

.promotion-revert-notice {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-primary-bg-subtle);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-body);
    line-height: 1.5;
}

/* Pending promotion card — celebration treatment */
.card.promotion-pending {
    padding: var(--spacing-lg);
}

.card.promotion-pending .celebration-context {
    padding: var(--spacing-md) 0;
}

.card.promotion-pending .celebration-number {
    margin: var(--spacing-xs) 0;
}

/* Badge collection */
.badge-collection {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 0;
}

.badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
    min-width: 100px;
    max-width: 140px;
    text-align: center;
    cursor: default;
}

.badge-item-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--color-primary);
    background: var(--color-primary-bg-subtle);
    border-radius: var(--border-radius-full);
    transition: var(--transition-lift);
}

.badge-item:hover .badge-item-icon {
    background: var(--color-primary-lighter);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow-primary-soft);
}

.badge-item-name {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-warm-body);
    line-height: 1.3;
}

.badge-item.badge-pinned .badge-item-icon {
    background: var(--color-primary-lighter);
    border: 1px solid var(--color-border-primary-subtle);
}

/* Badge celebration toast */
.badge-toast-container {
    position: fixed;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    pointer-events: none;
}

.badge-toast {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-background);
    border: 1px solid var(--color-border-primary-subtle);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-celebration-card);
    pointer-events: auto;
    max-width: 360px;
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.5s var(--ease-elegant), opacity 0.3s var(--ease-out);
}

.badge-toast.badge-toast-visible {
    transform: translateX(0);
    opacity: 1;
}

.badge-toast.badge-toast-exit {
    transform: translateX(120%);
    opacity: 0;
}

.badge-toast-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--color-primary);
    background: var(--gradient-badge-achievement);
    border-radius: var(--border-radius-full);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.badge-toast-icon .icon-svg {
    -webkit-text-fill-color: initial;
    background: var(--color-primary-lighter);
    color: var(--color-primary);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-full);
    font-size: 18px;
}

.badge-toast-content {
    flex: 1;
    min-width: 0;
}

.badge-toast-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm-heading);
    line-height: 1.3;
}

.badge-toast-message {
    font-size: var(--font-size-xs);
    color: var(--color-text-warm-muted);
    line-height: 1.4;
    margin-top: 2px;
}

/* 87-G. Schedule Table — Meetup Availability
   ========================================================================== */

.schedule-table {
    width: 100%;
    background: var(--gradient-card-base);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.schedule-day {
    border-bottom: 1px solid var(--color-border-primary-faint);
    transition: var(--transition-fast);
}

.schedule-day:last-child {
    border-bottom: none;
}

.schedule-day:hover {
    background: var(--color-primary-bg-subtle);
}

/* Unavailable day — muted */
.schedule-day[data-empty] {
    opacity: 0.5;
    background: var(--color-surface-subtle);
}

.schedule-day[data-empty]:hover {
    background: var(--color-surface-subtle);
}

.schedule-row {
    display: grid;
    grid-template-columns: 60px 1fr 1fr auto;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    align-items: center;
}

.schedule-label {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
    font-size: var(--font-size-sm);
}

.schedule-time {
    color: var(--color-text-warm-muted);
    font-size: var(--font-size-sm);
}

.schedule-actions {
    display: flex;
    gap: var(--spacing-xs);
}

/* 87-H. Location Notes & Callouts — Info Blocks
   ========================================================================== */

.location-notes,
.callout {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    margin-top: var(--spacing-md);
}

/* Info callout - violet/teal gradient (default) */
.location-notes,
.callout.callout-info {
    background: var(--gradient-card-hover);
    border: 1px solid var(--color-border-primary-light);
    box-shadow: var(--shadow-xs);
}

.primarylocation-card .callout.callout-warning {
    flex-direction:row;
}

/* Warning callout - warm amber */
.callout.callout-warning {
    background: var(--gradient-tint-warning);
    border: 1px solid var(--color-warning-light);
    box-shadow: var(--shadow-xs);
    flex-direction:column;
}

.location-notes .note-icon,
.callout-icon {
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-full);
}

/* Info icon styling */
.location-notes .note-icon,
.callout.callout-info .callout-icon {
    background-color: var(--color-primary-lighter);
    color: var(--color-primary);
}

/* Warning icon styling */
.callout.callout-warning .callout-icon {
    background-color: var(--color-warning-light);
    color: var(--color-warning-dark);
}

.callout-icon .icon,
.callout-icon .icon-svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
}

/* Ensure icon-svg inside callouts preserves its background-image */
.location-notes .note-icon .icon-svg,
.callout-icon .icon-svg {
    background-color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.location-notes .note-text,
.callout-content {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-body);
    line-height: 1.5;
    flex: 1;
}

.location-notes .note-text p,
.callout-content p {
    margin: 0 0 var(--spacing-sm);
}

.location-notes .note-text p:last-child,
.callout-content p:last-child {
    margin-bottom: 0;
}

.location-notes .note-text p strong,
.callout-content p strong {
    color: var(--color-text-warm);
    font-weight: var(--font-weight-semibold);
}

/* Warning callout text emphasis */
.callout.callout-warning .callout-content p strong {
    color: var(--color-warning-dark);
}

.location-notes .note-text ul,
.callout-content ul {
    margin: var(--spacing-sm) 0 0;
    padding-left: 0;
}

/* Custom violet list bullets */
.location-notes .note-text li,
.callout-content li {
    margin-bottom: var(--spacing-xs);
    position: relative;
}

.location-notes .note-text li::marker,
.callout-content li::marker {
    color: var(--color-primary-border-medium);
}

.location-notes .note-text li:last-child,
.callout-content li:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   SECTION 88: CONTEXT MENU / NAVIGATION MENU
   ==========================================================================

   Drawer-style navigation menus for context actions. Used in dialogs that
   present contextual options (cart items, variants, stock families, user menu).

   These are "clean" kebab-case classes intended as dual-class additions
   alongside existing legacy selectors (.navigationBar, .navItem, .navLink).

   Structure:
   - .context-menu              → Menu container (clean class for .navigationBar)
   - .menu-nav                  → Navigation list (clean class for ul.navigation)
   - .menu-item                 → List item wrapper (clean class for li.navItem)
   - .menu-link                 → Clickable link area (clean class for .navLink)
   - .menu-icon                 → Icon container
   - .menu-label                → Primary label text
   - .menu-description          → Secondary description text
   - .menu-divider              → Separator between groups (clean class for .separator)
   - .menu-section-header       → Group header (clean class for .sectionHeader)
   - .menu-danger               → Destructive action styling

   Legacy selectors (still supported):
   - .navigationBar             → Menu container
   - .navigation                → ul navigation list
   - .navItem                   → li item
   - .navLink                   → Clickable link
   - .separator                 → Divider
   - .sectionHeader             → Section header
   - .danger                    → Destructive styling

   Demo: dialogs.html (Context Menu section)
   ========================================================================== */

/* 88-A. Context Menu Container
   ========================================================================== */

.context-menu,
.navigationBar {
    padding: var(--spacing-sm) 0;
}

/* Inside dialog menus, add visual separation between sections */
.dialog-menu .navigationBar {
    margin-bottom: var(--spacing-xs);
    padding-top: 0;
    padding-bottom: var(--spacing-xs);
    display: flex;
    flex-direction: column;
}

.dialog-menu .navigationBar:last-of-type {
    margin-bottom: 0;
}

/* 88-B. Navigation List
   ========================================================================== */

.menu-nav,
.navigationBar .navigation {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 88-C. Menu Item
   ========================================================================== */

.menu-item,
.navigationBar .navItem {
    margin: 0;
    padding: 0;
}

/* 88-D. Menu Link — The Interactive Element
   ========================================================================== */

.menu-link,
.navigationBar .navLink {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    min-height: 44px; /* Mobile touch target */
    cursor: pointer;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    text-decoration: none;
    color: var(--color-text);
    transition: var(--transition-card);
    position: relative;
}

/* Warm hover state with violet tint and subtle lift */
.menu-link:hover,
.navigationBar .navLink:hover {
    background: linear-gradient(
        90deg,
        rgba(92, 67, 244, 0.06) 0%,
        rgba(92, 67, 244, 0.02) 100%
    );
    transform: translateX(4px);
}

/* Focused/active state */
.menu-link:focus,
.menu-link:active,
.navigationBar .navLink:focus,
.navigationBar .navLink:active {
    outline: none;
    background: linear-gradient(
        90deg,
        rgba(92, 67, 244, 0.08) 0%,
        rgba(92, 67, 244, 0.03) 100%
    );
}

/* Focus visible ring for keyboard navigation */
.menu-link:focus-visible,
.navigationBar .navLink:focus-visible {
    box-shadow: inset 0 0 0 2px var(--color-primary-light);
}

/* 88-E. Menu Icon
   ========================================================================== */

.menu-icon,
.navigationBar .navLink .icon {
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    transition: var(--transition-colors);
    margin-top: 2px; /* Align with first line of text */
}

/* Icon hover — violet tint */
.menu-link:hover .menu-icon,
.navigationBar .navLink:hover .icon {
    color: var(--color-primary);
}

/* 88-F. Menu Label — Primary Text
   ========================================================================== */

.menu-label,
.navigationBar .navLink .label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-warm);
    line-height: 1.3;
    transition: var(--transition-colors);
}

/* Label hover — slightly darker */
.menu-link:hover .menu-label,
.navigationBar .navLink:hover .label {
    color: var(--color-primary-dark);
}

/* 88-G. Menu Description — Secondary Text
   ========================================================================== */

.menu-description,
.navigationBar .navLink .description {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
    line-height: 1.4;
    margin-top: 2px;
}

/* Text container for label + description stacked */
.menu-link-text,
.navigationBar .navLink .navText,
.navigationBar .navLink > div:not(.icon) {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0; /* Allow text truncation */
}

/* 88-G2. Menu Status Badge
   Right-aligned status indicator (e.g., "Changes pending")
   ========================================================================== */

.menu-status {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-warning-text);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-warning-light);
    border-radius: var(--border-radius-full);
    line-height: 1.2;
}

/* Primary menu item with status gets tighter layout */
.menu-link.primary {
    gap: var(--spacing-sm);
}

.menu-link.primary .menu-label {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

/* 88-H. Menu Divider — Gradient Fade Separator
   ========================================================================== */

.menu-divider,
.navigationBar .navItem.separator {
    height: 1px;
    margin: var(--spacing-sm) var(--spacing-lg);
    border: none;
    /* Gradient fade — violet to teal to transparent */
    background: linear-gradient(
        to right,
        rgba(92, 67, 244, 0.15),
        rgba(0, 255, 203, 0.08) 60%,
        transparent
    );
}

/* Hide any text in separator items */
.menu-divider *,
.navigationBar .navItem.separator * {
    display: none;
}

/* 88-I. Menu Section Header
   ========================================================================== */

.menu-section-header,
.navigationBar .sectionHeader {
    padding: var(--spacing-md) var(--spacing-lg) var(--spacing-sm);
    /* Warm background with subtle gradient */
    background: linear-gradient(
        180deg,
        var(--color-surface-light) 0%,
        transparent 100%
    );
}

/* Section header h4 — sentence case, warm color */
.menu-section-header h4,
.navigationBar .sectionHeader h4 {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm-medium);
    text-transform: none;
    letter-spacing: -0.01em;
}

/* First section header — no top padding needed */
.menu-item:first-child .menu-section-header,
.navigationBar .navItem:first-child .sectionHeader,
.navigationBar > .sectionHeader:first-child {
    padding-top: var(--spacing-sm);
}

/* 88-I-2. Menu Section Header Light — Subtle inline headers
   ========================================================================== */

.menu-section-header-light,
.navigationBar .menu-section-header-light.navItem {
    padding: var(--spacing-sm) var(--spacing-lg);
    margin-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border-light);
}

.menu-section-header-light .section-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* First light header — no top border/margin needed */
.menu-section-header-light:first-child {
    border-top: none;
    margin-top: 0;
}

/* 88-J. Menu Danger State — Destructive Actions
   ========================================================================== */

.menu-link.menu-danger,
.menu-link.danger,
.navigationBar .navLink.danger,
.navigationBar .navLink.btn-danger {
    color: var(--color-error);
}

.menu-link.menu-danger .menu-icon,
.menu-link.danger .icon,
.navigationBar .navLink.danger .icon,
.navigationBar .navLink.btn-danger .icon {
    color: var(--color-error);
}

.menu-link.menu-danger .menu-label,
.menu-link.danger .label,
.navigationBar .navLink.danger .label,
.navigationBar .navLink.btn-danger .label {
    color: var(--color-error);
}

.menu-link.menu-danger .menu-description,
.menu-link.danger .description,
.navigationBar .navLink.danger .description,
.navigationBar .navLink.btn-danger .description {
    color: var(--color-error-light-solid);
}

/* Danger hover — red gradient tint */
.menu-link.menu-danger:hover,
.menu-link.danger:hover,
.navigationBar .navLink.danger:hover,
.navigationBar .navLink.btn-danger:hover {
    background: linear-gradient(
        90deg,
        rgba(239, 68, 68, 0.08) 0%,
        rgba(239, 68, 68, 0.02) 100%
    );
}

.menu-link.menu-danger:hover .menu-label,
.menu-link.danger:hover .label,
.navigationBar .navLink.danger:hover .label,
.navigationBar .navLink.btn-danger:hover .label {
    color: var(--color-error-dark);
}

/* 88-K. Menu Disabled State
   ========================================================================== */

.menu-link.disabled,
.menu-link[disabled],
.navigationBar .navLink.disabled,
.navigationBar .navLink[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* 88-L. Menu Badge/Count — Optional Accessory
   ========================================================================== */

.menu-badge {
    margin-left: auto;
    padding: 2px var(--spacing-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    background: var(--color-primary-lighter);
    border-radius: var(--border-radius-full);
}

/* 88-M. Menu Chevron — Navigation Indicator
   ========================================================================== */

.menu-chevron {
    margin-left: auto;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    transition: var(--transition-fast);
}

.menu-link:hover .menu-chevron,
.navigationBar .navLink:hover .menu-chevron {
    color: var(--color-primary);
    transform: translateX(2px);
}

/* 88-N. User Info Header — For User Options Menu
   ========================================================================== */

.menu-user-info,
.navigationBar .userInfo {
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
    /* Warm gradient background */
    background: linear-gradient(
        135deg,
        rgba(92, 67, 244, 0.04) 0%,
        rgba(0, 255, 203, 0.02) 100%
    );
    border-bottom: 1px solid var(--color-border-primary-faint);
}

/* Authenticated user — horizontal layout with avatar + details */
.menu-user-current,
.navigationBar .userInfo .currentUser {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.menu-user-avatar,
.navigationBar .userInfo .avatar {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: var(--border-radius-full);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: 2px solid var(--color-border-primary-subtle);
    transition: var(--transition-card);
}

.menu-user-avatar:hover,
.navigationBar .userInfo .avatar:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-primary);
}

.menu-user-avatar img,
.navigationBar .userInfo .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.menu-user-details,
.navigationBar .userInfo .userDetails {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.menu-user-name,
.navigationBar .userInfo .username {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
    line-height: 1.3;
}

.menu-user-role,
.menu-user-slug,
.navigationBar .userInfo .userRole {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
}

/* Anonymous user — sign-in prompt layout */
.menu-sign-in-prompt,
.navigationBar .userInfo .signInPrompt {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
}

.menu-sign-in-icon,
.navigationBar .userInfo .signInPrompt .card-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-surface-primary);
    border-radius: var(--border-radius-full);
    color: var(--color-primary);
}

.menu-sign-in-details,
.navigationBar .userInfo .signInPrompt .promptDetails {
    flex: 1;
    min-width: 0;
}

.menu-sign-in-title,
.navigationBar .userInfo .signInPrompt .title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
    margin-bottom: 4px;
}

.menu-sign-in-description,
.navigationBar .userInfo .signInPrompt .description {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
    line-height: 1.5;
    margin-bottom: var(--spacing-md);
}

.menu-sign-in-action,
.navigationBar .userInfo .signInAction {
    margin-top: var(--spacing-sm);
}

/* 88-O. Item Info Header — For Context Dialogs
   ========================================================================== */

.menu-item-info,
.navigationBar .variantInfo,
.navigationBar .familyInfo,
.navigationBar .itemInfo {
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
    background: var(--gradient-surface-primary);
    border-bottom: 1px solid var(--color-border-primary-faint);
}

/* Item header inner content - horizontal layout with photo + info */
.item-header,
.itemHeader {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

/* Item photo thumbnail */
.item-header .item-photo,
.itemHeader .photo {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.item-header .item-photo img,
.itemHeader .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Item info text container */
.item-header .item-info,
.itemHeader .info {
    flex: 1;
    min-width: 0;
}

/* Caption - product/item name */
.item-header .item-caption,
.itemHeader .caption {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Subcaption - variant details, pricing, etc. */
.item-header .item-subcaption,
.itemHeader .subcaption {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
    line-height: 1.4;
    margin-top: 2px;
}

.item-header .item-subcaption .value,
.itemHeader .subcaption .value {
    color: var(--color-text-warm);
}

/* Subcaption pricing elements (for cart items) */
.itemHeader .subcaption .quantity,
.itemHeader .subcaption .price,
.itemHeader .subcaption .total {
    font-weight: var(--font-weight-medium);
}

.itemHeader .subcaption .total {
    color: var(--color-primary);
}

/* Variant selection containers that live outside navigationBar */
.variantSelection,
.itemSelection,
.variant-selection {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--gradient-surface-primary);
    border-bottom: 1px solid var(--color-border-primary-faint);
}

.variantSelection:empty,
.itemSelection:empty,
.variant-selection:empty {
    display: none;
}

/* Family selection containers - similar to variant selection but for family context */
.familySelection,
.family-selection {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--gradient-surface-primary);
    border-bottom: 1px solid var(--color-border-primary-faint);
}

.familySelection:empty,
.family-selection:empty {
    display: none;
}

/* Family header inner content - horizontal layout with photo + info (larger than item header) */
.family-header-content,
.familyHeader {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

/* Family photo thumbnail - larger than item photo */
.family-header-content .family-photo,
.familyHeader .family-photo {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

.family-header-content .family-photo img,
.familyHeader .family-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.family-header-content .family-photo .no-photo,
.familyHeader .family-photo .no-photo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    color: var(--color-text-muted);
    background: var(--color-surface);
}

/* Family info text container */
.family-header-content .family-info,
.familyHeader .family-info {
    flex: 1;
    min-width: 0;
}

/* Family title - product/family name */
.family-header-content .family-title,
.familyHeader .family-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
    line-height: 1.3;
    margin: 0 0 4px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align:left;
}

/* Family meta - variant count, price range, etc. */
.family-header-content .family-meta,
.familyHeader .family-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
}

/* 88-P. Dark Mode Overrides
   ========================================================================== */

[data-theme="dark"] .menu-link:hover,
[data-theme="dark"] .navigationBar .navLink:hover {
    background: linear-gradient(
        90deg,
        rgba(168, 148, 255, 0.1) 0%,
        rgba(168, 148, 255, 0.03) 100%
    );
}

[data-theme="dark"] .menu-link:focus,
[data-theme="dark"] .menu-link:active,
[data-theme="dark"] .navigationBar .navLink:focus,
[data-theme="dark"] .navigationBar .navLink:active {
    background: linear-gradient(
        90deg,
        rgba(168, 148, 255, 0.12) 0%,
        rgba(168, 148, 255, 0.04) 100%
    );
}

[data-theme="dark"] .menu-section-header,
[data-theme="dark"] .navigationBar .sectionHeader {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.03) 0%,
        transparent 100%
    );
}

[data-theme="dark"] .menu-divider,
[data-theme="dark"] .navigationBar .navItem.separator {
    background: linear-gradient(
        to right,
        rgba(168, 148, 255, 0.2),
        rgba(0, 255, 203, 0.1) 60%,
        transparent
    );
}

[data-theme="dark"] .menu-user-info,
[data-theme="dark"] .navigationBar .userInfo {
    background: linear-gradient(
        135deg,
        rgba(168, 148, 255, 0.08) 0%,
        rgba(0, 255, 203, 0.04) 100%
    );
}

[data-theme="dark"] .menu-link.menu-danger:hover,
[data-theme="dark"] .menu-link.danger:hover,
[data-theme="dark"] .navigationBar .navLink.danger:hover,
[data-theme="dark"] .navigationBar .navLink.btn-danger:hover {
    background: linear-gradient(
        90deg,
        rgba(248, 113, 113, 0.12) 0%,
        rgba(248, 113, 113, 0.04) 100%
    );
}

/* 88-Q. Mobile Responsive Adjustments
   ========================================================================== */

@media (max-width: 760px) {
    .menu-link,
    .navigationBar .navLink {
        padding: var(--spacing-md);
        min-height: 52px; /* Larger touch target on mobile */
    }

    .menu-icon,
    .navigationBar .navLink .icon {
        width: var(--icon-size-xl);
        height: var(--icon-size-xl);
    }

    .menu-divider,
    .navigationBar .navItem.separator {
        margin: var(--spacing-sm) var(--spacing-md);
    }
}


/* ==========================================================================
   IMAGE LOADER TRANSITIONS
   ==========================================================================
   Smooth fade-in transitions for dynamically loaded images.
   Images with loader attribute start transparent and fade in when loaded.
   ========================================================================== */

/* Default image loading state */
#Body img[loader][src="/images/loader.svg"] {
    /* 1. Fix the size while loading */
    width: 30px !important;
    height: 30px !important;
    /* 2. Position it relative to parent */
    position: relative;
    top: 50%;
    left: 50%;
    /* 3. The "Secret Sauce" to center it perfectly */
    transform: translate(-50%, -50%);
    /* 4. Cleanup */
    display: block;
    object-fit: contain;
}

/* Smooth fade-in animation for loaded images */
@keyframes imageFadeIn {
    from {
        opacity: 0;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* When image finishes loading (JS removes loader attr and adds loaded class) */
#Body img.loaded {
    animation: imageFadeIn 0.35s var(--ease-elegant) forwards;
}

/* Exclude rollover secondary images from fade animation - they need opacity:0 by default */
#Body [image-rollover] a img.loaded:not(:first-child) {
    animation: none;
    opacity: 0;
}

/* Exclude zoomed gallery images - animation's scale(1) overrides zoom transform */
#Body [data-gallery-zoom="active"] img.loaded {
    animation: none;
    opacity: 1;
}

/* Variant thumbnail images - smooth loading */
.variant-block-thumb img[loader] {
    opacity: 0.3;
}

.variant-block-thumb img.loaded,
.variant-block-thumb img:not([loader]) {
    opacity: 1;
    transition: opacity 0.3s var(--ease-elegant);
}

/* Gallery images - graceful loading */
.photo-gallery img[loader] {
    opacity: 0;
}

.photo-gallery img.loaded {
    animation: imageFadeIn 0.4s var(--ease-elegant) forwards;
}

/* Product card images - subtle fade */
.product-card img[loader],
.result-card img[loader] {
    opacity: 0;
}

.product-card img.loaded,
.result-card img.loaded,
.product-card img:not([loader]),
.result-card img:not([loader]) {
    opacity: 1;
    transition: opacity 0.3s var(--ease-elegant);
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
    #Body img.loaded {
        animation: none;
        opacity: 1;
    }

    .photo-gallery img.loaded {
        animation: none;
        opacity: 1;
    }
}

/* =============================================================================
   83. View_AttributeList - Attribute Editor Dialog
   Minimal overrides - relies on generic .form-panel, .chip, .toggle-* patterns
   ============================================================================= */

/* Variant selection header - shows which variant is being edited */
#View_AttributeList .variantSelection {
    padding: var(--spacing-sm) var(--spacing-lg);
    background-color: var(--color-primary-bg-tint);
    border-bottom: 1px solid var(--color-primary);
}

#View_AttributeList .variantSelection:empty {
    display: none;
}

/* Variant section accent */
#View_AttributeList .variant-section .form-section-header {
    background-color: var(--color-primary-bg-tint);
}

#View_AttributeList .variant-section .form-section-title {
    color: var(--color-primary);
}

/* Attribute group headers - sentence case per style guide */
#View_AttributeList .attribute-group .group-header {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm-muted);
    background-color: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border-light);
}

/* Attribute row layout - label + control + toggle */
#View_AttributeList .attribute-row {
    display: flex;
    align-items: flex-start;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-border-light);
    gap: var(--spacing-md);
}

#View_AttributeList .attribute-row:last-child {
    border-bottom: none;
}

/* Override floating label for static display */
#View_AttributeList .attribute-row .form-label {
    position: static;
    transform: none;
    opacity: 1;
    font-size: var(--font-size-sm);
}

/* Toggle positioning */
#View_AttributeList .option-toggle {
    margin-left: auto;
    flex-shrink: 0;
}

/* State: varying row highlight */
#View_AttributeList .attribute-row.is-varying {
    background-color: var(--color-warning-bg-tint);
}

/* State: pending changes - subtle gradient per style guide (no thick colored borders) */
#View_AttributeList .attribute-row[data-pending] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.04) 0%, var(--color-background) 100%);
}

/* State: saved indicator */
#View_AttributeList .attribute-row[data-saved] .scope-indicator::before {
    content: '✓ ';
    color: var(--color-success);
}

/* Hide toggle for single variant or readonly */
#View_AttributeList .attribute-row[data-readonly] .option-toggle,
#View_AttributeList[data-single-variant] .option-toggle {
    display: none;
}

/* Responsive */
@media only screen and (max-width: 600px) {
    #View_AttributeList .attribute-row {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    #View_AttributeList .option-toggle {
        margin-left: 0;
    }
}

/* Animation */
@keyframes dialogSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ==========================================================================
   PAYMENT FORM DIALOG
   ==========================================================================
   Styles for credit card payment forms with multi-step wizard.
   Follows "Precision Craft" design: clean geometry, subtle depth, smooth motion.

   Supports:
   - Two-step form flow (card details → billing address)
   - Step indicator with connecting line
   - Password reveal on sensitive fields
   - Mobile responsive layout
   ========================================================================== */

/* --- Enhanced Step Indicator for Payment Dialog --- */
#Dlg_PaymentMethod .step-indicator {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    margin: 0;
    background: var(--gradient-surface-primary);
    border-bottom: 1px solid var(--color-border);
}

/* Connecting line between dots - centered on the dots (32px height) */
#Dlg_PaymentMethod .step-indicator::before {
    content: '';
    position: absolute;
    /* Center on dots: padding-top (--spacing-md ~12px) + half dot height (16px) = ~28px from top */
    top: calc(var(--spacing-md) + 16px);
    left: calc(var(--spacing-lg) + 32px); /* Start after first dot */
    width: var(--spacing-md); /* Just the gap between dots */
    height: 2px;
    background: var(--color-border-medium);
    z-index: 0;
    transition: background-color 0.4s var(--ease-elegant);
}

/* Fill connecting line when first step is done */
#Dlg_PaymentMethod[ux-state="address"] .step-indicator::before {
    background: var(--color-success);
}

#Dlg_PaymentMethod .step-indicator-dot {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    background: var(--color-surface);
    border: 2px solid var(--color-border-medium);
    transition: all 0.35s var(--ease-elegant);
}

#Dlg_PaymentMethod .step-indicator-dot.step-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    transform: scale(1.08);
    box-shadow: var(--shadow-button);
}

#Dlg_PaymentMethod .step-indicator-dot.step-done {
    background: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-white);
}

/* Checkmark for done state */
#Dlg_PaymentMethod .step-indicator-dot.step-done::after {
    content: '✓';
    position: absolute;
    font-size: 14px;
    font-weight: bold;
}

#Dlg_PaymentMethod .step-indicator-label {
    flex: 1;
    text-align: right;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-warm-body);
    transition: color 0.3s var(--ease-elegant);
}

/* --- Form Field Layout --- */
.form-field {
    margin-bottom: var(--spacing-md);
}

.form-field:last-child {
    margin-bottom: 0;
}

/* --- Inline Field Validation Error States ---
   Fields with validation-error attribute show inline error styling.
   This supplements the HUD by highlighting which specific fields need attention.
   ========================================================================== */
.form-field[validation-error] .form-input,
.form-field[validation-error] .form-select,
.form-field[validation-error] .form-textarea {
    border-color: var(--color-error);
    background-color: rgba(var(--color-error-rgb, 239, 68, 68), 0.02);
}

.form-field[validation-error] .form-input:focus,
.form-field[validation-error] .form-select:focus,
.form-field[validation-error] .form-textarea:focus {
    box-shadow: 0 0 0 3px rgba(var(--color-error-rgb, 239, 68, 68), 0.12);
}

.form-field[validation-error] .form-label {
    color: var(--color-error);
}

/* Inline error message below field */
.form-field-error {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-error);
    line-height: 1.3;
}

.form-field-error::before {
    content: '';
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    background-image: url(/images/icon/alert-circle-red.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

/* Hide form-help when error is showing (error replaces hint) */
.form-field[validation-error] .form-help {
    display: none;
}

/* Multi-column form rows */
.form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.form-row-inline {
    display: flex;
    gap: var(--spacing-sm);
}

.form-row-inline > * {
    flex: 1;
}

/* Static positioned label (above input, not floating) */
.form-label-static {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-warm-body);
    margin-bottom: var(--spacing-xs);
}

/* Form help text - hints below inputs */
.form-help {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--spacing-xs);
    line-height: var(--line-height-tight);
}

/* --- Input with Icon (Password Reveal) --- */
.input-with-icon {
    position: relative;
}

.input-with-icon .form-input {
    padding-right: 44px;
}

.input-icon-action {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-sm);
    background: transparent;
    cursor: pointer;
    transition: var(--transition-fast);
    color: var(--color-text-muted);
}

.input-icon-action:hover {
    background: var(--color-surface-darkened);
    color: var(--color-text);
}

.input-icon-action:active {
    transform: translateY(-50%) scale(0.95);
}

.input-icon-action svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.5;
}

/* Active state when password is revealed */
.textbox[form-unmasked] .input-icon-action {
    color: var(--color-primary);
}

.textbox[form-unmasked] .input-icon-action svg {
    stroke: var(--color-primary);
}

/* --- Payment Dialog Body Enhancements ---
   Form content should fit without scrolling on desktop.
   Only scroll on very small viewports where content truly overflows.
   ========================================================================== */
#Dlg_PaymentMethod .dialog-body {
    padding: var(--spacing-lg);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#Dlg_PaymentMethod .dialog-scroll {
    padding: 0;
    flex: 1 1 auto;
    overflow: visible; /* Don't force scroll - let content size naturally */
    min-height: min-content; /* Ensure content fits */
}

/* Only scroll when viewport is too small */
@media (max-height: 600px) {
    #Dlg_PaymentMethod .dialog-scroll {
        overflow: hidden auto;
    }
}

#Dlg_PaymentMethod .dialog-subtitle {
    margin: 0 0 var(--spacing-md) 0;
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-warm-body);
    font-size: var(--font-size-sm);
}

/* Select wrapper styling for expiration dropdowns */
#Dlg_PaymentMethod .form-select-wrap {
    flex: 1;
    min-width: 0;
}

#Dlg_PaymentMethod .form-select {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-sm) center;
    padding-right: calc(var(--spacing-sm) * 2 + 12px);
    transition: var(--transition-fast);
}

#Dlg_PaymentMethod .form-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus-ring);
}

#Dlg_PaymentMethod .form-select:hover:not(:focus) {
    border-color: var(--color-border-medium);
}

/* --- Payment Dialog Footer --- */
#Dlg_PaymentMethod .dialog-footer {
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    gap: var(--spacing-sm);
}

#Dlg_PaymentMethod .dialog-footer .btn-primary {
    flex: 0 1 auto;
    max-width: 320px;
    width: 100%;
    justify-content: center;
}

#Dlg_PaymentMethod .dialog-footer .btn-ghost {
    flex: 0 0 auto;
    min-width: 80px;
}

/* Expiration + CVV row: expiration gets more space, CVV is narrow */
#Dlg_PaymentMethod .form-row-expiration-cvv {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--spacing-md);
    align-items: start;
}

#Dlg_PaymentMethod .form-field-cvv {
    width: 110px;
    flex-shrink: 0;
}

#Dlg_PaymentMethod .form-field-cvv .form-input {
    text-align: center;
    letter-spacing: 0.15em;
    font-family: var(--font-mono, monospace);
}

/* Stripe Elements mount points — match .form-input appearance */
.stripe-element {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.stripe-element.StripeElement--focus {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus-ring);
}

.stripe-element.StripeElement--invalid {
    border-color: var(--color-error, #dc3545);
}

.stripe-element-sm {
    max-width: 110px;
}

/* Tighter form field spacing for payment form */
#Dlg_PaymentMethod .form-field {
    margin-bottom: var(--spacing-sm);
}

#Dlg_PaymentMethod .form-field:last-child {
    margin-bottom: 0;
}

/* --- State-based visibility (JS handles display, CSS adds transitions) --- */
#Dlg_PaymentMethod > .content {
    animation: fadeInUp 0.35s var(--ease-elegant) forwards;
}

#Dlg_PaymentMethod[ux-state="card"] > .content.card { display: flex; }
#Dlg_PaymentMethod[ux-state="card"] > .content.address { display: none; }
#Dlg_PaymentMethod[ux-state="address"] > .content.card { display: none; }
#Dlg_PaymentMethod[ux-state="address"] > .content.address { display: flex; }

/* --- Mobile Responsive --- */
@media (max-width: 480px) {
    #Dlg_PaymentMethod .step-indicator {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm) var(--spacing-md);
    }

    #Dlg_PaymentMethod .step-indicator::before {
        left: calc(50% - 30px);
        width: 60px;
    }

    #Dlg_PaymentMethod .step-indicator-label {
        flex-basis: 100%;
        text-align: center;
        margin-top: var(--spacing-xs);
    }

    .form-row-2col {
        grid-template-columns: 1fr;
    }

    /* Mobile: stack expiration and CVV */
    #Dlg_PaymentMethod .form-row-expiration-cvv {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    #Dlg_PaymentMethod .form-field-cvv {
        width: 100%;
        max-width: 140px;
    }

    #Dlg_PaymentMethod .dialog-body {
        padding: var(--spacing-md);
    }

    #Dlg_PaymentMethod .dialog-footer {
        flex-direction: column;
    }

    #Dlg_PaymentMethod .dialog-footer .btn-ghost {
        width: 100%;
        order: 1;
    }

    #Dlg_PaymentMethod .dialog-footer .btn-primary {
        order: 0;
    }
}

/* --- Reduced motion support --- */
@media (prefers-reduced-motion: reduce) {
    #Dlg_PaymentMethod > .content {
        animation: none;
    }

    #Dlg_PaymentMethod .step-indicator-dot,
    #Dlg_PaymentMethod .step-indicator::before {
        transition: none;
    }
}

/* ==========================================================================
   PAYMENT METHOD CARD LIST
   ==========================================================================
   Styles for payment method selection list (View_PaymentMethod).
   Follows selection-card pattern with credit card-specific enhancements.

   Features:
   - Card type icons (Visa, Mastercard, Amex, Discover)
   - Selection state with primary glow
   - Staggered animation on load
   - Add new card action button
   ========================================================================== */

/* --- Payment Method List Container --- */
.payment-method-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) 0;
}

/* Empty state — handled by onboarding section, hide list when empty */
.payment-method-list[ux-empty] {
    display: none;
}

/* --- Payment Method Empty/Onboarding State --- */
.payment-method-empty .onboarding {
    margin: 0;
    box-shadow: none;
    background: var(--gradient-surface-branded);
}

.payment-method-empty .hero-cta .command {
    gap: var(--spacing-xs);
    display: inline-flex;
    align-items: center;
}

.payment-method-empty .hero-cta .icon-svg {
    --icon-size: 18px;
}

/* --- Payment Card (Selection Card Variant) --- */
.payment-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-background);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: all 0.25s var(--ease-elegant);
    position: relative;
    overflow: hidden;
}

/* Diagonal accent overlay on hover */
.payment-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-diagonal-accent);
    opacity: 0;
    transition: opacity 0.3s var(--ease-elegant);
    pointer-events: none;
}

.payment-card:hover {
    border-color: var(--color-primary-muted);
    background: var(--color-surface);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}

.payment-card:hover::before {
    opacity: 1;
}

.payment-card:focus {
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

/* Focus without selected - just show focus ring, not purple border */
.payment-card:focus:not(.selected) {
    border-color: var(--color-border-medium);
}

/* Focus with selected - keep purple border and add focus ring */
.payment-card.selected:focus {
    box-shadow: var(--shadow-focus-ring), 0 0 0 1px var(--color-primary-muted), var(--shadow-ambient-primary);
}

/* Active state for keyboard navigation (Forms.List) - distinct from selected */
.payment-card.active:not(.selected) {
    border-color: var(--color-primary-light);
    background: var(--color-surface-hover);
}

.payment-card.active.selected {
    /* Already has selected styling, just ensure it's visible */
}

.payment-card:active {
    transform: translateY(0);
}

/* Selected state */
.payment-card.selected {
    border-color: var(--color-primary);
    background: var(--color-primary-lighter);
    box-shadow: 0 0 0 1px var(--color-primary-muted),
                var(--shadow-ambient-primary);
}

.payment-card.selected::before {
    opacity: 1;
}

/* --- Card Type Icon --- */
.payment-card-icon {
    flex-shrink: 0;
    width: 48px;
    height: 32px;
    background-color: var(--color-surface);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--color-border);
    transition: border-color 0.2s var(--ease-elegant);
}

/* Card type icons - using SVG for crisp rendering */
.payment-card[card-type="visa"] .payment-card-icon,
.payment-card[card-type="Visa"] .payment-card-icon {
    background-image: url('/images/icon/card-visa.svg');
}

.payment-card[card-type="mastercard"] .payment-card-icon,
.payment-card[card-type="Mastercard"] .payment-card-icon,
.payment-card[card-type="MasterCard"] .payment-card-icon {
    background-image: url('/images/icon/card-mastercard.svg');
}

.payment-card[card-type="amex"] .payment-card-icon,
.payment-card[card-type="Amex"] .payment-card-icon,
.payment-card[card-type="American Express"] .payment-card-icon {
    background-image: url('/images/icon/card-amex.svg');
}

.payment-card[card-type="discover"] .payment-card-icon,
.payment-card[card-type="Discover"] .payment-card-icon {
    background-image: url('/images/icon/card-discover.svg');
}

/* Fallback for unknown card types */
.payment-card[card-type="unknown"] .payment-card-icon,
.payment-card:not([card-type]) .payment-card-icon {
    background-image: url('/images/icon/card-generic.svg');
}

.payment-card.selected .payment-card-icon {
    border-color: var(--color-primary-muted);
}

/* --- Card Info --- */
.payment-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.payment-card-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.payment-card-number {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-warm-body);
    font-family: var(--font-family-mono);
    letter-spacing: 0.02em;
}

.payment-card-expires {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* --- Selection Indicator (Radio) --- */
.payment-card .selection-indicator {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-card .selection-indicator input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--color-primary);
    cursor: pointer;
    margin: 0;
}

/* Custom radio styling for more control */
.payment-card .selection-indicator input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border-medium);
    border-radius: 50%;
    background: var(--color-background);
    transition: all 0.2s var(--ease-elegant);
    position: relative;
}

.payment-card .selection-indicator input[type="radio"]:checked {
    border-color: var(--color-primary);
    background: var(--color-primary);
}

.payment-card .selection-indicator input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: var(--color-white);
    border-radius: 50%;
}

.payment-card:hover .selection-indicator input[type="radio"] {
    border-color: var(--color-primary-muted);
}

/* --- Add New Card Button --- */
.payment-add-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    border: 2px dashed var(--color-border);
    border-radius: var(--border-radius-md);
    background: transparent;
    cursor: pointer;
    transition: all 0.25s var(--ease-elegant);
    color: var(--color-text-muted);
    margin-top: var(--spacing-xs);
}

.payment-add-card:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-lighter);
    color: var(--color-primary);
    transform: translateY(-1px);
}

.payment-add-card:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus-ring);
}

.payment-add-card:active {
    transform: translateY(0);
}

.payment-add-card .add-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-surface);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-light);
    line-height: 1;
    transition: all 0.2s var(--ease-elegant);
}

.payment-add-card:hover .add-icon {
    background: var(--color-primary);
    color: var(--color-white);
}

.payment-add-card .add-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

/* --- Staggered Animation --- */
.payment-card.animate-in {
    animation: paymentCardSlideIn 0.4s var(--ease-elegant) forwards;
    opacity: 0;
}

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

/* Animation delays set via JS (style.animationDelay) */

/* --- View_PaymentMethod Dialog Specifics --- */
#View_PaymentMethod .dialog-body {
    padding: var(--spacing-md) var(--spacing-lg);
}

#View_PaymentMethod .dialog-scroll {
    padding: 0;
}

#View_PaymentMethod .dialog-subtitle {
    margin: 0 0 var(--spacing-md);
    color: var(--color-text-warm-muted);
}

/* --- Mobile Responsive --- */
@media (max-width: 480px) {
    .payment-card {
        padding: var(--spacing-sm) var(--spacing-md);
        gap: var(--spacing-sm);
    }

    .payment-card-icon {
        width: 40px;
        height: 26px;
    }

    .payment-card-name {
        font-size: var(--font-size-sm);
    }

    .payment-card-number {
        font-size: var(--font-size-xs);
    }

    .payment-add-card {
        padding: var(--spacing-md);
    }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    .payment-card,
    .payment-add-card {
        transition: none;
    }

    .payment-card.animate-in {
        animation: none;
        opacity: 1;
    }
}

/* ==========================================================================
   SALES ANALYTICS DIALOG
   ==========================================================================
   View_SalesAnalytics - Main seller sales dashboard dialog
   Presented via DialogViewBehavior, backdrop handled by body[ux-modal]
   ========================================================================== */

#View_SalesAnalytics.view.dialog {
    background: var(--color-background);
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-xl);
    max-width: calc(100dvw - 40px);
    max-height: calc(100dvh - 40px);
    width: 100%;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-border-primary-subtle);
}

#View_SalesAnalytics.view.dialog[ux-view-active] {
    display: flex;
}

#View_SalesAnalytics .dialog-header {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white;
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

#View_SalesAnalytics .dialog-header .dialog-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: white;
    margin: 0;
    flex: 1;
}

#View_SalesAnalytics .dialog-header .dialog-subtitle {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

#View_SalesAnalytics .dialog-header .dialog-header-text {
    flex: 1;
    min-width: 0;
}

#View_SalesAnalytics .dialog-header .dialog-close {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
    flex-shrink: 0;
}

#View_SalesAnalytics .dialog-header .dialog-close:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

#View_SalesAnalytics .dialog-header .dialog-close .icon-svg.icon-close {
    width: 16px;
    height: 16px;
    background-image: url("/images/icon/close-white.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#View_SalesAnalytics .dialog-body {
    flex: 1;
    overflow-y: auto;
    background: var(--color-surface);
    padding: var(--spacing-lg);
}

#View_SalesAnalytics .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-background);
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
}

#View_SalesAnalytics #Container_SalesDashboard {
    height: 100%;
}

#View_SalesAnalytics #Mod_SalesDashboard {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
}

#View_SalesAnalytics .earnings-notice {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, var(--color-background) 100%);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: var(--border-radius-card);
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

#View_SalesAnalytics .earnings-notice .notice-content {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
}

#View_SalesAnalytics .earnings-notice .notice-icon {
    font-size: 24px;
    flex-shrink: 0;
}

#View_SalesAnalytics .earnings-notice .notice-text strong {
    display: block;
    color: var(--color-text-warm);
    font-size: var(--font-size-md);
    margin-bottom: var(--spacing-xs);
}

#View_SalesAnalytics .earnings-notice .notice-text p {
    color: var(--color-text-warm-body);
    font-size: var(--font-size-sm);
    margin: 0;
    line-height: 1.5;
}

#View_SalesAnalytics .metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--spacing-md);
}

#View_SalesAnalytics .metric-card-hero {
    grid-column: span 1;
    background: var(--gradient-surface-branded);
    border-color: var(--color-border-primary-subtle);
    position: relative;
    overflow: hidden;
}

#View_SalesAnalytics .metric-card-hero::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle at top right, rgba(92, 67, 244, 0.1), transparent 70%);
    pointer-events: none;
}

#View_SalesAnalytics .metric-value-hero {
    font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
    color: var(--color-primary) !important;
}

#View_SalesAnalytics .metric-subtitle {
    font-size: var(--font-size-xs);
    color: var(--color-text-warm-muted);
    margin-top: var(--spacing-xs);
}

#View_SalesAnalytics .metric-card {
    background: var(--gradient-card-base);
    border-radius: var(--border-radius-card);
    padding: var(--spacing-lg);
    border: 1px solid var(--color-border);
    transition: var(--transition-card);
    text-align: center;
}

#View_SalesAnalytics .metric-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-border-primary-subtle);
}

#View_SalesAnalytics .metric-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

#View_SalesAnalytics .metric-icon.icon-svg {
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

#View_SalesAnalytics .metric-icon.icon-cash-stack {
    background-image: url("/images/icon/cash-stack-primary.svg");
}

#View_SalesAnalytics .metric-icon.icon-hand-cash {
    background-image: url("/images/icon/hand-cash-primary.svg");
}

#View_SalesAnalytics .metric-icon.icon-package {
    background-image: url("/images/icon/package-primary.svg");
}

#View_SalesAnalytics .metric-icon.icon-graph {
    background-image: url("/images/icon/graph-primary.svg");
}

#View_SalesAnalytics .metric-icon.icon-bag {
    background-image: url("/images/icon/bag-primary.svg");
}

#View_SalesAnalytics .metric-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm-muted);
    margin: 0;
}

#View_SalesAnalytics .metric-value {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-warm);
    margin: 0;
    line-height: 1.2;
}

#View_SalesAnalytics .sales-summary-metrics {
    background: var(--color-background);
    border-radius: var(--border-radius-card);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-card);
    margin-bottom: var(--spacing-lg);
}

#View_SalesAnalytics .sales-filter-interface {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

#View_SalesAnalytics .date-range-tabs .tab-container {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

#View_SalesAnalytics .date-tab.smart-tab {
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-warm-body);
    transition: var(--transition-fast);
}

#View_SalesAnalytics .date-tab.smart-tab:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-bg-subtle);
}

#View_SalesAnalytics .date-tab.smart-tab.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

#View_SalesAnalytics .date-tab.smart-tab.active .tab-text {
    color: white;
}

#View_SalesAnalytics .current-range-display {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
}

#View_SalesAnalytics .current-range-display .range-value {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

#View_SalesAnalytics .sales-charts-section {
    margin-top: var(--spacing-lg);
}

#View_SalesAnalytics .charts-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-lg);
}

#View_SalesAnalytics .chart-panel.card {
    background: var(--color-background);
    border-radius: var(--border-radius-card);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

#View_SalesAnalytics .chart-header.card-header {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

#View_SalesAnalytics .chart-title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm-medium);
    margin: 0;
}

#View_SalesAnalytics .chart-container.card-body {
    padding: var(--spacing-md);
    min-height: 280px;
}

#View_SalesAnalytics .chart-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 250px;
    color: var(--color-text-warm-muted);
    gap: var(--spacing-md);
}

#View_SalesAnalytics .chart-placeholder .placeholder-icon {
    font-size: 48px;
    opacity: 0.5;
}

#View_SalesAnalytics .sales-empty-state {
    display: none;
    text-align: center;
    padding: var(--spacing-xl);
}

#View_SalesAnalytics .empty-state-content {
    max-width: 400px;
    margin: 0 auto;
}

#View_SalesAnalytics .empty-hero {
    margin-bottom: var(--spacing-xl);
}

#View_SalesAnalytics .empty-hero .empty-icon {
    font-size: 64px;
    margin-bottom: var(--spacing-md);
    opacity: 0.6;
}

#View_SalesAnalytics .empty-hero h3 {
    color: var(--color-text-warm);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-sm);
}

#View_SalesAnalytics .empty-hero p {
    color: var(--color-text-warm-muted);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

#View_SalesAnalytics .dialog-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: var(--spacing-lg);
}

#View_SalesAnalytics .dialog-loading .loader {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

#View_SalesAnalytics .notice-error .notice-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-md);
    padding: var(--spacing-xl);
}

@media (max-width: 900px) {
    #View_SalesAnalytics .charts-grid {
        grid-template-columns: 1fr;
    }
    #View_SalesAnalytics .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    #View_SalesAnalytics .metrics-grid {
        grid-template-columns: 1fr;
    }
    #View_SalesAnalytics .date-range-tabs .tab-container {
        width: 100%;
        justify-content: center;
    }
    #View_SalesAnalytics .sales-filter-interface {
        flex-direction: column;
        align-items: stretch;
    }
}


/* ==========================================================================
   LISTING ANALYTICS DIALOG
   ==========================================================================
   Dlg_ListingAnalytics - Per-listing analytics dialog
   Mirrors View_SalesAnalytics styles for consistency
   ========================================================================== */

#Dlg_ListingAnalytics.view.dialog {
    background: var(--color-background);
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-xl);
    max-width: calc(100dvw - 40px);
    max-height: calc(100dvh - 40px);
    width: 100%;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-border-primary-subtle);
}

#Dlg_ListingAnalytics.view.dialog[ux-view-active] {
    display: flex;
}

#Dlg_ListingAnalytics .dialog-header {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white;
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

#Dlg_ListingAnalytics .dialog-header .dialog-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: white;
    margin: 0;
    flex: 1;
}

#Dlg_ListingAnalytics .dialog-header .dialog-subtitle {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

#Dlg_ListingAnalytics .dialog-header .dialog-header-text {
    flex: 1;
    min-width: 0;
}

#Dlg_ListingAnalytics .dialog-header .dialog-close {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
    flex-shrink: 0;
}

#Dlg_ListingAnalytics .dialog-header .dialog-close:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

#Dlg_ListingAnalytics .dialog-header .dialog-close .icon-svg.icon-close {
    width: 16px;
    height: 16px;
    background-image: url("/images/icon/close-white.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#Dlg_ListingAnalytics .dialog-body {
    flex: 1;
    overflow-y: auto;
    background: var(--color-surface);
    padding: var(--spacing-lg);
}

#Dlg_ListingAnalytics .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-background);
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
}

#Dlg_ListingAnalytics .sales-dashboard-container {
    height: 100%;
}
#Content_ListingAnalytics {
    flex-direction: column;
}


#Dlg_ListingAnalytics .metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--spacing-md);
}

#Dlg_ListingAnalytics .metric-card-hero {
    grid-column: span 1;
    background: var(--gradient-surface-branded);
    border-color: var(--color-border-primary-subtle);
    position: relative;
    overflow: hidden;
}

#Dlg_ListingAnalytics .metric-card-hero::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle at top right, rgba(92, 67, 244, 0.1), transparent 70%);
    pointer-events: none;
}

#Dlg_ListingAnalytics .metric-value-hero {
    font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
    color: var(--color-primary) !important;
}

#Dlg_ListingAnalytics .metric-subtitle {
    font-size: var(--font-size-xs);
    color: var(--color-text-warm-muted);
    margin-top: var(--spacing-xs);
}

#Dlg_ListingAnalytics .metric-card {
    background: var(--gradient-card-base);
    border-radius: var(--border-radius-card);
    padding: var(--spacing-lg);
    border: 1px solid var(--color-border);
    transition: var(--transition-card);
    text-align: center;
}

#Dlg_ListingAnalytics .metric-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-border-primary-subtle);
}

#Dlg_ListingAnalytics .metric-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

#Dlg_ListingAnalytics .metric-icon.icon-svg {
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

#Dlg_ListingAnalytics .metric-icon.icon-cash-stack {
    background-image: url("/images/icon/cash-stack-primary.svg");
}

#Dlg_ListingAnalytics .metric-icon.icon-hand-cash {
    background-image: url("/images/icon/hand-cash-primary.svg");
}

#Dlg_ListingAnalytics .metric-icon.icon-package {
    background-image: url("/images/icon/package-primary.svg");
}

#Dlg_ListingAnalytics .metric-icon.icon-graph {
    background-image: url("/images/icon/graph-primary.svg");
}

#Dlg_ListingAnalytics .metric-icon.icon-bag {
    background-image: url("/images/icon/bag-primary.svg");
}

#Dlg_ListingAnalytics .metric-icon.icon-heart {
    background-image: url("/images/icon/bookmark-primary.svg");
}

#Dlg_ListingAnalytics .metric-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm-muted);
    margin: 0;
}

#Dlg_ListingAnalytics .metric-value {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-warm);
    margin: 0;
    line-height: 1.2;
}

#Dlg_ListingAnalytics .sales-summary-metrics {
    background: var(--color-background);
    border-radius: var(--border-radius-card);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-card);
    margin-bottom: var(--spacing-lg);
}

#Dlg_ListingAnalytics .sales-filter-interface {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

#Dlg_ListingAnalytics .date-range-tabs .tab-container {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

#Dlg_ListingAnalytics .date-tab.smart-tab {
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-warm-body);
    transition: var(--transition-fast);
}

#Dlg_ListingAnalytics .date-tab.smart-tab:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-bg-subtle);
}

#Dlg_ListingAnalytics .date-tab.smart-tab.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

#Dlg_ListingAnalytics .date-tab.smart-tab.active .tab-text {
    color: white;
}

#Dlg_ListingAnalytics .current-range-display {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
}

#Dlg_ListingAnalytics .current-range-display .range-value {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

#Dlg_ListingAnalytics .sales-charts-section {
    margin-top: var(--spacing-lg);
}

#Dlg_ListingAnalytics .charts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}

#Dlg_ListingAnalytics .chart-panel.card {
    background: var(--color-background);
    border-radius: var(--border-radius-card);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

#Dlg_ListingAnalytics .chart-header.card-header {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

#Dlg_ListingAnalytics .chart-title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm-medium);
    margin: 0;
}

#Dlg_ListingAnalytics .chart-container.card-body {
    padding: var(--spacing-md);
    min-height: 200px;
}

#Dlg_ListingAnalytics .chart-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 180px;
    color: var(--color-text-warm-muted);
    gap: var(--spacing-md);
}

#Dlg_ListingAnalytics .chart-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--color-text-warm-muted);
    text-align: center;
    gap: var(--spacing-sm);
}

#Dlg_ListingAnalytics .chart-empty-state .empty-icon {
    font-size: 48px;
    opacity: 0.5;
    margin-bottom: var(--spacing-sm);
}

#Dlg_ListingAnalytics .chart-empty-state p {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-warm-medium);
    margin: 0;
}

#Dlg_ListingAnalytics .chart-empty-state .empty-hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
}

#Dlg_ListingAnalytics .chart-canvas-wrapper {
    position: relative;
    width: 100%;
}

#Dlg_ListingAnalytics .chart-canvas-wrapper canvas {
    width: 100% !important;
    height: auto !important;
    max-height: 200px;
}

#Dlg_ListingAnalytics .sales-empty-state {
    display: none;
    text-align: center;
    padding: var(--spacing-xl);
}

#Dlg_ListingAnalytics .empty-state-content {
    max-width: 400px;
    margin: 0 auto;
}

#Dlg_ListingAnalytics .empty-hero {
    margin-bottom: var(--spacing-xl);
}

#Dlg_ListingAnalytics .empty-hero .empty-icon {
    font-size: 64px;
    margin-bottom: var(--spacing-md);
    opacity: 0.6;
}

#Dlg_ListingAnalytics .empty-hero h3 {
    color: var(--color-text-warm);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-sm);
}

#Dlg_ListingAnalytics .empty-hero p {
    color: var(--color-text-warm-muted);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

#Dlg_ListingAnalytics .hud.dialog-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: var(--spacing-lg);
}

#Dlg_ListingAnalytics .hud.dialog-status .loader {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

#Dlg_ListingAnalytics .notice-error .notice-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-md);
    padding: var(--spacing-xl);
}

#Dlg_ListingAnalytics .variants-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

#Dlg_ListingAnalytics .variant-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-surface);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--color-border);
}

#Dlg_ListingAnalytics .variant-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

#Dlg_ListingAnalytics .variant-name {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-warm);
}

#Dlg_ListingAnalytics .variant-sku {
    font-size: var(--font-size-xs);
    color: var(--color-text-warm-muted);
}

#Dlg_ListingAnalytics .variant-stats {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

#Dlg_ListingAnalytics .stat-value {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
}

#Dlg_ListingAnalytics .stat-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-warm-muted);
    margin-left: var(--spacing-xs);
}

#Dlg_ListingAnalytics .section-header {
    margin-bottom: var(--spacing-md);
}

#Dlg_ListingAnalytics .section-title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm-medium);
    margin: 0;
}

@media (max-width: 600px) {
    #Dlg_ListingAnalytics .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    #Dlg_ListingAnalytics .date-range-tabs .tab-container {
        width: 100%;
        justify-content: center;
    }
    #Dlg_ListingAnalytics .sales-filter-interface {
        flex-direction: column;
        align-items: stretch;
    }
    #Dlg_ListingAnalytics .variant-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
}


/* ==========================================================================
   Section 73: Collection Assignment Styles
   ========================================================================== */

/* Collection Display Section on Stock Detail */
.collection-assignment.detail-section {
    margin-bottom: var(--spacing-lg);
}

.collection-display {
    padding: var(--spacing-md);
}

.current-collection-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.collection-visual {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.collection-visual .collection-icon {
    width: 48px;
    height: 48px;
    background: var(--color-surface-alt);
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(/images/icon/collection.svg);
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
}

.collection-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.collection-content .collection-name {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
}

.collection-content .collection-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
}

.collection-actions .command {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
}

/* Collection Dialog Styles */
#Dlg_Collection .collection-hero {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-md);
}

#Dlg_Collection .collection-illustration {
    width: 120px;
    height: 120px;
    margin: 0 auto var(--spacing-md);
    background: var(--color-surface-alt);
    border-radius: 50%;
    background-image: url(/images/icon/collection.svg);
    background-size: 48px;
    background-repeat: no-repeat;
    background-position: center;
}

#Dlg_Collection .collection-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
}

#Dlg_Collection .collection-option {
    cursor: pointer;
}

#Dlg_Collection .collection-option.selection-card {
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    transition: border-color 0.2s, background-color 0.2s;
}

#Dlg_Collection .collection-option.selection-card:hover {
    border-color: var(--color-primary-light);
    background: var(--color-surface-hover);
}

#Dlg_Collection .collection-option.selection-card input:checked + .collection-visual {
    border-color: var(--color-primary);
}

#Dlg_Collection .collection-option input[type="radio"]:checked ~ .selection-header {
    color: var(--color-primary);
}

#Dlg_Collection .collection-option .selection-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

#Dlg_Collection .collection-cover {
    width: 56px;
    height: 56px;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    background: var(--color-surface-alt);
    flex-shrink: 0;
}

#Dlg_Collection .collection-cover .cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#Dlg_Collection .collection-cover.no-cover {
    background-image: url(/images/icon/collection.svg);
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
}

#Dlg_Collection .collection-icon-none {
    width: 56px;
    height: 56px;
    border-radius: var(--border-radius-sm);
    background: var(--color-surface-alt);
    background-image: url(/images/icon/remove.svg);
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
}

#Dlg_Collection .collection-title {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
}

#Dlg_Collection .collection-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
}

#Dlg_Collection .collection-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

#Dlg_Collection .collection-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xl);
    color: var(--color-text-warm-muted);
    /* Centered in grid for better visual balance */
    grid-column: 1 / -1;
}

/* Auto-hide loading when grid has collection cards (CSS fallback) */
.collection-selection-grid:has(.collection-card-item) .collection-loading {
    display: none;
}

#Dlg_Collection .collection-loading .loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

#Dlg_Collection .collection-error {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--color-error);
}

/* Create Collection Section */
#Dlg_Collection .collection-create-section {
    padding: var(--spacing-md);
    margin-top: var(--spacing-md);
}

#Dlg_Collection .section-divider {
    position: relative;
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

#Dlg_Collection .section-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--color-border);
}

#Dlg_Collection .section-divider .divider-text {
    position: relative;
    background: var(--color-background);
    padding: 0 var(--spacing-md);
    color: var(--color-text-warm-muted);
    font-size: var(--font-size-sm);
}

#Dlg_Collection .create-collection-form {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
}

#Dlg_Collection .create-collection-title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
    margin: 0 0 var(--spacing-md);
}

#Dlg_Collection .input-group {
    margin-bottom: var(--spacing-md);
}

#Dlg_Collection .input-group:last-child {
    margin-bottom: 0;
}

#Dlg_Collection .input-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-warm-medium);
    margin-bottom: var(--spacing-xs);
}

#Dlg_Collection .input-field {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-md);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    background: var(--color-background);
    color: var(--color-text-warm);
    transition: border-color 0.2s;
}

#Dlg_Collection .input-field:focus {
    outline: none;
    border-color: var(--color-primary);
}

#Dlg_Collection .textarea-field {
    resize: vertical;
    min-height: 60px;
}

/* Mobile Responsiveness */
@media (max-width: 600px) {
    .current-collection-info {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-md);
    }

    .collection-actions {
        text-align: center;
    }

    .collection-actions .command {
        width: 100%;
    }
}

/* ==========================================================================
   39B. COLLECTION SELECTION GRID (Multi-Select Dialog)
   --------------------------------------------------------------------------
   Extends Section 57B (Checkbox Item) for collection cards.
   Uses vars.css tokens throughout (per style-guide.md).
   ========================================================================== */

/* Grid layout for collection cards in dialog */
.collection-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
}

/* Collection card extends checkbox-item (Section 57B) */
.checkbox-item.collection-card-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-md);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-card);
    cursor: pointer;
    transition: var(--transition-card);
    text-align: center;
    position: relative;
    background: var(--color-surface);
    /* Override checkbox-item's row layout */
    min-height: 140px;
}

/* Reset checkbox-item's ::before/::after for card layout */
.checkbox-item.collection-card-item::before,
.checkbox-item.collection-card-item::after {
    content: none;
}

/* Hover state - uses style-guide.md lift pattern */
.checkbox-item.collection-card-item:hover {
    border-color: var(--color-border-medium);
    background: var(--color-surface-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
}

/* Keyboard navigation highlight - subtle focus ring only (not selection-like) */
.checkbox-item.collection-card-item.active:not(.selected) {
    outline: 2px solid var(--color-border-medium);
    outline-offset: 2px;
}

/* When navigating via keyboard, intensify the active indicator */
.checkbox-item.collection-card-item.active:not(.selected):focus {
    outline-color: var(--color-primary-muted);
}

/* Selected state - matches Section 57B visual states */
.checkbox-item.collection-card-item.selected,
.checkbox-item.collection-card-item:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-lighter);
    /* Add subtle inset glow for depth per style-guide.md */
    box-shadow:
        var(--shadow-card),
        inset 0 1px 0 rgba(92, 67, 244, 0.08);
}

/* Selection check badge - appears in top-right when selected */
.checkbox-item.collection-card-item .selection-badge {
    position: absolute;
    top: calc(-1 * var(--spacing-xs));
    right: calc(-1 * var(--spacing-xs));
    width: 22px;
    height: 22px;
    border-radius: var(--border-radius-full);
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.25s var(--ease-spring);
    box-shadow:
        0 2px 8px rgba(92, 67, 244, 0.35),
        0 0 0 2px var(--color-background);
    z-index: 1;
}

.checkbox-item.collection-card-item .selection-badge .icon-svg {
    --icon-size: 12px;
    filter: brightness(0) invert(1); /* White icon */
}

/* Badge visible when selected OR when checkbox is checked (fallback) */
.checkbox-item.collection-card-item.selected .selection-badge,
.checkbox-item.collection-card-item:has(input:checked) .selection-badge {
    opacity: 1;
    transform: scale(1);
}

/* Focus ring for keyboard users */
.checkbox-item.collection-card-item:focus {
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

/* Hide native checkbox - use selection-badge instead */
.checkbox-item.collection-card-item input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Collection cover photo */
.collection-card-cover {
    width: 64px;
    height: 64px;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    background: var(--color-surface-darkened);
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.collection-card-cover img.cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-card-photo);
}

.checkbox-item.collection-card-item:hover .collection-card-cover img {
    transform: scale(1.03);
}

/* No cover - show icon (explicit no-cover or image load error) */
.collection-card-cover.no-cover,
.collection-card-cover:has(img[ux-load-error]) {
    background-image: url(/images/icon/collection-black.svg);
    background-size: 32px;
    background-repeat: no-repeat;
    background-position: center;
    /* Subtle violet tint for brand consistency */
    background-color: rgba(92, 67, 244, 0.04);
}

/* When card is selected, icon cover gets primary tint */
.checkbox-item.collection-card-item.selected .collection-card-cover.no-cover,
.checkbox-item.collection-card-item:has(input:checked) .collection-card-cover.no-cover {
    background-color: rgba(92, 67, 244, 0.08);
}

/* Hide broken image when load error */
.collection-card-cover img[ux-load-error] {
    visibility: hidden;
}

.collection-card-cover.no-cover img {
    display: none;
}

/* Collection name - warm text color from style-guide.md */
.collection-card-name {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    color: var(--color-text-warm);
    margin-bottom: 2px;
    line-height: 1.3;
    cursor: pointer;
    /* Prevent label click issues */
    pointer-events: none;
}

/* Collection count */
.collection-card-count {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Add Collection Card - dashed invitation pattern from style-guide.md */
.collection-add-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md) var(--spacing-lg);
    border: 2px dashed rgba(92, 67, 244, 0.2);
    border-radius: var(--border-radius-card);
    cursor: pointer;
    transition: var(--transition-card);
    min-height: 80px;
    margin: 0 var(--spacing-md) var(--spacing-md);
    /* Gradient from style-guide.md "Dashed Add Buttons" */
    background: linear-gradient(
        135deg,
        rgba(92, 67, 244, 0.02) 0%,
        rgba(0, 255, 203, 0.012) 100%
    );
}

.collection-add-card:hover {
    border-color: var(--color-primary);
    background: linear-gradient(
        135deg,
        rgba(92, 67, 244, 0.05) 0%,
        rgba(0, 255, 203, 0.03) 100%
    );
    box-shadow: var(--shadow-glow-primary-soft);
    transform: translateY(-2px);
}

.collection-add-card:focus {
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

/* Icon uses standard .icon-svg pattern with context sizing */
.collection-add-card .icon-svg {
    --icon-size: var(--icon-size-xl);
    margin-bottom: var(--spacing-xs);
    opacity: 0.7;
    transition: opacity 0.2s var(--ease-elegant);
}

.collection-add-card:hover .icon-svg {
    opacity: 1;
}

.collection-add-card .add-text {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

/* Dialog footer with summary (split layout) */
.dialog-footer.dialog-footer-split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.dialog-footer-summary {
    flex: 1;
    display: flex;
    align-items: center;
}

.dialog-footer-summary .selection-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    transition: color 0.2s var(--ease-elegant);
}

/* When items are selected, make count more prominent */
.dialog-footer-summary .selection-count.has-selection {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

.dialog-footer-actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* Empty state in grid */
.collection-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--color-text-muted);
}

.collection-empty-state p {
    margin-bottom: var(--spacing-sm);
}

/* Introduction checklist (extends Section 60) */
.checklist.collection-benefits {
    margin: var(--spacing-lg) 0;
}

.collection-benefits .checklist-item {
    border: none;
    background: transparent;
    padding: var(--spacing-sm) 0;
}

.collection-benefits .checklist-item.completed {
    background: transparent;
}

/* Checklist status uses standard .icon-svg icons */
.collection-benefits .checklist-status {
    --icon-size: var(--icon-size-sm);
}

/* Introduction board */
.collection-intro-board {
    text-align: center;
    padding: var(--spacing-md);
}

/* Onboarding illustration - matches variant wizard pattern */
.collection-intro-board .onboarding-illustration {
    margin: 0 auto var(--spacing-lg);
}

.collection-intro-board .onboarding-illustration img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-lg);
}

.collection-intro-headline {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
    margin-bottom: var(--spacing-sm);
}

.collection-example-hint {
    margin-top: var(--spacing-lg);
    font-style: italic;
}

/* Create collection headline */
.create-collection-headline {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
    margin-bottom: var(--spacing-sm);
}

/* ==========================================================================
   39C. COLLECTION PILLS (Stock Detail View)
   --------------------------------------------------------------------------
   Tag/pill pattern from style-guide.md for displaying assigned collections.
   ========================================================================== */

/* Pills container */
.collection-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

/* Collection pill - display tag for assigned collections (read-only, no remove button)
   To edit collections, users click "Edit" in section header to open dialog */
.collection-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 4px var(--spacing-sm) 4px calc(var(--spacing-sm) + 2px);
    background: var(--color-primary-lighter);
    border: 1px solid rgba(92, 67, 244, 0.15);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-sm);
    color: var(--color-primary-dark);
    font-weight: var(--font-weight-medium);
    transition: var(--transition-fast);
}

/* Empty state text */
.collection-empty {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-style: italic;
}

/* Manage collections link - uses btn-link pattern */
.collection-display .command.btn-link,
.collection-actions .command {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
}

/* Mobile adjustments for selection grid */
@media (max-width: 480px) {
    .collection-selection-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    .checkbox-item.collection-card-item {
        padding: var(--spacing-sm);
        min-height: 120px;
    }

    .collection-card-cover {
        width: 48px;
        height: 48px;
    }

    .dialog-footer.dialog-footer-split {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .dialog-footer-summary {
        width: 100%;
        justify-content: center;
    }

    .dialog-footer-actions {
        width: 100%;
        justify-content: stretch;
    }

    .dialog-footer-actions .command {
        flex: 1;
    }
}


/* ==========================================================================
   FILTER DIALOG - State-based Navigation
   ========================================================================== */

/*
   Filter dialogs use ux-state for drill-down navigation:
   - Main state "filters" shows menu of filter groups
   - Each filter group has its own state (distance, sort, facet-Price, etc.)
   - Back button appears when in a sub-state
   - Only the current state's content is visible
*/

/* --- Filter Dialog Base --- */
.filter-dialog {
    --filter-menu-item-height: 56px;
    --filter-arrow-size: 20px;
}

/* --- State Content Visibility --- */
/* DialogViewBehavior manages visibility via JS (inline display style).
   These CSS rules provide initial state and fallback styling. */

/* All content sections default to flex layout when shown by JS */
.filter-dialog > .content {
    flex-direction: column;
}

/* Content sections shown by DialogViewBehavior get display:flex inline.
   This ensures proper layout when JS shows them. */
.filter-dialog > .content.dialog-body {
    flex-direction: column;
    height: 100%;
}

/* --- Filter Menu (Main State) --- */
.filter-menu {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.filter-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
    min-height: var(--filter-menu-item-height);
    border-bottom: 1px solid var(--color-border-light, rgba(0, 0, 0, 0.08));
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.filter-menu-item:hover {
    background-color: var(--color-background-hover, rgba(0, 0, 0, 0.04));
}

.filter-menu-item:active {
    background-color: var(--color-background-active, rgba(0, 0, 0, 0.08));
}

.filter-menu-label {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text);
    flex: 1;
}

.filter-menu-value {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-right: var(--spacing-sm);
}

/* Show selection count or "All" */
.filter-menu-value:empty::after {
    content: "All";
}

.filter-menu-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--filter-arrow-size);
    height: var(--filter-arrow-size);
    color: var(--color-text-tertiary, rgba(0, 0, 0, 0.4));
    font-size: 18px;
    font-weight: 300;
}

/* Icon-based arrow (when using .icon-svg) */
.filter-menu-arrow.icon-svg {
    --icon-size: var(--icon-size-sm);
    font-size: 0;
}

/* --- Back Button Visibility --- */
/* Back button hidden in main filters state */
.filter-dialog[ux-state="filters"] .dialog-back {
    display: none !important;
}

/* Back button visible in all other states */
.filter-dialog:not([ux-state="filters"]) .dialog-back {
    display: inline-flex !important;
    align-items: center;
    gap: var(--spacing-xs);
}

/* Back button icon */
.filter-dialog .dialog-back .icon-svg {
    --icon-size: var(--icon-size-md);
}

/* --- Filter Group Containers (inside dialog) --- */
.filter-dialog .filter-group,
.filter-dialog .filterGroup {
    padding: var(--spacing-md) 0;
}

.filter-dialog .filter-group-title,
.filter-dialog .filter-group legend {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-sm);
    padding: 0 var(--spacing-lg);
}

/* --- Radio/Checkbox Lists in Filter Dialog --- */
.filter-dialog .radio-list,
.filter-dialog .checkbox-group .choices,
.filter-dialog .facet-options {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.filter-dialog .radio-list .radio,
.filter-dialog .checkbox-group .checkbox,
.filter-dialog .facet-options .checkbox {
    display: flex;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--color-border-light, rgba(0, 0, 0, 0.06));
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.filter-dialog .radio-list .radio:hover,
.filter-dialog .checkbox-group .checkbox:hover,
.filter-dialog .facet-options .checkbox:hover {
    background-color: var(--color-background-hover, rgba(0, 0, 0, 0.04));
}

.filter-dialog .radio-list .radio:last-child,
.filter-dialog .checkbox-group .checkbox:last-child,
.filter-dialog .facet-options .checkbox:last-child {
    border-bottom: none;
}

/* Input styling */
.filter-dialog .radio input[type="radio"],
.filter-dialog .checkbox input[type="checkbox"] {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0;
}

/* Label styling */
.filter-dialog .radio .label,
.filter-dialog .checkbox .label {
    flex: 1;
    font-size: var(--font-size-md);
    color: var(--color-text);
}

/* Facet count */
.filter-dialog .facet-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin-left: var(--spacing-sm);
}

/* Selected state styling */
.filter-dialog .checkbox.selected .label,
.filter-dialog .radio:has(input:checked) .label {
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-primary);
}

/* --- Dialog Footer in Filter Context --- */
.filter-dialog .dialog-footer {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--color-border-light, rgba(0, 0, 0, 0.1));
    background-color: var(--color-background);
}

.filter-dialog .dialog-footer .command {
    flex: 1;
    text-align: center;
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    font-weight: var(--font-weight-medium, 500);
}

.filter-dialog .dialog-footer .btn-ghost {
    background-color: transparent;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.filter-dialog .dialog-footer .btn-ghost:hover {
    background-color: var(--color-background-hover);
    color: var(--color-text);
}

.filter-dialog .dialog-footer .btn-primary {
    background-color: var(--color-primary);
    color: white;
    border: none;
}

.filter-dialog .dialog-footer .btn-primary:hover {
    background-color: var(--color-primary-dark, #4a35c3);
}

/* --- Facet Group Wrapper (contains multiple content states) --- */
.filter-dialog .facets.checkbox-group {
    display: contents;
}

/* --- Empty State for Facets --- */
.filter-dialog [data-facet-group][ux-empty] {
    display: none;
}

/* --- Mobile Optimizations --- */
@media (max-width: 768px) {
    .filter-dialog {
        --filter-menu-item-height: 52px;
    }

    .filter-menu-item {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .filter-dialog .radio-list .radio,
    .filter-dialog .checkbox-group .checkbox,
    .filter-dialog .facet-options .checkbox {
        padding: var(--spacing-sm) var(--spacing-md);
    }
}


/* ==========================================================================
   SECTION XX: DRAWER PRODUCT CARDS
   --------------------------------------------------------------------------
   Horizontal product cards for Watchlist and Recently Viewed drawers.
   Features: photo thumbnail, info stack, action buttons, price badges.
   Follows "curated warmth" design philosophy with refined hover states.
   ========================================================================== */

/* --- Product List Container --- */
.drawer-product-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
}

/* --- Product Card (Horizontal Layout) --- */
.drawer-product-card {
    display: flex;
    align-items: stretch;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--gradient-card-base);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-card);
    transition: var(--transition-card);
    cursor: pointer;
    position: relative;
    overflow: hidden;

    /* Staggered entrance animation */
    animation: drawerCardEntrance 0.4s var(--ease-elegant) backwards;
}

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

.drawer-product-card:hover {
    border-color: var(--color-border-primary-subtle);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}

/* Keyboard navigation highlight */
.drawer-product-card.active {
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 2px rgba(92, 67, 244, 0.15), var(--shadow-card);
}

/* Focus ring for accessibility */
.drawer-product-card:focus {
    outline: none;
    box-shadow: var(--shadow-focus-ring), var(--shadow-card);
}

.drawer-product-card:focus:not(.active) {
    border-color: var(--color-border-medium);
}

/* --- Photo Thumbnail --- */
.drawer-product-card .card-photo {
    flex-shrink: 0;
    width: 88px;
    height: 88px;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    background: var(--color-surface);
    position: relative;
}

.drawer-product-card .card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-card-photo);
}

.drawer-product-card:hover .card-photo img {
    transform: scale(1.05);
}

/* Photo overlay gradient for subtle depth */
.drawer-product-card .card-photo .photo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        transparent 60%,
        rgba(92, 67, 244, 0.03) 100%
    );
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s var(--ease-elegant);
}

.drawer-product-card:hover .card-photo .photo-overlay {
    opacity: 1;
}

/* Image loading states */
.drawer-product-card .card-photo img[loader] {
    opacity: 0;
}

.drawer-product-card .card-photo img.loaded {
    animation: imageFadeIn 0.35s var(--ease-elegant) forwards;
}

/* --- Bookmark Overlay (visual indicator on photo, non-interactive) --- */
.drawer-product-card .card-bookmark {
    position: absolute;
    top: 4px;
    right: 4px;
    --icon-size: var(--icon-size-sm);
    z-index: 2;
    pointer-events: none;
    opacity: 0.7;
    transition: opacity 0.2s var(--ease-elegant);
}

.drawer-product-card:hover .card-bookmark {
    opacity: 1;
}

.drawer-product-card .card-bookmark.bookmarked {
    opacity: 1;
}

.drawer-product-card .card-bookmark.bookmarked .icon-bookmark { display: none; }
.drawer-product-card .card-bookmark.bookmarked .icon-bookmark-solid { display: inline-block !important; }
.drawer-product-card .card-bookmark:not(.bookmarked) .icon-bookmark-solid { display: none !important; }

/* --- Icon sizing inside action buttons --- */
.drawer-product-card .action-btn .icon-svg {
    --icon-size: 18px;
}

/* --- Content Stack --- */
.drawer-product-card .card-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing-xs);
}

/* Title */
.drawer-product-card .card-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: color 0.2s var(--ease-out);
}

.drawer-product-card:hover .card-title {
    color: var(--color-primary);
}

/* Price row */
.drawer-product-card .card-price {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.drawer-product-card .price-value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-warm);
    letter-spacing: -0.02em;
}

.drawer-product-card .price-unit {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-warm-muted);
}

/* Price change badge */
.drawer-product-card .price-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--border-radius-full);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
}

.drawer-product-card .price-badge.drop {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.12) 0%, rgba(34, 197, 94, 0.06) 100%);
    color: #15803d;
}

.drawer-product-card .price-badge.increase {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
    color: #dc2626;
}

/* Price dropped state - subtle green glow */
.drawer-product-card.price-dropped {
    border-color: rgba(34, 197, 94, 0.2);
}

.drawer-product-card.price-dropped::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.03) 0%, transparent 50%);
    pointer-events: none;
    border-radius: inherit;
}

/* Seller info */
.drawer-product-card .card-seller {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-sm);
}

.drawer-product-card .seller-by {
    color: var(--color-text-warm-muted);
}

.drawer-product-card .seller-name {
    color: var(--color-text-warm-body);
    font-weight: var(--font-weight-medium);
    transition: color 0.2s var(--ease-out);
}

.drawer-product-card .seller-name:hover {
    color: var(--color-primary);
}

/* Unavailable state */
.drawer-product-card .card-unavailable {
    display: none;
    font-size: var(--font-size-xs);
    color: var(--color-error);
    font-weight: var(--font-weight-medium);
    padding: 3px 8px;
    background: rgba(239, 68, 68, 0.08);
    border-radius: var(--border-radius-sm);
    width: fit-content;
}

.drawer-product-card.unavailable {
    opacity: 0.7;
}

.drawer-product-card.unavailable .card-unavailable {
    display: inline-block;
}

.drawer-product-card.unavailable .card-photo img {
    filter: grayscale(0.4);
}

/* --- Action Buttons --- */
.drawer-product-card .card-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    justify-content: center;
    padding-left: var(--spacing-sm);
    border-left: 1px solid var(--color-border);
    margin-left: auto;
}

.drawer-product-card .action-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-warm-muted);
    transition: all 0.25s var(--ease-elegant);
    cursor: pointer;
}

.drawer-product-card .action-btn svg {
    width: 18px;
    height: 18px;
}

.drawer-product-card .action-btn:hover {
    background: var(--color-primary-lighter);
    border-color: var(--color-primary-light);
    color: var(--color-primary);
    transform: scale(1.08);
}

/* Remove button special styling */
.drawer-product-card .cmdRemove:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--color-error);
}

/* Bookmark button styling */
.drawer-product-card .cmdBookmark .icon-bookmark-solid { display: none !important; }
.drawer-product-card .cmdBookmark.bookmarked .icon-bookmark { display: none !important; }
.drawer-product-card .cmdBookmark.bookmarked .icon-bookmark-solid { display: inline-block !important; }

/* Add to cart button special styling */
.drawer-product-card .cmdAddToCart:hover {
    background: var(--color-primary-lighter);
    border-color: var(--color-primary-light);
    color: var(--color-primary);
}

/* --- Removal Animation --- */
.drawer-product-card.removing {
    animation: drawerCardExit 0.3s var(--ease-elegant) forwards;
}

@keyframes drawerCardExit {
    to {
        opacity: 0;
        transform: translateX(-20px) scale(0.95);
        height: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin-bottom: 0;
    }
}

/* ==========================================================================
   DRAWER EMPTY STATE
   ========================================================================== */

.drawer-empty-state {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-3xl) var(--spacing-xl);
    min-height: 280px;
    background: transparent;
    border: none;
    box-shadow: none;
}

.drawer-empty-state .empty-illustration {
    width: 80px;
    height: 80px;
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        135deg,
        rgba(92, 67, 244, 0.06) 0%,
        rgba(0, 255, 203, 0.04) 100%
    );
    border-radius: var(--border-radius-full);
    animation: emptyIconFloat 3s ease-in-out infinite;
}

@keyframes emptyIconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.drawer-empty-state .empty-icon {
    width: 40px;
    height: 40px;
    color: var(--color-primary-muted);
}

.drawer-empty-state .empty-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm-medium);
    margin: 0 0 var(--spacing-xs);
}

.drawer-empty-state .empty-hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
    line-height: 1.5;
    max-width: 240px;
    margin: 0;
}

/* ==========================================================================
   DARK MODE OVERRIDES
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .drawer-product-card .price-badge.drop {
        background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.1) 100%);
        color: #4ade80;
    }

    .drawer-product-card .price-badge.increase {
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.08) 100%);
        color: #f87171;
    }

    .drawer-product-card.price-dropped {
        border-color: rgba(34, 197, 94, 0.25);
    }

    .drawer-product-card .cmdRemove:hover {
        background: rgba(239, 68, 68, 0.15);
        border-color: rgba(239, 68, 68, 0.4);
    }

    .drawer-empty-state .empty-illustration {
        background: linear-gradient(
            135deg,
            rgba(92, 67, 244, 0.12) 0%,
            rgba(0, 255, 203, 0.08) 100%
        );
    }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .drawer-product-card {
        animation: none;
    }

    .drawer-product-card.removing {
        animation: none;
        display: none;
    }

    .drawer-empty-state .empty-illustration {
        animation: none;
    }

    .drawer-product-card:hover .card-photo img {
        transform: none;
    }

    .drawer-product-card .action-btn:hover {
        transform: none;
    }
}

/* ==========================================================================
   MOBILE RESPONSIVE
   ========================================================================== */

@media (max-width: 480px) {
    .drawer-product-list {
        padding: var(--spacing-xs);
        gap: var(--spacing-xs);
    }

    .drawer-product-card {
        padding: var(--spacing-sm);
        gap: var(--spacing-sm);
    }

    .drawer-product-card .card-photo {
        width: 72px;
        height: 72px;
    }

    .drawer-product-card .card-title {
        font-size: var(--font-size-sm);
        -webkit-line-clamp: 2;
    }

    .drawer-product-card .price-value {
        font-size: var(--font-size-base);
    }

    .drawer-product-card .card-actions {
        padding-left: var(--spacing-xs);
    }

    .drawer-product-card .action-btn {
        width: 32px;
        height: 32px;
    }

    .drawer-product-card .action-btn svg {
        width: 16px;
        height: 16px;
    }

    .drawer-empty-state {
        padding: var(--spacing-xl) var(--spacing-md);
        min-height: 200px;
    }

    .drawer-empty-state .empty-illustration {
        width: 64px;
        height: 64px;
    }

    .drawer-empty-state .empty-icon {
        width: 32px;
        height: 32px;
    }
}

/* ==========================================================================
   DRAWER SELLER CARDS (Following Drawer)
   ========================================================================== */

.drawer-seller-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
}

.drawer-seller-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--gradient-card-base);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-card);
    transition: var(--transition-card);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    animation: drawerCardEntrance 0.4s var(--ease-elegant) backwards;
}

.drawer-seller-card:hover {
    border-color: var(--color-border-primary-subtle);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}

.drawer-seller-card.active {
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 2px rgba(92, 67, 244, 0.15), var(--shadow-card);
}

.drawer-seller-card:focus {
    outline: none;
    box-shadow: var(--shadow-focus-ring), var(--shadow-card);
}

.drawer-seller-card:focus:not(.active) {
    border-color: var(--color-border-medium);
}

/* Avatar */
.drawer-seller-card .card-avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius-full);
    overflow: hidden;
    background: var(--color-surface);
}

.drawer-seller-card .card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius-full);
}

.drawer-seller-card .card-avatar img[loader] {
    opacity: 0;
}

.drawer-seller-card .card-avatar img.loaded {
    animation: imageFadeIn 0.35s var(--ease-elegant) forwards;
}

/* Content */
.drawer-seller-card .card-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.drawer-seller-card .card-username {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drawer-seller-card .card-display-name {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Meta row */
.drawer-seller-card .card-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-warm-muted);
    margin-top: 2px;
}

.drawer-seller-card .meta-separator::after {
    content: "\00B7";
    color: var(--color-text-warm-muted);
}

/* Bio */
.drawer-seller-card .card-bio {
    font-size: var(--font-size-xs);
    color: var(--color-text-warm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

/* Bookmark / follow toggle */
.drawer-seller-card .card-actions {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    padding-top: var(--spacing-xs);
}

.drawer-seller-card .card-bookmark {
    --icon-size: var(--icon-size-sm);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: all 0.2s var(--ease-elegant);
    opacity: 0.7;
}

.drawer-seller-card:hover .card-bookmark {
    opacity: 1;
}

.drawer-seller-card .card-bookmark:hover {
    background: rgba(239, 68, 68, 0.08);
    transform: scale(1.1);
}

/* Removal animation */
.drawer-seller-card.removing {
    animation: drawerCardExit 0.3s var(--ease-elegant) forwards;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .drawer-seller-card .card-bookmark:hover {
        background: rgba(239, 68, 68, 0.15);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .drawer-seller-card {
        animation: none;
    }
    .drawer-seller-card.removing {
        animation: none;
        display: none;
    }
    .drawer-seller-card .card-bookmark:hover {
        transform: none;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .drawer-seller-list {
        padding: var(--spacing-xs);
        gap: var(--spacing-xs);
    }
    .drawer-seller-card {
        padding: var(--spacing-sm);
        gap: var(--spacing-sm);
    }
    .drawer-seller-card .card-avatar {
        width: 40px;
        height: 40px;
    }
    .drawer-seller-card .card-bookmark {
        width: 28px;
        height: 28px;
    }
}

/* ==========================================================================
   SECTION 89: Dialog Compact Path Cards
   ==========================================================================
   Context: Action tiles within dialog drawers (e.g., success states)
   Overrides: Section 38 (.path-card hero cards) for dialog context
   Philosophy: "Curated warmth" — refined action links, not billboard cards

   HTML structure:
   <div class="next-steps-section">
       <h5>What's next?</h5>
       <div class="path-cards">
           <div class="path-card command">
               <span class="path-icon icon-svg icon-send icon-primary"></span>
               <span class="path-label">Share your listing</span>
           </div>
       </div>
   </div>
   ========================================================================== */

/* --- 89-A. Success Section Layout --- */
.dialog .next-steps-section {
    margin-top: var(--spacing-lg);
}

.dialog .next-steps-section h5 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm-muted);
    text-transform: none;
    letter-spacing: -0.01em;
    margin: 0 0 var(--spacing-md) 0;
}

/* --- 89-B. Path Cards Grid Override — Vertical Stack --- */
.dialog .path-cards {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* --- 89-C. Compact Path Card — Horizontal Layout --- */
.dialog .path-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    transition: var(--transition-card);
    text-align: left;
}

/* Remove the oversized ::before pseudo-element from hero cards */
.dialog .path-card::before {
    display: none;
}

/* --- 89-D. Hover & Focus States --- */
.dialog .path-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-border-primary-subtle);
    background: var(--gradient-card-hover);
}

.dialog .path-card:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.dialog .path-card:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

/* --- 89-E. Compact Icon Styling --- */
.dialog .path-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: 1px solid var(--color-border-primary-faint);
    border-radius: var(--border-radius-full);
    background-color: var(--color-primary-bg-tint);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-card);
}

.dialog .path-card:hover .path-icon {
    border-color: var(--color-border-primary-subtle);
    background-color: var(--color-primary-hover-bg);
}

/* --- 89-F. Label Typography --- */
.dialog .path-label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-warm);
    letter-spacing: -0.01em;
    transition: color 0.2s ease;
}

.dialog .path-card:hover .path-label {
    color: var(--color-primary-dark);
}

/* --- 89-G. Hide Unused Hero Card Elements --- */
.dialog .path-card-title,
.dialog .path-card h3,
.dialog .path-card-description,
.dialog .path-card > p {
    display: none;
}

/* ==========================================================================
   SECTION 90: PAGINATION
   ==========================================================================
   Simple pagination controls for paged data tables and lists.
   ========================================================================== */

.pagination {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-lg) 0;
}

.pagination .page {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    transition: var(--transition-fast);
}

.pagination .page.active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.pagination .page:hover:not(.active) {
    background: var(--color-primary-bg-subtle);
    border-color: var(--color-border-primary-subtle);
}

/* ==========================================================================
   SECTION 91: ADMIN CMS PANELS
   ==========================================================================
   Tabbed panel views for admin CMS pages (waitlist, moderation, etc.).
   ========================================================================== */

.viewWaitlistCms .panels {
    position: relative;
}

.viewWaitlistCms .panel {
    padding: var(--spacing-lg) 0;
}

/* --- Trust & Safety CMS --- */

.viewTrustSafetyCms .panels {
    position: relative;
}

.viewTrustSafetyCms .panel {
    padding: var(--spacing-lg) 0;
}

/* Admin toolbar — flex row of selects and buttons */
.viewTrustSafetyCms .admin-toolbar {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    padding: var(--spacing-md) 0;
    margin-bottom: var(--spacing-sm);
}

.viewTrustSafetyCms .admin-toolbar select.form-input,
.viewTrustSafetyCms .admin-toolbar input.form-input {
    padding: 6px var(--spacing-sm);
    font-size: var(--font-size-sm);
    border-radius: var(--border-radius-sm);
    min-width: 0;
    max-width: 180px;
}

.viewTrustSafetyCms .admin-toolbar input.form-input[type="text"] {
    max-width: 200px;
}

/* Constrain table container to viewport */
.viewTrustSafetyCms .table-container {
    margin: 0;
    max-width: 100%;
}

/* Order ref — truncate long GUIDs */
.viewTrustSafetyCms .data-table .order-ref {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}

/* Trust scores — keep compact */
.viewTrustSafetyCms .data-table .trust-scores {
    font-size: var(--font-size-xs);
    line-height: 1.4;
    white-space: nowrap;
}

/* Signals — keep compact */
.viewTrustSafetyCms .data-table .signals {
    font-size: var(--font-size-xs);
    white-space: nowrap;
}

/* Actions column */
.viewTrustSafetyCms .data-table .col-actions {
    text-align: right;
    white-space: nowrap;
}

.viewTrustSafetyCms .data-table .action-group {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

/* Empty / loading cell */
.viewTrustSafetyCms .data-table .cell-empty {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--color-text-muted);
}

/* Stats section spacing */
.viewTrustSafetyCms .settings-board + .settings-board {
    margin-top: 28px;
}

/* --------------------------------------------------------------------------
   END OF COMPONENT LIBRARY
   ========================================================================== */