/* ===== EdibleSwag Portal — redesigned theme ===== */

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

:root {
    --sidebar-width: 240px;
    --bg-cream: #F8EEDC;
    --bg-cream-soft: #FDF7EA;
    --card-bg: #ffffff;
    --border-soft: #EAE1CE;
    --border-card: #EFE6D3;
    --text-primary: #111111;
    /* AA contrast targets against --bg-cream (#F8EEDC):
         --text-muted  : 4.69:1 — clears WCAG AA body text (>=4.5:1)
         --text-subtle : 3.32:1 — clears AA large only (>=3:1); reserve for
                                  non-essential captions / decoration */
    --text-muted: #635C4F;
    --text-subtle: #8C8473;
    --brand-primary: #F26B21;
    --brand-primary-hover: #DB5A14;
    --brand-primary-subtle: #FCE3D2;  /* tinted brand orange for subtle badges */
    --brand-dark: #111111;
    --success-bg: #DFEFE0;
    --success-text: #2E7D3A;
    --success-dot: #4CAF50;
    --warning-bg: #FFE8C9;
    --warning-text: #8A4B07;
    --danger-bg: #FDE2DA;
    --danger-text: #B3341A;
    --info-bg: #E2EBF7;
    --info-text: #254B85;

    /* On-brand accent colors that complement the warm cream/orange palette.
       Used for the in-flight "shipped" state, empty timeline dots, and as
       chart palette extras. Read by JS via getComputedStyle for charts. */
    --bg-table-head: #FCFAF3;     /* very soft cream — table header backgrounds */
    --accent-tan: #FDE5C8;        /* warm tan — shipped badge, summary note */
    --accent-tan-dim: #E8DEC6;    /* dim tan — pending timeline dots, empty-state icons */
    --accent-purple: #6E5C8A;     /* dusty purple — chart accent */
    --accent-teal: #4F8A7E;       /* forest teal — chart accent */
    --neutral-soft: #C7BFAE;      /* muted warm gray — inactive avatars, etc. */

    /* Container widths — pages use these via .container-form / .container-detail
       / .container-narrow utility classes. One number per intent; never inline a
       new max-width in a template. */
    --container-form: 640px;     /* single-column forms (client + internal) */
    --container-detail: 1000px;  /* wider detail layouts, customer wizard */
    --container-narrow: 560px;   /* narrow presentation cards (confirmation, etc.) */

    --font-serif: 'Fraunces', Georgia, serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Container utilities. Apply to a form / div / section to bound its width.
   .container-form is left-aligned inside the already-centered .content-wrapper.
   .container-detail / .container-narrow are self-centering for use at top-level
   (e.g. inside public_base, gift-link customer flow). */
.container-form    { max-width: var(--container-form); }
.container-detail  {
    max-width: var(--container-detail);
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}
.container-narrow  {
    max-width: var(--container-narrow);
    margin-left: auto;
    margin-right: auto;
}

/* ===== Base ===== */
* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    background: var(--bg-cream);
    color: var(--text-primary);
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
}

h1, h2, h3, h4, h5, h6,
.serif {
    font-family: var(--font-serif);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

a { color: var(--brand-primary); }
a:hover { color: var(--brand-primary-hover); }

/* ===== Brand wordmark ===== */
.es-wordmark {
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: 1.4rem;
    letter-spacing: -0.01em;
    line-height: 1;
    display: inline-block;
}
.es-wordmark .es-edible { color: #111111; }
.es-wordmark .es-swag { color: var(--brand-primary); }

/* ===== App layout ===== */
#app-wrapper {
    min-height: 100vh;
    background: var(--bg-cream);
    padding: 20px;
    gap: 20px;
}

/* ===== Sidebar ===== */
.sidebar {
    width: var(--sidebar-width);
    background: var(--card-bg);
    color: var(--text-primary);
    border-radius: 14px;
    border: 1px solid var(--border-card);
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 20px;
    align-self: flex-start;
    height: calc(100vh - 40px);
    z-index: 1040;
    transition: transform 0.2s ease;
}

.sidebar-brand {
    padding: 4px 6px 18px;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 14px;
}

.sidebar-brand .es-wordmark {
    font-size: 1.35rem;
}

.sidebar-brand .sidebar-company {
    display: block;
    color: var(--text-muted);
    font-size: 0.82rem;
    margin-top: 4px;
    letter-spacing: 0.005em;
}

.sidebar-nav {
    padding: 0;
    list-style: none;
    margin: 0;
    flex: 1;
}

.sidebar-nav .nav-item {
    margin-bottom: 2px;
}

.sidebar-nav .nav-link {
    color: var(--text-primary);
    padding: 0.55rem 0.85rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
    position: relative;
}

.sidebar-nav .nav-link:hover {
    background: var(--bg-cream-soft);
    color: var(--text-primary);
}

.sidebar-nav .nav-link.active {
    background: var(--bg-cream);
    color: var(--text-primary);
    font-weight: 600;
}

.sidebar-nav .nav-link.active::before {
    content: '';
    position: absolute;
    left: -16px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--brand-primary);
    border-radius: 0 2px 2px 0;
}

.sidebar-nav .nav-link i { font-size: 1rem; color: var(--text-muted); }
.sidebar-nav .nav-link.active i { color: var(--text-primary); }

.sidebar-nav .nav-section-label {
    padding: 0.75rem 0.85rem 0.35rem;
    font-size: 0.68rem;
    color: var(--text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

/* Sidebar user card at bottom */
.sidebar-footer {
    padding-top: 14px;
    border-top: 1px solid var(--border-soft);
    margin-top: 14px;
}

.user-card {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.7rem;
    background: var(--bg-cream);
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-primary);
    transition: background 0.15s;
}

.user-card:hover {
    background: var(--bg-cream-soft);
    color: var(--text-primary);
}

.user-card .avatar-circle {
    background: var(--brand-primary);
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.82rem;
    flex-shrink: 0;
}

.user-card .user-name {
    font-weight: 600;
    font-size: 0.88rem;
    line-height: 1.15;
}

.user-card .user-action {
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.15;
}

/* ===== Main content area ===== */
.main-content {
    flex: 1;
    min-width: 0;
    min-height: calc(100vh - 40px);
    background: transparent;
}

.content-wrapper {
    padding: 8px 24px 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.topbar {
    padding: 0.75rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border-card);
    border-radius: 12px;
    margin-bottom: 16px;
    display: none;
    align-items: center;
    gap: 0.5rem;
}

/* ===== Page Headers ===== */
.page-header {
    margin-bottom: 1.5rem;
    padding: 16px 0 8px;
}

.page-header h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
    letter-spacing: -0.02em;
}

.page-header p {
    color: var(--text-muted);
    margin: 0;
    font-size: 0.95rem;
}

/* Small brand-orange action link. Use .action-link for any "Edit" / "View all"
   link inside a card or section head; .page-header-action is kept as an alias
   for legacy markup. */
.action-link,
.page-header-action {
    color: var(--brand-primary);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
}
.action-link:hover,
.page-header-action:hover { color: var(--brand-primary-hover); text-decoration: underline; }

/* ===== Cards =====
   `.form-section` is the canonical card class. `.card-panel` is a legacy alias
   kept so older markup keeps working — new code should use `.form-section`. */
.card-panel,
.form-section {
    background: var(--card-bg);
    border-radius: 14px;
    border: 1px solid var(--border-card);
    padding: 24px;
    margin-bottom: 16px;
}

.card-panel h5,
.form-section h5 {
    font-family: var(--font-serif);
    font-weight: 700;
    margin: 0 0 1rem;
    color: var(--text-primary);
    font-size: 1.15rem;
}

/* ===== Numbered wizard sections ===== */
.wizard-section {
    display: flex;
    gap: 18px;
    margin-bottom: 16px;
}

.wizard-section .step-number {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand-dark);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    font-family: var(--font-sans);
    margin-top: 4px;
}

.wizard-section .step-body {
    flex: 1;
    min-width: 0;
}

.wizard-section .step-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
}

.wizard-section .step-head h2 {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 1.25rem;
    margin: 0;
    color: var(--text-primary);
}

.wizard-section .step-meta {
    display: none;
}

/* Non-numbered intro card (used in the customer gift-link flow to show
   "this gift is from <company>"). Aligns flush-left without the step gutter. */
.wizard-section-intro {
    gap: 0;
}

/* ===== Forms ===== */
.form-label {
    font-size: 0.78rem;
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
}

.form-label .req {
    color: var(--brand-primary);
    margin-left: 2px;
}

.form-control,
.form-select,
input[type="text"].form-control,
input[type="email"].form-control,
input[type="tel"].form-control,
input[type="password"].form-control,
input[type="date"].form-control,
textarea.form-control {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    font-size: 0.92rem;
    font-family: var(--font-sans);
    background: #fff;
    color: var(--text-primary);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-control:focus,
.form-select:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(242, 107, 33, 0.15);
}

.form-control.is-invalid {
    border-color: var(--danger-text);
    box-shadow: 0 0 0 3px rgba(179, 52, 26, 0.12);
}

.form-text {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-top: 4px;
}

/* ===== Buttons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.65rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.05s;
    font-family: var(--font-sans);
    line-height: 1.2;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
    background: var(--brand-primary);
    color: #fff;
    border-color: var(--brand-primary);
}
.btn-primary:hover { background: var(--brand-primary-hover); border-color: var(--brand-primary-hover); color: #fff; }

.btn-dark {
    background: var(--brand-dark);
    color: #fff;
    border-color: var(--brand-dark);
}
.btn-dark:hover { background: #000; color: #fff; }

.btn-outline {
    background: #fff;
    color: var(--text-primary);
    border-color: var(--text-primary);
}
.btn-outline:hover { background: var(--bg-cream-soft); color: var(--text-primary); }

.btn-outline-secondary {
    background: #fff;
    color: var(--text-primary);
    border-color: var(--border-soft);
}
.btn-outline-secondary:hover { background: var(--bg-cream-soft); border-color: var(--text-muted); color: var(--text-primary); }

.btn-outline-primary {
    background: transparent;
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.btn-outline-primary:hover { background: var(--brand-primary); color: #fff; }

.btn-outline-danger {
    background: transparent;
    color: var(--danger-text);
    border-color: var(--danger-bg);
}
.btn-outline-danger:hover { background: var(--danger-bg); color: var(--danger-text); }

.btn-link-orange {
    background: transparent;
    color: var(--brand-primary);
    border: none;
    padding: 0.35rem 0.5rem;
    font-weight: 600;
}
.btn-link-orange:hover { color: var(--brand-primary-hover); text-decoration: underline; }

.btn-sm { padding: 0.35rem 0.8rem; font-size: 0.82rem; border-radius: 8px; }
.btn-lg { padding: 0.9rem 1.5rem; font-size: 1rem; }
.btn-block, .btn.w-100 { width: 100%; }

/* ===== Focus rings =====
   Suppress the browser default outline on mouse clicks for buttons + clickable
   content blocks, and provide a brand-orange ring for keyboard focus only.
   Form inputs already have their own brand box-shadow on :focus, so they're
   not listed here. */
.btn:focus,
.sidebar-nav .nav-link:focus,
.suggestion-chip:focus,
.dropdown-item:focus,
.gift-tile:focus,
.btn-close:focus,
.action-link:focus,
.page-header-action:focus {
    outline: none;
}

.btn:focus-visible,
.sidebar-nav .nav-link:focus-visible,
.suggestion-chip:focus-visible,
.dropdown-item:focus-visible,
.gift-tile:focus-visible,
.btn-close:focus-visible,
.action-link:focus-visible,
.page-header-action:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

/* ===== Login page ===== */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-cream);
    padding: 2rem 1rem;
}

.login-brand {
    text-align: center;
    margin-bottom: 1.75rem;
}

.login-brand .es-wordmark {
    font-size: 2.1rem;
}

.login-brand .portal-label {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 4px;
    letter-spacing: 0.01em;
}

.login-card {
    background: var(--card-bg);
    border-radius: 14px;
    padding: 2rem 2rem 1.75rem;
    width: 100%;
    max-width: 420px;
    border: 1px solid var(--border-card);
}

.login-card h3 {
    font-family: var(--font-serif);
    font-weight: 700;
    margin: 0 0 0.2rem;
    font-size: 1.5rem;
}

.login-card .login-subtitle {
    color: var(--text-muted);
    margin-bottom: 1.4rem;
    font-size: 0.92rem;
}

.login-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.1rem 0;
    color: var(--text-subtle);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    font-weight: 600;
}

.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-soft);
}

.login-footer {
    margin-top: 1.5rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.login-footer a {
    color: var(--brand-primary);
    font-weight: 600;
    text-decoration: none;
}

.forgot-link {
    float: right;
    color: var(--brand-primary);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
}
.forgot-link:hover { text-decoration: underline; color: var(--brand-primary-hover); }

/* ===== Sending-from panel ===== */
.sender-panel {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 14px 16px;
}

.sender-panel .logo-tile {
    height: 88px;
    min-width: 88px;
    max-width: 280px;
    border-radius: 10px;
    background: var(--danger-text);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-weight: 800;
    font-size: 2rem;
    flex-shrink: 0;
    overflow: hidden;
}

/* When the tile holds an actual logo image, drop the brand-red background
   (PNG transparency would otherwise tint red), pad slightly so the logo
   doesn't touch the edges, and let the tile width grow with the logo's
   natural aspect ratio (capped by max-width above). */
.sender-panel .logo-tile:has(img) {
    background: #fff;
    border: 1px solid var(--border-soft);
    padding: 6px 10px;
    width: auto;
}

.sender-panel .logo-tile img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.sender-panel .sender-body { flex: 1; min-width: 0; }
.sender-panel .sender-title { font-weight: 600; color: var(--text-primary); font-size: 0.95rem; }
.sender-panel .sender-sub { color: var(--text-muted); font-size: 0.83rem; margin-top: 2px; }

.ready-chip {
    background: var(--success-bg);
    color: var(--success-text);
    padding: 0.3rem 0.65rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* ===== Gift tile cards ===== */
.gift-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

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

.gift-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 14px;
    background: #fff;
    border: 1.5px solid var(--border-soft);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.gift-tile:hover {
    border-color: var(--text-primary);
}

.gift-tile.selected {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 1px var(--brand-primary);
}

.gift-tile.selected::after {
    content: '\F26A';
    font-family: 'bootstrap-icons';
    position: absolute;
    top: 22px;
    right: 22px;
    background: var(--brand-primary);
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    z-index: 1;
}

.gift-tile .gift-photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8d8273;
    font-size: 0.85rem;
    overflow: hidden;
    margin-bottom: 12px;
    position: relative;
}

.gift-tile .gift-photo img { width: 100%; height: 100%; object-fit: cover; }

/* Carousel inside a gift tile (and in the tier detail modal). The wrapper has
   aspect-ratio set, so each carousel layer needs to fill 100% of the box. */
.gift-carousel,
.gift-carousel .carousel-inner,
.gift-carousel .carousel-item {
    width: 100%;
    height: 100%;
}
.gift-carousel .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gift-carousel .carousel-control-prev,
.gift-carousel .carousel-control-next {
    width: 12%;
    opacity: 0;
    transition: opacity 0.15s;
}
.gift-tile:hover .gift-carousel .carousel-control-prev,
.gift-tile:hover .gift-carousel .carousel-control-next,
.gift-carousel:hover .carousel-control-prev,
.gift-carousel:hover .carousel-control-next,
.gift-carousel:focus-within .carousel-control-prev,
.gift-carousel:focus-within .carousel-control-next {
    opacity: 0.85;
}
.gift-carousel .carousel-control-prev-icon,
.gift-carousel .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.35);
    border-radius: 50%;
    padding: 14px;
    background-size: 50% 50%;
}
.gift-carousel .carousel-indicators {
    margin-bottom: 0.4rem;
}
.gift-carousel .carousel-indicators [data-bs-target] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 0;
    margin: 0 3px;
    background-color: rgba(255, 255, 255, 0.6);
}
.gift-carousel .carousel-indicators .active {
    background-color: #fff;
}

.gift-tile[data-swatch="pink"] .gift-photo   { background: #F5D4D0; }
.gift-tile[data-swatch="green"] .gift-photo  { background: #CFE7D4; }
.gift-tile[data-swatch="purple"] .gift-photo { background: #DCD0EC; }
.gift-tile[data-swatch="yellow"] .gift-photo { background: #F3E5A6; }
.gift-tile .gift-photo-empty { background: #F0E6D0; }

.gift-tile .gift-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.gift-tile .gift-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
.gift-tile .gift-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
    text-align: left;
}
.gift-tile .gift-price {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
    text-align: right;
    white-space: nowrap;
}
.gift-tile .gift-desc {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.4;
    text-align: left;
    margin: 0;
}
.gift-tile .gift-price .price-original {
    text-decoration: line-through;
    color: var(--text-subtle);
    font-weight: 500;
    font-size: 0.85rem;
    margin-left: 0.3rem;
}

.gift-tile .gift-actions {
    display: flex;
    justify-content: flex-end;
}
.gift-tile .gift-details-btn {
    background: none;
    border: 0;
    padding: 0;
    color: var(--brand-primary);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
}
.gift-tile .gift-details-btn:hover { text-decoration: underline; }

.gift-tile.out-of-stock {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.gift-tile .out-of-stock-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(17,17,17,0.8);
    color: #fff;
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ===== Tier detail modal (mirrors gift-tile layout, larger) ===== */
.tier-detail-header-bar {
    border-bottom: 0;
    padding: 0.75rem 1rem 0;
}
.tier-detail-body {
    padding: 0.5rem 1.5rem 1.5rem;
}
.tier-detail-photo {
    width: 100%;
    max-width: 460px;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    background: #f7f4ee;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8d8273;
    margin: 0 auto 18px;
}
.tier-detail-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* Carousel images inside the detail modal — fit the whole image, no crop */
.tier-detail-photo .gift-carousel .carousel-item img {
    object-fit: contain;
}
.tier-detail-titlerow {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 10px;
}
.tier-detail-name {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--text-primary);
    text-align: left;
}
.tier-detail-price {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--text-primary);
    text-align: right;
    white-space: nowrap;
}
.tier-detail-desc {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.5;
    text-align: left;
    margin: 0;
}

/* ===== Personalize block ===== */
.logo-notice {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: var(--accent-tan);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 0.88rem;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.logo-notice i { color: var(--brand-primary); font-size: 1rem; margin-top: 2px; }

.suggestion-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 10px;
    align-items: center;
}
.suggestion-row .label {
    color: var(--text-muted);
    font-size: 0.82rem;
    margin-right: 4px;
}

.suggestion-chip {
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    padding: 0.35rem 0.8rem;
    font-size: 0.8rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.suggestion-chip:hover {
    background: var(--bg-cream);
    border-color: var(--text-muted);
}

.char-counter {
    float: right;
    color: var(--text-subtle);
    font-size: 0.78rem;
}

.prefilled-tag {
    display: none;
}

/* ===== Payment cards ===== */
.payment-method {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    margin-bottom: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s;
}

.payment-method.selected {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 1px var(--brand-primary);
}

.payment-method .card-brand {
    width: 44px;
    height: 28px;
    border-radius: 5px;
    background: var(--brand-dark);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.payment-method .card-info { flex: 1; min-width: 0; }
.payment-method .card-label { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); }
.payment-method .card-expires { color: var(--text-muted); font-size: 0.8rem; margin-top: 2px; }

.payment-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px;
    border: 1px dashed var(--border-soft);
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    background: transparent;
    width: 100%;
}

.payment-add:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
}

.payment-footnote {
    color: var(--text-muted);
    font-size: 0.78rem;
    margin-top: 10px;
}

/* ===== Default / Small pill ===== */
.pill {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.pill-default { background: var(--success-bg); color: var(--success-text); }
.pill-muted { background: var(--bg-cream); color: var(--text-muted); }

/* ===== Summary (right rail) ===== */
.wizard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 22px;
    align-items: start;
}

@media (max-width: 900px) {
    .wizard-layout { grid-template-columns: 1fr; }
    .summary-panel { position: static !important; }
}

.summary-panel {
    background: #fff;
    border: 1px solid var(--border-card);
    border-radius: 14px;
    padding: 20px;
    position: sticky;
    top: 24px;
}

.summary-panel h3 {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 1.25rem;
    margin: 0 0 14px;
}

.summary-tier {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.summary-tier .summary-swatch {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #F5D4D0;
    flex-shrink: 0;
}

.summary-tier .summary-tier-name { font-weight: 600; font-size: 0.92rem; }
.summary-tier .summary-tier-desc { color: var(--text-muted); font-size: 0.78rem; line-height: 1.35; }

.summary-empty {
    color: var(--text-muted);
    font-size: 0.85rem;
    padding: 4px 0 8px;
}

.summary-list {
    border-top: 1px solid var(--border-soft);
    padding-top: 12px;
    margin-bottom: 14px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 0.85rem;
}

.summary-row .label { color: var(--text-muted); }
.summary-row .value { color: var(--text-primary); font-weight: 500; text-align: right; }

.summary-total {
    border-top: 1px solid var(--border-soft);
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.summary-total .label { font-size: 0.9rem; color: var(--text-primary); font-weight: 600; }
.summary-total .value { font-family: var(--font-serif); font-weight: 800; font-size: 1.75rem; color: var(--text-primary); }

.summary-note {
    background: var(--accent-tan);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.78rem;
    color: var(--text-primary);
    margin-top: 14px;
    line-height: 1.4;
}

.summary-note i { color: var(--brand-primary); margin-right: 4px; }

/* ===== Order confirmation ===== */
.confirm-card {
    background: #fff;
    border: 1px solid var(--border-card);
    border-radius: 16px;
    padding: 36px 40px 32px;
    max-width: 560px;
    margin: 24px auto;
}

.confirm-check {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--success-bg);
    color: var(--success-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin: 0 auto 18px;
}

.confirm-title {
    text-align: center;
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 2.2rem;
    margin: 0 0 0.35rem;
    letter-spacing: -0.02em;
}

.confirm-sub {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1.8rem;
}

.confirm-sub .code {
    color: var(--text-primary);
    font-weight: 700;
}

.confirm-meta { margin-bottom: 1rem; }

.confirm-meta .meta-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 2px;
}

.confirm-meta .meta-value {
    font-size: 0.95rem;
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 0.9rem;
}

.confirm-meta .meta-value.big {
    font-size: 1.35rem;
    font-weight: 700;
}

.confirm-divider {
    border: none;
    border-top: 1px solid var(--border-soft);
    margin: 1.2rem 0 1.4rem;
}

.timeline-title {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
    margin: 0 0 0.75rem;
}

.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.timeline li {
    position: relative;
    padding: 0 0 1rem 20px;
    font-size: 0.88rem;
}

.timeline li::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent-tan-dim);
}

.timeline li.done::before {
    background: var(--success-dot);
}

.timeline li::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 16px;
    bottom: -4px;
    width: 2px;
    background: var(--border-card);
}

.timeline li:last-child::after { display: none; }

.timeline li .when {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.85rem;
}

.timeline li .what {
    color: var(--text-muted);
    margin-top: 2px;
}

.confirm-actions {
    display: flex;
    gap: 10px;
    margin-top: 1.5rem;
}

/* ===== Tracking table ===== */
.tracking-card {
    background: #fff;
    border: 1px solid var(--border-card);
    border-radius: 14px;
    overflow: hidden;
}

.tracking-table {
    width: 100%;
    border-collapse: collapse;
}

.tracking-table thead th {
    text-align: left;
    padding: 14px 20px;
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--border-soft);
    background: var(--bg-table-head);
}

.tracking-table tbody td {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-soft);
    vertical-align: top;
    font-size: 0.88rem;
}

.tracking-table tbody tr:last-child td { border-bottom: none; }

.tracking-table .product-name {
    font-weight: 600;
    color: var(--text-primary);
}

.tracking-table .product-sub {
    color: var(--text-muted);
    font-size: 0.78rem;
    margin-top: 2px;
}

.tracking-table .tracking-number {
    color: var(--brand-primary);
    font-weight: 600;
    text-decoration: none;
}
.tracking-table .tracking-number:hover { text-decoration: underline; }

.tracking-table .carrier {
    color: var(--text-muted);
    font-size: 0.78rem;
    margin-top: 2px;
}

.tracking-table .track-link {
    color: var(--brand-primary);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.tracking-table .track-link:hover { text-decoration: underline; }

.tracking-footer {
    background: var(--bg-table-head);
    text-align: center;
    padding: 14px 20px;
    color: var(--text-muted);
    font-size: 0.82rem;
}

/* ===== Status badges ===== */
.badge-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0.22rem 0.7rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
}

.badge-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.badge-pending    { background: var(--warning-bg); color: var(--warning-text); }
.badge-processing { background: var(--info-bg); color: var(--info-text); }
.badge-customizing{ background: var(--info-bg); color: var(--info-text); }
.badge-shipped    { background: var(--accent-tan); color: var(--warning-text); }
.badge-delivered  { background: var(--success-bg); color: var(--success-text); }
.badge-cancelled  { background: var(--danger-bg); color: var(--danger-text); }

/* ===== Account page ===== */
.kv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 24px;
}

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

.kv-grid .kv-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 4px;
}

.kv-grid .kv-value {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.95rem;
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.section-head h3 {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    margin: 0;
    font-weight: 700;
}

.section-head .muted {
    color: var(--text-muted);
    font-size: 0.83rem;
    margin-top: 4px;
}

.section-head-col h3 { margin-bottom: 4px; }

/* ===== Flash messages ===== */
.alert {
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.88rem;
    position: relative;
}

.alert-dismissible .btn-close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: inherit;
    opacity: 0.55;
}

.alert-success { background: var(--success-bg); color: var(--success-text); border-color: var(--success-bg); }
.alert-info    { background: var(--info-bg); color: var(--info-text); border-color: var(--info-bg); }
.alert-warning { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-bg); }
.alert-danger, .alert-error { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-bg); }

/* ===== Small helpers ===== */
.text-muted { color: var(--text-muted) !important; }
.text-center { text-align: center; }
.text-end    { text-align: right; }
.text-start  { text-align: left; }
.fw-bold   { font-weight: 700; }
.fw-semibold, .fw-medium { font-weight: 600; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.d-none { display: none !important; }
.d-flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-column { flex-direction: column; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-center { justify-content: center; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 1rem; }

/* ===== Empty state ===== */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
}

.empty-state i {
    font-size: 3rem;
    color: var(--accent-tan-dim);
    display: block;
    margin-bottom: 1rem;
}

/* Inline placeholder icon used in small "nothing uploaded yet" cells —
   smaller than .empty-state i, sits next to a label rather than centering. */
.placeholder-icon {
    font-size: 2rem;
    color: var(--text-subtle);
}

/* Image thumbnail used to preview uploaded sticker artwork on order detail. */
.sticker-thumb {
    max-height: 80px;
    max-width: 100%;
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    padding: 4px;
    background: #fff;
}

/* ===== Logo preview ===== */
.logo-preview {
    max-width: 180px;
    max-height: 70px;
    border-radius: 8px;
    border: 1px solid var(--border-soft);
    background: #fff;
    padding: 6px;
    object-fit: contain;
}

/* ===== Mobile sidebar ===== */
@media (max-width: 900px) {
    #app-wrapper { padding: 12px; gap: 12px; flex-direction: column; }
    .sidebar {
        position: fixed;
        top: 0; left: 0;
        height: 100vh;
        border-radius: 0;
        transform: translateX(-100%);
        width: 260px;
        margin: 0;
        z-index: 1040;
    }
    .sidebar.show { transform: translateX(0); }
    .topbar { display: flex; }
    .main-content { width: 100%; }
    .content-wrapper { padding: 8px 4px 40px; }
    .page-header h1 { font-size: 1.5rem; }
}

/* ===== Draft indicator (preserved) ===== */
.draft-flash { animation: draftPulse 0.6s ease; }
@keyframes draftPulse { 0% { opacity: 0.4; } 50% { opacity: 1; } 100% { opacity: 1; } }

/* ===== Dropdown menu helper (basic) ===== */
.dropdown { position: relative; }
.dropdown-menu {
    display: none;
    position: absolute;
    background: #fff;
    border: 1px solid var(--border-card);
    border-radius: 10px;
    padding: 6px;
    min-width: 200px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    z-index: 100;
}
.dropdown-menu.show { display: block; }
.dropdown-menu-end { right: 0; left: auto; }
.dropdown-item,
.dropdown-item-text {
    display: block;
    padding: 0.45rem 0.75rem;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.88rem;
    border-radius: 6px;
}
.dropdown-item:hover { background: var(--bg-cream); }
.dropdown-divider { border: none; border-top: 1px solid var(--border-soft); margin: 4px 0; }

/* ===== Legacy badge helpers ===== */
/* ===== Badge taxonomy ===========================================
   1. Order/shipment status — `.badge-status .badge-{state}` (with a colored
      dot, defined above). Reserved for `Order.status` only.
   2. Everything else (active/inactive, role, type, attribute, count) —
      `.badge .bg-{color}-subtle` (tinted background, dark on-tone text).
   3. Sidebar notification counts — `.badge .bg-{color} .rounded-pill`,
      kept solid-ish to draw the eye to unread/pending volume.

   The bare `.bg-*` shims below map Bootstrap's default solid utilities to
   our subtle palette so older usages still render on-brand. New code should
   prefer the explicit `.bg-*-subtle` form for clarity.
   =============================================================== */
.badge { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 20px; font-size: 0.72rem; font-weight: 600; }

/* Subtle pill variants — these override Bootstrap's default subtle tints
   (which are blue/cyan/etc.) with the brand palette. */
.badge.bg-primary-subtle,   .bg-primary-subtle   { background: var(--brand-primary-subtle); color: var(--brand-primary); }
.badge.bg-success-subtle,   .bg-success-subtle   { background: var(--success-bg);  color: var(--success-text); }
.badge.bg-warning-subtle,   .bg-warning-subtle   { background: var(--warning-bg);  color: var(--warning-text); }
.badge.bg-danger-subtle,    .bg-danger-subtle    { background: var(--danger-bg);   color: var(--danger-text); }
.badge.bg-info-subtle,      .bg-info-subtle      { background: var(--info-bg);     color: var(--info-text); }
.badge.bg-secondary-subtle, .bg-secondary-subtle { background: var(--bg-cream);    color: var(--text-muted); }

/* Bare-color shims: Bootstrap's solid `.bg-*` utilities are remapped to the
   subtle palette here so legacy `class="badge bg-success"` still renders the
   intended soft pill. `.bg-primary` stays solid for sidebar count badges. */
.badge.bg-primary,   .bg-primary   { background: var(--brand-primary);   color: #fff; }
.badge.bg-success,   .bg-success   { background: var(--success-bg);      color: var(--success-text); }
.badge.bg-warning,   .bg-warning   { background: var(--warning-bg);      color: var(--warning-text); }
.badge.bg-danger,    .bg-danger    { background: var(--danger-bg);       color: var(--danger-text); }
.badge.bg-info,      .bg-info      { background: var(--info-bg);         color: var(--info-text); }
.badge.bg-secondary, .bg-secondary { background: var(--bg-cream);        color: var(--text-muted); }

.text-primary   { color: var(--brand-primary)  !important; }
.text-success   { color: var(--success-text)   !important; }
.text-warning   { color: var(--warning-text)   !important; }
.text-danger    { color: var(--danger-text)    !important; }
.text-info      { color: var(--info-text)      !important; }
.text-secondary { color: var(--text-muted)     !important; }

.rounded-pill { border-radius: 999px; }

/* ===== Compatibility shims for internal pages (keep legacy bootstrap-ish classes) ===== */
.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
}
.py-5 { padding-top: 2rem; padding-bottom: 2rem; }
.row { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.row > [class*="col-"] { padding: 0 8px; }
.col, .col-12 { flex: 0 0 100%; max-width: 100%; }
.col-md-3 { flex: 0 0 25%; max-width: 25%; }
.col-md-4 { flex: 0 0 33.333%; max-width: 33.333%; }
.col-md-5 { flex: 0 0 41.667%; max-width: 41.667%; }
.col-md-6 { flex: 0 0 50%; max-width: 50%; }
.col-md-7 { flex: 0 0 58.333%; max-width: 58.333%; }
.col-md-8 { flex: 0 0 66.666%; max-width: 66.666%; }
.col-md-9 { flex: 0 0 75%; max-width: 75%; }

@media (max-width: 767px) {
    .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 {
        flex: 0 0 100%; max-width: 100%;
    }
}

.g-3 > * { margin-bottom: 1rem; }
.g-4 > * { margin-bottom: 1.5rem; }

/* ===== Form check ===== */
.form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: var(--text-primary);
}

.form-check-input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--brand-primary);
}

/* ===== Tabs (legacy) — used on internal pages ===== */
.nav-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-soft);
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    gap: 4px;
}
.nav-tabs .nav-link {
    color: var(--text-muted);
    font-weight: 500;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.6rem 1rem;
    background: transparent;
    cursor: pointer;
}
.nav-tabs .nav-link.active {
    color: var(--brand-primary);
    border-bottom-color: var(--brand-primary);
}

/* ===== Internal ops tiles (dashboard metrics, quick actions, client cards) ===== */
.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border-card);
    border-radius: 14px;
    padding: 20px;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

a:hover > .stat-card {
    border-color: var(--brand-primary);
    box-shadow: 0 4px 14px rgba(242, 107, 33, 0.08);
    transform: translateY(-1px);
}

.stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.stat-value {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
}

.stat-label {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
}

.quick-action {
    display: block;
    background: var(--card-bg);
    border: 1px solid var(--border-card);
    border-radius: 14px;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    color: var(--text-primary);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.quick-action i {
    font-size: 1.5rem;
    color: var(--brand-primary);
    display: block;
    margin-bottom: 8px;
}

.quick-action:hover {
    border-color: var(--brand-primary);
    box-shadow: 0 4px 14px rgba(242, 107, 33, 0.08);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.table-card {
    background: var(--card-bg);
    border: 1px solid var(--border-card);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 16px;
}

.table-card .table {
    margin-bottom: 0;
}

.table-card .table thead th {
    background: var(--bg-cream-soft);
    border-bottom: 1px solid var(--border-soft);
    border-top: none;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 12px 16px;
}

.table-card .table tbody td {
    border-top: 1px solid var(--border-soft);
    padding: 14px 16px;
    vertical-align: middle;
}

.table-card .table tbody tr:first-child td {
    border-top: none;
}

.avatar-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--brand-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
}