:root{
    --primary:#0f766e;
    --primary-dark:#115e59;
    --secondary:#64748b;
    --success:#16a34a;
    --danger:#dc2626;
    --border:#e2e8f0;
    --bg:#f8fafc;
    --card:#ffffff;
    --text:#1e293b;
    --muted:#64748b;
    --radius:14px;
    --shadow:0 10px 25px rgba(15,23,42,.08);
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body.vendor-portal-body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.6;
}

.vendor-container{
    width:min(1200px,92%);
    margin:auto;
}

.vendor-header{
    background:#fff;
    border-bottom:1px solid var(--border);
    position:sticky;
    top:0;
    z-index:100;
}

.vendor-nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 0;
}

.vendor-brand{
    display:flex;
    align-items:center;
    gap:15px;
    text-decoration:none;
    color:inherit;
}

.vendor-brand-mark{
    width:46px;
    height:46px;
    border-radius:12px;
    background:var(--primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    font-weight:700;
}

.vendor-brand strong{
    display:block;
    font-size:28px;
}

.vendor-brand small{
    color:var(--muted);
}

.vendor-menu{
    display:flex;
    gap:28px;
    align-items:center;
}

.vendor-menu a{
    text-decoration:none;
    color:var(--text);
    font-weight:600;
}

.vendor-account-menu summary{
    list-style:none;
    cursor:pointer;
    padding:10px 16px;
    border:1px solid var(--border);
    border-radius:10px;
    background:#fff;
    font-weight:600;
}

.vendor-account-menu div{
    position:absolute;
    right:0;
    margin-top:10px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    min-width:220px;
    padding:15px;
    box-shadow:var(--shadow);
}

.vendor-account-link{
    display:block;
    margin:12px 0;
    text-decoration:none;
    color:var(--text);
}

.vendor-main{
    padding:40px 0;
    min-height:calc(100vh - 180px);
}

.vendor-page-heading{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:30px;
}

.vendor-page-heading span{
    color:var(--primary);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:.8rem;
}

.vendor-page-heading h1{
    font-size:40px;
    margin-top:6px;
}

.vendor-page-heading p{
    color:var(--muted);
    margin-top:8px;
}

.vendor-profile-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(420px,1fr));
    gap:30px;
}

.vendor-card{
    background:#fff;
    border-radius:var(--radius);
    border:1px solid var(--border);
    box-shadow:var(--shadow);
    overflow:hidden;
}

.vendor-card-header{
    padding:22px 28px;
    border-bottom:1px solid var(--border);
}

.vendor-card-header h2{
    font-size:24px;
}

.vendor-card-header p{
    color:var(--muted);
    margin-top:4px;
}

.vendor-form{
    padding:28px;
}

.vendor-form-group{
    margin-bottom:20px;
}

.vendor-form-group label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
}

.vendor-form-group input,
.vendor-form-group textarea,
.vendor-form-group select{
    width:100%;
    padding:13px 15px;
    border:1px solid var(--border);
    border-radius:10px;
    font-size:15px;
    background:#fff;
}

.vendor-form-group input:focus,
.vendor-form-group textarea:focus,
.vendor-form-group select:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(15,118,110,.15);
}

.vendor-readonly-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
    margin:25px 0;
}

.vendor-readonly-grid div{
    background:#f8fafc;
    padding:15px;
    border-radius:10px;
    border:1px solid var(--border);
}

.vendor-readonly-grid span{
    display:block;
    color:var(--muted);
    font-size:.85rem;
}

.vendor-readonly-grid strong{
    display:block;
    margin-top:6px;
}

.vendor-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 22px;
    border:none;
    border-radius:10px;
    cursor:pointer;
    text-decoration:none;
    font-weight:600;
    transition:.2s;
}

.vendor-btn-primary{
    background:var(--primary);
    color:#fff;
}

.vendor-btn-primary:hover{
    background:var(--primary-dark);
}

.vendor-btn-secondary{
    background:#fff;
    color:var(--text);
    border:1px solid var(--border);
}

.vendor-alert{
    padding:16px 20px;
    border-radius:10px;
    margin-bottom:24px;
}

.vendor-alert-success{
    background:#ecfdf5;
    color:var(--success);
    border:1px solid #bbf7d0;
}

.vendor-alert-error{
    background:#fef2f2;
    color:var(--danger);
    border:1px solid #fecaca;
}

.vendor-password-help{
    color:var(--muted);
    font-size:.9rem;
    margin-bottom:20px;
}

.vendor-footer{
    background:#0f172a;
    color:#fff;
    margin-top:50px;
}

.vendor-footer .vendor-container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:22px 0;
}

@media(max-width:768px){
    .vendor-nav,
    .vendor-page-heading,
    .vendor-footer .vendor-container{
        flex-direction:column;
        align-items:flex-start;
        gap:20px;
    }

    .vendor-menu{
        flex-wrap:wrap;
        gap:15px;
    }

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

    .vendor-readonly-grid{
        grid-template-columns:1fr;
    }
}

/* =========================================================
   KITOMANGA VENDOR CENTRE — SHARED PAGE STYLING
   Dashboard, Products, Orders, Earnings, Reviews, Support
   ========================================================= */

.vendor-dashboard-page,
.vendor-products-page,
.vendor-orders-page,
.vendor-earnings-page,
.vendor-reviews-page,
.vendor-customer-care-page {
    padding: 0 0 40px;
}

/* Page heading */

.vendor-section-heading,
.vendor-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
}

.vendor-section-heading h1,
.vendor-page-header h1 {
    margin: 0;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.15;
    color: var(--text);
}

.vendor-section-heading h2,
.vendor-page-header h2 {
    margin: 0;
    font-size: 26px;
    color: var(--text);
}

.vendor-section-heading p,
.vendor-page-header p {
    margin: 7px 0 0;
    color: var(--muted);
}

.vendor-eyebrow,
.vendor-section-label {
    display: block;
    margin-bottom: 6px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* Dashboard welcome panel */

.vendor-welcome-card,
.vendor-dashboard-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 28px;
    padding: 32px;
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            var(--primary) 0%,
            var(--primary-dark) 100%
        );
    color: #fff;
    box-shadow: var(--shadow);
}

.vendor-welcome-card::after,
.vendor-dashboard-hero::after {
    content: "";
    position: absolute;
    top: -80px;
    right: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
}

.vendor-welcome-card h1,
.vendor-welcome-card h2,
.vendor-dashboard-hero h1,
.vendor-dashboard-hero h2 {
    position: relative;
    z-index: 1;
    margin: 0 0 8px;
    color: #fff;
}

.vendor-welcome-card p,
.vendor-dashboard-hero p {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0;
    color: rgba(255,255,255,.85);
}

/* KPI and statistics cards */

.vendor-stats-grid,
.vendor-kpi-grid,
.vendor-dashboard-grid,
.vendor-summary-grid,
.vendor-earnings-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}

.vendor-stat-card,
.vendor-kpi-card,
.vendor-summary-card,
.vendor-metric-card {
    position: relative;
    overflow: hidden;
    min-height: 135px;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow);
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.vendor-stat-card:hover,
.vendor-kpi-card:hover,
.vendor-summary-card:hover,
.vendor-metric-card:hover {
    transform: translateY(-3px);
    border-color: rgba(15,118,110,.35);
    box-shadow: 0 16px 34px rgba(15,23,42,.12);
}

.vendor-stat-card span,
.vendor-kpi-card span,
.vendor-summary-card span,
.vendor-metric-card span,
.vendor-stat-label {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.vendor-stat-card strong,
.vendor-kpi-card strong,
.vendor-summary-card strong,
.vendor-metric-card strong,
.vendor-stat-value {
    display: block;
    color: var(--text);
    font-size: clamp(25px, 3vw, 34px);
    line-height: 1.2;
}

.vendor-stat-card small,
.vendor-kpi-card small,
.vendor-summary-card small,
.vendor-metric-card small {
    display: block;
    margin-top: 8px;
    color: var(--muted);
}

.vendor-stat-icon,
.vendor-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 15px;
    border-radius: 12px;
    background: rgba(15,118,110,.1);
    color: var(--primary);
    font-size: 21px;
}

/* Shared content cards */

.vendor-panel,
.vendor-content-card,
.vendor-table-card,
.vendor-dashboard-card,
.vendor-chart-card,
.vendor-support-card {
    overflow: hidden;
    margin-bottom: 25px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow);
}

.vendor-panel-header,
.vendor-table-card-header,
.vendor-content-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

.vendor-panel-header h2,
.vendor-panel-header h3,
.vendor-table-card-header h2,
.vendor-table-card-header h3,
.vendor-content-card-header h2,
.vendor-content-card-header h3 {
    margin: 0;
    color: var(--text);
}

.vendor-panel-header p,
.vendor-table-card-header p,
.vendor-content-card-header p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.vendor-panel-body,
.vendor-content-card-body {
    padding: 24px;
}

/* Toolbars and filters */

.vendor-toolbar,
.vendor-table-toolbar,
.vendor-filter-bar,
.vendor-page-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 20px;
}

.vendor-toolbar-left,
.vendor-toolbar-right,
.vendor-filter-group,
.vendor-action-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.vendor-search,
.vendor-search-box {
    position: relative;
    min-width: 260px;
    flex: 1;
}

.vendor-search input,
.vendor-search-box input,
.vendor-filter-bar input,
.vendor-filter-bar select,
.vendor-toolbar input,
.vendor-toolbar select {
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font: inherit;
}

.vendor-search input,
.vendor-search-box input {
    width: 100%;
}

.vendor-search input:focus,
.vendor-search-box input:focus,
.vendor-filter-bar input:focus,
.vendor-filter-bar select:focus,
.vendor-toolbar input:focus,
.vendor-toolbar select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(15,118,110,.13);
}

/* Shared buttons */

.vendor-btn-success {
    background: #16a34a;
    color: #fff;
}

.vendor-btn-success:hover {
    background: #15803d;
}

.vendor-btn-danger {
    background: #dc2626;
    color: #fff;
}

.vendor-btn-danger:hover {
    background: #b91c1c;
}

.vendor-btn-warning {
    background: #f59e0b;
    color: #fff;
}

.vendor-btn-outline {
    border: 1px solid var(--primary);
    background: transparent;
    color: var(--primary);
}

.vendor-btn-outline:hover {
    background: rgba(15,118,110,.08);
}

.vendor-btn-sm {
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 13px;
}

.vendor-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* Tables */

.vendor-table-wrapper,
.vendor-responsive-table,
.vendor-main .table-responsive {
    width: 100%;
    overflow-x: auto;
    border-radius: 12px;
    -webkit-overflow-scrolling: touch;
}

.vendor-table,
.vendor-main table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    background: #fff;
}

.vendor-table th,
.vendor-main table th {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

.vendor-table td,
.vendor-main table td {
    padding: 15px 16px;
    border-bottom: 1px solid #edf2f7;
    color: var(--text);
    vertical-align: middle;
}

.vendor-table tbody tr,
.vendor-main table tbody tr {
    transition: background .18s ease;
}

.vendor-table tbody tr:hover,
.vendor-main table tbody tr:hover {
    background: #f8fafc;
}

.vendor-table tbody tr:last-child td,
.vendor-main table tbody tr:last-child td {
    border-bottom: 0;
}

.vendor-table-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.vendor-table a:not(.vendor-btn) {
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
}

.vendor-table a:not(.vendor-btn):hover {
    text-decoration: underline;
}

/* Product presentation */

.vendor-products-grid,
.vendor-product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.vendor-product-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.vendor-product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(15,23,42,.12);
}

.vendor-product-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 190px;
    overflow: hidden;
    background: #f1f5f9;
}

.vendor-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vendor-product-body {
    padding: 18px;
}

.vendor-product-body h3 {
    margin: 0 0 8px;
    font-size: 18px;
}

.vendor-product-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    color: var(--muted);
    font-size: 13px;
}

.vendor-product-price {
    color: var(--primary);
    font-size: 20px;
    font-weight: 800;
}

.vendor-product-actions {
    display: flex;
    gap: 8px;
    padding: 0 18px 18px;
}

/* Orders */

.vendor-order-number,
.vendor-reference {
    color: var(--primary);
    font-weight: 800;
}

.vendor-order-customer {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.vendor-order-customer small {
    color: var(--muted);
}

.vendor-order-total {
    font-weight: 800;
    white-space: nowrap;
}

/* Earnings */

.vendor-balance-card {
    padding: 28px;
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            #0f766e,
            #0f4c5c
        );
    color: #fff;
    box-shadow: var(--shadow);
}

.vendor-balance-card span {
    display: block;
    margin-bottom: 8px;
    color: rgba(255,255,255,.75);
    font-weight: 700;
}

.vendor-balance-card strong {
    display: block;
    color: #fff;
    font-size: clamp(30px, 4vw, 44px);
}

.vendor-balance-card small {
    display: block;
    margin-top: 10px;
    color: rgba(255,255,255,.75);
}

.vendor-transaction-positive {
    color: #15803d;
    font-weight: 800;
}

.vendor-transaction-negative {
    color: #dc2626;
    font-weight: 800;
}

/* Reviews */

.vendor-reviews-list {
    display: grid;
    gap: 18px;
}

.vendor-review-card {
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
}

.vendor-review-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 14px;
}

.vendor-review-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vendor-review-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(15,118,110,.12);
    color: var(--primary);
    font-weight: 800;
}

.vendor-review-author strong {
    display: block;
}

.vendor-review-author small,
.vendor-review-date {
    color: var(--muted);
}

.vendor-rating,
.vendor-stars {
    color: #f59e0b;
    letter-spacing: 2px;
    white-space: nowrap;
}

.vendor-review-message {
    margin: 0;
    color: #475569;
    line-height: 1.75;
}

/* Customer care */

.vendor-support-grid,
.vendor-customer-care-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
    gap: 24px;
}

.vendor-ticket-list {
    display: grid;
    gap: 14px;
}

.vendor-ticket-card {
    display: block;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition:
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.vendor-ticket-card:hover {
    transform: translateY(-2px);
    border-color: rgba(15,118,110,.4);
    box-shadow: var(--shadow);
}

.vendor-ticket-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.vendor-ticket-card h3 {
    margin: 0;
    font-size: 17px;
}

.vendor-ticket-card p {
    margin: 0;
    color: var(--muted);
}

.vendor-ticket-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 13px;
    color: var(--muted);
    font-size: 13px;
}

.vendor-contact-option {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #f8fafc;
}

.vendor-contact-option + .vendor-contact-option {
    margin-top: 14px;
}

.vendor-contact-option strong {
    display: block;
    margin-bottom: 5px;
}

.vendor-contact-option span,
.vendor-contact-option p {
    color: var(--muted);
}

/* Status badges */

.vendor-badge,
.vendor-status,
.vendor-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 26px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
}

.vendor-badge-active,
.vendor-badge-success,
.vendor-status-active,
.vendor-status-completed,
.vendor-status-paid,
.vendor-status-delivered,
.vendor-status-verified {
    background: #dcfce7;
    color: #166534;
}

.vendor-badge-pending,
.vendor-status-pending,
.vendor-status-processing,
.vendor-status-awaiting {
    background: #fef3c7;
    color: #92400e;
}

.vendor-badge-danger,
.vendor-status-cancelled,
.vendor-status-rejected,
.vendor-status-failed,
.vendor-status-suspended {
    background: #fee2e2;
    color: #991b1b;
}

.vendor-badge-info,
.vendor-status-shipped,
.vendor-status-confirmed,
.vendor-status-open {
    background: #dbeafe;
    color: #1e40af;
}

.vendor-badge-muted,
.vendor-status-draft,
.vendor-status-closed,
.vendor-status-inactive {
    background: #e2e8f0;
    color: #475569;
}

/* Forms on all vendor pages */

.vendor-main form label {
    color: var(--text);
    font-weight: 700;
}

.vendor-main form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.vendor-main form textarea,
.vendor-main form select {
    width: 100%;
    min-height: 44px;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font: inherit;
}

.vendor-main form textarea {
    min-height: 120px;
    resize: vertical;
}

.vendor-main form input:focus,
.vendor-main form textarea:focus,
.vendor-main form select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(15,118,110,.13);
}

/* Empty states */

.vendor-empty-state {
    padding: 55px 25px;
    border: 1px dashed #cbd5e1;
    border-radius: var(--radius);
    background: #f8fafc;
    text-align: center;
}

.vendor-empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: rgba(15,118,110,.1);
    color: var(--primary);
    font-size: 27px;
}

.vendor-empty-state h3 {
    margin: 0 0 7px;
    font-size: 20px;
}

.vendor-empty-state p {
    max-width: 520px;
    margin: 0 auto 18px;
    color: var(--muted);
}

/* Pagination */

.vendor-pagination,
.pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 22px;
}

.vendor-pagination a,
.vendor-pagination span,
.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #fff;
    color: var(--text);
    font-weight: 700;
    text-decoration: none;
}

.vendor-pagination a:hover,
.pagination a:hover,
.vendor-pagination .active,
.pagination .active {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

/* Account dropdown correction */

.vendor-account-menu {
    position: relative;
}

.vendor-account-menu[open] summary {
    border-color: var(--primary);
}

.vendor-account-menu summary::-webkit-details-marker {
    display: none;
}

.vendor-account-menu form button {
    width: 100%;
    padding: 9px 0;
    border: 0;
    background: transparent;
    color: #dc2626;
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

/* Responsive behaviour */

@media (max-width: 1100px) {
    .vendor-stats-grid,
    .vendor-kpi-grid,
    .vendor-dashboard-grid,
    .vendor-summary-grid,
    .vendor-earnings-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vendor-products-grid,
    .vendor-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vendor-support-grid,
    .vendor-customer-care-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .vendor-section-heading,
    .vendor-page-header,
    .vendor-panel-header,
    .vendor-table-card-header,
    .vendor-content-card-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .vendor-toolbar,
    .vendor-table-toolbar,
    .vendor-filter-bar,
    .vendor-page-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .vendor-toolbar-left,
    .vendor-toolbar-right,
    .vendor-filter-group,
    .vendor-action-group {
        width: 100%;
    }

    .vendor-search,
    .vendor-search-box {
        width: 100%;
        min-width: 0;
    }

    .vendor-stats-grid,
    .vendor-kpi-grid,
    .vendor-dashboard-grid,
    .vendor-summary-grid,
    .vendor-earnings-summary,
    .vendor-products-grid,
    .vendor-product-grid {
        grid-template-columns: 1fr;
    }

    .vendor-welcome-card,
    .vendor-dashboard-hero {
        padding: 24px;
    }

    .vendor-panel-body,
    .vendor-content-card-body {
        padding: 18px;
    }

    .vendor-table th,
    .vendor-main table th,
    .vendor-table td,
    .vendor-main table td {
        padding: 12px;
        font-size: 13px;
    }

    .vendor-review-header,
    .vendor-ticket-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 520px) {
    .vendor-container {
        width: min(94%, 1200px);
    }

    .vendor-stat-card,
    .vendor-kpi-card,
    .vendor-summary-card,
    .vendor-metric-card {
        min-height: auto;
    }

    .vendor-table-actions,
    .vendor-product-actions {
        flex-wrap: wrap;
    }
}

/* =========================================================
   VENDOR PORTAL — COMPLETE GENERIC PAGE POLISH
   Dashboard, Products, Orders, Earnings, Reviews,
   Customer Care and Onboarding
   ========================================================= */

.vendor-main {
    width: 100%;
}

.vendor-main > section:not(.vendor-profile-page),
.vendor-main > div:not(.vendor-container) {
    width: min(1100px, 92%);
    margin-left: auto;
    margin-right: auto;
}

.vendor-main h1 {
    margin: 6px 0 10px;
    color: var(--text);
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.15;
}

.vendor-main h2 {
    margin: 0 0 8px;
    color: var(--text);
    font-size: 25px;
    line-height: 1.25;
}

.vendor-main h3 {
    margin: 0 0 7px;
    color: var(--text);
    font-size: 18px;
}

.vendor-main p {
    color: #475569;
}

.vendor-main a {
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
}

.vendor-main a:hover {
    text-decoration: underline;
}

/* Breadcrumbs */

.vendor-main nav,
.vendor-main .breadcrumb,
.vendor-main .breadcrumbs {
    margin-bottom: 12px;
    color: var(--muted);
    font-size: 14px;
}

/* Section labels */

.vendor-main section > span:first-child,
.vendor-main section > div > span:first-child,
.vendor-main .eyebrow,
.vendor-main .section-label {
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* Main page sections */

.vendor-main section section,
.vendor-main .content-section,
.vendor-main .dashboard-section,
.vendor-main .catalogue-section,
.vendor-main .orders-section,
.vendor-main .reviews-section,
.vendor-main .earnings-section,
.vendor-main .support-section {
    margin-top: 24px;
}

/* Summary blocks */

.vendor-main .summary,
.vendor-main .summary-grid,
.vendor-main .stats,
.vendor-main .stats-grid,
.vendor-main .metrics,
.vendor-main .metrics-grid,
.vendor-main .kpis,
.vendor-main .kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin: 24px 0;
}

.vendor-main .summary > div,
.vendor-main .stats > div,
.vendor-main .metrics > div,
.vendor-main .kpis > div,
.vendor-main .summary-grid > div,
.vendor-main .stats-grid > div,
.vendor-main .metrics-grid > div,
.vendor-main .kpi-grid > div {
    min-height: 120px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow);
}

.vendor-main .summary strong,
.vendor-main .stats strong,
.vendor-main .metrics strong,
.vendor-main .kpis strong {
    display: block;
    margin-top: 7px;
    color: var(--text);
    font-size: 26px;
}

/* Convert common statistic lines into cards */

.vendor-main .vendor-statistics,
.vendor-main .vendor-summary,
.vendor-main .order-summary,
.vendor-main .product-summary,
.vendor-main .earnings-summary,
.vendor-main .customer-care-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin: 24px 0;
}

.vendor-main .vendor-statistics > *,
.vendor-main .vendor-summary > *,
.vendor-main .order-summary > *,
.vendor-main .product-summary > *,
.vendor-main .earnings-summary > *,
.vendor-main .customer-care-summary > * {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow);
}

/* Generic cards */

.vendor-main article,
.vendor-main .card,
.vendor-main .panel,
.vendor-main .box,
.vendor-main .ledger,
.vendor-main .queue,
.vendor-main .listing,
.vendor-main .empty-state,
.vendor-main .review-card,
.vendor-main .dispute-card,
.vendor-main .ticket-card {
    margin: 22px 0;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: #fff;
    box-shadow: var(--shadow);
}

/* Search and filter areas */

.vendor-main form:not(.vendor-form) {
    margin: 18px 0 26px;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow);
}

.vendor-main form:not(.vendor-form) > div {
    margin-bottom: 15px;
}

.vendor-main form:not(.vendor-form) label {
    display: block;
    margin-bottom: 7px;
    color: var(--text);
    font-weight: 700;
}

.vendor-main input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.vendor-main select,
.vendor-main textarea {
    display: block;
    width: 100%;
    min-height: 46px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font: inherit;
}

.vendor-main textarea {
    min-height: 120px;
    resize: vertical;
}

.vendor-main input:focus,
.vendor-main select:focus,
.vendor-main textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(15,118,110,.13);
}

/* Buttons */

.vendor-main button,
.vendor-main input[type="submit"],
.vendor-main input[type="button"] {
    min-height: 42px;
    padding: 10px 18px;
    border: 0;
    border-radius: 9px;
    background: var(--primary);
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.vendor-main button:hover,
.vendor-main input[type="submit"]:hover,
.vendor-main input[type="button"]:hover {
    background: var(--primary-dark);
}

/* Text links used as actions */

.vendor-main a[href*="create"],
.vendor-main a[href*="add"],
.vendor-main a[href*="new"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 18px;
    border-radius: 9px;
    background: var(--primary);
    color: #fff;
    text-decoration: none;
}

.vendor-main a[href*="create"]:hover,
.vendor-main a[href*="add"]:hover,
.vendor-main a[href*="new"]:hover {
    background: var(--primary-dark);
}

/* Tables */

.vendor-main table {
    width: 100%;
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow);
}

.vendor-main table th {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.vendor-main table td {
    padding: 15px 16px;
    border-bottom: 1px solid #edf2f7;
    vertical-align: middle;
}

.vendor-main table tr:last-child td {
    border-bottom: 0;
}

.vendor-main table tbody tr:hover {
    background: #f8fafc;
}

/* Empty result messages */

.vendor-main .empty,
.vendor-main .no-results,
.vendor-main .no-records,
.vendor-main .empty-state {
    margin-top: 18px;
    padding: 38px 24px;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    background: #f8fafc;
    text-align: center;
}

.vendor-main .empty h3,
.vendor-main .no-results h3,
.vendor-main .no-records h3,
.vendor-main .empty-state h3 {
    margin-bottom: 7px;
}

/* Earnings page */

.vendor-main .earnings-card,
.vendor-main .payout-card,
.vendor-main .balance-card {
    margin: 20px 0;
    padding: 26px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    box-shadow: var(--shadow);
}

.vendor-main .earnings-card *,
.vendor-main .payout-card *,
.vendor-main .balance-card * {
    color: #fff;
}

.vendor-main .earnings-card strong,
.vendor-main .payout-card strong,
.vendor-main .balance-card strong {
    display: block;
    margin-top: 7px;
    font-size: 34px;
}

/* Reviews and Customer Care navigation */

.vendor-main .tabs,
.vendor-main .tab-links,
.vendor-main .care-tabs,
.vendor-main .review-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow);
}

.vendor-main .tabs a,
.vendor-main .tab-links a,
.vendor-main .care-tabs a,
.vendor-main .review-tabs a {
    padding: 9px 14px;
    border-radius: 8px;
    color: #475569;
    text-decoration: none;
}

.vendor-main .tabs a:hover,
.vendor-main .tab-links a:hover,
.vendor-main .care-tabs a:hover,
.vendor-main .review-tabs a:hover {
    background: #ecfdf5;
    color: var(--primary);
}

/* Onboarding */

.vendor-main .onboarding-hero,
.vendor-main .vendor-onboarding-hero {
    width: 100%;
    margin: 0 0 34px;
    padding: 34px max(6%, calc((100% - 1100px) / 2));
    border-radius: 0 0 18px 18px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
}

.vendor-main .onboarding-hero *,
.vendor-main .vendor-onboarding-hero * {
    color: #fff;
}

.vendor-main .progress,
.vendor-main .progress-steps,
.vendor-main .approval-process,
.vendor-main .registered-details {
    margin: 22px 0;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: #fff;
    box-shadow: var(--shadow);
}

/* Dashboard content */

.vendor-main .dashboard-welcome,
.vendor-main .welcome-panel {
    margin-bottom: 26px;
    padding: 30px;
    border-radius: 17px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    box-shadow: var(--shadow);
}

.vendor-main .dashboard-welcome *,
.vendor-main .welcome-panel * {
    color: #fff;
}

/* Footer spacing */

.vendor-main {
    min-height: calc(100vh - 180px);
    padding-bottom: 55px;
}

/* Responsive */

@media (max-width: 1000px) {
    .vendor-main .summary,
    .vendor-main .summary-grid,
    .vendor-main .stats,
    .vendor-main .stats-grid,
    .vendor-main .metrics,
    .vendor-main .metrics-grid,
    .vendor-main .kpis,
    .vendor-main .kpi-grid,
    .vendor-main .vendor-statistics,
    .vendor-main .vendor-summary,
    .vendor-main .order-summary,
    .vendor-main .product-summary,
    .vendor-main .earnings-summary,
    .vendor-main .customer-care-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .vendor-main > section:not(.vendor-profile-page),
    .vendor-main > div:not(.vendor-container) {
        width: 94%;
    }

    .vendor-main .summary,
    .vendor-main .summary-grid,
    .vendor-main .stats,
    .vendor-main .stats-grid,
    .vendor-main .metrics,
    .vendor-main .metrics-grid,
    .vendor-main .kpis,
    .vendor-main .kpi-grid,
    .vendor-main .vendor-statistics,
    .vendor-main .vendor-summary,
    .vendor-main .order-summary,
    .vendor-main .product-summary,
    .vendor-main .earnings-summary,
    .vendor-main .customer-care-summary {
        grid-template-columns: 1fr;
    }

    .vendor-main article,
    .vendor-main .card,
    .vendor-main .panel,
    .vendor-main .box,
    .vendor-main form:not(.vendor-form) {
        padding: 18px;
    }

    .vendor-main table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* Onboarding description visibility fix */
.vendor-main .onboarding-hero p,
.vendor-main .vendor-onboarding-hero p,
.vendor-dashboard-hero p,
.vendor-welcome-card p {
    color: #ffffff !important;
    opacity: 1 !important;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}


/* =========================================================
   KITOMANGA SMART VENDOR DASHBOARD
   ========================================================= */

.vendor-smart-dashboard {
    min-height: 100vh;
    background: #f4f7fb;
    color: #152238;
}

.vendor-smart-hero {
    padding: 48px 0 42px;
    background:
        radial-gradient(circle at top right, rgba(19, 142, 121, .18), transparent 36%),
        linear-gradient(135deg, #10233d 0%, #173653 60%, #0f766e 140%);
    color: #fff;
}

.vendor-smart-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    align-items: center;
}

.vendor-eyebrow,
.vendor-section-label {
    display: block;
    margin-bottom: 8px;
    color: #0f8275;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
}

.vendor-smart-hero .vendor-eyebrow {
    color: #6ee7d2;
}

.vendor-smart-hero h1 {
    margin: 0 0 10px;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.08;
}

.vendor-smart-hero p {
    max-width: 680px;
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: 16px;
    line-height: 1.65;
}

.vendor-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.vendor-primary-action,
.vendor-secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 10px;
    font-weight: 750;
    text-decoration: none;
}

.vendor-primary-action {
    background: #12a58f;
    color: #fff;
}

.vendor-secondary-action {
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.08);
    color: #fff;
}

.vendor-store-summary {
    min-width: 280px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 18px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(12px);
}

.vendor-store-summary strong,
.vendor-store-summary small {
    display: block;
}

.vendor-store-summary small {
    margin-top: 4px;
    color: rgba(255,255,255,.66);
}

.vendor-store-summary .vendor-verification {
    grid-column: 1 / -1;
    width: max-content;
}

.vendor-smart-content {
    padding-top: 30px;
    padding-bottom: 60px;
}

.vendor-approval-banner {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    margin-bottom: 24px;
    padding: 20px 22px;
    border: 1px solid #d8e2ed;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(20, 37, 63, .06);
}

.vendor-approval-banner > div {
    display: flex;
    gap: 14px;
    align-items: center;
}

.vendor-approval-banner strong {
    display: block;
    margin-bottom: 4px;
}

.vendor-approval-banner p {
    margin: 0;
    color: #617086;
}

.vendor-approval-banner a {
    white-space: nowrap;
    color: #087d70;
    font-weight: 750;
}

.vendor-banner-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    background: #edf6f4;
    color: #087d70;
    font-size: 20px;
    font-weight: 900;
}

.vendor-approval-banner.is-warning,
.vendor-approval-banner.is-pending {
    border-left: 4px solid #d99b14;
}

.vendor-approval-banner.is-danger {
    border-left: 4px solid #cc4c4c;
}

.vendor-approval-banner.is-success {
    border-left: 4px solid #0f967f;
}

.vendor-health-panel {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px 30px;
    padding: 24px;
    border: 1px solid #dfe7ef;
    border-radius: 18px;
    background: #fff;
}

.vendor-health-panel h2,
.vendor-section-heading h2,
.vendor-recent-orders h2 {
    margin: 0;
    color: #17263b;
}

.vendor-health-panel p {
    margin: 7px 0 0;
    color: #68768a;
}

.vendor-health-score {
    text-align: right;
}

.vendor-health-score strong {
    display: block;
    color: #0b8274;
    font-size: 30px;
}

.vendor-health-score span {
    color: #68768a;
    font-size: 13px;
}

.vendor-progress-track {
    grid-column: 1 / -1;
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: #e8edf2;
}

.vendor-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0d8576, #21b69d);
}

.vendor-health-items {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vendor-health-items span {
    padding: 8px 12px;
    border-radius: 999px;
    background: #f1f5f8;
    color: #627186;
    font-size: 13px;
}

.vendor-health-items strong {
    color: #18283d;
}

.vendor-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    margin: 34px 0 16px;
}

.vendor-section-heading a,
.vendor-recent-orders header a {
    color: #087d70;
    font-weight: 750;
    text-decoration: none;
}

.vendor-smart-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.vendor-smart-stat-grid article {
    min-height: 140px;
    padding: 20px;
    border: 1px solid #dfe7ef;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 25px rgba(20, 37, 63, .045);
}

.vendor-smart-stat-grid article > span {
    color: #65748a;
    font-weight: 650;
}

.vendor-smart-stat-grid strong {
    display: block;
    margin: 14px 0 7px;
    color: #15263d;
    font-size: 23px;
}

.vendor-smart-stat-grid small {
    color: #8490a1;
}

.vendor-pipeline-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.vendor-pipeline-grid article {
    padding: 18px;
    border: 1px solid #dfe7ef;
    border-radius: 14px;
    background: #fff;
}

.vendor-pipeline-grid span {
    color: #68778b;
}

.vendor-pipeline-grid strong {
    display: block;
    margin-top: 10px;
    font-size: 25px;
}

.vendor-smart-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.vendor-smart-actions a {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 19px;
    border: 1px solid #dfe7ef;
    border-radius: 16px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.vendor-smart-actions a:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(20, 37, 63, .09);
}

.vendor-smart-actions a > span {
    display: grid;
    flex: 0 0 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    background: #eaf6f4;
    color: #0b8173;
    font-size: 20px;
    font-weight: 900;
}

.vendor-smart-actions strong,
.vendor-smart-actions small {
    display: block;
}

.vendor-smart-actions small {
    margin-top: 5px;
    color: #768397;
}

.vendor-recent-orders {
    margin-top: 34px;
    padding: 24px;
    border: 1px solid #dfe7ef;
    border-radius: 18px;
    background: #fff;
}

.vendor-recent-orders header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    margin-bottom: 18px;
}

.vendor-empty {
    padding: 38px 20px;
    border-radius: 14px;
    background: #f6f8fa;
    text-align: center;
}

.vendor-empty strong {
    display: block;
    margin-bottom: 7px;
}

.vendor-empty p {
    margin: 0;
    color: #748195;
}

.vendor-verification.is-success {
    background: #d8f4ec;
    color: #087461;
}

.vendor-verification.is-warning,
.vendor-verification.is-pending {
    background: #fff0c9;
    color: #8b6300;
}

.vendor-verification.is-danger {
    background: #ffe0e0;
    color: #a33434;
}

@media (max-width: 1050px) {
    .vendor-smart-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vendor-pipeline-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .vendor-smart-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .vendor-smart-hero-grid {
        grid-template-columns: 1fr;
    }

    .vendor-store-summary {
        min-width: 0;
    }

    .vendor-approval-banner,
    .vendor-section-heading,
    .vendor-recent-orders header {
        align-items: flex-start;
        flex-direction: column;
    }

    .vendor-health-panel {
        grid-template-columns: 1fr;
    }

    .vendor-health-score {
        text-align: left;
    }

    .vendor-smart-stat-grid,
    .vendor-pipeline-grid,
    .vendor-smart-actions {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   KITOMANGA VENDOR HEADER MARKETPLACE LINK
   ========================================================= */

.vendor-header a[href*="marketplace"],
.kitomanga-vendor-header a[href*="marketplace"],
.vendor-topbar a[href*="marketplace"],
.vendor-layout-header a[href*="marketplace"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid #0f8275;
    border-radius: 10px;
    background: #0f8275;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none !important;
    box-shadow: 0 8px 18px rgba(15, 130, 117, 0.18);
    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.vendor-header a[href*="marketplace"]:hover,
.kitomanga-vendor-header a[href*="marketplace"]:hover,
.vendor-topbar a[href*="marketplace"]:hover,
.vendor-layout-header a[href*="marketplace"]:hover {
    background: #0b6f65;
    border-color: #0b6f65;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(15, 130, 117, 0.24);
}

.vendor-header a[href*="marketplace"]:focus-visible,
.kitomanga-vendor-header a[href*="marketplace"]:focus-visible,
.vendor-topbar a[href*="marketplace"]:focus-visible,
.vendor-layout-header a[href*="marketplace"]:focus-visible {
    outline: 3px solid rgba(15, 130, 117, 0.22);
    outline-offset: 3px;
}

@media (max-width: 760px) {
    .vendor-header a[href*="marketplace"],
    .kitomanga-vendor-header a[href*="marketplace"],
    .vendor-topbar a[href*="marketplace"],
    .vendor-layout-header a[href*="marketplace"] {
        min-height: 38px;
        padding: 0 14px;
        font-size: 13px;
    }
}

/* =========================================================
   KITOMANGA VENDOR MARKETPLACE BUTTON
   ========================================================= */

.vendor-marketplace-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid #0f8275;
    border-radius: 11px;
    background: #0f8275;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none !important;
    box-shadow: 0 8px 20px rgba(15, 130, 117, 0.20);
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.vendor-marketplace-button:hover {
    background: #0b6e64;
    border-color: #0b6e64;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(15, 130, 117, 0.28);
}

.vendor-marketplace-button:active {
    transform: translateY(0);
}

.vendor-marketplace-button:focus-visible {
    outline: 3px solid rgba(15, 130, 117, 0.24);
    outline-offset: 3px;
}

.vendor-marketplace-button-icon {
    display: inline-grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
}

@media (max-width: 760px) {
    .vendor-marketplace-button {
        min-height: 40px;
        padding: 0 14px;
        font-size: 13px;
    }

    .vendor-marketplace-button-icon {
        width: 21px;
        height: 21px;
        font-size: 12px;
    }
}

/* Kitomanga View Marketplace button */
.vendor-market-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px !important;
    border: 1px solid #0f8275 !important;
    border-radius: 10px !important;
    background: #0f8275 !important;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none !important;
    box-shadow: 0 8px 20px rgba(15, 130, 117, 0.22);
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.vendor-market-link::before {
    content: "↗";
    display: inline-grid;
    width: 23px;
    height: 23px;
    place-items: center;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
}

.vendor-market-link:hover {
    background: #0b6f65 !important;
    border-color: #0b6f65 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transform: translateY(-1px);
    box-shadow: 0 11px 25px rgba(15, 130, 117, 0.30);
}

.vendor-market-link:focus-visible {
    outline: 3px solid rgba(15, 130, 117, 0.25);
    outline-offset: 3px;
}

@media (max-width: 760px) {
    .vendor-market-link {
        min-height: 40px;
        padding: 0 14px !important;
        font-size: 13px;
    }
}

/* ==========================================================
   Vendor Dashboard Welcome Banner
   ========================================================== */

.vendor-welcome,
.vendor-welcome h1,
.vendor-welcome h2,
.vendor-welcome h3,
.vendor-dashboard-welcome,
.vendor-dashboard-welcome h1,
.vendor-dashboard-welcome h2,
.vendor-dashboard-welcome h3,
.vendor-header h1,
.vendor-header h2{
    color:#1f2937 !important;
    font-weight:700 !important;
    text-shadow:none !important;
    opacity:1 !important;
}

.vendor-welcome p,
.vendor-dashboard-welcome p,
.vendor-header p{
    color:#4b5563 !important;
    opacity:1 !important;
}


/* Vendor dashboard welcome title visibility */
.vendor-dashboard-welcome-title {
    color: #111827 !important;
    font-size: clamp(1.55rem, 3vw, 2.25rem) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: none !important;
    margin: 0 0 0.5rem !important;
}

.vendor-dashboard-welcome-title,
.vendor-dashboard-welcome-title span,
.vendor-dashboard-welcome-title strong {
    color: #111827 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ==========================================================
   FIX: Vendor Dashboard Hero Title
   ========================================================== */

.vendor-hero h1,
.vendor-hero h2,
.vendor-dashboard-hero h1,
.vendor-dashboard-hero h2,
.vendor-banner h1,
.vendor-banner h2,
.vendor-dashboard h1:first-of-type{
    color:#ffffff !important;
    font-weight:800 !important;
    font-size:2.8rem !important;
    line-height:1.15 !important;
    text-shadow:0 2px 8px rgba(0,0,0,.35) !important;
    opacity:1 !important;
    visibility:visible !important;
}

.vendor-hero p,
.vendor-dashboard-hero p,
.vendor-banner p{
    color:rgba(255,255,255,.92) !important;
}


/* ==========================================================
   FINAL FIX: Vendor Dashboard Welcome Heading
   ========================================================== */

.vendor-smart-hero .vendor-dashboard-welcome-title {
    color: #ffffff !important;
    font-size: clamp(2rem, 4vw, 2.8rem) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.30) !important;
    margin: 12px 0 14px !important;
}

.vendor-smart-hero .vendor-dashboard-welcome-title,
.vendor-smart-hero .vendor-dashboard-welcome-title span,
.vendor-smart-hero .vendor-dashboard-welcome-title strong {
    color: #ffffff !important;
}

.vendor-smart-hero p {
    color: rgba(255, 255, 255, 0.90) !important;
}

.vendor-smart-hero .vendor-eyebrow {
    color: #67e8d4 !important;
}


/* ============================================================
   KITOMANGA VENDOR PORTAL - ENTERPRISE UI POLISH
   ============================================================ */

/* ---------- Global ---------- */

.vendor-main{
    background:#f4f7fb;
    min-height:100vh;
}

.vendor-container{
    max-width:1400px;
}

/* ---------- Hero ---------- */

.vendor-smart-hero{
    background:linear-gradient(135deg,#0f766e,#0b4f6c);
    border-radius:20px;
    margin:24px auto 32px;
    padding:48px;
    box-shadow:0 20px 50px rgba(15,23,42,.18);
}

.vendor-dashboard-welcome-title{
    color:#fff!important;
    font-size:clamp(34px,4vw,48px)!important;
    font-weight:800!important;
    line-height:1.15;
    margin-bottom:14px;
}

.vendor-smart-hero p{
    color:rgba(255,255,255,.90)!important;
    font-size:17px;
}

/* ---------- Buttons ---------- */

.vendor-primary-action{
    background:#14b8a6;
    color:#fff!important;
    border:none;
    transition:.25s;
}

.vendor-primary-action:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(20,184,166,.35);
}

.vendor-secondary-action{
    background:#fff;
    color:#0f766e!important;
    border:1px solid rgba(255,255,255,.4);
    transition:.25s;
}

.vendor-secondary-action:hover{
    transform:translateY(-2px);
}

/* ---------- KPI Cards ---------- */

.vendor-stat-card,
.vendor-summary-card,
.vendor-dashboard-card{
    background:#fff;
    border-radius:18px;
    border:1px solid #e8edf3;
    box-shadow:0 10px 24px rgba(15,23,42,.06);
    transition:.25s;
}

.vendor-stat-card:hover,
.vendor-summary-card:hover,
.vendor-dashboard-card:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 40px rgba(15,23,42,.12);
}

.vendor-stat-card h2,
.vendor-summary-card h2,
.vendor-dashboard-card h2{
    color:#0f172a;
    font-weight:800;
}

/* ---------- Tables ---------- */

table{
    border-collapse:collapse;
}

table thead{
    background:#f8fafc;
}

table th{
    color:#334155;
    font-weight:700;
}

table th,
table td{
    padding:14px 16px;
}

table tbody tr{
    transition:.18s;
}

table tbody tr:hover{
    background:#f0fdfa;
}

/* ---------- Forms ---------- */

input,
select,
textarea{
    border:1px solid #dbe3ea;
    border-radius:10px;
    transition:.20s;
}

input:focus,
select:focus,
textarea:focus{
    border-color:#14b8a6;
    box-shadow:0 0 0 4px rgba(20,184,166,.15);
    outline:none;
}

/* ---------- Badges ---------- */

.vendor-badge{
    border-radius:999px;
    padding:5px 12px;
    font-size:12px;
    font-weight:700;
}

/* ---------- Cards ---------- */

.vendor-card{
    border-radius:18px;
    overflow:hidden;
}

/* ---------- Navigation ---------- */

.vendor-header{
    box-shadow:0 3px 14px rgba(15,23,42,.08);
}

.vendor-menu>a{
    transition:.20s;
}

.vendor-menu>a:hover{
    color:#14b8a6;
}

/* ---------- Footer ---------- */

.vendor-footer{
    border-top:1px solid #e5e7eb;
}

/* ---------- Scrollbar ---------- */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-thumb{
    background:#14b8a6;
    border-radius:20px;
}

/* ---------- Responsive ---------- */

@media(max-width:992px){

.vendor-smart-hero{
    padding:28px;
}

.vendor-dashboard-welcome-title{
    font-size:32px!important;
}

}

@media(max-width:768px){

.vendor-smart-hero{
    padding:22px;
}

.vendor-dashboard-welcome-title{
    font-size:28px!important;
}

.vendor-hero-actions{
    flex-direction:column;
}

.vendor-primary-action,
.vendor-secondary-action{
    width:100%;
}

}


/* ============================================================
   KITOMANGA VENDOR EARNINGS PAGE — FINAL POLISH
   ============================================================ */

.vendor-earnings-page {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 42px 28px 64px;
    color: #172033;
}

.vendor-earnings-page h1 {
    margin: 8px 0 10px;
    color: #172033;
    font-size: clamp(32px, 4vw, 46px);
    font-weight: 800;
    line-height: 1.1;
}

.vendor-earnings-page h2 {
    margin: 0;
    color: #172033;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.25;
}

.vendor-earnings-page p {
    color: #52617a;
    line-height: 1.6;
}

.vendor-earnings-page .vendor-eyebrow,
.vendor-earnings-page .vendor-section-label {
    color: #087f73;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.vendor-earnings-page .vendor-earnings-summary,
.vendor-earnings-page .earnings-summary,
.vendor-earnings-page .vendor-finance-summary,
.vendor-earnings-page .finance-summary,
.vendor-earnings-page .summary-grid,
.vendor-earnings-page .stats-grid,
.vendor-earnings-page .vendor-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px !important;
    margin: 28px 0 !important;
}

.vendor-earnings-page .vendor-stat-card,
.vendor-earnings-page .vendor-summary-card,
.vendor-earnings-page .earnings-card,
.vendor-earnings-page .summary-card,
.vendor-earnings-page .finance-card,
.vendor-earnings-page article {
    min-width: 0;
    padding: 22px !important;
    border: 1px solid #dce5ef !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06) !important;
}

.vendor-earnings-page .vendor-stat-card strong,
.vendor-earnings-page .vendor-summary-card strong,
.vendor-earnings-page .earnings-card strong,
.vendor-earnings-page .summary-card strong,
.vendor-earnings-page .finance-card strong {
    display: block;
    margin-top: 8px;
    color: #172033;
    font-size: 25px;
    font-weight: 800;
}

.vendor-earnings-page .vendor-stat-card small,
.vendor-earnings-page .vendor-summary-card small,
.vendor-earnings-page .earnings-card small,
.vendor-earnings-page .summary-card small,
.vendor-earnings-page .finance-card small {
    display: block;
    margin-top: 6px;
    color: #66748c;
    font-size: 13px;
    line-height: 1.45;
}

.vendor-earnings-page .payout-status-grid,
.vendor-earnings-page .vendor-payout-status,
.vendor-earnings-page .payout-summary,
.vendor-earnings-page .earnings-status-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px !important;
    margin: 22px 0 30px !important;
}

.vendor-earnings-page .payout-status-grid > *,
.vendor-earnings-page .vendor-payout-status > *,
.vendor-earnings-page .payout-summary > *,
.vendor-earnings-page .earnings-status-grid > * {
    padding: 16px 18px;
    border: 1px solid #dce5ef;
    border-radius: 14px;
    background: #ffffff;
}

.vendor-earnings-page .vendor-panel,
.vendor-earnings-page .vendor-table-card,
.vendor-earnings-page .earnings-ledger,
.vendor-earnings-page .payout-history,
.vendor-earnings-page .payment-cycle,
.vendor-earnings-page section + section {
    margin-top: 24px;
}

.vendor-earnings-page .vendor-panel,
.vendor-earnings-page .vendor-table-card,
.vendor-earnings-page .earnings-ledger,
.vendor-earnings-page .payout-history,
.vendor-earnings-page .payment-cycle {
    overflow: hidden;
    border: 1px solid #dce5ef;
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .05);
}

.vendor-earnings-page .vendor-panel-header,
.vendor-earnings-page .vendor-card-header,
.vendor-earnings-page .section-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 20px;
    padding: 22px !important;
    border-bottom: 1px solid #e5ebf2;
}

.vendor-earnings-page table {
    width: 100%;
    border-collapse: collapse;
}

.vendor-earnings-page th {
    padding: 14px 18px;
    background: #f7f9fc;
    color: #42506a;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .05em;
    text-align: left;
    text-transform: uppercase;
}

.vendor-earnings-page td {
    padding: 16px 18px;
    border-top: 1px solid #edf1f5;
    color: #334155;
}

.vendor-earnings-page .empty-state,
.vendor-earnings-page .vendor-empty-state {
    padding: 36px 22px !important;
    text-align: center !important;
}

.vendor-earnings-page .empty-state h3,
.vendor-earnings-page .vendor-empty-state h3 {
    margin: 8px 0 6px;
    color: #172033;
    font-size: 18px;
    font-weight: 800;
}

.vendor-earnings-page .payment-cycle ol,
.vendor-earnings-page .payment-cycle ul,
.vendor-earnings-page .payout-steps,
.vendor-earnings-page .vendor-payout-steps {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px !important;
    margin: 0 !important;
    padding: 22px !important;
    list-style: none !important;
}

.vendor-earnings-page .payment-cycle li,
.vendor-earnings-page .payout-steps > *,
.vendor-earnings-page .vendor-payout-steps > * {
    position: relative;
    padding: 22px;
    border: 1px solid #dce5ef;
    border-radius: 14px;
    background: #f8fafc;
}

.vendor-earnings-page .payment-cycle li::before,
.vendor-earnings-page .payout-steps > *::before,
.vendor-earnings-page .vendor-payout-steps > *::before {
    display: flex;
    width: 34px;
    height: 34px;
    margin-bottom: 14px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #0f8275;
    color: #ffffff;
    font-weight: 800;
}

.vendor-earnings-page button,
.vendor-earnings-page .vendor-primary-action {
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    background: #0f8275;
    color: #ffffff;
    font-weight: 700;
    cursor: pointer;
}

@media (max-width: 1050px) {
    .vendor-earnings-page .vendor-earnings-summary,
    .vendor-earnings-page .earnings-summary,
    .vendor-earnings-page .vendor-finance-summary,
    .vendor-earnings-page .finance-summary,
    .vendor-earnings-page .summary-grid,
    .vendor-earnings-page .stats-grid,
    .vendor-earnings-page .vendor-stats-grid,
    .vendor-earnings-page .payout-status-grid,
    .vendor-earnings-page .vendor-payout-status,
    .vendor-earnings-page .payout-summary,
    .vendor-earnings-page .earnings-status-grid,
    .vendor-earnings-page .payment-cycle ol,
    .vendor-earnings-page .payment-cycle ul,
    .vendor-earnings-page .payout-steps,
    .vendor-earnings-page .vendor-payout-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .vendor-earnings-page {
        padding: 28px 16px 48px;
    }

    .vendor-earnings-page .vendor-earnings-summary,
    .vendor-earnings-page .earnings-summary,
    .vendor-earnings-page .vendor-finance-summary,
    .vendor-earnings-page .finance-summary,
    .vendor-earnings-page .summary-grid,
    .vendor-earnings-page .stats-grid,
    .vendor-earnings-page .vendor-stats-grid,
    .vendor-earnings-page .payout-status-grid,
    .vendor-earnings-page .vendor-payout-status,
    .vendor-earnings-page .payout-summary,
    .vendor-earnings-page .earnings-status-grid,
    .vendor-earnings-page .payment-cycle ol,
    .vendor-earnings-page .payment-cycle ul,
    .vendor-earnings-page .payout-steps,
    .vendor-earnings-page .vendor-payout-steps {
        grid-template-columns: 1fr;
    }

    .vendor-earnings-page .vendor-panel-header,
    .vendor-earnings-page .vendor-card-header,
    .vendor-earnings-page .section-header {
        flex-direction: column;
    }
}


/* ============================================================
   VENDOR EARNINGS PAGE — DEFINITIVE ROUTE-BASED STYLING
   ============================================================ */

body.vendor-earnings-body {
    background: #f4f7fb !important;
}

body.vendor-earnings-body .vendor-main {
    min-height: calc(100vh - 170px) !important;
    padding: 0 !important;
    background: #f4f7fb !important;
}

body.vendor-earnings-body .vendor-main > * {
    width: calc(100% - 40px) !important;
    max-width: 1400px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

body.vendor-earnings-body .vendor-main > *:first-child {
    padding-top: 42px !important;
}

body.vendor-earnings-body .vendor-main h1 {
    margin: 8px 0 10px !important;
    color: #172033 !important;
    font-size: clamp(34px, 4vw, 46px) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
}

body.vendor-earnings-body .vendor-main h2 {
    color: #172033 !important;
    font-size: 25px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

body.vendor-earnings-body .vendor-main h3 {
    color: #172033 !important;
    font-weight: 800 !important;
}

body.vendor-earnings-body .vendor-main p {
    color: #52617a !important;
    line-height: 1.6 !important;
}

body.vendor-earnings-body .vendor-main section {
    margin-bottom: 24px !important;
}

body.vendor-earnings-body .vendor-main article,
body.vendor-earnings-body .vendor-main section > div:not([class*="grid"]),
body.vendor-earnings-body .vendor-main [class*="card"],
body.vendor-earnings-body .vendor-main [class*="panel"] {
    border: 1px solid #dce5ef !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06) !important;
}

body.vendor-earnings-body .vendor-main [class*="grid"] {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin: 26px 0 !important;
}

body.vendor-earnings-body .vendor-main [class*="grid"] > * {
    min-width: 0 !important;
    padding: 22px !important;
    border: 1px solid #dce5ef !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06) !important;
}

body.vendor-earnings-body .vendor-main [class*="grid"] strong {
    color: #172033 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
}

body.vendor-earnings-body .vendor-main [class*="grid"] small {
    display: block !important;
    margin-top: 7px !important;
    color: #66748c !important;
    line-height: 1.45 !important;
}

body.vendor-earnings-body .vendor-main table {
    width: 100% !important;
    overflow: hidden !important;
    border-collapse: collapse !important;
    border: 1px solid #dce5ef !important;
    border-radius: 16px !important;
    background: #ffffff !important;
}

body.vendor-earnings-body .vendor-main thead {
    background: #f7f9fc !important;
}

body.vendor-earnings-body .vendor-main th {
    padding: 15px 18px !important;
    color: #42506a !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .05em !important;
    text-align: left !important;
    text-transform: uppercase !important;
}

body.vendor-earnings-body .vendor-main td {
    padding: 16px 18px !important;
    border-top: 1px solid #edf1f5 !important;
    color: #334155 !important;
}

body.vendor-earnings-body .vendor-main ol,
body.vendor-earnings-body .vendor-main ul {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    padding: 0 !important;
    list-style: none !important;
}

body.vendor-earnings-body .vendor-main ol > li,
body.vendor-earnings-body .vendor-main ul > li {
    padding: 20px !important;
    border: 1px solid #dce5ef !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
}

body.vendor-earnings-body .vendor-main button,
body.vendor-earnings-body .vendor-main a[class*="action"] {
    min-height: 44px !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #0f8275 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

@media (max-width: 1050px) {
    body.vendor-earnings-body .vendor-main [class*="grid"],
    body.vendor-earnings-body .vendor-main ol,
    body.vendor-earnings-body .vendor-main ul {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 680px) {
    body.vendor-earnings-body .vendor-main > * {
        width: calc(100% - 28px) !important;
    }

    body.vendor-earnings-body .vendor-main [class*="grid"],
    body.vendor-earnings-body .vendor-main ol,
    body.vendor-earnings-body .vendor-main ul {
        grid-template-columns: 1fr !important;
    }
}


/* ============================================================
   KITOMANGA VENDOR EARNINGS PAGE — COMPLETE FIX
   ============================================================ */

.vendor-earnings-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 32px !important;
    align-items: center !important;
    width: calc(100% - 48px) !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 42px 0 24px !important;
}

.vendor-earnings-hero h1 {
    margin: 8px 0 10px !important;
    color: #172033 !important;
    font-size: clamp(34px, 4vw, 46px) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
}

.vendor-earnings-hero p {
    max-width: 720px !important;
    margin: 0 !important;
    color: #52617a !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
}

.vendor-rate-card {
    min-width: 230px !important;
    padding: 22px 24px !important;
    border: 1px solid #dce5ef !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .07) !important;
}

.vendor-rate-card span,
.vendor-rate-card small {
    display: block !important;
    color: #64748b !important;
}

.vendor-rate-card strong {
    display: block !important;
    margin: 8px 0 5px !important;
    color: #0f8275 !important;
    font-size: 28px !important;
    font-weight: 800 !important;
}

.vendor-earnings-page {
    width: calc(100% - 48px) !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 0 64px !important;
}

.vendor-finance-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin: 0 0 22px !important;
}

.vendor-finance-card {
    display: flex !important;
    min-width: 0 !important;
    min-height: 150px !important;
    padding: 22px !important;
    flex-direction: column !important;
    justify-content: center !important;
    border: 1px solid #dce5ef !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06) !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
}

.vendor-finance-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 18px 36px rgba(15, 23, 42, .10) !important;
}

.vendor-finance-card > span {
    display: block !important;
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

.vendor-finance-card > strong {
    display: block !important;
    margin: 10px 0 7px !important;
    color: #172033 !important;
    font-size: clamp(22px, 2vw, 30px) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
}

.vendor-finance-card > small {
    display: block !important;
    color: #728096 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

.vendor-finance-card.highlight {
    border-color: #bfe5df !important;
    background: linear-gradient(145deg, #ffffff, #f0fdfa) !important;
}

.vendor-finance-card.available {
    border-color: #99ddd2 !important;
    background: linear-gradient(145deg, #0f8275, #0b6d63) !important;
}

.vendor-finance-card.available > span,
.vendor-finance-card.available > small {
    color: rgba(255, 255, 255, .82) !important;
}

.vendor-finance-card.available > strong {
    color: #ffffff !important;
}

.vendor-earnings-breakdown {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin: 0 0 24px !important;
}

.vendor-earnings-breakdown > div {
    padding: 17px 18px !important;
    border: 1px solid #dce5ef !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .04) !important;
}

.vendor-earnings-breakdown span {
    display: block !important;
    margin-bottom: 7px !important;
    color: #0f8275 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
}

.vendor-earnings-breakdown strong {
    display: block !important;
    color: #172033 !important;
    font-size: 19px !important;
    font-weight: 800 !important;
}

.vendor-earnings-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 330px !important;
    gap: 22px !important;
    align-items: start !important;
}

.vendor-earnings-main,
.vendor-earnings-sidebar {
    display: grid !important;
    gap: 22px !important;
    min-width: 0 !important;
}

.vendor-panel {
    overflow: hidden !important;
    border: 1px solid #dce5ef !important;
    border-radius: 17px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06) !important;
}

.vendor-panel-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 20px !important;
    padding: 22px !important;
    border-bottom: 1px solid #e7edf3 !important;
}

.vendor-panel-header h2 {
    margin: 7px 0 7px !important;
    color: #172033 !important;
    font-size: 24px !important;
    font-weight: 800 !important;
}

.vendor-panel-header p {
    margin: 0 !important;
    color: #607089 !important;
    line-height: 1.55 !important;
}

.vendor-record-count {
    flex: 0 0 auto !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    background: #eef6f5 !important;
    color: #0f8275 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.vendor-finance-empty {
    padding: 44px 24px !important;
    text-align: center !important;
}

.vendor-finance-empty > span {
    display: inline-flex !important;
    width: 46px !important;
    height: 46px !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 12px !important;
    border-radius: 50% !important;
    background: #eef8f6 !important;
    color: #0f8275 !important;
    font-size: 22px !important;
}

.vendor-finance-empty h3 {
    margin: 0 0 7px !important;
    color: #172033 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
}

.vendor-finance-empty p {
    margin: 0 !important;
    color: #64748b !important;
}

.vendor-table-scroll {
    width: 100% !important;
    overflow-x: auto !important;
}

.vendor-finance-table {
    width: 100% !important;
    min-width: 780px !important;
    border-collapse: collapse !important;
}

.vendor-finance-table thead {
    background: #f7f9fc !important;
}

.vendor-finance-table th {
    padding: 14px 16px !important;
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .06em !important;
    text-align: left !important;
    text-transform: uppercase !important;
}

.vendor-finance-table td {
    padding: 16px !important;
    border-top: 1px solid #edf1f5 !important;
    color: #334155 !important;
    vertical-align: middle !important;
}

.vendor-finance-table tbody tr:hover {
    background: #f8fffd !important;
}

.vendor-finance-table td strong,
.vendor-finance-table td small {
    display: block !important;
}

.vendor-finance-table td small {
    margin-top: 4px !important;
    color: #7a8799 !important;
}

.vendor-fee-value {
    color: #c2410c !important;
    font-weight: 700 !important;
}

.vendor-net-value {
    color: #0f8275 !important;
    font-weight: 800 !important;
}

.vendor-status-pill {
    display: inline-flex !important;
    min-height: 28px !important;
    padding: 0 11px !important;
    align-items: center !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.vendor-status-success {
    background: #dcfce7 !important;
    color: #166534 !important;
}

.vendor-status-info {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
}

.vendor-status-warning {
    background: #fef3c7 !important;
    color: #92400e !important;
}

.vendor-status-danger {
    background: #fee2e2 !important;
    color: #b91c1c !important;
}

.vendor-payout-trigger {
    min-height: 36px !important;
    padding: 0 13px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: #0f8275 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}

.vendor-muted {
    color: #94a3b8 !important;
    font-size: 13px !important;
}

.vendor-earnings-sidebar .vendor-panel {
    padding: 22px !important;
}

.vendor-earnings-sidebar .vendor-panel h2 {
    margin: 6px 0 18px !important;
    color: #172033 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
}

.vendor-payout-steps,
.vendor-earnings-sidebar ol,
.vendor-earnings-sidebar ul {
    display: grid !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.vendor-payout-steps > *,
.vendor-earnings-sidebar li {
    position: relative !important;
    padding: 16px 16px 16px 54px !important;
    border: 1px solid #e1e8ef !important;
    border-radius: 13px !important;
    background: #f8fafc !important;
}

.vendor-payout-steps > *::before,
.vendor-earnings-sidebar li::before {
    position: absolute !important;
    top: 15px !important;
    left: 14px !important;
    display: flex !important;
    width: 28px !important;
    height: 28px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: #0f8275 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.vendor-earnings-sidebar li:nth-child(1)::before {
    content: "1" !important;
}

.vendor-earnings-sidebar li:nth-child(2)::before {
    content: "2" !important;
}

.vendor-earnings-sidebar li:nth-child(3)::before {
    content: "3" !important;
}

.vendor-earnings-sidebar li:nth-child(4)::before {
    content: "4" !important;
}

.vendor-earnings-sidebar li strong {
    display: block !important;
    margin-bottom: 4px !important;
    color: #172033 !important;
    font-weight: 800 !important;
}

.vendor-earnings-sidebar li p,
.vendor-earnings-sidebar li span {
    margin: 0 !important;
    color: #64748b !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

@media (max-width: 1100px) {
    .vendor-finance-grid,
    .vendor-earnings-breakdown {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .vendor-earnings-layout {
        grid-template-columns: 1fr !important;
    }

    .vendor-earnings-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .vendor-earnings-hero {
        grid-template-columns: 1fr !important;
        width: calc(100% - 28px) !important;
        padding-top: 28px !important;
    }

    .vendor-rate-card {
        min-width: 0 !important;
    }

    .vendor-earnings-page {
        width: calc(100% - 28px) !important;
    }

    .vendor-finance-grid,
    .vendor-earnings-breakdown,
    .vendor-earnings-sidebar {
        grid-template-columns: 1fr !important;
    }

    .vendor-panel-header {
        flex-direction: column !important;
    }
}


/* =========================================================
   Vendor Product Catalogue — Product Image V2
   ========================================================= */

.vendor-product-card img,
.vendor-product-image img {
    display: block;
    width: 100%;
    height: 240px;
    object-fit: contain;
    object-position: center;
    background: #fff;
}

.vendor-product-image {
    width: 100%;
    height: 240px;
    overflow: hidden;
    background: #fff;
    border-radius: 14px 14px 0 0;
}

/* Prevent unusually large source images from expanding cards */
.vendor-product-card > img {
    max-height: 240px;
    object-fit: contain;
}

/* Mobile */
@media (max-width: 768px) {
    .vendor-product-card img,
    .vendor-product-image,
    .vendor-product-image img {
        height: 200px;
    }
}


/* =========================================================
   Vendor Products — Force Catalogue Image Size
   ========================================================= */

.vendor-products-page .vendor-products-list img,
.vendor-products-page .vendor-product-list img,
.vendor-products-page article img {
    display: block !important;
    width: 100% !important;
    height: 240px !important;
    max-height: 240px !important;
    object-fit: contain !important;
    object-position: center !important;
    background: #fff !important;
}

@media (max-width: 768px) {
    .vendor-products-page .vendor-products-list img,
    .vendor-products-page .vendor-product-list img,
    .vendor-products-page article img {
        height: 190px !important;
        max-height: 190px !important;
    }
}


/* =========================================================
   Vendor Product Card Image — Correct Selector
   ========================================================= */

.vendor-products-page .vendor-product-card-image {
    width: 100% !important;
    height: 240px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
}

.vendor-products-page .vendor-product-card-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 240px !important;
    object-fit: contain !important;
    object-position: center !important;
}

@media (max-width: 768px) {
    .vendor-products-page .vendor-product-card-image {
        height: 190px !important;
    }

    .vendor-products-page .vendor-product-card-image img {
        max-height: 190px !important;
    }
}


/* =========================================================
   KITOMANGA VENDOR CENTRE — SIMPLE UI V2
   ========================================================= */

.vendor-simple-ui {
    background: #f5f7f6;
    color: #17201c;
}

.vendor-simple-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #ffffff;
    border-bottom: 1px solid #e4e9e6;
}

.vendor-simple-nav {
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 32px;
}

.vendor-simple-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
}

.vendor-simple-logo {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #126b4d;
    color: #ffffff;
    font-weight: 900;
    font-size: 20px;
}

.vendor-simple-brand strong,
.vendor-simple-brand small {
    display: block;
}

.vendor-simple-brand strong {
    font-size: 16px;
}

.vendor-simple-brand small {
    margin-top: 1px;
    color: #718078;
    font-size: 11px;
}

.vendor-simple-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}

.vendor-simple-menu a {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 13px;
    border-radius: 9px;
    text-decoration: none;
    color: #59665f;
    font-weight: 650;
    font-size: 14px;
}

.vendor-simple-menu a:hover,
.vendor-simple-menu a.is-active {
    background: #edf6f1;
    color: #126b4d;
}

.vendor-simple-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vendor-help-link {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid #dfe6e2;
    border-radius: 50%;
    text-decoration: none;
    color: #126b4d;
    font-weight: 800;
}

.vendor-simple-account {
    position: relative;
}

.vendor-simple-account summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.vendor-simple-account summary::-webkit-details-marker {
    display: none;
}

.vendor-simple-avatar {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e6f2ec;
    color: #126b4d;
    font-weight: 850;
}

.vendor-account-name {
    max-width: 150px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    font-weight: 700;
}

.vendor-simple-account-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    width: 220px;
    padding: 14px;
    background: #ffffff;
    border: 1px solid #e2e8e4;
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(19, 42, 31, .14);
}

.vendor-simple-account-menu strong,
.vendor-simple-account-menu small {
    display: block;
}

.vendor-simple-account-menu small {
    color: #7b8780;
    margin: 3px 0 12px;
}

.vendor-simple-account-menu a,
.vendor-simple-account-menu button {
    width: 100%;
    display: block;
    padding: 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    text-align: left;
    text-decoration: none;
    color: #27332d;
    font: inherit;
    cursor: pointer;
}

.vendor-simple-account-menu a:hover,
.vendor-simple-account-menu button:hover {
    background: #f2f6f4;
}

.vendor-simple-main {
    min-height: calc(100vh - 140px);
}

.vendor-simple-dashboard {
    padding: 36px 0 60px;
}

.vendor-simple-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 26px;
}

.vendor-simple-kicker {
    display: block;
    color: #126b4d;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .09em;
    margin-bottom: 7px;
}

.vendor-simple-welcome h1 {
    margin: 0;
    color: #14201a;
    font-size: clamp(25px, 3vw, 34px);
    line-height: 1.15;
}

.vendor-simple-welcome p {
    margin: 7px 0 0;
    color: #6e7973;
}

.vendor-simple-store-status span {
    display: inline-flex;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 750;
}

.vendor-simple-store-status .verified {
    background: #e5f5ec;
    color: #126b4d;
}

.vendor-simple-store-status .pending {
    background: #fff4d7;
    color: #946b00;
}

.vendor-simple-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 18px;
    margin-bottom: 22px;
    border-radius: 13px;
    background: #fff7df;
    border: 1px solid #f0dfa9;
}

.vendor-simple-notice p {
    margin: 3px 0 0;
    color: #776944;
}

.vendor-simple-notice a {
    text-decoration: none;
    font-weight: 750;
    color: #126b4d;
}

.vendor-simple-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.vendor-simple-stat {
    display: block;
    min-width: 0;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e3e9e5;
    border-radius: 15px;
    text-decoration: none;
    color: inherit;
    transition: .18s ease;
}

.vendor-simple-stat:hover {
    transform: translateY(-2px);
    border-color: #c6d9cf;
    box-shadow: 0 10px 28px rgba(31, 64, 47, .07);
}

.vendor-simple-stat > span,
.vendor-simple-stat small {
    display: block;
    color: #77817c;
    font-size: 12px;
}

.vendor-simple-stat strong {
    display: block;
    margin: 8px 0 6px;
    color: #18231d;
    font-size: 23px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.vendor-simple-dashboard-grid {
    display: grid;
    grid-template-columns: 1.4fr .8fr;
    gap: 20px;
}

.vendor-simple-panel {
    padding: 22px;
    background: #ffffff;
    border: 1px solid #e3e9e5;
    border-radius: 16px;
}

.vendor-simple-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.vendor-simple-panel-heading span {
    color: #126b4d;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .09em;
}

.vendor-simple-panel-heading h2 {
    margin: 5px 0 0;
    font-size: 18px;
    color: #17221c;
}

.vendor-simple-panel-heading > a {
    color: #126b4d;
    text-decoration: none;
    font-size: 13px;
    font-weight: 750;
}

.vendor-simple-order-summary,
.vendor-simple-actions {
    display: grid;
    gap: 10px;
}

.vendor-simple-order-summary > a,
.vendor-simple-actions > a {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px;
    border-radius: 12px;
    background: #f7f9f8;
    text-decoration: none;
    color: #253129;
}

.vendor-simple-order-summary > a:hover,
.vendor-simple-actions > a:hover {
    background: #edf5f1;
}

.vendor-simple-order-summary > a > div,
.vendor-simple-actions > a > div {
    flex: 1;
}

.vendor-simple-order-summary strong,
.vendor-simple-actions strong,
.vendor-simple-order-summary small,
.vendor-simple-actions small {
    display: block;
}

.vendor-simple-order-summary small,
.vendor-simple-actions small {
    margin-top: 3px;
    color: #748078;
    font-size: 12px;
}

.vendor-simple-order-icon,
.vendor-simple-actions > a > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #e7f2ec;
    color: #126b4d;
    font-size: 18px;
    font-weight: 800;
}

.vendor-simple-footer {
    padding: 20px 0;
    border-top: 1px solid #e2e8e4;
    background: #ffffff;
    color: #77817c;
}

.vendor-simple-footer .vendor-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

@media (max-width: 900px) {

    .vendor-simple-nav {
        flex-wrap: wrap;
        gap: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .vendor-simple-menu {
        order: 3;
        width: 100%;
        overflow-x: auto;
    }

    .vendor-simple-right {
        margin-left: auto;
    }

    .vendor-account-name {
        display: none;
    }

    .vendor-simple-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .vendor-simple-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {

    .vendor-simple-dashboard {
        padding-top: 24px;
    }

    .vendor-simple-welcome {
        align-items: flex-start;
        flex-direction: column;
    }

    .vendor-simple-menu a {
        flex: 0 0 auto;
    }

    .vendor-simple-stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .vendor-simple-stat {
        padding: 15px;
    }

    .vendor-simple-stat strong {
        font-size: 18px;
    }

    .vendor-simple-panel {
        padding: 16px;
    }

    .vendor-simple-footer .vendor-container {
        flex-direction: column;
        gap: 4px;
    }
}

/* =========================================================
   KITOMANGA VENDOR AUTH — SIMPLE UI V2
   Login / Guest Access
   ========================================================= */

.vendor-simple-market {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 15px;
    border: 1px solid #dbe5df;
    border-radius: 10px;
    background: #ffffff;
    color: #126b4d !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 750;
}

.vendor-simple-market:hover {
    background: #edf6f1;
    border-color: #bdd5c8;
}

/* ---------------------------------------------------------
   LOGIN PAGE
   --------------------------------------------------------- */

.vendor-login-page {
    width: min(1080px, calc(100% - 32px));
    min-height: calc(100vh - 150px);
    margin: 0 auto;
    padding: 64px 0;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, .75fr);
    align-items: center;
    gap: 70px;
}

/* ---------------------------------------------------------
   INTRO
   --------------------------------------------------------- */

.vendor-login-intro {
    max-width: 590px;
}

.vendor-login-intro > span {
    display: inline-block;
    margin-bottom: 14px;
    color: #126b4d;
    font-size: 12px;
    line-height: 1;
    font-weight: 850;
    letter-spacing: .11em;
}

.vendor-login-intro h1 {
    margin: 0;
    max-width: 600px;
    color: #16221c;
    font-size: clamp(38px, 5vw, 58px);
    line-height: 1.03;
    letter-spacing: -.035em;
}

.vendor-login-intro > p {
    max-width: 550px;
    margin: 20px 0 30px;
    color: #657269;
    font-size: 17px;
    line-height: 1.65;
}

/* ---------------------------------------------------------
   SIMPLE FEATURES
   --------------------------------------------------------- */

.vendor-login-features {
    display: grid;
    gap: 12px;
}

.vendor-login-features article {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid #e0e8e3;
    border-radius: 12px;
    background: rgba(255, 255, 255, .72);
}

.vendor-login-features article::before {
    content: "✓";
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #e4f3eb;
    color: #126b4d;
    font-size: 14px;
    font-weight: 900;
}

.vendor-login-features strong {
    min-width: 72px;
    color: #1d2922;
    font-size: 14px;
}

.vendor-login-features span {
    color: #6b776f;
    font-size: 13px;
}

/* ---------------------------------------------------------
   LOGIN CARD
   --------------------------------------------------------- */

.vendor-login-card {
    width: 100%;
    padding: 34px;
    border: 1px solid #dee7e1;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(20, 48, 34, .09);
}

.vendor-login-eyebrow {
    display: inline-block;
    margin-bottom: 9px;
    color: #126b4d;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .11em;
}

.vendor-login-card h2 {
    margin: 0;
    color: #17231c;
    font-size: 27px;
    line-height: 1.2;
}

.vendor-login-card > p:not(.vendor-register-link) {
    margin: 8px 0 25px;
    color: #718078;
    font-size: 14px;
}

/* ---------------------------------------------------------
   FORM
   --------------------------------------------------------- */

.vendor-login-card form {
    display: grid;
    gap: 17px;
}

.vendor-login-card label {
    display: grid;
    gap: 7px;
    color: #26332b;
    font-size: 13px;
    font-weight: 700;
}

.vendor-login-card input {
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    padding: 0 14px;
    border: 1px solid #d6e0da;
    border-radius: 11px;
    outline: none;
    background: #ffffff;
    color: #17231c;
    font: inherit;
    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.vendor-login-card input:hover {
    border-color: #b8c9bf;
}

.vendor-login-card input:focus {
    border-color: #178461;
    box-shadow: 0 0 0 3px rgba(23, 132, 97, .12);
}

.vendor-login-card button[type="submit"] {
    width: 100%;
    min-height: 49px;
    margin-top: 4px;
    border: 0;
    border-radius: 11px;
    background: #126b4d;
    color: #ffffff;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition:
        background .15s ease,
        transform .15s ease;
}

.vendor-login-card button[type="submit"]:hover {
    background: #0f5b41;
}

.vendor-login-card button[type="submit"]:active {
    transform: translateY(1px);
}

/* ---------------------------------------------------------
   REGISTER LINK
   --------------------------------------------------------- */

.vendor-register-link {
    margin: 23px 0 0 !important;
    padding-top: 20px;
    border-top: 1px solid #edf1ee;
    color: #6c7971;
    text-align: center;
    font-size: 13px;
}

.vendor-register-link a {
    color: #126b4d !important;
    font-weight: 800;
    text-decoration: none;
}

.vendor-register-link a:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------
   ALERTS
   --------------------------------------------------------- */

.vendor-alert {
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
}

.vendor-alert.error {
    border: 1px solid #f1c7c7;
    background: #fff1f1;
    color: #9c2525;
}

.vendor-alert.success {
    border: 1px solid #bde4ce;
    background: #ebf8f1;
    color: #126b4d;
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .vendor-login-page {
        grid-template-columns: 1fr;
        gap: 38px;
        padding: 42px 0 55px;
    }

    .vendor-login-intro {
        max-width: none;
    }

    .vendor-login-intro h1 {
        max-width: 700px;
    }

    .vendor-login-features {
        grid-template-columns: repeat(3, 1fr);
    }

    .vendor-login-features article {
        display: block;
    }

    .vendor-login-features article::before {
        margin-bottom: 10px;
    }

    .vendor-login-features strong,
    .vendor-login-features span {
        display: block;
    }

    .vendor-login-features span {
        margin-top: 4px;
    }

    .vendor-login-card {
        max-width: 520px;
    }
}

@media (max-width: 600px) {

    .vendor-login-page {
        width: min(100% - 24px, 1080px);
        padding-top: 30px;
    }

    .vendor-login-intro h1 {
        font-size: 34px;
    }

    .vendor-login-intro > p {
        font-size: 15px;
        margin-bottom: 22px;
    }

    .vendor-login-features {
        grid-template-columns: 1fr;
    }

    .vendor-login-features article {
        display: flex;
    }

    .vendor-login-features article::before {
        margin-bottom: 0;
    }

    .vendor-login-card {
        padding: 24px 20px;
        border-radius: 16px;
    }

    .vendor-login-card h2 {
        font-size: 24px;
    }
}


/* =========================================================
   KITOMANGA VENDOR PAYOUT MODAL
   Simple Vendor Centre UI
   ========================================================= */

/*
 * The payout dialog uses the native <dialog> element.
 * These rules intentionally target the dialog inside the
 * earnings page without changing payout logic.
 */

.vendor-earnings-page dialog,
dialog.vendor-payout-dialog {
    width: min(560px, calc(100vw - 32px)) !important;
    max-width: 560px !important;
    max-height: calc(100vh - 40px) !important;
    margin: auto !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 20px !important;

    background: #ffffff !important;
    color: #17231c !important;

    box-shadow:
        0 28px 80px rgba(15, 23, 42, .22) !important;

    overflow: auto !important;
}

.vendor-earnings-page dialog::backdrop,
dialog.vendor-payout-dialog::backdrop {
    background: rgba(15, 23, 42, .52) !important;
    backdrop-filter: blur(2px);
}

/* ---------------------------------------------------------
   DIALOG CONTENT
   --------------------------------------------------------- */

.vendor-earnings-page dialog > *,
dialog.vendor-payout-dialog > * {
    box-sizing: border-box;
}

.vendor-earnings-page dialog h2,
dialog.vendor-payout-dialog h2 {
    margin: 5px 0 8px !important;
    color: #17231c !important;
    font-size: 26px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
}

.vendor-earnings-page dialog .vendor-eyebrow,
dialog.vendor-payout-dialog .vendor-eyebrow {
    display: block !important;
    margin-bottom: 8px !important;
    color: #0f8275 !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
}

/* ---------------------------------------------------------
   CLOSE BUTTON
   --------------------------------------------------------- */

.vendor-earnings-page dialog > button:first-of-type,
.vendor-earnings-page dialog .vendor-dialog-close,
dialog.vendor-payout-dialog .vendor-dialog-close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;

    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;

    display: grid !important;
    place-items: center !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid #dce5e0 !important;
    border-radius: 50% !important;

    background: #ffffff !important;
    color: #52615a !important;

    font-size: 18px !important;
    line-height: 1 !important;

    cursor: pointer !important;
}

/* ---------------------------------------------------------
   DIALOG INNER WRAPPER
   --------------------------------------------------------- */

.vendor-earnings-page dialog > div,
.vendor-earnings-page dialog > form,
dialog.vendor-payout-dialog > div,
dialog.vendor-payout-dialog > form {
    width: 100% !important;
}

.vendor-earnings-page dialog > div:first-of-type,
dialog.vendor-payout-dialog > div:first-of-type {
    padding: 28px 30px 8px !important;
}

/* ---------------------------------------------------------
   ORDER / PAYOUT SUMMARY
   --------------------------------------------------------- */

.vendor-earnings-page dialog strong {
    color: #17231c !important;
}

.vendor-earnings-page dialog .vendor-payout-amount,
.vendor-earnings-page dialog [class*="payout"][class*="amount"] {
    display: block !important;
    margin-top: 6px !important;
    color: #0f8275 !important;
    font-size: 24px !important;
    line-height: 1.2 !important;
    font-weight: 850 !important;
}

/* ---------------------------------------------------------
   FORM
   --------------------------------------------------------- */

.vendor-earnings-page dialog form,
dialog.vendor-payout-dialog form {
    display: grid !important;
    gap: 16px !important;

    padding: 22px 30px 30px !important;
}

.vendor-earnings-page dialog label,
dialog.vendor-payout-dialog label {
    display: grid !important;
    gap: 7px !important;

    margin: 0 !important;

    color: #26332c !important;
    font-size: 13px !important;
    font-weight: 750 !important;
}

.vendor-earnings-page dialog input,
.vendor-earnings-page dialog select,
.vendor-earnings-page dialog textarea,
dialog.vendor-payout-dialog input,
dialog.vendor-payout-dialog select,
dialog.vendor-payout-dialog textarea {
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;

    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 0 14px !important;

    border: 1px solid #d6e1db !important;
    border-radius: 11px !important;

    background: #ffffff !important;
    color: #17231c !important;

    font: inherit !important;
    font-size: 14px !important;

    outline: none !important;
}

.vendor-earnings-page dialog textarea,
dialog.vendor-payout-dialog textarea {
    height: auto !important;
    min-height: 90px !important;
    padding-top: 12px !important;
    resize: vertical !important;
}

.vendor-earnings-page dialog input:focus,
.vendor-earnings-page dialog select:focus,
.vendor-earnings-page dialog textarea:focus,
dialog.vendor-payout-dialog input:focus,
dialog.vendor-payout-dialog select:focus,
dialog.vendor-payout-dialog textarea:focus {
    border-color: #0f8275 !important;
    box-shadow:
        0 0 0 3px rgba(15, 130, 117, .12) !important;
}

/* ---------------------------------------------------------
   FORM ACTIONS
   --------------------------------------------------------- */

.vendor-earnings-page dialog .vendor-dialog-actions,
.vendor-earnings-page dialog form > div:last-child,
dialog.vendor-payout-dialog .vendor-dialog-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

.vendor-earnings-page dialog button,
dialog.vendor-payout-dialog button {
    min-height: 44px !important;

    padding: 0 18px !important;

    border-radius: 10px !important;

    font: inherit !important;
    font-size: 13px !important;
    font-weight: 800 !important;

    cursor: pointer !important;
}

.vendor-earnings-page dialog button[type="submit"],
dialog.vendor-payout-dialog button[type="submit"] {
    border: 1px solid #0f8275 !important;
    background: #0f8275 !important;
    color: #ffffff !important;
}

.vendor-earnings-page dialog button[type="submit"]:hover,
dialog.vendor-payout-dialog button[type="submit"]:hover {
    background: #0b6d62 !important;
}

.vendor-earnings-page dialog button[type="button"],
.vendor-earnings-page dialog button[value="cancel"],
dialog.vendor-payout-dialog button[type="button"] {
    border: 1px solid #d7e0db !important;
    background: #ffffff !important;
    color: #47554e !important;
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 600px) {

    .vendor-earnings-page dialog,
    dialog.vendor-payout-dialog {
        width: calc(100vw - 20px) !important;
        max-height: calc(100vh - 20px) !important;
        border-radius: 16px !important;
    }

    .vendor-earnings-page dialog > div:first-of-type,
    dialog.vendor-payout-dialog > div:first-of-type {
        padding:
            24px
            20px
            6px !important;
    }

    .vendor-earnings-page dialog form,
    dialog.vendor-payout-dialog form {
        padding:
            18px
            20px
            24px !important;
    }

    .vendor-earnings-page dialog .vendor-dialog-actions,
    .vendor-earnings-page dialog form > div:last-child {
        flex-direction: column-reverse !important;
        align-items: stretch !important;
    }

    .vendor-earnings-page dialog button {
        width: 100% !important;
    }
}


/* =========================================================
   KITOMANGA VENDOR EARNINGS — FINAL UI OVERRIDE
   Fix payment-cycle/sidebar conflicts
   ========================================================= */

.vendor-earnings-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    gap: 24px !important;
    align-items: start !important;
}

.vendor-earnings-main {
    min-width: 0 !important;
}

/* Sidebar */
.vendor-earnings-aside {
    display: block !important;
    min-width: 0 !important;
}

.vendor-earnings-aside .vendor-finance-guide {
    display: block !important;
    margin: 0 !important;
    padding: 24px !important;
    border: 1px solid #dce5ef !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06) !important;
}

.vendor-earnings-aside .vendor-eyebrow {
    display: block !important;
    margin: 0 0 7px !important;
    color: #0f8275 !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
    letter-spacing: .11em !important;
    text-transform: uppercase !important;
}

.vendor-earnings-aside .vendor-finance-guide h2 {
    margin: 0 0 22px !important;
    color: #172033 !important;
    font-size: 23px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
}

/* Payment cycle */
.vendor-earnings-aside .vendor-finance-guide ol {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.vendor-earnings-aside .vendor-finance-guide ol > li {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 13px !important;
    align-items: start !important;
    margin: 0 !important;
    padding: 0 0 23px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.vendor-earnings-aside .vendor-finance-guide ol > li:last-child {
    padding-bottom: 0 !important;
}

/* Vertical connector */
.vendor-earnings-aside .vendor-finance-guide ol > li:not(:last-child)::after {
    content: "" !important;
    position: absolute !important;
    top: 34px !important;
    left: 17px !important;
    width: 2px !important;
    height: calc(100% - 27px) !important;
    background: #d9ebe8 !important;
}

/* Disable duplicated CSS-generated numbers */
.vendor-earnings-aside .vendor-finance-guide ol > li::before {
    content: none !important;
    display: none !important;
}

/* Use the real HTML number */
.vendor-earnings-aside .vendor-finance-guide ol > li > span {
    position: relative !important;
    z-index: 2 !important;
    display: inline-flex !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: #e8f7f4 !important;
    color: #08776b !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
}

.vendor-earnings-aside .vendor-finance-guide ol > li > div {
    display: block !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 1px 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.vendor-earnings-aside .vendor-finance-guide li strong {
    display: block !important;
    margin: 0 0 5px !important;
    color: #172033 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
}

.vendor-earnings-aside .vendor-finance-guide li p {
    display: block !important;
    margin: 0 !important;
    color: #64748b !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
}

/* Main panels */
.vendor-earnings-main .vendor-panel {
    overflow: hidden !important;
    border: 1px solid #dce5ef !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 9px 28px rgba(15, 23, 42, .055) !important;
}

/* Keep table cells readable */
.vendor-earnings-main .vendor-finance-table th {
    white-space: nowrap !important;
}

.vendor-earnings-main .vendor-finance-table td {
    line-height: 1.45 !important;
}

/* Responsive */
@media (max-width: 1100px) {
    .vendor-earnings-layout {
        grid-template-columns: 1fr !important;
    }

    .vendor-earnings-aside {
        width: 100% !important;
    }

    .vendor-earnings-aside .vendor-finance-guide ol {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .vendor-earnings-aside .vendor-finance-guide ol > li {
        padding: 16px !important;
        border: 1px solid #e4ebeF !important;
        border-radius: 14px !important;
        background: #f8fafc !important;
    }

    .vendor-earnings-aside .vendor-finance-guide ol > li::after {
        display: none !important;
    }
}

@media (max-width: 650px) {
    .vendor-earnings-aside .vendor-finance-guide {
        padding: 20px !important;
    }

    .vendor-earnings-aside .vendor-finance-guide ol {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   END KITOMANGA VENDOR EARNINGS FINAL UI OVERRIDE
   ========================================================= */

/* =========================================================
   PAYMENT CYCLE — HARD FINAL OVERRIDE
   ========================================================= */

body.vendor-earnings-body
.vendor-main
.vendor-earnings-aside
.vendor-finance-guide {
    padding: 24px !important;
}

body.vendor-earnings-body
.vendor-main
.vendor-earnings-aside
.vendor-finance-guide ol {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

body.vendor-earnings-body
.vendor-main
.vendor-earnings-aside
.vendor-finance-guide ol > li {
    position: relative !important;

    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;

    width: 100% !important;
    min-width: 0 !important;

    gap: 13px !important;

    margin: 0 !important;
    padding: 0 0 24px !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;
}

body.vendor-earnings-body
.vendor-main
.vendor-earnings-aside
.vendor-finance-guide ol > li:last-child {
    padding-bottom: 0 !important;
}

/* Remove old generated numbering */
body.vendor-earnings-body
.vendor-main
.vendor-earnings-aside
.vendor-finance-guide ol > li::before {
    content: none !important;
    display: none !important;
}

/* Vertical timeline */
body.vendor-earnings-body
.vendor-main
.vendor-earnings-aside
.vendor-finance-guide ol > li:not(:last-child)::after {
    content: "" !important;

    position: absolute !important;

    top: 36px !important;
    left: 17px !important;

    display: block !important;

    width: 2px !important;
    height: calc(100% - 28px) !important;

    background: #d8ebe8 !important;
}

/* Actual HTML numbers */
body.vendor-earnings-body
.vendor-main
.vendor-earnings-aside
.vendor-finance-guide ol > li > span {
    position: relative !important;
    z-index: 5 !important;

    display: flex !important;

    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;

    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid #c9e9e4 !important;
    border-radius: 999px !important;

    background: #e9f8f5 !important;

    color: #08796e !important;

    font-size: 13px !important;
    line-height: 36px !important;
    font-weight: 800 !important;
    text-align: center !important;
}

/* Step content */
body.vendor-earnings-body
.vendor-main
.vendor-earnings-aside
.vendor-finance-guide ol > li > div {
    display: block !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 1px 0 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;
}

body.vendor-earnings-body
.vendor-main
.vendor-earnings-aside
.vendor-finance-guide ol > li > div > strong {
    display: block !important;

    margin: 0 0 4px !important;

    color: #172033 !important;

    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
}

body.vendor-earnings-body
.vendor-main
.vendor-earnings-aside
.vendor-finance-guide ol > li > div > p {
    display: block !important;

    margin: 0 !important;

    color: #64748b !important;

    font-size: 13px !important;
    line-height: 1.5 !important;
}

/* Keep sidebar heading compact */
body.vendor-earnings-body
.vendor-main
.vendor-earnings-aside
.vendor-finance-guide h2 {
    margin: 5px 0 22px !important;

    font-size: 22px !important;
    line-height: 1.25 !important;
}

/* Mobile */
@media (max-width: 1100px) {

    body.vendor-earnings-body
    .vendor-main
    .vendor-earnings-aside
    .vendor-finance-guide ol {
        display: grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    body.vendor-earnings-body
    .vendor-main
    .vendor-earnings-aside
    .vendor-finance-guide ol > li {
        padding: 16px !important;

        border: 1px solid #e1e8ef !important;
        border-radius: 14px !important;

        background: #f8fafc !important;
    }

    body.vendor-earnings-body
    .vendor-main
    .vendor-earnings-aside
    .vendor-finance-guide ol > li::after {
        display: none !important;
    }
}

@media (max-width: 650px) {

    body.vendor-earnings-body
    .vendor-main
    .vendor-earnings-aside
    .vendor-finance-guide ol {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   END PAYMENT CYCLE HARD OVERRIDE
   ========================================================= */


/* =========================================================
   KITOMANGA VENDOR PORTAL
   PRODUCTS & INVENTORY — FINAL UI
   ========================================================= */

.vendor-products-page {
    width: 100%;
    padding: 34px 0 70px;
    background: #f6f8f7;
    min-height: calc(100vh - 180px);
}

.vendor-products-page .vendor-container {
    width: min(1320px, calc(100% - 48px));
    margin: 0 auto;
}


/* ---------------------------------------------------------
   BREADCRUMB
   --------------------------------------------------------- */

.vendor-products-page .vendor-breadcrumb {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 26px;
    color: #738078;
    font-size: 13px;
}

.vendor-products-page .vendor-breadcrumb a {
    color: #176b46;
    font-weight: 700;
    text-decoration: none;
}

.vendor-products-page .vendor-breadcrumb a:hover {
    text-decoration: underline;
}

.vendor-products-page .vendor-breadcrumb strong {
    color: #28372f;
}


/* ---------------------------------------------------------
   PAGE HEADING
   --------------------------------------------------------- */

.vendor-products-page .vendor-products-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.vendor-products-page .vendor-products-heading h1 {
    margin: 5px 0 7px;
    color: #17251d;
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.1;
    font-weight: 850;
}

.vendor-products-page .vendor-products-heading p {
    max-width: 680px;
    margin: 0;
    color: #6a786f;
    font-size: 14px;
    line-height: 1.6;
}

.vendor-products-page .vendor-eyebrow {
    display: inline-block;
    color: #16714a;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */

.vendor-products-page .vendor-primary-button,
.vendor-products-page .vendor-secondary-button,
.vendor-products-page .vendor-text-button {
    appearance: none;
    border: 0;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .18s ease;
}

.vendor-products-page .vendor-primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 44px;
    padding: 0 18px;

    border-radius: 10px;

    background: #176b46;
    color: #ffffff;

    font-size: 13px;
    font-weight: 800;

    box-shadow:
        0 4px 12px rgba(23, 107, 70, .14);
}

.vendor-products-page .vendor-primary-button:hover {
    background: #105a3a;
    transform: translateY(-1px);
}

.vendor-products-page .vendor-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;
    padding: 0 16px;

    border: 1px solid #cad8d0;
    border-radius: 9px;

    background: #ffffff;
    color: #335344;

    font-size: 13px;
    font-weight: 750;
}

.vendor-products-page .vendor-secondary-button:hover {
    border-color: #9dbbab;
    background: #f1f7f3;
}

.vendor-products-page .vendor-text-button {
    padding: 7px 9px;
    border-radius: 7px;

    background: transparent;
    color: #587066;

    font-size: 12px;
    font-weight: 750;
}

.vendor-products-page .vendor-text-button:hover {
    background: #eef4f0;
    color: #176b46;
}


/* ---------------------------------------------------------
   ALERTS
   --------------------------------------------------------- */

.vendor-products-page .vendor-alert {
    margin-bottom: 22px;
    padding: 14px 17px;

    display: flex;
    align-items: center;
    gap: 10px;

    border-radius: 10px;

    font-size: 13px;
    line-height: 1.45;
}

.vendor-products-page .vendor-alert-success {
    border: 1px solid #bbe4cb;
    background: #ebf8f0;
    color: #17663e;
}

.vendor-products-page .vendor-alert-error {
    border: 1px solid #ebc5c5;
    background: #fff1f1;
    color: #963b3b;
}


/* ---------------------------------------------------------
   STAT CARDS
   --------------------------------------------------------- */

.vendor-products-page .vendor-product-stats {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 16px;
    margin-bottom: 28px;
}

.vendor-products-page .vendor-product-stats article {
    padding: 20px;

    display: flex;
    flex-direction: column;
    gap: 7px;

    border: 1px solid #dde6e0;
    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 4px 14px rgba(25, 55, 39, .04);
}

.vendor-products-page .vendor-product-stats span {
    color: #77847c;
    font-size: 12px;
    font-weight: 700;
}

.vendor-products-page .vendor-product-stats strong {
    color: #1c2d23;
    font-size: 27px;
    line-height: 1;
    font-weight: 850;
}


/* ---------------------------------------------------------
   PANELS
   --------------------------------------------------------- */

.vendor-products-page .vendor-product-panel,
.vendor-products-page .vendor-product-create {
    margin-bottom: 25px;

    border: 1px solid #dde6e0;
    border-radius: 15px;

    background: #ffffff;

    box-shadow:
        0 5px 18px rgba(26, 52, 39, .04);

    overflow: hidden;
}

.vendor-products-page .vendor-product-panel-heading {
    padding: 20px 22px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    border-bottom: 1px solid #e7ece9;
}

.vendor-products-page .vendor-product-panel-heading h2 {
    margin: 4px 0 0;
    color: #1d2d24;
    font-size: 20px;
}


/* ---------------------------------------------------------
   FILTERS
   --------------------------------------------------------- */

.vendor-products-page .vendor-product-filters {
    padding: 20px 22px;

    display: grid;
    grid-template-columns:
        minmax(220px, 2fr)
        minmax(150px, 1fr)
        minmax(150px, 1fr)
        auto;

    gap: 14px;
    align-items: end;
}

.vendor-products-page .vendor-product-filters label,
.vendor-products-page .vendor-product-form label,
.vendor-products-page .vendor-stock-form label {
    display: grid;
    gap: 6px;

    color: #526158;
    font-size: 12px;
    font-weight: 750;
}

.vendor-products-page .vendor-product-filters input,
.vendor-products-page .vendor-product-filters select,
.vendor-products-page .vendor-product-form input,
.vendor-products-page .vendor-product-form select,
.vendor-products-page .vendor-product-form textarea,
.vendor-products-page .vendor-stock-form input,
.vendor-products-page .vendor-stock-form select {
    width: 100%;

    border: 1px solid #ccd8d1;
    border-radius: 9px;

    background: #ffffff;
    color: #1e2b24;

    font-family: inherit;
    font-size: 13px;

    outline: none;
}

.vendor-products-page .vendor-product-filters input,
.vendor-products-page .vendor-product-filters select,
.vendor-products-page .vendor-product-form input,
.vendor-products-page .vendor-product-form select,
.vendor-products-page .vendor-stock-form input,
.vendor-products-page .vendor-stock-form select {
    min-height: 42px;
    padding: 0 12px;
}

.vendor-products-page .vendor-product-form textarea {
    min-height: 105px;
    padding: 11px 12px;
    resize: vertical;
}

.vendor-products-page .vendor-product-filters input:focus,
.vendor-products-page .vendor-product-filters select:focus,
.vendor-products-page .vendor-product-form input:focus,
.vendor-products-page .vendor-product-form select:focus,
.vendor-products-page .vendor-product-form textarea:focus,
.vendor-products-page .vendor-stock-form input:focus,
.vendor-products-page .vendor-stock-form select:focus {
    border-color: #57a57b;
    box-shadow:
        0 0 0 3px rgba(40, 139, 87, .10);
}

.vendor-products-page .vendor-filter-actions {
    display: flex;
    gap: 8px;
}


/* ---------------------------------------------------------
   CREATE / EDIT DETAILS
   --------------------------------------------------------- */

.vendor-products-page details.vendor-product-create,
.vendor-products-page details.vendor-product-action {
    position: relative;
}

.vendor-products-page details.vendor-product-create > summary,
.vendor-products-page details.vendor-product-action > summary {
    list-style: none;
    cursor: pointer;
}

.vendor-products-page details.vendor-product-create > summary::-webkit-details-marker,
.vendor-products-page details.vendor-product-action > summary::-webkit-details-marker {
    display: none;
}

.vendor-products-page .vendor-product-create > summary {
    padding: 18px 22px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    color: #24372c;
    font-size: 14px;
    font-weight: 800;

    background: #f8faf9;
}

.vendor-products-page .vendor-product-create[open] > summary {
    border-bottom: 1px solid #e4ebe7;
}

.vendor-products-page .vendor-summary-action {
    color: #176b46;
    font-size: 12px;
}


/* ---------------------------------------------------------
   FORMS
   --------------------------------------------------------- */

.vendor-products-page .vendor-product-form {
    padding: 22px;
}

.vendor-products-page .vendor-form-section-heading {
    margin-bottom: 18px;

    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.vendor-products-page .vendor-form-section-heading > span {
    width: 32px;
    height: 32px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 32px;

    border-radius: 50%;

    background: #e7f4ec;
    color: #176b46;

    font-size: 11px;
    font-weight: 900;
}

.vendor-products-page .vendor-form-section-heading h3 {
    margin: 0 0 3px;
    color: #213128;
    font-size: 16px;
}

.vendor-products-page .vendor-form-section-heading p {
    margin: 0;
    color: #77837c;
    font-size: 12px;
}

.vendor-products-page .vendor-form-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 15px;
}

.vendor-products-page .vendor-form-wide {
    grid-column: 1 / -1;
}

.vendor-products-page .vendor-form-actions {
    margin-top: 20px;

    display: flex;
    align-items: center;
    gap: 10px;

    padding-top: 18px;

    border-top: 1px solid #e8edea;
}


/* ---------------------------------------------------------
   PRODUCT LIST HEADING
   --------------------------------------------------------- */

.vendor-products-page .vendor-product-list {
    padding: 0 22px 22px;
}

.vendor-products-page .vendor-product-list-heading {
    padding: 18px 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
}

.vendor-products-page .vendor-product-list-heading h2 {
    margin: 0;
    color: #1f3027;
    font-size: 20px;
}


/* ---------------------------------------------------------
   PRODUCT CARDS GRID
   --------------------------------------------------------- */

.vendor-products-page .vendor-product-cards {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;
}

.vendor-products-page .vendor-product-card {
    display: flex;
    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    border: 1px solid #dce5df;
    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 4px 14px rgba(23, 52, 37, .045);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.vendor-products-page .vendor-product-card:hover {
    transform: translateY(-2px);

    border-color: #c8d8cf;

    box-shadow:
        0 9px 25px rgba(23, 52, 37, .08);
}


/* ---------------------------------------------------------
   PRODUCT IMAGE
   --------------------------------------------------------- */

.vendor-products-page .vendor-product-card-image {
    position: relative;

    width: 100%;
    height: 220px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 0;

    background: #f3f6f4;
}

.vendor-products-page .vendor-product-card-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    padding: 10px;

    background: #ffffff;
}

.vendor-products-page .vendor-product-card-image > span {
    color: #87948c;
    font-size: 28px;
}


/* ---------------------------------------------------------
   BADGES
   --------------------------------------------------------- */

.vendor-products-page .vendor-product-card-badges {
    position: absolute;
    top: 10px;
    left: 10px;

    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    z-index: 2;
}

.vendor-products-page .vendor-product-card-badges span {
    padding: 5px 8px;

    border-radius: 999px;

    background: rgba(255,255,255,.93);
    color: #425248;

    font-size: 10px;
    font-weight: 850;

    box-shadow:
        0 2px 7px rgba(20, 40, 30, .08);
}

.vendor-products-page .approval-approved {
    background: #e5f6eb !important;
    color: #17683e !important;
}

.vendor-products-page .approval-pending {
    background: #fff4d9 !important;
    color: #8c6500 !important;
}

.vendor-products-page .approval-rejected {
    background: #ffe8e8 !important;
    color: #9b3939 !important;
}

.vendor-products-page .approval-draft {
    background: #edf0f1 !important;
    color: #5f6c65 !important;
}

.vendor-products-page .listing-active {
    background: #e8f5ed !important;
    color: #17683e !important;
}

.vendor-products-page .listing-inactive {
    background: #f1f2f2 !important;
    color: #6d7772 !important;
}


/* ---------------------------------------------------------
   PRODUCT CARD BODY
   --------------------------------------------------------- */

.vendor-products-page .vendor-product-card-body {
    padding: 17px;

    display: flex;
    flex-direction: column;
    flex: 1;
}

.vendor-products-page .vendor-product-category {
    margin-bottom: 5px;

    color: #78867d;

    font-size: 11px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: .045em;
}

.vendor-products-page .vendor-product-card-body h3 {
    margin: 0 0 7px;

    color: #1b2c22;

    font-size: 17px;
    line-height: 1.35;
    font-weight: 850;
}

.vendor-products-page .vendor-product-reference {
    margin-bottom: 12px;

    color: #839087;

    font-size: 11px;
    line-height: 1.5;
}

.vendor-products-page .vendor-product-values {
    margin-top: auto;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 9px;
}

.vendor-products-page .vendor-product-values > div {
    padding: 10px;

    border-radius: 9px;

    background: #f7f9f8;
}

.vendor-products-page .vendor-product-values span {
    display: block;

    margin-bottom: 3px;

    color: #7a877f;

    font-size: 10px;
    font-weight: 700;
}

.vendor-products-page .vendor-product-values strong {
    color: #23352b;

    font-size: 13px;
    font-weight: 850;
}

.vendor-products-page .vendor-product-rating {
    margin-top: 12px;

    color: #68766d;

    font-size: 12px;
}


/* ---------------------------------------------------------
   PRODUCT ACTIONS
   --------------------------------------------------------- */

.vendor-products-page .vendor-product-card-actions {
    margin-top: 15px;
    padding-top: 14px;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;

    border-top: 1px solid #e8edea;
}

.vendor-products-page .vendor-product-action {
    position: relative;
}

.vendor-products-page .vendor-product-action > summary {
    min-height: 35px;
    padding: 0 11px;

    display: inline-flex;
    align-items: center;

    border: 1px solid #ced9d2;
    border-radius: 8px;

    background: #ffffff;
    color: #3d5548;

    font-size: 11px;
    font-weight: 750;
}

.vendor-products-page .vendor-product-action[open] > summary {
    border-color: #8fbaa4;
    background: #eef6f1;
    color: #176b46;
}

.vendor-products-page .vendor-product-action .vendor-product-form,
.vendor-products-page .vendor-product-action .vendor-stock-form {
    margin-top: 10px;
    padding: 16px;

    min-width: 320px;

    border: 1px solid #dce5df;
    border-radius: 11px;

    background: #fafcfb;
}


/* ---------------------------------------------------------
   STOCK ADJUSTMENT
   --------------------------------------------------------- */

.vendor-products-page .vendor-stock-form {
    display: grid;
    gap: 12px;
}

.vendor-products-page .vendor-stock-form .vendor-primary-button {
    width: 100%;
}


/* ---------------------------------------------------------
   EMPTY STATE
   --------------------------------------------------------- */

.vendor-products-page .vendor-products-empty,
.vendor-products-page .vendor-empty {
    padding: 55px 25px;

    border: 1px dashed #cbd7d0;
    border-radius: 12px;

    background: #fafcfb;

    color: #718078;

    text-align: center;
}

.vendor-products-page .vendor-products-empty h3,
.vendor-products-page .vendor-empty h3 {
    margin: 0 0 7px;
    color: #28392f;
}


/* ---------------------------------------------------------
   APPROVAL NOTICE
   --------------------------------------------------------- */

.vendor-products-page .vendor-approval-notice {
    margin-top: 12px;
    padding: 11px 13px;

    border-left: 3px solid #d7a928;
    border-radius: 6px;

    background: #fff9e8;
    color: #766019;

    font-size: 11px;
    line-height: 1.55;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1100px) {

    .vendor-products-page .vendor-product-cards {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .vendor-products-page .vendor-product-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .vendor-products-page .vendor-product-filters {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 760px) {

    .vendor-products-page {
        padding-top: 22px;
    }

    .vendor-products-page .vendor-container {
        width: calc(100% - 28px);
    }

    .vendor-products-page .vendor-products-heading {
        flex-direction: column;
    }

    .vendor-products-page .vendor-products-heading
    .vendor-primary-button {
        width: 100%;
    }

    .vendor-products-page .vendor-product-stats {
        grid-template-columns: 1fr 1fr;
    }

    .vendor-products-page .vendor-product-cards {
        grid-template-columns: 1fr;
    }

    .vendor-products-page .vendor-product-filters,
    .vendor-products-page .vendor-form-grid {
        grid-template-columns: 1fr;
    }

    .vendor-products-page .vendor-form-wide {
        grid-column: auto;
    }

    .vendor-products-page .vendor-filter-actions {
        width: 100%;
    }

    .vendor-products-page .vendor-filter-actions > * {
        flex: 1;
    }

    .vendor-products-page .vendor-product-card-image {
        height: 250px;
    }

    .vendor-products-page
    .vendor-product-action
    .vendor-product-form,
    .vendor-products-page
    .vendor-product-action
    .vendor-stock-form {
        min-width: 0;
        width: 100%;
    }
}


@media (max-width: 480px) {

    .vendor-products-page .vendor-product-stats {
        grid-template-columns: 1fr;
    }

    .vendor-products-page .vendor-product-values {
        grid-template-columns: 1fr;
    }

    .vendor-products-page .vendor-product-card-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .vendor-products-page
    .vendor-product-action > summary,
    .vendor-products-page
    .vendor-text-button {
        width: 100%;
        justify-content: center;
    }
}



/* =========================================================
   KITOMANGA VENDOR PORTAL
   PRODUCTS & INVENTORY — FINAL UI
   ========================================================= */

.vendor-products-page {
    width: 100%;
    padding: 34px 0 70px;
    background: #f6f8f7;
    min-height: calc(100vh - 180px);
}

.vendor-products-page .vendor-container {
    width: min(1320px, calc(100% - 48px));
    margin: 0 auto;
}


/* ---------------------------------------------------------
   BREADCRUMB
   --------------------------------------------------------- */

.vendor-products-page .vendor-breadcrumb {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 26px;
    color: #738078;
    font-size: 13px;
}

.vendor-products-page .vendor-breadcrumb a {
    color: #176b46;
    font-weight: 700;
    text-decoration: none;
}

.vendor-products-page .vendor-breadcrumb a:hover {
    text-decoration: underline;
}

.vendor-products-page .vendor-breadcrumb strong {
    color: #28372f;
}


/* ---------------------------------------------------------
   PAGE HEADING
   --------------------------------------------------------- */

.vendor-products-page .vendor-products-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.vendor-products-page .vendor-products-heading h1 {
    margin: 5px 0 7px;
    color: #17251d;
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.1;
    font-weight: 850;
}

.vendor-products-page .vendor-products-heading p {
    max-width: 680px;
    margin: 0;
    color: #6a786f;
    font-size: 14px;
    line-height: 1.6;
}

.vendor-products-page .vendor-eyebrow {
    display: inline-block;
    color: #16714a;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */

.vendor-products-page .vendor-primary-button,
.vendor-products-page .vendor-secondary-button,
.vendor-products-page .vendor-text-button {
    appearance: none;
    border: 0;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .18s ease;
}

.vendor-products-page .vendor-primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 44px;
    padding: 0 18px;

    border-radius: 10px;

    background: #176b46;
    color: #ffffff;

    font-size: 13px;
    font-weight: 800;

    box-shadow:
        0 4px 12px rgba(23, 107, 70, .14);
}

.vendor-products-page .vendor-primary-button:hover {
    background: #105a3a;
    transform: translateY(-1px);
}

.vendor-products-page .vendor-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;
    padding: 0 16px;

    border: 1px solid #cad8d0;
    border-radius: 9px;

    background: #ffffff;
    color: #335344;

    font-size: 13px;
    font-weight: 750;
}

.vendor-products-page .vendor-secondary-button:hover {
    border-color: #9dbbab;
    background: #f1f7f3;
}

.vendor-products-page .vendor-text-button {
    padding: 7px 9px;
    border-radius: 7px;

    background: transparent;
    color: #587066;

    font-size: 12px;
    font-weight: 750;
}

.vendor-products-page .vendor-text-button:hover {
    background: #eef4f0;
    color: #176b46;
}


/* ---------------------------------------------------------
   ALERTS
   --------------------------------------------------------- */

.vendor-products-page .vendor-alert {
    margin-bottom: 22px;
    padding: 14px 17px;

    display: flex;
    align-items: center;
    gap: 10px;

    border-radius: 10px;

    font-size: 13px;
    line-height: 1.45;
}

.vendor-products-page .vendor-alert-success {
    border: 1px solid #bbe4cb;
    background: #ebf8f0;
    color: #17663e;
}

.vendor-products-page .vendor-alert-error {
    border: 1px solid #ebc5c5;
    background: #fff1f1;
    color: #963b3b;
}


/* ---------------------------------------------------------
   STAT CARDS
   --------------------------------------------------------- */

.vendor-products-page .vendor-product-stats {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 16px;
    margin-bottom: 28px;
}

.vendor-products-page .vendor-product-stats article {
    padding: 20px;

    display: flex;
    flex-direction: column;
    gap: 7px;

    border: 1px solid #dde6e0;
    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 4px 14px rgba(25, 55, 39, .04);
}

.vendor-products-page .vendor-product-stats span {
    color: #77847c;
    font-size: 12px;
    font-weight: 700;
}

.vendor-products-page .vendor-product-stats strong {
    color: #1c2d23;
    font-size: 27px;
    line-height: 1;
    font-weight: 850;
}


/* ---------------------------------------------------------
   PANELS
   --------------------------------------------------------- */

.vendor-products-page .vendor-product-panel,
.vendor-products-page .vendor-product-create {
    margin-bottom: 25px;

    border: 1px solid #dde6e0;
    border-radius: 15px;

    background: #ffffff;

    box-shadow:
        0 5px 18px rgba(26, 52, 39, .04);

    overflow: hidden;
}

.vendor-products-page .vendor-product-panel-heading {
    padding: 20px 22px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    border-bottom: 1px solid #e7ece9;
}

.vendor-products-page .vendor-product-panel-heading h2 {
    margin: 4px 0 0;
    color: #1d2d24;
    font-size: 20px;
}


/* ---------------------------------------------------------
   FILTERS
   --------------------------------------------------------- */

.vendor-products-page .vendor-product-filters {
    padding: 20px 22px;

    display: grid;
    grid-template-columns:
        minmax(220px, 2fr)
        minmax(150px, 1fr)
        minmax(150px, 1fr)
        auto;

    gap: 14px;
    align-items: end;
}

.vendor-products-page .vendor-product-filters label,
.vendor-products-page .vendor-product-form label,
.vendor-products-page .vendor-stock-form label {
    display: grid;
    gap: 6px;

    color: #526158;
    font-size: 12px;
    font-weight: 750;
}

.vendor-products-page .vendor-product-filters input,
.vendor-products-page .vendor-product-filters select,
.vendor-products-page .vendor-product-form input,
.vendor-products-page .vendor-product-form select,
.vendor-products-page .vendor-product-form textarea,
.vendor-products-page .vendor-stock-form input,
.vendor-products-page .vendor-stock-form select {
    width: 100%;

    border: 1px solid #ccd8d1;
    border-radius: 9px;

    background: #ffffff;
    color: #1e2b24;

    font-family: inherit;
    font-size: 13px;

    outline: none;
}

.vendor-products-page .vendor-product-filters input,
.vendor-products-page .vendor-product-filters select,
.vendor-products-page .vendor-product-form input,
.vendor-products-page .vendor-product-form select,
.vendor-products-page .vendor-stock-form input,
.vendor-products-page .vendor-stock-form select {
    min-height: 42px;
    padding: 0 12px;
}

.vendor-products-page .vendor-product-form textarea {
    min-height: 105px;
    padding: 11px 12px;
    resize: vertical;
}

.vendor-products-page .vendor-product-filters input:focus,
.vendor-products-page .vendor-product-filters select:focus,
.vendor-products-page .vendor-product-form input:focus,
.vendor-products-page .vendor-product-form select:focus,
.vendor-products-page .vendor-product-form textarea:focus,
.vendor-products-page .vendor-stock-form input:focus,
.vendor-products-page .vendor-stock-form select:focus {
    border-color: #57a57b;
    box-shadow:
        0 0 0 3px rgba(40, 139, 87, .10);
}

.vendor-products-page .vendor-filter-actions {
    display: flex;
    gap: 8px;
}


/* ---------------------------------------------------------
   CREATE / EDIT DETAILS
   --------------------------------------------------------- */

.vendor-products-page details.vendor-product-create,
.vendor-products-page details.vendor-product-action {
    position: relative;
}

.vendor-products-page details.vendor-product-create > summary,
.vendor-products-page details.vendor-product-action > summary {
    list-style: none;
    cursor: pointer;
}

.vendor-products-page details.vendor-product-create > summary::-webkit-details-marker,
.vendor-products-page details.vendor-product-action > summary::-webkit-details-marker {
    display: none;
}

.vendor-products-page .vendor-product-create > summary {
    padding: 18px 22px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    color: #24372c;
    font-size: 14px;
    font-weight: 800;

    background: #f8faf9;
}

.vendor-products-page .vendor-product-create[open] > summary {
    border-bottom: 1px solid #e4ebe7;
}

.vendor-products-page .vendor-summary-action {
    color: #176b46;
    font-size: 12px;
}


/* ---------------------------------------------------------
   FORMS
   --------------------------------------------------------- */

.vendor-products-page .vendor-product-form {
    padding: 22px;
}

.vendor-products-page .vendor-form-section-heading {
    margin-bottom: 18px;

    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.vendor-products-page .vendor-form-section-heading > span {
    width: 32px;
    height: 32px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 32px;

    border-radius: 50%;

    background: #e7f4ec;
    color: #176b46;

    font-size: 11px;
    font-weight: 900;
}

.vendor-products-page .vendor-form-section-heading h3 {
    margin: 0 0 3px;
    color: #213128;
    font-size: 16px;
}

.vendor-products-page .vendor-form-section-heading p {
    margin: 0;
    color: #77837c;
    font-size: 12px;
}

.vendor-products-page .vendor-form-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 15px;
}

.vendor-products-page .vendor-form-wide {
    grid-column: 1 / -1;
}

.vendor-products-page .vendor-form-actions {
    margin-top: 20px;

    display: flex;
    align-items: center;
    gap: 10px;

    padding-top: 18px;

    border-top: 1px solid #e8edea;
}


/* ---------------------------------------------------------
   PRODUCT LIST HEADING
   --------------------------------------------------------- */

.vendor-products-page .vendor-product-list {
    padding: 0 22px 22px;
}

.vendor-products-page .vendor-product-list-heading {
    padding: 18px 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
}

.vendor-products-page .vendor-product-list-heading h2 {
    margin: 0;
    color: #1f3027;
    font-size: 20px;
}


/* ---------------------------------------------------------
   PRODUCT CARDS GRID
   --------------------------------------------------------- */

.vendor-products-page .vendor-product-cards {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;
}

.vendor-products-page .vendor-product-card {
    display: flex;
    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    border: 1px solid #dce5df;
    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 4px 14px rgba(23, 52, 37, .045);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.vendor-products-page .vendor-product-card:hover {
    transform: translateY(-2px);

    border-color: #c8d8cf;

    box-shadow:
        0 9px 25px rgba(23, 52, 37, .08);
}


/* ---------------------------------------------------------
   PRODUCT IMAGE
   --------------------------------------------------------- */

.vendor-products-page .vendor-product-card-image {
    position: relative;

    width: 100%;
    height: 220px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 0;

    background: #f3f6f4;
}

.vendor-products-page .vendor-product-card-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    padding: 10px;

    background: #ffffff;
}

.vendor-products-page .vendor-product-card-image > span {
    color: #87948c;
    font-size: 28px;
}


/* ---------------------------------------------------------
   BADGES
   --------------------------------------------------------- */

.vendor-products-page .vendor-product-card-badges {
    position: absolute;
    top: 10px;
    left: 10px;

    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    z-index: 2;
}

.vendor-products-page .vendor-product-card-badges span {
    padding: 5px 8px;

    border-radius: 999px;

    background: rgba(255,255,255,.93);
    color: #425248;

    font-size: 10px;
    font-weight: 850;

    box-shadow:
        0 2px 7px rgba(20, 40, 30, .08);
}

.vendor-products-page .approval-approved {
    background: #e5f6eb !important;
    color: #17683e !important;
}

.vendor-products-page .approval-pending {
    background: #fff4d9 !important;
    color: #8c6500 !important;
}

.vendor-products-page .approval-rejected {
    background: #ffe8e8 !important;
    color: #9b3939 !important;
}

.vendor-products-page .approval-draft {
    background: #edf0f1 !important;
    color: #5f6c65 !important;
}

.vendor-products-page .listing-active {
    background: #e8f5ed !important;
    color: #17683e !important;
}

.vendor-products-page .listing-inactive {
    background: #f1f2f2 !important;
    color: #6d7772 !important;
}


/* ---------------------------------------------------------
   PRODUCT CARD BODY
   --------------------------------------------------------- */

.vendor-products-page .vendor-product-card-body {
    padding: 17px;

    display: flex;
    flex-direction: column;
    flex: 1;
}

.vendor-products-page .vendor-product-category {
    margin-bottom: 5px;

    color: #78867d;

    font-size: 11px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: .045em;
}

.vendor-products-page .vendor-product-card-body h3 {
    margin: 0 0 7px;

    color: #1b2c22;

    font-size: 17px;
    line-height: 1.35;
    font-weight: 850;
}

.vendor-products-page .vendor-product-reference {
    margin-bottom: 12px;

    color: #839087;

    font-size: 11px;
    line-height: 1.5;
}

.vendor-products-page .vendor-product-values {
    margin-top: auto;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 9px;
}

.vendor-products-page .vendor-product-values > div {
    padding: 10px;

    border-radius: 9px;

    background: #f7f9f8;
}

.vendor-products-page .vendor-product-values span {
    display: block;

    margin-bottom: 3px;

    color: #7a877f;

    font-size: 10px;
    font-weight: 700;
}

.vendor-products-page .vendor-product-values strong {
    color: #23352b;

    font-size: 13px;
    font-weight: 850;
}

.vendor-products-page .vendor-product-rating {
    margin-top: 12px;

    color: #68766d;

    font-size: 12px;
}


/* ---------------------------------------------------------
   PRODUCT ACTIONS
   --------------------------------------------------------- */

.vendor-products-page .vendor-product-card-actions {
    margin-top: 15px;
    padding-top: 14px;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;

    border-top: 1px solid #e8edea;
}

.vendor-products-page .vendor-product-action {
    position: relative;
}

.vendor-products-page .vendor-product-action > summary {
    min-height: 35px;
    padding: 0 11px;

    display: inline-flex;
    align-items: center;

    border: 1px solid #ced9d2;
    border-radius: 8px;

    background: #ffffff;
    color: #3d5548;

    font-size: 11px;
    font-weight: 750;
}

.vendor-products-page .vendor-product-action[open] > summary {
    border-color: #8fbaa4;
    background: #eef6f1;
    color: #176b46;
}

.vendor-products-page .vendor-product-action .vendor-product-form,
.vendor-products-page .vendor-product-action .vendor-stock-form {
    margin-top: 10px;
    padding: 16px;

    min-width: 320px;

    border: 1px solid #dce5df;
    border-radius: 11px;

    background: #fafcfb;
}


/* ---------------------------------------------------------
   STOCK ADJUSTMENT
   --------------------------------------------------------- */

.vendor-products-page .vendor-stock-form {
    display: grid;
    gap: 12px;
}

.vendor-products-page .vendor-stock-form .vendor-primary-button {
    width: 100%;
}


/* ---------------------------------------------------------
   EMPTY STATE
   --------------------------------------------------------- */

.vendor-products-page .vendor-products-empty,
.vendor-products-page .vendor-empty {
    padding: 55px 25px;

    border: 1px dashed #cbd7d0;
    border-radius: 12px;

    background: #fafcfb;

    color: #718078;

    text-align: center;
}

.vendor-products-page .vendor-products-empty h3,
.vendor-products-page .vendor-empty h3 {
    margin: 0 0 7px;
    color: #28392f;
}


/* ---------------------------------------------------------
   APPROVAL NOTICE
   --------------------------------------------------------- */

.vendor-products-page .vendor-approval-notice {
    margin-top: 12px;
    padding: 11px 13px;

    border-left: 3px solid #d7a928;
    border-radius: 6px;

    background: #fff9e8;
    color: #766019;

    font-size: 11px;
    line-height: 1.55;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1100px) {

    .vendor-products-page .vendor-product-cards {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .vendor-products-page .vendor-product-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .vendor-products-page .vendor-product-filters {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 760px) {

    .vendor-products-page {
        padding-top: 22px;
    }

    .vendor-products-page .vendor-container {
        width: calc(100% - 28px);
    }

    .vendor-products-page .vendor-products-heading {
        flex-direction: column;
    }

    .vendor-products-page .vendor-products-heading
    .vendor-primary-button {
        width: 100%;
    }

    .vendor-products-page .vendor-product-stats {
        grid-template-columns: 1fr 1fr;
    }

    .vendor-products-page .vendor-product-cards {
        grid-template-columns: 1fr;
    }

    .vendor-products-page .vendor-product-filters,
    .vendor-products-page .vendor-form-grid {
        grid-template-columns: 1fr;
    }

    .vendor-products-page .vendor-form-wide {
        grid-column: auto;
    }

    .vendor-products-page .vendor-filter-actions {
        width: 100%;
    }

    .vendor-products-page .vendor-filter-actions > * {
        flex: 1;
    }

    .vendor-products-page .vendor-product-card-image {
        height: 250px;
    }

    .vendor-products-page
    .vendor-product-action
    .vendor-product-form,
    .vendor-products-page
    .vendor-product-action
    .vendor-stock-form {
        min-width: 0;
        width: 100%;
    }
}


@media (max-width: 480px) {

    .vendor-products-page .vendor-product-stats {
        grid-template-columns: 1fr;
    }

    .vendor-products-page .vendor-product-values {
        grid-template-columns: 1fr;
    }

    .vendor-products-page .vendor-product-card-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .vendor-products-page
    .vendor-product-action > summary,
    .vendor-products-page
    .vendor-text-button {
        width: 100%;
        justify-content: center;
    }
}


/*
=========================================================
KITOMANGA VENDOR CENTRE
ORDERS PAGE — PROFESSIONAL LAYOUT
=========================================================
*/

.vendor-orders-page {
    padding: 34px 0 70px;
}

.vendor-orders-page .vendor-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

/* ------------------------------------------------------
   Breadcrumb
------------------------------------------------------ */

.vendor-orders-page .vendor-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 14px;
}

.vendor-orders-page .vendor-breadcrumb a {
    color: #16745b;
    font-weight: 700;
    text-decoration: none;
}

.vendor-orders-page .vendor-breadcrumb a:hover {
    text-decoration: underline;
}

.vendor-orders-page .vendor-breadcrumb span {
    color: #94a3b8;
}

.vendor-orders-page .vendor-breadcrumb strong {
    color: #172033;
}


/* ------------------------------------------------------
   Heading
------------------------------------------------------ */

.vendor-orders-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 28px;
}

.vendor-orders-heading h1 {
    margin: 7px 0 8px;
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: #172033;
}

.vendor-orders-heading p {
    max-width: 680px;
    margin: 0;
    color: #64748b;
    line-height: 1.65;
}

.vendor-orders-page .vendor-eyebrow {
    display: block;
    color: #087f6b;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}


/* ------------------------------------------------------
   KPI / Statistics
------------------------------------------------------ */

.vendor-order-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.vendor-order-stats article {
    position: relative;
    min-width: 0;
    padding: 21px 22px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 15px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .045);
    overflow: hidden;
}

.vendor-order-stats article::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #16856d;
}

.vendor-order-stats article > span {
    display: block;
    margin-bottom: 9px;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.vendor-order-stats article > strong {
    display: block;
    margin-bottom: 6px;
    color: #172033;
    font-size: 30px;
    line-height: 1;
    letter-spacing: -.03em;
}

.vendor-order-stats article > small {
    display: block;
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.45;
}


/* ------------------------------------------------------
   Filter panel
------------------------------------------------------ */

.vendor-order-filter-panel {
    margin-bottom: 28px;
    padding: 22px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15, 23, 42, .045);
}

.vendor-order-panel-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 18px;
}

.vendor-order-panel-heading h2 {
    margin: 6px 0 0;
    color: #172033;
    font-size: 21px;
    line-height: 1.2;
}

.vendor-order-panel-heading > span {
    padding: 6px 10px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #087f6b;
    font-size: 12px;
    font-weight: 800;
}

.vendor-order-filters {
    display: grid;
    grid-template-columns:
        minmax(240px, 2fr)
        minmax(150px, 1fr)
        minmax(170px, 1fr)
        auto;
    gap: 14px;
    align-items: end;
}

.vendor-order-filters label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.vendor-order-filters label > span {
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}

.vendor-order-filters input,
.vendor-order-filters select {
    width: 100%;
    height: 44px;
    padding: 0 13px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    color: #172033;
    font: inherit;
    outline: none;
}

.vendor-order-filters input:focus,
.vendor-order-filters select:focus {
    border-color: #16856d;
    box-shadow: 0 0 0 3px rgba(22, 133, 109, .11);
}

.vendor-filter-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
}


/* ------------------------------------------------------
   Order list
------------------------------------------------------ */

.vendor-order-list-panel {
    margin-top: 10px;
}

.vendor-order-list-panel > .vendor-order-panel-heading {
    margin-bottom: 15px;
}

.vendor-order-list {
    display: grid;
    gap: 17px;
}


/* ------------------------------------------------------
   Order card
------------------------------------------------------ */

.vendor-order-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 17px;
    overflow: hidden;
    box-shadow: 0 7px 24px rgba(15, 23, 42, .05);
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.vendor-order-card:hover {
    transform: translateY(-2px);
    border-color: #cbd5e1;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .075);
}

.vendor-order-card-main {
    display: grid;
    grid-template-columns:
        minmax(260px, 1.45fr)
        minmax(190px, 1fr)
        auto;
    gap: 26px;
    align-items: center;
    padding: 22px 24px;
}

.vendor-order-identity,
.vendor-order-customer {
    min-width: 0;
}

.vendor-order-identity > span,
.vendor-order-customer > span {
    display: block;
    margin-bottom: 5px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.vendor-order-identity h3 {
    margin: 0 0 5px;
    color: #172033;
    font-size: 17px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.vendor-order-identity small,
.vendor-order-customer small {
    display: block;
    color: #64748b;
    font-size: 12px;
}

.vendor-order-customer strong {
    display: block;
    margin-bottom: 5px;
    color: #172033;
    font-size: 15px;
}

.vendor-order-card-badges {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}


/* ------------------------------------------------------
   Status badges
------------------------------------------------------ */

.vendor-orders-page .vendor-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.vendor-orders-page .status-paid,
.vendor-orders-page .status-delivered,
.vendor-orders-page .status-shipped,
.vendor-orders-page .status-confirmed {
    background: #dcfce7;
    color: #166534;
}

.vendor-orders-page .status-processing,
.vendor-orders-page .status-packed,
.vendor-orders-page .status-partial {
    background: #fef3c7;
    color: #92400e;
}

.vendor-orders-page .status-pending,
.vendor-orders-page .status-unpaid {
    background: #f1f5f9;
    color: #475569;
}

.vendor-orders-page .status-cancelled,
.vendor-orders-page .status-returned,
.vendor-orders-page .status-refunded {
    background: #fee2e2;
    color: #991b1b;
}


/* ------------------------------------------------------
   Order metrics
------------------------------------------------------ */

.vendor-order-card-metrics {
    display: grid;
    grid-template-columns: .7fr .7fr 1.25fr 1.25fr;
    border-top: 1px solid #edf2f7;
    border-bottom: 1px solid #edf2f7;
    background: #f8fafc;
}

.vendor-order-card-metrics > div {
    min-width: 0;
    padding: 16px 24px;
    border-right: 1px solid #e2e8f0;
}

.vendor-order-card-metrics > div:last-child {
    border-right: 0;
}

.vendor-order-card-metrics span {
    display: block;
    margin-bottom: 5px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
}

.vendor-order-card-metrics strong {
    display: block;
    color: #172033;
    font-size: 14px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}


/* ------------------------------------------------------
   Card footer
------------------------------------------------------ */

.vendor-order-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 17px 24px;
}

.vendor-order-card-footer p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
}


/* ------------------------------------------------------
   Buttons
------------------------------------------------------ */

.vendor-orders-page .vendor-primary-button,
.vendor-orders-page .vendor-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.vendor-orders-page .vendor-primary-button {
    border: 1px solid #13745f;
    background: #13745f;
    color: #ffffff;
}

.vendor-orders-page .vendor-primary-button:hover {
    background: #0f624f;
    border-color: #0f624f;
}

.vendor-orders-page .vendor-secondary-button {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
}

.vendor-orders-page .vendor-secondary-button:hover {
    border-color: #94a3b8;
    background: #f8fafc;
}


/* ------------------------------------------------------
   Empty state
------------------------------------------------------ */

.vendor-orders-empty,
.vendor-orders-page .vendor-empty {
    padding: 45px 25px;
    text-align: center;
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 15px;
    color: #64748b;
}


/* ------------------------------------------------------
   Responsive
------------------------------------------------------ */

@media (max-width: 1000px) {

    .vendor-order-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vendor-order-filters {
        grid-template-columns: 1fr 1fr;
    }

    .vendor-order-card-main {
        grid-template-columns: 1fr 1fr;
    }

    .vendor-order-card-badges {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .vendor-order-card-metrics {
        grid-template-columns: repeat(2, 1fr);
    }

    .vendor-order-card-metrics > div:nth-child(2) {
        border-right: 0;
    }

    .vendor-order-card-metrics > div:nth-child(-n+2) {
        border-bottom: 1px solid #e2e8f0;
    }
}

@media (max-width: 680px) {

    .vendor-orders-page {
        padding-top: 22px;
    }

    .vendor-orders-page .vendor-container {
        width: min(100% - 24px, 1180px);
    }

    .vendor-orders-heading {
        flex-direction: column;
    }

    .vendor-order-stats,
    .vendor-order-filters,
    .vendor-order-card-main,
    .vendor-order-card-metrics {
        grid-template-columns: 1fr;
    }

    .vendor-order-card-main {
        gap: 18px;
    }

    .vendor-order-card-badges {
        grid-column: auto;
    }

    .vendor-order-card-metrics > div {
        border-right: 0;
        border-bottom: 1px solid #e2e8f0;
    }

    .vendor-order-card-metrics > div:last-child {
        border-bottom: 0;
    }

    .vendor-order-card-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .vendor-order-card-footer .vendor-primary-button {
        width: 100%;
    }

    .vendor-filter-actions {
        flex-wrap: wrap;
    }
}


/*
=========================================================
KITOMANGA VENDOR CENTRE
ORDERS PAGE — PROFESSIONAL LAYOUT
=========================================================
*/

.vendor-orders-page {
    padding: 34px 0 70px;
}

.vendor-orders-page .vendor-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

/* ------------------------------------------------------
   Breadcrumb
------------------------------------------------------ */

.vendor-orders-page .vendor-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 14px;
}

.vendor-orders-page .vendor-breadcrumb a {
    color: #16745b;
    font-weight: 700;
    text-decoration: none;
}

.vendor-orders-page .vendor-breadcrumb a:hover {
    text-decoration: underline;
}

.vendor-orders-page .vendor-breadcrumb span {
    color: #94a3b8;
}

.vendor-orders-page .vendor-breadcrumb strong {
    color: #172033;
}


/* ------------------------------------------------------
   Heading
------------------------------------------------------ */

.vendor-orders-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 28px;
}

.vendor-orders-heading h1 {
    margin: 7px 0 8px;
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: #172033;
}

.vendor-orders-heading p {
    max-width: 680px;
    margin: 0;
    color: #64748b;
    line-height: 1.65;
}

.vendor-orders-page .vendor-eyebrow {
    display: block;
    color: #087f6b;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}


/* ------------------------------------------------------
   KPI / Statistics
------------------------------------------------------ */

.vendor-order-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.vendor-order-stats article {
    position: relative;
    min-width: 0;
    padding: 21px 22px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 15px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .045);
    overflow: hidden;
}

.vendor-order-stats article::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #16856d;
}

.vendor-order-stats article > span {
    display: block;
    margin-bottom: 9px;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.vendor-order-stats article > strong {
    display: block;
    margin-bottom: 6px;
    color: #172033;
    font-size: 30px;
    line-height: 1;
    letter-spacing: -.03em;
}

.vendor-order-stats article > small {
    display: block;
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.45;
}


/* ------------------------------------------------------
   Filter panel
------------------------------------------------------ */

.vendor-order-filter-panel {
    margin-bottom: 28px;
    padding: 22px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 7px 24px rgba(15, 23, 42, .045);
}

.vendor-order-panel-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 18px;
}

.vendor-order-panel-heading h2 {
    margin: 6px 0 0;
    color: #172033;
    font-size: 21px;
    line-height: 1.2;
}

.vendor-order-panel-heading > span {
    padding: 6px 10px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #087f6b;
    font-size: 12px;
    font-weight: 800;
}

.vendor-order-filters {
    display: grid;
    grid-template-columns:
        minmax(240px, 2fr)
        minmax(150px, 1fr)
        minmax(170px, 1fr)
        auto;
    gap: 14px;
    align-items: end;
}

.vendor-order-filters label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.vendor-order-filters label > span {
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}

.vendor-order-filters input,
.vendor-order-filters select {
    width: 100%;
    height: 44px;
    padding: 0 13px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    color: #172033;
    font: inherit;
    outline: none;
}

.vendor-order-filters input:focus,
.vendor-order-filters select:focus {
    border-color: #16856d;
    box-shadow: 0 0 0 3px rgba(22, 133, 109, .11);
}

.vendor-filter-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
}


/* ------------------------------------------------------
   Order list
------------------------------------------------------ */

.vendor-order-list-panel {
    margin-top: 10px;
}

.vendor-order-list-panel > .vendor-order-panel-heading {
    margin-bottom: 15px;
}

.vendor-order-list {
    display: grid;
    gap: 17px;
}


/* ------------------------------------------------------
   Order card
------------------------------------------------------ */

.vendor-order-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 17px;
    overflow: hidden;
    box-shadow: 0 7px 24px rgba(15, 23, 42, .05);
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.vendor-order-card:hover {
    transform: translateY(-2px);
    border-color: #cbd5e1;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .075);
}

.vendor-order-card-main {
    display: grid;
    grid-template-columns:
        minmax(260px, 1.45fr)
        minmax(190px, 1fr)
        auto;
    gap: 26px;
    align-items: center;
    padding: 22px 24px;
}

.vendor-order-identity,
.vendor-order-customer {
    min-width: 0;
}

.vendor-order-identity > span,
.vendor-order-customer > span {
    display: block;
    margin-bottom: 5px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.vendor-order-identity h3 {
    margin: 0 0 5px;
    color: #172033;
    font-size: 17px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.vendor-order-identity small,
.vendor-order-customer small {
    display: block;
    color: #64748b;
    font-size: 12px;
}

.vendor-order-customer strong {
    display: block;
    margin-bottom: 5px;
    color: #172033;
    font-size: 15px;
}

.vendor-order-card-badges {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}


/* ------------------------------------------------------
   Status badges
------------------------------------------------------ */

.vendor-orders-page .vendor-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.vendor-orders-page .status-paid,
.vendor-orders-page .status-delivered,
.vendor-orders-page .status-shipped,
.vendor-orders-page .status-confirmed {
    background: #dcfce7;
    color: #166534;
}

.vendor-orders-page .status-processing,
.vendor-orders-page .status-packed,
.vendor-orders-page .status-partial {
    background: #fef3c7;
    color: #92400e;
}

.vendor-orders-page .status-pending,
.vendor-orders-page .status-unpaid {
    background: #f1f5f9;
    color: #475569;
}

.vendor-orders-page .status-cancelled,
.vendor-orders-page .status-returned,
.vendor-orders-page .status-refunded {
    background: #fee2e2;
    color: #991b1b;
}


/* ------------------------------------------------------
   Order metrics
------------------------------------------------------ */

.vendor-order-card-metrics {
    display: grid;
    grid-template-columns: .7fr .7fr 1.25fr 1.25fr;
    border-top: 1px solid #edf2f7;
    border-bottom: 1px solid #edf2f7;
    background: #f8fafc;
}

.vendor-order-card-metrics > div {
    min-width: 0;
    padding: 16px 24px;
    border-right: 1px solid #e2e8f0;
}

.vendor-order-card-metrics > div:last-child {
    border-right: 0;
}

.vendor-order-card-metrics span {
    display: block;
    margin-bottom: 5px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
}

.vendor-order-card-metrics strong {
    display: block;
    color: #172033;
    font-size: 14px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}


/* ------------------------------------------------------
   Card footer
------------------------------------------------------ */

.vendor-order-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 17px 24px;
}

.vendor-order-card-footer p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
}


/* ------------------------------------------------------
   Buttons
------------------------------------------------------ */

.vendor-orders-page .vendor-primary-button,
.vendor-orders-page .vendor-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.vendor-orders-page .vendor-primary-button {
    border: 1px solid #13745f;
    background: #13745f;
    color: #ffffff;
}

.vendor-orders-page .vendor-primary-button:hover {
    background: #0f624f;
    border-color: #0f624f;
}

.vendor-orders-page .vendor-secondary-button {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
}

.vendor-orders-page .vendor-secondary-button:hover {
    border-color: #94a3b8;
    background: #f8fafc;
}


/* ------------------------------------------------------
   Empty state
------------------------------------------------------ */

.vendor-orders-empty,
.vendor-orders-page .vendor-empty {
    padding: 45px 25px;
    text-align: center;
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 15px;
    color: #64748b;
}


/* ------------------------------------------------------
   Responsive
------------------------------------------------------ */

@media (max-width: 1000px) {

    .vendor-order-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vendor-order-filters {
        grid-template-columns: 1fr 1fr;
    }

    .vendor-order-card-main {
        grid-template-columns: 1fr 1fr;
    }

    .vendor-order-card-badges {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .vendor-order-card-metrics {
        grid-template-columns: repeat(2, 1fr);
    }

    .vendor-order-card-metrics > div:nth-child(2) {
        border-right: 0;
    }

    .vendor-order-card-metrics > div:nth-child(-n+2) {
        border-bottom: 1px solid #e2e8f0;
    }
}

@media (max-width: 680px) {

    .vendor-orders-page {
        padding-top: 22px;
    }

    .vendor-orders-page .vendor-container {
        width: min(100% - 24px, 1180px);
    }

    .vendor-orders-heading {
        flex-direction: column;
    }

    .vendor-order-stats,
    .vendor-order-filters,
    .vendor-order-card-main,
    .vendor-order-card-metrics {
        grid-template-columns: 1fr;
    }

    .vendor-order-card-main {
        gap: 18px;
    }

    .vendor-order-card-badges {
        grid-column: auto;
    }

    .vendor-order-card-metrics > div {
        border-right: 0;
        border-bottom: 1px solid #e2e8f0;
    }

    .vendor-order-card-metrics > div:last-child {
        border-bottom: 0;
    }

    .vendor-order-card-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .vendor-order-card-footer .vendor-primary-button {
        width: 100%;
    }

    .vendor-filter-actions {
        flex-wrap: wrap;
    }
}


/* =========================================================
   KITOMANGA VENDOR CENTRE
   ORDER DETAILS PAGE — PROFESSIONAL UI
   ========================================================= */

.vendor-order-show-page {
    padding-top: 28px;
    padding-bottom: 48px;
}

.vendor-order-show-page .vendor-breadcrumb {
    margin-bottom: 24px;
}

.vendor-order-show-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.vendor-order-show-heading h1 {
    margin: 4px 0 8px;
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: #172033;
}

.vendor-order-show-heading p {
    margin: 0;
    color: #64748b;
}

.vendor-order-heading-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.vendor-order-heading-badges span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 11px;
    border-radius: 999px;
    background: #e8f7ef;
    color: #087a5b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}


/* =========================
   FULFILMENT PROGRESS
   ========================= */

.vendor-fulfilment-progress {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    position: relative;
    margin: 24px 0 30px;
    padding: 22px 24px;
    background: #fff;
    border: 1px solid #dce5ea;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
}

.vendor-fulfilment-progress > * {
    position: relative;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
}


/* =========================
   MAIN WORKSPACE
   ========================= */

.vendor-order-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, .75fr);
    gap: 24px;
    align-items: start;
}

.vendor-order-workspace-main,
.vendor-order-sidebar {
    min-width: 0;
}

.vendor-order-section {
    margin-bottom: 24px;
    padding: 24px;
    background: #fff;
    border: 1px solid #dce5ea;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
}

.vendor-order-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.vendor-order-section-heading h2,
.vendor-order-section > h2 {
    margin: 0;
    color: #172033;
    font-size: 21px;
    line-height: 1.25;
}


/* =========================
   ORDER PRODUCTS
   ========================= */

.vendor-order-items {
    display: grid;
    gap: 16px;
}

.vendor-order-items > * {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 22px;
    align-items: center;
    padding: 18px;
    border: 1px solid #e1e8ed;
    border-radius: 14px;
    background: #fbfcfd;
}

/*
 * Critical image correction:
 * Prevent uploaded product images from taking over the page.
 */
.vendor-order-show-page .vendor-order-item-image {
    width: 150px !important;
    height: 150px !important;
    max-width: 150px !important;
    max-height: 150px !important;
    min-width: 150px;
    display: block;
    object-fit: contain !important;
    object-position: center;
    padding: 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.vendor-order-show-page img.vendor-order-item-image {
    width: 150px !important;
    height: 150px !important;
}

.vendor-order-item-name {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 800;
    color: #172033;
}

.vendor-order-items p {
    margin: 5px 0;
    color: #475569;
}

.vendor-order-items strong {
    color: #172033;
}


/* =========================
   VALUE SUMMARY
   ========================= */

.vendor-order-value-summary {
    margin-top: 18px;
    padding: 16px 18px;
    background: #f4faf7;
    border: 1px solid #d5e9df;
    border-radius: 12px;
}

.vendor-order-value-summary strong {
    color: #087a5b;
}


/* =========================
   FULFILMENT HISTORY
   ========================= */

.vendor-order-timeline {
    position: relative;
    display: grid;
    gap: 0;
    padding-left: 28px;
}

.vendor-order-timeline::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 8px;
    width: 2px;
    background: #dbe7e2;
}

.vendor-order-timeline > * {
    position: relative;
    padding: 0 0 22px 14px;
}

.vendor-order-timeline > *::before {
    content: "";
    position: absolute;
    left: -26px;
    top: 5px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #11856d;
    border: 3px solid #dff5ed;
    box-sizing: content-box;
}

.vendor-order-timeline > *:last-child {
    padding-bottom: 0;
}

.vendor-order-timeline p {
    margin: 4px 0;
    color: #475569;
}

.vendor-order-timeline strong {
    color: #172033;
}


/* =========================
   SIDEBAR PANELS
   ========================= */

.vendor-order-info-panel,
.vendor-order-action-panel,
.vendor-shipment-panel,
.vendor-shipment-created,
.vendor-order-locked {
    margin-bottom: 20px;
    padding: 20px;
    background: #fff;
    border: 1px solid #dce5ea;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .035);
}

.vendor-order-info-panel h2,
.vendor-order-info-panel h3,
.vendor-order-action-panel h2,
.vendor-order-action-panel h3,
.vendor-shipment-panel h2,
.vendor-shipment-panel h3 {
    margin: 0 0 16px;
    color: #172033;
}

.vendor-order-info-panel p,
.vendor-shipment-panel p,
.vendor-shipment-created p,
.vendor-order-locked p {
    margin: 6px 0;
    line-height: 1.55;
    color: #475569;
}

.vendor-order-info-panel strong,
.vendor-shipment-panel strong {
    color: #172033;
}


/* =========================
   SHIPMENT
   ========================= */

.vendor-shipment-panel {
    border-top: 4px solid #11856d;
}

.vendor-shipment-panel a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 9px;
    background: #11856d;
    color: #fff !important;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none !important;
    transition: transform .15s ease, box-shadow .15s ease;
}

.vendor-shipment-panel a:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(17, 133, 109, .18);
}


/* =========================
   ACTION PANEL
   ========================= */

.vendor-order-action-form {
    display: grid;
    gap: 12px;
}

.vendor-order-action-panel .vendor-primary-button,
.vendor-order-action-panel .vendor-secondary-button {
    width: 100%;
    justify-content: center;
}

.vendor-order-locked {
    background: #f8fafc;
}


/* =========================
   ALERTS ON ORDER SHOW
   ========================= */

.vendor-order-show-page .vendor-alert {
    margin-bottom: 20px;
}


/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 980px) {

    .vendor-order-workspace {
        grid-template-columns: 1fr;
    }

    .vendor-order-sidebar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .vendor-order-sidebar > * {
        margin-bottom: 0;
    }

    .vendor-fulfilment-progress {
        overflow-x: auto;
        grid-template-columns: repeat(5, minmax(130px, 1fr));
    }
}

@media (max-width: 680px) {

    .vendor-order-show-page {
        padding-top: 18px;
    }

    .vendor-order-show-heading {
        display: block;
    }

    .vendor-order-section {
        padding: 18px;
    }

    .vendor-order-items > * {
        grid-template-columns: 1fr;
    }

    .vendor-order-show-page .vendor-order-item-image,
    .vendor-order-show-page img.vendor-order-item-image {
        width: 100% !important;
        max-width: 240px !important;
        height: 200px !important;
        max-height: 200px !important;
        min-width: 0;
        margin: 0 auto;
    }

    .vendor-order-sidebar {
        grid-template-columns: 1fr;
    }

    .vendor-fulfilment-progress {
        padding: 18px;
    }
}


/* =========================================================
   KITOMANGA VENDOR ORDER
   FINAL PRODUCT IMAGE CONTAINMENT FIX
   ========================================================= */

/* Product row */
.vendor-order-show-page .vendor-order-items > * {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 140px minmax(0, 1fr) !important;
    gap: 20px !important;
    align-items: center !important;
    overflow: hidden !important;
}

/* Image wrapper */
.vendor-order-show-page .vendor-order-item-image {
    position: relative !important;
    width: 140px !important;
    height: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    min-height: 140px !important;
    max-height: 140px !important;

    overflow: hidden !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 8px !important;
    margin: 0 !important;

    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;

    box-sizing: border-box !important;
}

/* ACTUAL IMAGE INSIDE WRAPPER */
.vendor-order-show-page .vendor-order-item-image img {
    position: static !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
}

/* Protect against generic vendor image rules */
.vendor-order-show-page
.vendor-order-items
.vendor-order-item-image
> img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

/* Product information */
.vendor-order-show-page .vendor-order-item-name {
    position: relative !important;
    z-index: 2 !important;
}

/* Never allow any product image to overflow the product card */
.vendor-order-show-page .vendor-order-items {
    overflow: hidden !important;
}

.vendor-order-show-page .vendor-order-section {
    overflow: hidden !important;
}


/* Mobile */
@media (max-width: 680px) {

    .vendor-order-show-page .vendor-order-items > * {
        grid-template-columns: 100px minmax(0, 1fr) !important;
        gap: 14px !important;
    }

    .vendor-order-show-page .vendor-order-item-image {
        width: 100px !important;
        height: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
        min-height: 100px !important;
        max-height: 100px !important;
    }

    .vendor-order-show-page .vendor-order-item-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }
}



/* =========================================================
   VENDOR WORLDWIDE LOCATION AUTOCOMPLETE
   ========================================================= */

.vendor-location-search-field {
    position: relative;
}

.vendor-location-search-field small {
    display: block;
    margin-top: 6px;
    color: #748077;
    font-size: 11px;
    line-height: 1.45;
}

.vendor-location-results {
    position: absolute;
    z-index: 1000;

    left: 0;
    right: 0;
    top: calc(100% - 17px);

    max-height: 320px;
    overflow-y: auto;

    padding: 6px;

    background: #ffffff;

    border: 1px solid #d7e0da;
    border-radius: 11px;

    box-shadow:
        0 15px 35px rgba(15, 35, 24, .14);
}

.vendor-location-results[hidden] {
    display: none !important;
}

.vendor-location-option {
    display: block;
    width: 100%;

    padding: 11px 12px;

    border: 0;
    border-radius: 8px;

    background: transparent;
    color: #26372d;

    font-family: inherit;
    font-size: 12px;
    line-height: 1.45;

    text-align: left;
    cursor: pointer;
}

.vendor-location-option:hover,
.vendor-location-option:focus {
    background: #eef7f2;
    color: #08785b;
    outline: none;
}


.vendor-location-global-hidden {
    display: none !important;
}