/* ============================================================
   MarvikShop 5.0v2 — userstyle.css
   ============================================================
   Één stylesheet voor alle front-end account pagina's:

     - my_points.php          (.mp-*)
     - my_points_help.php     (.mph-*)
     - sn_notification.php    (.sn-*)
     - supplier_area.php      (.sp-*)
     - supplier_products.php  (.sp-*)
     - supplier_orders.php    (.sp-*)
     - supplier_stats.php     (.sp-*)
     - account_add.php        (.ms5-pm-*)
     - account_manage.php     (.ms5-pm-*)
     - gv_*.php               (.gv-*)
     - checkout               (.mp-checkout-*)

   Kleurenschema: LEGO-stijl
     - Rood:       #d40000  (LEGO Red)
     - Geel:       #ffd400  (LEGO Yellow)
     - Donkerrood: #a80000  (LEGO Dark Red)
     - Zand:       #f6e5d3  (Zandkleurige achtergrond)

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


/* ============================================================
   1. SHARED — basis voor alle account-pagina's
   ============================================================ */

.mp-wrap, .mph-wrap, .sn-wrap, .ms-wrap, .sp-wrap, .ms5-pm, .gv-wrap {
    box-sizing: border-box;
    font-family: Verdana, Arial, sans-serif;
    font-size: 13px;
    color: #1e293b;
}

.mp-wrap *, .mph-wrap *, .sn-wrap *, .ms-wrap *,
.sp-wrap *, .ms5-pm *, .gv-wrap * {
    box-sizing: border-box;
}

/* ---------- Wrapper ---------- */
.mp-wrap,
.sn-wrap,
.ms-wrap,
.sp-wrap,
.ms5-pm,
.gv-wrap {
    padding: 20px 24px;
    max-width: 100%;
    background: #f6e5d3;
    border-radius: 5px;
    box-shadow: 5px 5px 5px 0px #2a2a2a;
}

.mph-wrap {
    padding: 24px;
    max-width: 900px;
    margin: 0 auto;
    background: #f6e5d3;
    border-radius: 5px;
    box-shadow: 5px 5px 5px 0px #2a2a2a;
}

/* ---------- Header / Hero ---------- */
.mp-header,
.sn-header,
.ms-header,
.sp-header {
    margin-bottom: 15px;
}

.mp-header-left,
.sn-header-left,
.ms-header-left,
.sp-header-left {
    flex: 1 1 300px;
    min-width: 0;
}

.mp-header h1,
.sn-header h1,
.ms-header h1,
.sp-header h1 {
    font-size: 22px;
    font-weight: bold;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mp-header p,
.sn-header p,
.ms-header p,
.sp-header p {
    color: #64748b;
    font-size: 13px;
    margin: 4px 0 0 0;
}

.mp-header-icon,
.sn-header-icon,
.ms-header-icon,
.sp-header-icon {
    font-size: 26px;
}

/* ---------- Help button ---------- */
.mp-help-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.mp-help-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #d40000;
    border: 1px solid #b91c1c;
    border-radius: 8px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.15s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
    margin-left: auto;
}

.mp-help-btn:hover {
    background: #b30000;
    border-color: #991b1b;
    color: #ffd400;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(212, 0, 0, 0.3);
    text-decoration: none;
}

.mp-help-btn .icon {
    font-size: 16px;
}


/* ============================================================
   2. KPI CARDS — gedeeld door my_points / supplier
   ============================================================ */

.mp-kpis,
.sp-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.mp-kpi,
.sp-kpi {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    transition: all 0.2s;
}

.mp-kpi:hover,
.sp-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.mp-kpi .number,
.sp-kpi .number {
    font-size: 24px;
    font-weight: 700;
    font-family: Verdana, Arial, sans-serif;
    color: #1e293b;
}

.mp-kpi .label,
.sp-kpi .label {
    font-size: 10px;
    color: #64748b;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
}

/* my_points KPI kleuren */
.mp-kpi.kpi-balance { border-left: 4px solid #d40000; }
.mp-kpi.kpi-balance .number { color: #d40000; }
.mp-kpi.kpi-value { border-left: 4px solid #16a34a; }
.mp-kpi.kpi-value .number { color: #16a34a; }
.mp-kpi.kpi-expires { border-left: 4px solid #f59e0b; }
.mp-kpi.kpi-expires .number { color: #f59e0b; font-size: 18px; }
.mp-kpi.kpi-pending { border-left: 4px solid #8b5cf6; }
.mp-kpi.kpi-pending .number { color: #8b5cf6; }

/* supplier KPI kleuren */
.sp-kpi.kpi-revenue  { border-left: 4px solid #d40000; }
.sp-kpi.kpi-revenue .number { color: #d40000; }
.sp-kpi.kpi-orders   { border-left: 4px solid #16a34a; }
.sp-kpi.kpi-orders .number { color: #16a34a; }
.sp-kpi.kpi-products { border-left: 4px solid #f59e0b; }
.sp-kpi.kpi-products .number { color: #f59e0b; }
.sp-kpi.kpi-year     { border-left: 4px solid #8b5cf6; }
.sp-kpi.kpi-year .number { color: #8b5cf6; }


/* ============================================================
   3. CARDS — content-blokken
   ============================================================ */

.mp-card,
.sp-card,
.gv-content {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.mp-card h2,
.sp-card h2,
.gv-content h2 {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 12px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sp-text,
.gv-content p {
    font-size: 13px;
    line-height: 1.7;
    color: #334155;
    margin: 0 0 12px 0;
}

.sp-hint,
.mp-info {
    display: block;
    background: #fff5f5;
    border-left: 4px solid #d40000;
    border-radius: 8px;
    padding: 12px 16px;
    color: #7f1d1d;
    font-size: 13px;
    line-height: 1.6;
    margin-top: 12px;
}


/* ============================================================
   4. BUTTONS — LEGO-stijl
   ============================================================ */

.mp-btn,
.sn-btn,
.ms-btn,
.sp-btn,
.mph-btn,
.ms5-pm-btn,
.gv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border: 1px solid #b91c1c;
    border-radius: 6px;
    background: #d40000;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
    font-family: inherit;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

.mp-btn:hover,
.sn-btn:hover,
.ms-btn:hover,
.sp-btn:hover,
.mph-btn:hover,
.ms5-pm-btn:hover,
.gv-btn:hover {
    background: #b30000;
    border-color: #991b1b;
    color: #ffd400;
    transform: translateY(-1px);
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(212, 0, 0, 0.3);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

/* Primary */
.mp-btn-primary, .sn-btn-primary, .ms-btn-primary,
.sp-btn-primary, .mph-btn-primary, .ms5-pm-btn-primary, .gv-btn-primary {
    background: #d40000;
    border-color: #b91c1c;
    color: #ffffff;
}
.mp-btn-primary:hover, .sn-btn-primary:hover, .ms-btn-primary:hover,
.sp-btn-primary:hover, .mph-btn-primary:hover, .ms5-pm-btn-primary:hover, .gv-btn-primary:hover {
    background: #b30000;
    border-color: #991b1b;
    color: #ffd400;
}

/* Secondary */
.mp-btn-secondary, .sn-btn-secondary, .ms-btn-secondary,
.sp-btn-secondary, .mph-btn-secondary, .ms5-pm-btn-secondary, .gv-btn-secondary {
    background: #e01a1a;
    border-color: #b91c1c;
    color: #ffffff;
}
.mp-btn-secondary:hover, .sn-btn-secondary:hover, .ms-btn-secondary:hover,
.sp-btn-secondary:hover, .mph-btn-secondary:hover, .ms5-pm-btn-secondary:hover, .gv-btn-secondary:hover {
    background: #b30000;
    border-color: #991b1b;
    color: #ffd400;
}

/* Danger */
.sp-btn-danger, .ms5-pm-btn-danger {
    background: #a80000;
    border-color: #7f1d1d;
    color: #ffffff;
}
.sp-btn-danger:hover, .ms5-pm-btn-danger:hover {
    background: #7f1d1d;
    border-color: #5b1414;
    color: #ffd400;
}

/* Ghost (light) */
.sp-btn-ghost, .ms5-pm-btn-ghost {
    background: #fff;
    border-color: #d1d5db;
    color: #475569;
    text-shadow: none;
}
.sp-btn-ghost:hover, .ms5-pm-btn-ghost:hover {
    background: #f3f4f6;
    color: #1e293b;
    border-color: #cbd5e1;
}

/* Small */
.mp-btn-sm, .sn-btn-sm, .sp-btn-sm, .ms5-pm-btn-sm {
    padding: 7px 12px;
    font-size: 12px;
}

/* Delete button (sn) */
.sn-btn-delete {
    background: #a80000;
    border-color: #7f1d1d;
    color: #ffffff;
    padding: 8px 14px;
    font-size: 12px;
}
.sn-btn-delete:hover {
    background: #7f1d1d;
    border-color: #5b1414;
    color: #ffd400;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(168, 0, 0, 0.35);
}

.sn-btn-icon {
    font-size: 14px;
    line-height: 1;
}


/* ============================================================
   5. NAVIGATION — supplier nav tabs
   ============================================================ */

.sp-nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.sp-nav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: #d40000;
    border: 1px solid #b91c1c;
    border-radius: 8px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.15s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

.sp-nav a:hover {
    background: #b30000;
    border-color: #991b1b;
    color: #ffd400;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(212, 0, 0, 0.3);
    text-decoration: none;
}

.sp-nav a.active {
    background: #a80000;
    border-color: #7f1d1d;
    color: #ffd400;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}


/* ============================================================
   6. TABLES — my_points / supplier / sn
   ============================================================ */

.mp-table-wrapper,
.sn-table-wrapper,
.ms-table-wrapper,
.sp-table-wrapper,
.ms5-pm-table-wrapper {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow-x: auto;
    margin-bottom: 16px;
}

.mp-table,
.sn-table,
.ms-table,
.sp-table,
.ms5-pm-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
}

.mp-table thead tr,
.sn-table thead tr,
.ms-table thead tr,
.sp-table thead tr,
.ms5-pm-table thead tr {
    background: #fff5f5;
}

.mp-table thead th,
.sn-table thead th,
.ms-table thead th,
.sp-table thead th,
.ms5-pm-table thead th {
    padding: 11px 12px;
    text-align: left;
    border-bottom: 2px solid #d40000;
    font-weight: 700;
    color: #a80000;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.mp-table tbody td,
.sn-table tbody td,
.ms-table tbody td,
.sp-table tbody td,
.ms5-pm-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
    color: #1e293b;
    vertical-align: middle;
}

.mp-table tbody tr:nth-child(even) td,
.sn-table tbody tr:nth-child(even) td,
.ms-table tbody tr:nth-child(even) td,
.sp-table tbody tr:nth-child(even) td,
.ms5-pm-table tbody tr:nth-child(even) td {
    background: #fafbfc;
}

.mp-table tbody tr:hover td,
.sn-table tbody tr:hover td,
.ms-table tbody tr:hover td,
.sp-table tbody tr:hover td,
.ms5-pm-table tbody tr:hover td {
    background: #fff5f5;
}

/* selected row */
.ms5-pm-table tbody tr.selected td,
.mp-table tbody tr.selected td {
    background: #ffe0e0;
    border-bottom-color: #d40000;
}

/* specific cells */
.mp-table .num,
.sp-table .num,
.ms5-pm-table .num {
    text-align: right;
    font-family: 'Courier New', monospace;
    font-weight: 600;
    white-space: nowrap;
}

.mp-table .date-cell {
    font-size: 11px;
    color: #64748b;
    text-align: center;
    white-space: nowrap;
}

.mp-table .order-cell {
    font-weight: 600;
    color: #a80000;
    font-family: 'Courier New', monospace;
}

.mp-table .points-cell {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

.mp-table .points-cell.positive { color: #22c55e; }
.mp-table .points-cell.negative { color: #ef4444; }

.mp-table .status-cell { text-align: center; }
.mp-table .type-cell { text-align: center; }

/* preview link */
.ms5-pm-table .preview-link {
    color: #a80000;
    text-decoration: none;
    font-weight: 600;
}
.ms5-pm-table .preview-link:hover {
    color: #d40000;
    text-decoration: underline;
}

/* sortable */
.mp-table thead th.sortable {
    cursor: pointer;
    user-select: none;
}
.mp-table thead th.sortable:hover { background: #ffe0e0; }
.mp-table thead th .sort-icon {
    display: inline-block;
    margin-left: 4px;
    font-size: 9px;
    opacity: 0.4;
}
.mp-table thead th .sort-icon.active {
    opacity: 1;
    color: #d40000;
}

/* ---------- Stock notification specific ---------- */
.sn-cell-image { text-align: center; }
.sn-cell-image img {
    max-width: 90px;
    height: auto;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
    padding: 2px;
}
.sn-cell-model { color: #1e293b; }
.sn-product-link {
    color: #a80000;
    text-decoration: none;
    font-size: 14px;
}
.sn-product-link:hover {
    text-decoration: underline;
    color: #d40000;
}
.sn-cell-remove { text-align: center; white-space: nowrap; }


/* ============================================================
   7. BADGES — status
   ============================================================ */

.mp-badge,
.ms5-pm-badge,
.sp-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.mp-badge.pending { background: #fef3c7; color: #92400e; }
.mp-badge.confirmed { background: #dcfce7; color: #166534; }
.mp-badge.cancelled { background: #fee2e2; color: #991b1b; }
.mp-badge.redeemed { background: #dbeafe; color: #1e40af; }
.mp-badge.processing { background: #f3e8ff; color: #6b21a8; }

.ms5-pm-badge.active { background: #dcfce7; color: #166534; }
.ms5-pm-badge.inactive { background: #fee2e2; color: #991b1b; }

.sp-badge.active { background: #dcfce7; color: #166534; }
.sp-badge.inactive { background: #fee2e2; color: #991b1b; }

/* type badges */
.mp-type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.mp-type-badge.sp { background: #e0f2fe; color: #075985; }
.mp-type-badge.rf { background: #f3e8ff; color: #6b21a8; }
.mp-type-badge.rv { background: #fce7f3; color: #9d174d; }
.mp-type-badge.rd { background: #dbeafe; color: #1e40af; }


/* ============================================================
   8. FILTERS
   ============================================================ */

.mp-filters {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.mp-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.mp-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mp-field label {
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.mp-field input[type="text"],
.mp-field select {
    padding: 9px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    color: #1e293b;
    font-family: inherit;
    width: 100%;
}

.mp-field input:focus,
.mp-field select:focus {
    outline: none;
    border-color: #d40000;
    box-shadow: 0 0 0 3px rgba(212, 0, 0, 0.1);
}

.mp-filter-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}


/* ============================================================
   9. PAGINATION
   ============================================================ */

.mp-pagination-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin: 16px 0;
    flex-wrap: wrap;
}

.mp-page-info {
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
}

.ms5-pagination {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.ms5-pagination .ms5-btn {
    min-width: 36px;
    height: 34px;
    padding: 4px 10px;
    font-size: 12px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.15s;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

.ms5-pagination .ms5-btn-primary {
    background: #d40000;
    border: 1px solid #b91c1c;
    color: #fff;
}

.ms5-pagination .ms5-btn-secondary {
    background: #e01a1a;
    border: 1px solid #b91c1c;
    color: #fff;
}

.ms5-pagination .ms5-btn-secondary:hover {
    background: #b30000;
    border-color: #991b1b;
    color: #ffd400;
    text-decoration: none;
}

.ms5-pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    color: #94a3b8;
    font-size: 12px;
    padding: 0 4px;
}


/* ============================================================
   10. EMPTY STATE
   ============================================================ */

.mp-empty,
.sn-empty,
.ms-empty,
.sp-empty,
.ms5-pm-empty {
    padding: 60px 20px;
    text-align: center;
    color: #64748b;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.mp-empty-icon,
.sn-empty-icon,
.ms-empty-icon,
.sp-empty-icon,
.ms5-pm-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.mp-empty-title,
.sn-empty-title,
.ms-empty-title,
.sp-empty-title,
.ms5-pm-empty-title {
    font-size: 15px;
    font-weight: 700;
    color: #a80000;
    margin-bottom: 6px;
}

.mp-empty-hint,
.sn-empty-hint,
.ms-empty-hint,
.sp-empty-hint {
    color: #94a3b8;
    font-size: 12px;
}


/* ============================================================
   11. ACTIONS FOOTER
   ============================================================ */

.mp-actions,
.sn-actions,
.ms-actions,
.sp-actions,
.ms5-pm-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid #ffe0e0;
    align-items: center;
}

.sp-actions .sp-btn,
.ms5-pm-actions .ms5-pm-btn {
    /* niets extra nodig */
}


/* ============================================================
   12. TABS — voor my_points_help (FAQ accordion) en
       account_manage / account_add (WebFXTabPane-vervanger)
   ============================================================ */

/* FAQ accordion (mph) */
.mph-faq { margin: 0; }

.mph-faq-item {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: hidden;
    transition: all 0.15s;
}

.mph-faq-item:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.mph-faq-item.open {
    border-color: #d40000;
    box-shadow: 0 4px 12px rgba(212, 0, 0, 0.12);
}

.mph-faq-q {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    cursor: pointer;
    user-select: none;
    background: #f6e5d3;
    transition: background 0.15s ease;
}

.mph-faq-q:hover { background: #fff5f5; }
.mph-faq-item.open .mph-faq-q {
    background: #fff5f5;
    border-bottom: 1px solid #ffe0e0;
}

.mph-faq-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    background: #e2e8f0;
    color: #475569;
    border-radius: 17px;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.mph-faq-item.open .mph-faq-num { background: #d40000; color: #fff; }

.mph-faq-text {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.45;
}

.mph-faq-item.open .mph-faq-text { color: #a80000; }

.mph-faq-toggle {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 14px;
    transition: transform 0.25s ease, color 0.2s ease;
}

.mph-faq-item.open .mph-faq-toggle { transform: rotate(180deg); color: #d40000; }

.mph-faq-a {
    display: none;
    padding: 20px 22px 24px 22px;
    font-size: 13px;
    line-height: 1.75;
    color: #334155;
    background: #fff;
}

.mph-faq-item.open .mph-faq-a { display: block; }
.mph-faq-a a { color: #d40000; text-decoration: underline; font-weight: 500; }
.mph-faq-a a:hover { color: #a80000; }
.mph-faq-a ul { margin: 8px 0 8px 20px; padding: 0; }
.mph-faq-a li { margin-bottom: 6px; }
.mph-faq-a b, .mph-faq-a strong { color: #1e293b; }
.mph-faq-a em { color: #64748b; }

/* mph content sections */
.mph-content {
    background: #fff;
    border-radius: 12px;
    padding: 28px 32px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.mph-content h2 {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mph-intro {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 22px;
    background: linear-gradient(135deg, #fff5f5 0%, #ffe0e0 100%);
    border-left: 4px solid #d40000;
    border-radius: 10px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(168, 0, 0, 0.08);
}

.mph-intro-icon { font-size: 26px; flex-shrink: 0; line-height: 1; }
.mph-intro-text {
    flex: 1;
    font-size: 14px;
    line-height: 1.6;
    color: #7f1d1d;
    font-weight: 500;
}

.mph-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    background: #fff5f5;
    border-left: 4px solid #d40000;
    border-radius: 8px;
    color: #7f1d1d;
    font-size: 13px;
    margin-bottom: 16px;
}

.mph-info .icon { font-size: 20px; flex-shrink: 0; }
.mph-info.warning { background: #fef3c7; border-left-color: #f59e0b; color: #92400e; }
.mph-info.success { background: #dcfce7; border-left-color: #22c55e; color: #166534; }

.mph-steps { list-style: none; padding: 0; margin: 0 0 14px 0; }
.mph-steps li {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #f1f5f9;
}
.mph-steps li:last-child { border-bottom: none; }
.mph-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #d40000;
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}
.mph-step-content { flex: 1; }
.mph-step-content b {
    display: block;
    font-size: 14px;
    color: #1e293b;
    margin-bottom: 4px;
}
.mph-step-content p {
    margin: 0;
    font-size: 13px;
    color: #64748b;
    line-height: 1.6;
}
.mph-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 24px;
}


/* ============================================================
   13. MODERN TABS — account_manage / account_add
   ============================================================ */

.ms5-pm-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid #d40000;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.ms5-pm-tab {
    padding: 10px 18px;
    border: 1px solid transparent;
    border-bottom: none;
    background: #fff5f5;
    color: #7f1d1d;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    margin-bottom: -2px;
    border-radius: 6px 6px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.ms5-pm-tab:hover {
    background: #fff0f0;
    color: #a80000;
    text-decoration: none;
}

.ms5-pm-tab.active {
    background: #d40000;
    color: #ffffff;
    border-color: #b91c1c;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

.ms5-pm-panel {
    display: none;
    animation: ms5PmFadeIn 0.2s ease;
}
.ms5-pm-panel.active { display: block; }

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

/* ms5-pm card + form */
.ms5-pm-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 16px;
}

.ms5-pm-card h2 {
    font-size: 14px;
    font-weight: 700;
    color: #a80000;
    margin: 0 0 16px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #ffe0e0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ms5-pm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.ms5-pm-grid.full { grid-template-columns: 1fr; }

.ms5-pm-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.ms5-pm-field.full { grid-column: 1 / -1; }
.ms5-pm-field label {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.ms5-pm-field .hint {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
    font-style: italic;
}
.ms5-pm-field input[type="text"],
.ms5-pm-field input[type="number"],
.ms5-pm-field input[type="date"],
.ms5-pm-field input[type="file"],
.ms5-pm-field select,
.ms5-pm-field textarea {
    padding: 9px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    color: #1e293b;
    font-family: inherit;
    width: 100%;
    transition: all 0.15s;
}
.ms5-pm-field input:focus,
.ms5-pm-field select:focus,
.ms5-pm-field textarea:focus {
    outline: none;
    border-color: #d40000;
    box-shadow: 0 0 0 3px rgba(212, 0, 0, 0.1);
}
.ms5-pm-field textarea {
    resize: vertical;
    min-height: 100px;
}
.ms5-pm-field input[type="file"] {
    padding: 8px;
    cursor: pointer;
}

.ms5-pm-radio-row {
    display: flex;
    gap: 16px;
    padding: 8px 0;
    align-items: center;
    flex-wrap: wrap;
}
.ms5-pm-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #1e293b;
    cursor: pointer;
    user-select: none;
}
.ms5-pm-radio input[type="radio"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #d40000;
}

.ms5-pm-image-preview {
    display: inline-block;
    padding: 4px;
    background: #fff5f5;
    border: 1px solid #ffe0e0;
    border-radius: 6px;
    margin-top: 8px;
}
.ms5-pm-image-preview img {
    display: block;
    max-width: 120px;
    max-height: 120px;
    object-fit: contain;
    border-radius: 4px;
}


/* ============================================================
   14. GIFT VOUCHER
   ============================================================ */

.gv-header {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.gv-header-left {
    flex: 1 1 auto;
    min-width: 0;
}

.gv-header h1 {
    font-size: 22px;
    font-weight: bold;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.gv-header-icon { font-size: 26px; }

.gv-header p {
    color: #64748b;
    font-size: 13px;
    margin: 4px 0 0 0;
    line-height: 1.5;
}

.gv-info {
    background: #fff5f5;
    border-left: 4px solid #d40000;
    border-radius: 8px;
    padding: 16px 20px;
    color: #7f1d1d;
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.gv-message {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.gv-message-icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}

.gv-message-text { flex: 1; }

.gv-message-success {
    background: #dcfce7;
    border-left: 4px solid #16a34a;
    color: #166534;
}

.gv-message-error {
    background: #fee2e2;
    border-left: 4px solid #dc2626;
    color: #991b1b;
}

.gv-message-info {
    background: #eff6ff;
    border-left: 4px solid #3b82f6;
    color: #1e40af;
}

.gv-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.gv-field label {
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.gv-input,
.gv-textarea {
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    background: #fff;
    color: #1e293b;
    width: 100%;
    box-sizing: border-box;
}

.gv-input:focus,
.gv-textarea:focus {
    outline: none;
    border-color: #d40000;
    box-shadow: 0 0 0 3px rgba(212, 0, 0, 0.1);
}

.gv-textarea {
    resize: vertical;
    min-height: 100px;
}

.gv-error {
    color: #dc2626;
    font-size: 12px;
    font-weight: 600;
}

.gv-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.gv-faq { margin: 0; }

.gv-faq-item {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: hidden;
    transition: all 0.15s;
}

.gv-faq-item:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.gv-faq-item.open {
    border-color: #d40000;
    box-shadow: 0 4px 12px rgba(212, 0, 0, 0.12);
}

.gv-faq-q {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    cursor: pointer;
    user-select: none;
    background: #f6e5d3;
    transition: background 0.15s ease;
}

.gv-faq-q:hover { background: #fff5f5; }
.gv-faq-item.open .gv-faq-q {
    background: #fff5f5;
    border-bottom: 1px solid #ffe0e0;
}

.gv-faq-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    background: #e2e8f0;
    color: #475569;
    border-radius: 17px;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.gv-faq-item.open .gv-faq-num { background: #d40000; color: #fff; }

.gv-faq-text {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.45;
}

.gv-faq-item.open .gv-faq-text { color: #a80000; }

.gv-faq-toggle {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 14px;
    transition: transform 0.25s ease, color 0.2s ease;
}

.gv-faq-item.open .gv-faq-toggle { transform: rotate(180deg); color: #d40000; }

.gv-faq-a {
    display: none;
    padding: 20px 22px 24px 22px;
    font-size: 13px;
    line-height: 1.75;
    color: #334155;
    background: #fff;
}

.gv-faq-item.open .gv-faq-a { display: block; }
.gv-faq-a a { color: #d40000; text-decoration: underline; font-weight: 500; }
.gv-faq-a a:hover { color: #a80000; }
.gv-faq-a ul { margin: 8px 0 8px 20px; padding: 0; }
.gv-faq-a li { margin-bottom: 6px; }
.gv-faq-a b, .gv-faq-a strong { color: #1e293b; }
.gv-faq-a em { color: #64748b; }

.gv-intro {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 22px;
    background: linear-gradient(135deg, #fff5f5 0%, #ffe0e0 100%);
    border-left: 4px solid #d40000;
    border-radius: 10px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(168, 0, 0, 0.08);
}

.gv-intro-icon { font-size: 26px; flex-shrink: 0; line-height: 1; }
.gv-intro-text {
    flex: 1;
    font-size: 14px;
    line-height: 1.6;
    color: #7f1d1d;
    font-weight: 500;
}


/* ============================================================
   15. CHECKOUT
   ============================================================ */

.mp-checkout-wrap {
    padding: 20px 24px;
    max-width: 100%;
    background: #f6e5d3;
    border-radius: 5px;
    box-shadow: 5px 5px 5px 0px #2a2a2a;
    font-family: Verdana, Arial, sans-serif;
    font-size: 13px;
    color: #1e293b;
    box-sizing: border-box;
}
.mp-checkout-wrap * { box-sizing: border-box; }

.mp-checkout-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid #e2e8f0;
    flex-wrap: wrap;
}

.mp-checkout-header h1 {
    font-size: 22px;
    font-weight: bold;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mp-checkout-header-icon { font-size: 26px; }

.mp-progress {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px;
}
.mp-step {
    text-align: center;
    padding: 10px 6px;
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.mp-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
}
.mp-step.active { background: #d40000; color: #ffffff; }
.mp-step.active .mp-step-num { background: rgba(255,255,255,0.25); color: #ffffff; }
.mp-step.done { color: #16a34a; }
.mp-step.done .mp-step-num { background: #dcfce7; color: #16a34a; }
.mp-step.done a {
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.mp-card-head {
    background: #fff5f5;
    padding: 14px 20px;
    border-bottom: 2px solid #d40000;
    font-size: 12px;
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.mp-card-body { padding: 20px; }

.mp-products {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.mp-products td {
    padding: 10px 6px;
    vertical-align: top;
    border-bottom: 1px solid #f1f5f9;
}
.mp-products tr:last-child td { border-bottom: none; }
.mp-products .qty {
    width: 50px;
    color: #64748b;
    font-family: 'Courier New', monospace;
    white-space: nowrap;
    font-weight: 600;
}
.mp-products .price {
    text-align: right;
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: #16a34a;
    white-space: nowrap;
}
.mp-products .name { color: #1e293b; font-weight: 500; }
.mp-products .attrs {
    display: block;
    font-size: 11px;
    color: #64748b;
    font-style: italic;
    margin-top: 2px;
}

.mp-totals {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}
.mp-totals table {
    width: 100%;
    max-width: 340px;
    margin-left: auto;
    border-collapse: collapse;
}
.mp-totals td {
    padding: 6px 0;
    font-size: 13px;
    line-height: 1.5;
    vertical-align: middle;
}
.mp-total-label { color: #64748b; text-align: left; padding-right: 20px; }
.mp-total-value {
    text-align: right;
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
}
.mp-totals .mp-row-discount .mp-total-label,
.mp-totals .mp-row-discount .mp-total-value { color: #dc2626; }
.mp-totals .mp-row-total { border-top: 2px solid #cbd5e1; }
.mp-totals .mp-row-total td { padding-top: 14px; font-size: 16px; font-weight: 700; }
.mp-totals .mp-row-total .mp-total-label { color: #1e293b; font-weight: 700; }
.mp-totals .mp-row-total .mp-total-value { color: #16a34a; font-weight: 700; font-size: 16px; }

.mp-address {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: start;
}
.mp-address-info {
    font-size: 13px;
    line-height: 1.7;
    color: #1e293b;
}
.mp-address-info strong {
    color: #1e293b;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.mp-payment-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mp-payment-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all .15s;
    background: #fff;
}
.mp-payment-row:hover {
    border-color: #d40000;
    background: #fff5f5;
    transform: translateY(-1px);
}
.mp-payment-row.moduleRowSelected {
    border-color: #d40000;
    background: #fff5f5;
    box-shadow: 0 0 0 3px rgba(212, 0, 0, 0.15);
}
.mp-payment-row input[type="radio"],
.mp-payment-row input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: #d40000;
    cursor: pointer;
}
.mp-payment-row label {
    flex: 1;
    cursor: pointer;
    font-weight: 500;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 13px;
}
.mp-payment-row label img {
    vertical-align: middle;
    border-radius: 4px;
    max-height: 28px;
}

.mp-textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
    min-height: 90px;
    color: #1e293b;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.mp-textarea:focus {
    outline: none;
    border-color: #d40000;
    box-shadow: 0 0 0 3px rgba(212, 0, 0, 0.1);
}

.mp-continue {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    margin-top: 16px;
    flex-wrap: wrap;
}
.mp-continue-text {
    font-size: 13px;
    color: #64748b;
    line-height: 1.6;
}
.mp-continue-text strong { color: #1e293b; font-size: 14px; }


/* ============================================================
   16. TOAST — notificaties
   ============================================================ */

.ms5-toast-container,
.mp-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10050;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.ms5-toast,
.mp-toast {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #22c55e;
    border-radius: 6px;
    padding: 12px 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    font-size: 13px;
    color: #1e293b;
    min-width: 280px;
    max-width: 400px;
    animation: ms5ToastIn 0.3s ease;
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.ms5-toast.error, .mp-toast.error { border-left-color: #ef4444; }
.ms5-toast.warning, .mp-toast.warning { border-left-color: #f59e0b; }
.ms5-toast.info, .mp-toast.info { border-left-color: #3b82f6; }

.ms5-toast .icon, .mp-toast .icon { font-size: 16px; line-height: 1; flex-shrink: 0; }
.ms5-toast .message, .mp-toast .message { flex: 1; line-height: 1.4; }

@keyframes ms5ToastIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}


/* ============================================================
   17. SPINNER
   ============================================================ */

.ms5-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: ms5Spin 0.6s linear infinite;
    vertical-align: middle;
}

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


/* ============================================================
   18. RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    .mp-wrap, .sn-wrap, .ms-wrap, .sp-wrap, .ms5-pm, .gv-wrap {
        padding: 12px;
    }

    .mp-header, .sn-header, .ms-header, .sp-header {
        flex-direction: column;
        align-items: stretch;
    }

    .mp-filter-grid { grid-template-columns: 1fr; }
    .mp-kpis, .sp-kpis { grid-template-columns: repeat(2, 1fr); }
    .mp-pagination-wrapper { flex-direction: column; align-items: stretch; }

    .mph-wrap { padding: 12px; }
    .mph-hero { padding: 20px; }
    .mph-hero h1 { font-size: 20px; }
    .mph-content { padding: 18px; }
    .mph-content h2 { font-size: 16px; }
    .mph-intro { padding: 14px 16px; gap: 10px; }
    .mph-intro-icon { font-size: 22px; }
    .mph-intro-text { font-size: 13px; }
    .mph-faq-q { padding: 14px 16px; font-size: 13px; gap: 10px; }
    .mph-faq-a { padding: 16px; }

    .sp-nav { flex-direction: column; }
    .sp-nav a { justify-content: center; }

    .ms5-pm-tabs { flex-direction: column; border-bottom: none; }
    .ms5-pm-tab {
        border-radius: 6px;
        margin-bottom: 0;
        border: 1px solid #ffe0e0;
        justify-content: center;
    }
    .ms5-pm-tab.active { border-color: #b91c1c; }
    .ms5-pm-grid { grid-template-columns: 1fr; }

    .mp-checkout-wrap { padding: 12px; }
    .mp-checkout-header { flex-direction: column; align-items: stretch; }
    .mp-progress { grid-template-columns: repeat(2, 1fr); }
    .mp-step { font-size: 10px; padding: 8px 4px; }
    .mp-address { grid-template-columns: 1fr; gap: 12px; }
    .mp-continue { flex-direction: column; align-items: stretch; text-align: center; }

    .gv-wrap { padding: 12px; }
    .gv-header { flex-direction: column; align-items: stretch; }
    .gv-header h1 { font-size: 20px; }
    .gv-content, .gv-form { padding: 18px 20px; }
    .gv-actions { flex-direction: column; }
    .gv-btn { width: 100%; justify-content: center; }
}

@media (max-width: 640px) {
    .mp-table thead th, .sn-table thead th, .ms-table thead th,
    .mp-table tbody td, .sn-table tbody td, .ms-table tbody td {
        padding: 8px 8px;
        font-size: 11px;
    }

    .sn-cell-image img { max-width: 60px; }
    .sp-btn, .ms5-pm-btn, .ms-btn { padding: 8px 14px; font-size: 12px; }
    .sn-btn-delete { padding: 6px 10px; font-size: 11px; }
}


/* ============================================================
   SUPPLIER / CUSTOMER PRODUCT MANAGER — LEGO-stijl
   ============================================================ */

/* ---------- Wrapper ---------- */
.ms5-pm {
    padding: 20px 24px;
    max-width: 1100px;
    margin: 0 auto;
    background: #f6e5d3;
    border-radius: 5px;
    box-shadow: 5px 5px 5px 0px #2a2a2a;
    font-family: Verdana, Arial, sans-serif;
    font-size: 13px;
    color: #1e293b;
    box-sizing: border-box;
}
.ms5-pm * { box-sizing: border-box; }

/* ---------- Header ---------- */
.ms5-pm-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid #d40000;
}
.ms5-pm-header-left { flex: 1 1 300px; min-width: 0; }
.ms5-pm-header h1 {
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ms5-pm-header-icon { font-size: 26px; }
.ms5-pm-header p {
    color: #64748b;
    font-size: 13px;
    margin: 4px 0 0 0;
}
.ms5-pm-header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* ---------- Tabs ---------- */
.ms5-pm-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid #d40000;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.ms5-pm-tab {
    padding: 10px 18px;
    border: 1px solid transparent;
    border-bottom: none;
    background: #fff5f5;
    color: #7f1d1d;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    margin-bottom: -2px;
    border-radius: 6px 6px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ms5-pm-tab:hover {
    background: #fff0f0;
    color: #a80000;
}
.ms5-pm-tab.active {
    background: #d40000;
    color: #ffffff;
    border-color: #b91c1c;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
.ms5-pm-tab .icon { font-size: 14px; }

/* ---------- Tab panels ---------- */
.ms5-pm-panel {
    display: none;
    animation: ms5PmFadeIn 0.2s ease;
}
.ms5-pm-panel.active { display: block; }

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

/* ---------- Card / form-section ---------- */
.ms5-pm-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 16px;
}
.ms5-pm-card h2 {
    font-size: 14px;
    font-weight: 700;
    color: #a80000;
    margin: 0 0 16px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #ffe0e0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---------- Form ---------- */
.ms5-pm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}
.ms5-pm-grid.full { grid-template-columns: 1fr; }
.ms5-pm-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.ms5-pm-field.full { grid-column: 1 / -1; }
.ms5-pm-field label {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.ms5-pm-field .hint {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
    font-style: italic;
}
.ms5-pm-field input[type="text"],
.ms5-pm-field input[type="number"],
.ms5-pm-field input[type="date"],
.ms5-pm-field input[type="file"],
.ms5-pm-field select,
.ms5-pm-field textarea {
    padding: 9px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    color: #1e293b;
    font-family: inherit;
    width: 100%;
    transition: all 0.15s;
}
.ms5-pm-field input:focus,
.ms5-pm-field select:focus,
.ms5-pm-field textarea:focus {
    outline: none;
    border-color: #d40000;
    box-shadow: 0 0 0 3px rgba(212, 0, 0, 0.1);
}
.ms5-pm-field textarea {
    resize: vertical;
    min-height: 100px;
}
.ms5-pm-field input[type="file"] {
    padding: 8px;
    cursor: pointer;
}

/* Radio / checkbox rows */
.ms5-pm-radio-row {
    display: flex;
    gap: 16px;
    padding: 8px 0;
    align-items: center;
    flex-wrap: wrap;
}
.ms5-pm-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #1e293b;
    cursor: pointer;
    user-select: none;
}
.ms5-pm-radio input[type="radio"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #d40000;
}

/* ---------- Image preview ---------- */
.ms5-pm-image-preview {
    display: inline-block;
    padding: 4px;
    background: #fff5f5;
    border: 1px solid #ffe0e0;
    border-radius: 6px;
    margin-top: 8px;
}
.ms5-pm-image-preview img {
    display: block;
    max-width: 120px;
    max-height: 120px;
    object-fit: contain;
    border-radius: 4px;
}

/* ---------- Buttons ---------- */
.ms5-pm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border: 1px solid #b91c1c;
    border-radius: 6px;
    background: #d40000;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
    font-family: inherit;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
.ms5-pm-btn:hover {
    background: #b30000;
    border-color: #991b1b;
    color: #ffd400;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(212, 0, 0, 0.3);
}
.ms5-pm-btn-primary   { background: #d40000; border-color: #b91c1c; color: #fff; }
.ms5-pm-btn-secondary { background: #e01a1a; border-color: #b91c1c; color: #fff; }
.ms5-pm-btn-danger    { background: #a80000; border-color: #7f1d1d; color: #fff; }
.ms5-pm-btn-danger:hover { background: #7f1d1d; border-color: #5b1414; color: #ffd400; }
.ms5-pm-btn-ghost {
    background: #fff;
    border-color: #d1d5db;
    color: #475569;
    text-shadow: none;
}
.ms5-pm-btn-ghost:hover {
    background: #f3f4f6;
    color: #1e293b;
    border-color: #cbd5e1;
}
.ms5-pm-btn-sm { padding: 7px 12px; font-size: 12px; }

/* ---------- Form actions footer ---------- */
.ms5-pm-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid #ffe0e0;
    align-items: center;
}
.ms5-pm-actions-right {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

/* ---------- Table ---------- */
.ms5-pm-table-wrapper {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow-x: auto;
    margin-bottom: 16px;
}
.ms5-pm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.ms5-pm-table thead {
    background: #fff5f5;
}
.ms5-pm-table th {
    text-align: left;
    padding: 11px 12px;
    border-bottom: 2px solid #d40000;
    font-weight: 700;
    color: #a80000;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.4px;
    white-space: nowrap;
}
.ms5-pm-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
    color: #1e293b;
    vertical-align: middle;
}
.ms5-pm-table tbody tr:nth-child(even) td { background: #fafbfc; }
.ms5-pm-table tbody tr:hover td { background: #fff5f5; }
.ms5-pm-table tbody tr.selected td {
    background: #ffe0e0;
    border-bottom-color: #d40000;
}
.ms5-pm-table .preview-link {
    color: #a80000;
    text-decoration: none;
    font-weight: 600;
}
.ms5-pm-table .preview-link:hover {
    color: #d40000;
    text-decoration: underline;
}

/* ---------- Badges ---------- */
.ms5-pm-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.ms5-pm-badge.active   { background: #dcfce7; color: #166534; }
.ms5-pm-badge.inactive { background: #fee2e2; color: #991b1b; }

/* ---------- Empty state ---------- */
.ms5-pm-empty {
    padding: 60px 20px;
    text-align: center;
    color: #64748b;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}
.ms5-pm-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}
.ms5-pm-empty-title {
    font-size: 15px;
    font-weight: 700;
    color: #a80000;
    margin-bottom: 6px;
}

/* ---------- Preview / read-only ---------- */
.ms5-pm-preview {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 16px;
}
.ms5-pm-preview h2 {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 12px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #d40000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.ms5-pm-preview .price {
    color: #16a34a;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 16px;
}
.ms5-pm-preview .body {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.ms5-pm-preview .image {
    flex-shrink: 0;
}
.ms5-pm-preview .image img {
    max-width: 200px;
    max-height: 200px;
    object-fit: contain;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    padding: 4px;
}
.ms5-pm-preview .desc {
    flex: 1;
    min-width: 200px;
    font-size: 13px;
    line-height: 1.6;
    color: #334155;
}
.ms5-pm-preview .meta {
    margin-top: 12px;
    font-size: 12px;
    color: #64748b;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .ms5-pm { padding: 12px; }
    .ms5-pm-header { flex-direction: column; align-items: stretch; }
    .ms5-pm-tabs { flex-direction: column; border-bottom: none; }
    .ms5-pm-tab {
        border-radius: 6px;
        margin-bottom: 0;
        border: 1px solid #ffe0e0;
        justify-content: center;
    }
    .ms5-pm-tab.active { border-color: #b91c1c; }
    .ms5-pm-grid { grid-template-columns: 1fr; }
    .ms5-pm-table { font-size: 11px; }
    .ms5-pm-table th, .ms5-pm-table td { padding: 8px 8px; }
    .ms5-pm-actions { flex-direction: column; align-items: stretch; }
    .ms5-pm-actions .ms5-pm-btn { width: 100%; justify-content: center; }
    .ms5-pm-actions-right { margin-left: 0; width: 100%; }
}

/* ============================================================
   ACCOUNT MANAGE / ACCOUNT ADD — MarvikShop 5.0
   LEGO-stijl (rood #d40000 / zand #f6e5d3)
   ============================================================ */

.am-wrap {
    padding: 20px 24px;
    max-width: 100%;
    background: #f6e5d3;
    border-radius: 5px;
    box-shadow: 5px 5px 5px 0px #2a2a2a;
    font-family: Verdana, Arial, sans-serif;
    font-size: 13px;
    color: #1e293b;
    box-sizing: border-box;
}
.am-wrap * { box-sizing: border-box; }

/* ---------- Header ---------- */
.am-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid #e2e8f0;
}
.am-header-left { flex: 1 1 300px; min-width: 0; }
.am-header h1 {
    font-size: 22px;
    font-weight: bold;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.am-header-icon { font-size: 26px; }
.am-header p {
    color: #64748b;
    font-size: 13px;
    margin: 4px 0 0 0;
}
.am-header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* ---------- Tabs ---------- */
.am-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.am-tab {
    padding: 11px 20px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.am-tab:hover {
    color: #d40000;
    background: #fff5f5;
}
.am-tab.active {
    color: #d40000;
    border-bottom-color: #d40000;
}
.am-tab-panel {
    display: none;
}
.am-tab-panel.active {
    display: block;
}

/* ---------- Card ---------- */
.am-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 16px;
}

/* ---------- Form ---------- */
.am-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}
.am-form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.am-form-row.full {
    grid-column: 1 / -1;
}
.am-form-row label {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}
.am-form-row label .required {
    color: #ef4444;
    margin-left: 2px;
}
.am-form-row input[type="text"],
.am-form-row input[type="email"],
.am-form-row input[type="number"],
.am-form-row input[type="date"],
.am-form-row input[type="file"],
.am-form-row select,
.am-form-row textarea {
    padding: 9px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    color: #1e293b;
    font-family: inherit;
    width: 100%;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.am-form-row input:focus,
.am-form-row select:focus,
.am-form-row textarea:focus {
    outline: none;
    border-color: #d40000;
    box-shadow: 0 0 0 3px rgba(212, 0, 0, 0.12);
}
.am-form-row textarea {
    resize: vertical;
    min-height: 90px;
}
.am-form-row .hint {
    font-size: 11px;
    color: #94a3b8;
}

/* Radio group */
.am-radio-group {
    display: flex;
    gap: 16px;
    padding-top: 4px;
}
.am-radio-group label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    color: #1e293b;
    cursor: pointer;
}
.am-radio-group input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: #d40000;
    cursor: pointer;
}

/* ---------- Buttons ---------- */
.am-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border: 1px solid #b91c1c;
    border-radius: 6px;
    background: #d40000;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
    font-family: inherit;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
.am-btn:hover {
    background: #b30000;
    border-color: #991b1b;
    color: #ffd400;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(212, 0, 0, 0.3);
    text-decoration: none;
}
.am-btn-primary {
    background: #d40000;
    border-color: #b91c1c;
}
.am-btn-secondary {
    background: #e01a1a;
    border-color: #b91c1c;
}
.am-btn-danger {
    background: #a80000;
    border-color: #7f1d1d;
}
.am-btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

/* ---------- Table ---------- */
.am-table-wrap {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow-x: auto;
    margin-bottom: 16px;
}
.am-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
}
.am-table thead tr {
    background: #f1f5f9;
}
.am-table thead th {
    padding: 11px 12px;
    text-align: left;
    border-bottom: 2px solid #cbd5e1;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.am-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
    color: #1e293b;
    vertical-align: middle;
}
.am-table tbody tr:nth-child(even) td {
    background: #fafbfc;
}
.am-table tbody tr:hover td {
    background: #f6e5d3;
}
.am-table tbody tr {
    cursor: pointer;
}
.am-table tbody tr.selected td {
    background: #fff5f5;
    border-bottom-color: #d40000;
}
.am-table .am-cell-name {
    font-weight: 600;
    color: #1e293b;
}
.am-table .am-cell-model {
    font-family: 'Courier New', monospace;
    color: #64748b;
    font-size: 11px;
}
.am-table .am-cell-price {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    color: #16a34a;
    text-align: right;
    white-space: nowrap;
}
.am-table .am-cell-status {
    text-align: center;
}

/* ---------- Status badges ---------- */
.am-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.am-badge.active {
    background: #dcfce7;
    color: #166534;
}
.am-badge.inactive {
    background: #fee2e2;
    color: #991b1b;
}
.am-badge.draft {
    background: #fef3c7;
    color: #92400e;
}

/* ---------- Info box (replaces osCommerce box) ---------- */
.am-infobox {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    font-size: 12px;
    color: #475569;
}
.am-infobox-title {
    font-weight: 700;
    font-size: 13px;
    color: #1e293b;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}
.am-infobox-row {
    margin-bottom: 6px;
    line-height: 1.5;
}
.am-infobox-actions {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

/* ---------- Empty state ---------- */
.am-empty {
    padding: 60px 20px;
    text-align: center;
    color: #64748b;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}
.am-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}
.am-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 6px;
}
.am-empty-hint {
    color: #94a3b8;
    font-size: 12px;
}

/* ---------- Preview (new_product_preview) ---------- */
.am-preview {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 24px 28px;
    margin-bottom: 16px;
}
.am-preview-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 4px;
}
.am-preview-price {
    font-family: 'Courier New', monospace;
    font-size: 20px;
    font-weight: 700;
    color: #16a34a;
}
.am-preview-body {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-top: 16px;
    flex-wrap: wrap;
}
.am-preview-body img {
    max-width: 200px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    padding: 4px;
    background: #fff;
}
.am-preview-description {
    flex: 1;
    min-width: 240px;
    line-height: 1.7;
    color: #334155;
}

/* ---------- Alerts ---------- */
.am-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 16px;
}
.am-alert-icon {
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1;
}
.am-alert-warning {
    background: #fef3c7;
    border-left: 4px solid #f59e0b;
    color: #92400e;
}
.am-alert-danger {
    background: #fee2e2;
    border-left: 4px solid #dc2626;
    color: #991b1b;
}
.am-alert-info {
    background: #eff6ff;
    border-left: 4px solid #3b82f6;
    color: #1e40af;
}

/* ---------- Footer actions ---------- */
.am-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .am-wrap { padding: 12px; }
    .am-header { flex-direction: column; align-items: stretch; }
    .am-form-grid { grid-template-columns: 1fr; }
    .am-tabs { flex-wrap: nowrap; overflow-x: auto; }
    .am-tab { padding: 10px 14px; font-size: 12px; white-space: nowrap; }
    .am-table { font-size: 11px; }
    .am-table thead th, .am-table tbody td { padding: 8px 10px; }
    .am-actions { flex-direction: column; }
    .am-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   SUPPLIER — Table (in sp-card)
   ============================================================ */
.sp-table-wrap {
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}
.sp-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}
.sp-table thead tr {
    background: #f8fafc;
}
.sp-table thead th {
    text-align: left;
    padding: 11px 12px;
    border-bottom: 2px solid #e2e8f0;
    font-weight: 600;
    color: #1e293b;
    font-size: 11px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
}
.sp-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
    color: #1e293b;
    vertical-align: middle;
}
.sp-table tbody tr:nth-child(even) td {
    background: #fafbfc;
}
.sp-table tbody tr:hover td {
    background: #f6e5d3;
}
.sp-table .num {
    text-align: right;
    font-family: 'Courier New', monospace;
    font-weight: 600;
    white-space: nowrap;
}

/* ============================================================
   SUPPLIER — Bar chart (monthly overview)
   ============================================================ */
.sp-bar {
    display: grid;
    grid-template-columns: 80px 1fr 120px;
    gap: 10px;
    align-items: center;
    margin-bottom: 6px;
    font-size: 12px;
}
.sp-bar .label {
    font-family: 'Courier New', monospace;
    color: #64748b;
}
.sp-bar .bar {
    height: 20px;
    background: #f6e5d3;
    border-radius: 4px;
    overflow: hidden;
}
.sp-bar .bar > div {
    height: 100%;
    background: linear-gradient(90deg, #d40000, #a80000);
    border-radius: 4px;
    transition: width 0.3s ease;
}
.sp-bar .value {
    text-align: right;
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: #1e293b;
}

/* ============================================================
   SUPPLIER — Form layout
   ============================================================ */
.sp-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}
.sp-form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sp-form-row.full {
    grid-column: 1 / -1;
}
.sp-form-row label {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}
.sp-form-row input[type="text"],
.sp-form-row input[type="email"],
.sp-form-row input[type="number"],
.sp-form-row input[type="date"],
.sp-form-row input[type="file"],
.sp-form-row select,
.sp-form-row textarea {
    padding: 9px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    color: #1e293b;
    font-family: inherit;
    width: 100%;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.sp-form-row input:focus,
.sp-form-row select:focus,
.sp-form-row textarea:focus {
    outline: none;
    border-color: #d40000;
    box-shadow: 0 0 0 3px rgba(212, 0, 0, 0.12);
}
.sp-form-row textarea {
    min-height: 90px;
    resize: vertical;
}
.sp-form-row .hint {
    font-size: 11px;
    color: #94a3b8;
}
.sp-form-footer {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

/* ============================================================
   SUPPLIER — Product grid
   ============================================================ */
.sp-toolbar {
    margin-bottom: 16px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.sp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.sp-product-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.15s;
}
.sp-product-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
.sp-product-image {
    aspect-ratio: 1;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #f1f5f9;
}
.sp-product-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: 6px;
}
.sp-product-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.sp-product-name {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    min-height: 32px;
    color: #1e293b;
}
.sp-product-cost {
    font-size: 11px;
    color: #94a3b8;
}
.sp-product-price {
    font-family: 'Courier New', monospace;
    color: #d40000;
    font-weight: 700;
    font-size: 14px;
}
.sp-product-stock {
    font-size: 11px;
    color: #64748b;
}
.sp-product-actions {
    display: flex;
    gap: 4px;
    padding: 8px 10px;
    border-top: 1px solid #f1f5f9;
}

/* ============================================================
   SUPPLIER — Order meta (order detail)
   ============================================================ */
.sp-order-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
}
.sp-order-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sp-order-meta-item .label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.sp-order-meta-item .value {
    font-size: 13px;
    color: #1e293b;
    font-weight: 500;
}
.sp-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}


/* ============================================================
   Prijs: originele prijs doorgestreept + special prijs ernaast
   ============================================================ */
.ms5-product__header-price {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.ms5-product__price-original {
    color: #999;
    font-size: 1rem;
    font-weight: 400;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: #c00;
    opacity: 0.85;
}

.ms5-product__price--special {
    color: #c00;
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
}

.ms5-product__price--special::before {
    content: "➜ ";
    font-size: 1rem;
    color: #666;
    margin-right: 0.25rem;
}

/* Fallback: normale prijs (geen special) */
.ms5-product__price {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111;
}

/* Shipping method row — radio links, naam midden, prijs rechts */
.mp-shipping-method {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
}

.mp-shipping-method__select {
    padding-top: 2px;
}

.mp-shipping-method__info {
    min-width: 0;
}

.mp-shipping-method__name {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    color: inherit;
    white-space: pre-line;
}

.mp-shipping-method__price {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 14px;
    color: var(--mp-red, #d40000);
    white-space: nowrap;
    text-align: right;
    align-self: start;
    padding-top: 1px;
}

/* Foutmelding boven de checkout */
.mp-warning {
    padding: 14px 18px;
    margin-bottom: 16px;
    background: #fee2e2;
    border-left: 4px solid #d40000;
    color: #7f1d1d;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

/* Mobiel: prijs onder de naam */
@media (max-width: 600px) {
    .mp-shipping-method {
        grid-template-columns: auto 1fr;
    }
    .mp-shipping-method__price {
        grid-column: 2;
        text-align: left;
        margin-top: 4px;
        font-size: 13px;
    }
}

/* ---------------------------------------------------------------------
   Checkout confirmation layout
   --------------------------------------------------------------------- */
.mp-confirm-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 24px;
}
.mp-confirm-col--wide {
    min-width: 0;
}

.mp-confirm-title {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin: 0 0 6px;
}
.mp-confirm-title--spaced {
    margin-top: 16px;
}

.mp-edit-link {
    font-weight: 400;
    color: #d40000;
    text-decoration: none;
    text-transform: none;
    font-size: 11px;
}
.mp-edit-link:hover {
    text-decoration: underline;
}

.mp-confirm-text {
    font-size: 13px;
    line-height: 1.6;
    color: #1e293b;
}

/* Voorwaarden */
.mp-card--terms {
    border-left: 4px solid #d40000;
}
.mp-terms-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 8px;
}
.mp-terms-link {
    display: inline-block;
    font-size: 12px;
    color: #d40000;
    text-decoration: underline;
}

/* Submit + loader */
.mp-submit-container {
    position: relative;
    min-width: 220px;
}
.mp-confirm-btn {
    width: 100%;
}
.ms5-loader {
    display: none;
    position: absolute;
    inset: 0;
    height: 100%;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    z-index: 10;
}
.ms5-loader__bar {
    background: #7c2615;
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    transition: width 0.05s linear;
}
.ms5-loader__percentage {
    position: absolute;
    inset: 0;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 42px;
    color: #f1ff2b;
    mix-blend-mode: difference;
}

/* Mobiel */
@media (max-width: 768px) {
    .mp-confirm-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .mp-submit-container {
        min-width: 0;
        width: 100%;
    }
}

/* Order totals — gebruikt door order_total::output() */
.mp-totals-table {
    width: 100%;
    border-collapse: collapse;
    border: 0;
    margin: 0;
}

.mp-totals-table .mp-row td {
    padding: 6px 0;
    font-size: 13px;
    border: 0;
    vertical-align: top;
}

.mp-totals-table .mp-total-label {
    text-align: left;
    color: #64748b;
    padding-right: 16px;
}

.mp-totals-table .mp-total-value {
    text-align: right;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    white-space: nowrap;
    color: #1e293b;
}

/* Totaal-regel krijgt extra nadruk */
.mp-totals-table .mp-row-total td {
    border-top: 2px solid #e2e8f0;
    padding-top: 10px;
    font-size: 15px;
    color: #d40000;
}
.mp-totals-table .mp-row-total .mp-total-value {
    color: #d40000;
}

/* Kortingen in groen */
.mp-totals-table .mp-row-discount .mp-total-value {
    color: #16a34a;
}

/* ---------------------------------------------------------------------
   Payment address rows — radio links, adres rechts
   --------------------------------------------------------------------- */
.mp-address-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mp-address-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
    padding: 12px 16px;
    cursor: pointer;
}

.mp-address-row__select {
    padding-top: 2px;
}

.mp-address-row__info {
    min-width: 0;
}

.mp-address-row__name {
    display: block;
    font-size: 13px;
    color: #1e293b;
    margin-bottom: 4px;
}

.mp-address-row__format {
    font-size: 12px;
    line-height: 1.5;
    color: #64748b;
}

/* Back-knop onder het formulier */
.mp-continue-back {
    margin-top: 12px;
    text-align: left;
}

/* ---------------------------------------------------------------------
   New address form — grid met 2 kolommen op desktop
   --------------------------------------------------------------------- */
.mp-new-address {
    margin-top: 4px;
}

.mp-form-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.mp-form-row--full {
    grid-column: 1 / -1;
}

.mp-form-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--ms5-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.mp-form-hint {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--ms5-text-muted, #94a3b8);
    text-transform: none;
    letter-spacing: 0;
    margin-top: 2px;
}

.mp-form-radio-group {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 6px 0;
}

.mp-form-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 400;
    color: var(--ms5-text, #1e293b);
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
}

/* Mobiel: 1 kolom */
@media (max-width: 600px) {
    .mp-form-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.mp-continue .cssButton,
.mp-continue input[type="submit"],
.mp-continue input[type="image"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    border: 1px solid #b91c1c;
    border-radius: 6px;
    background: #d40000;
    background-image: linear-gradient(#e01a1a, #b30000);
    color: #ffffff;
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0,0,0,.25);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 0 #7f1d1d;
    transition: all .15s ease;
}

.mp-continue .cssButton:hover,
.mp-continue input[type="submit"]:hover {
    background-image: linear-gradient(#c81414, #990000);
    color: #ffd400;
    transform: translateY(-1px);
}

/* ---------------------------------------------------------------------
   Checkout success
   --------------------------------------------------------------------- */
.mp-checkout-wrap--success .mp-card--success {
    border-left: 4px solid #16a34a;
}

.mp-success-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: 20px 10px 10px;
}

.mp-success-hero__icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #dcfce7;
    color: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    animation: ms5SuccessPop .5s cubic-bezier(.34,1.56,.64,1);
}

@keyframes ms5SuccessPop {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.mp-success-hero__text {
    font-size: 15px;
    line-height: 1.6;
    color: #1e293b;
    max-width: 620px;
}

/* Notify section */
.mp-success-notify {
    margin-top: 24px;
    padding: 16px 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.mp-success-notify__title {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 12px;
}

.mp-success-notify__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.mp-success-notify__item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #1e293b;
    cursor: pointer;
    line-height: 1.4;
}

.mp-success-notify__item input[type="checkbox"] {
    accent-color: #d40000;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    cursor: pointer;
    flex-shrink: 0;
}

.mp-success-notify__actions {
    text-align: right;
}

/* Info block (PWA / no notifications) */
.mp-success-info {
    margin-top: 20px;
    padding: 14px 18px;
    background: #f8fafc;
    border-left: 4px solid #94a3b8;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.6;
    color: #475569;
}
.mp-success-info p { margin: 0 0 6px; }
.mp-success-info p:last-child { margin-bottom: 0; }

/* GV balance */
.mp-card--gv {
    border-left: 4px solid #f59e0b;
    background: #fffbeb;
}

.mp-success-gv {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: #92400e;
    line-height: 1.5;
}

.mp-success-gv__icon {
    font-size: 22px;
    flex-shrink: 0;
}

.mp-success-gv a {
    color: #b45309;
    font-weight: 700;
    text-decoration: underline;
}

/* Downloads */
.mp-card--downloads {
    border-left: 4px solid #3b82f6;
}

/* Mobiel */
@media (max-width: 600px) {
    .mp-success-hero__icon {
        width: 60px;
        height: 60px;
        font-size: 32px;
    }
    .mp-success-hero__text {
        font-size: 14px;
    }
    .mp-success-notify {
        padding: 12px 14px;
    }
    .mp-success-notify__actions .ms5-btn {
        width: 100%;
    }
}


.mp-totals-table {
    width: 100%;
    border-collapse: collapse;
    border: 0;
    margin: 0;
}

.mp-totals-table .mp-row td {
    padding: 6px 0;
    font-size: 13px;
    border: 0;
    vertical-align: top;
}

.mp-totals-table .mp-total-label {
    text-align: left;
    color: #64748b;
    padding-right: 16px;
}

.mp-totals-table .mp-total-value {
    text-align: right;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    white-space: nowrap;
    color: #1e293b;
}

.mp-totals-table .mp-row-total td {
    border-top: 2px solid #e2e8f0;
    padding-top: 10px;
    font-size: 15px;
    color: #d40000;
}
.mp-totals-table .mp-row-total .mp-total-value {
    color: #d40000;
}

.mp-totals-table .mp-row-discount .mp-total-value {
    color: #16a34a;
}

.mp-totals-table .mp-row-subtotal td {
    font-weight: 600;
}

/* Keuzescherm */
.mp-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.mp-choice-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 16px;
    border: 2px solid var(--ms5-border, #e2e8f0);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
}

.mp-choice-card:hover {
    border-color: var(--ms5-red, #d40000);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    text-decoration: none;
}

.mp-choice-card--guest {
    border-color: #3b82f6;
}

.mp-choice-icon {
    font-size: 40px;
    margin-bottom: 12px;
}

.mp-choice-card h2 {
    font-size: 16px;
    margin: 0 0 6px;
    color: var(--ms5-text, #1e293b);
}

.mp-choice-card p {
    font-size: 12px;
    color: var(--ms5-text-muted, #64748b);
    margin: 0;
}

/* ============================================================
   Checkout messages (coupon feedback)
   ============================================================ */
.mp-warning {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-left: 4px solid #dc2626;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 16px;
    color: #7f1d1d;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
}

.mp-success {
    background: #dcfce7;
    border: 1px solid #86efac;
    border-left: 4px solid #22c55e;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 16px;
    color: #166534;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
}


/* Account overview — MarvikShop 5.0 */
.mp-section {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    margin-bottom: 20px;
    overflow: hidden;
}
.mp-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}
.mp-section-header h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 8px;
}
.mp-link-more {
    font-size: .875rem;
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
}
.mp-link-more:hover { text-decoration: underline; }

.mp-link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
    padding: 16px 20px;
}
.mp-link-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: #1f2937;
    text-decoration: none;
    font-size: .9rem;
    transition: all .15s ease;
    background: #fff;
}
.mp-link-card:hover {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(37,99,235,.12);
}
.mp-link-card-highlight {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
    font-weight: 600;
}
.mp-link-icon { font-size: 1.1rem; }
.mp-link-text { flex: 1; }

.mp-message-stack { margin-bottom: 16px; }

.mp-btn-sm { padding: 4px 10px; font-size: .8rem; }

/* ============================================================
   KPI cards — klikbaar
   ============================================================ */

a.mp-kpi,
a.mp-kpi:link,
a.mp-kpi:visited {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    position: relative;
}

a.mp-kpi:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    text-decoration: none;
}

/* Subtiele pijl rechtsonder die verschijnt bij hover */
a.mp-kpi::after {
    content: "→";
    position: absolute;
    bottom: 10px;
    right: 14px;
    font-size: 14px;
    color: #94a3b8;
    opacity: 0;
    transform: translateX(-4px);
    transition: all 0.2s ease;
}

a.mp-kpi:hover::after {
    opacity: 1;
    transform: translateX(0);
    color: #d40000;
}

/* Focus voor toetsenbord-navigatie */
a.mp-kpi:focus-visible {
    outline: 2px solid #d40000;
    outline-offset: 2px;
}

/* ============================================================
   ACCOUNT HISTORY — kolommen inschikken
   Voorkomt horizontale scrollbar
   ============================================================ */

/* Tabel mag niet breder worden dan zijn container */
.mp-table-wrapper {
    overflow-x: auto;
    width: 100%;
}

/* Tabel vult de wrapper, geen vaste min-breedte */
.mp-table {
    width: 100%;
    table-layout: auto;
}

/* Headers: laat afbreken i.p.v. nowrap forceren */
.mp-table thead th {
    word-break: break-word;
    line-height: 1.3;
    padding: 8px 8px;
    font-size: 9.5px;
    letter-spacing: 0.2px;
}

/* Cellen: laat tekst afbreken */
.mp-table tbody td {
    word-break: break-word;
    overflow-wrap: anywhere;
    padding: 8px 8px;
    font-size: 11.5px;
}

/* Adres-cel: geen nowrap, mag 2 regels worden */
.mp-table .comment-cell {
    white-space: normal !important;
    line-height: 1.4;
    max-width: 220px;
}

/* Datum-cel: compact en niet afbreken */
.mp-table .date-cell {
    white-space: nowrap !important;
    font-size: 10.5px;
    padding: 8px 6px;
}

/* Ordernummer-cel: compact, niet afbreken */
.mp-table .order-cell {
    white-space: nowrap !important;
    padding: 8px 6px;
}

/* Aantal-cel: smal, gecentreerd */
.mp-table .type-cell {
    text-align: center;
    white-space: nowrap !important;
    width: 1%;
}

/* Status-cel: badge mag niet afbreken */
.mp-table .status-cell {
    white-space: nowrap !important;
    width: 1%;
}

/* Totaal-cel: bedrag niet afbreken */
.mp-table .points-cell {
    white-space: nowrap !important;
    width: 1%;
}

/* ============================================================
   ORDER INFO — adressen-grid
   ============================================================ */
.mp-address-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    padding: 16px 20px;
}

.mp-address-block {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px 16px;
}

.mp-address-block h3 {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    color: #a80000;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.mp-address-info {
    font-size: 13px;
    line-height: 1.6;
    color: #1e293b;
}

.mp-address-info .smallText {
    font-size: 12px;
    color: #64748b;
    margin-top: 4px;
}

/* ============================================================
   ORDER INFO — totalen
   ============================================================ */
.mp-totals-wrap {
    display: flex;
    justify-content: flex-end;
    padding: 20px 24px 24px;
}

.mp-totals-wrap .mp-totals-table {
    width: auto;
    min-width: 340px;
    max-width: 440px;
    margin: 0;
    border-collapse: collapse;
    font-size: 13px;
}

/* Regels */
.mp-totals-wrap .mp-totals-table .mp-row td {
    padding: 7px 0;
    vertical-align: middle;
    line-height: 1.4;
}

/* Label links */
.mp-totals-wrap .mp-total-label {
    text-align: left;
    padding-right: 32px;
    color: #64748b;
    font-weight: 500;
    white-space: nowrap;
}

/* Bedrag rechts */
.mp-totals-wrap .mp-total-value {
    text-align: right;
    font-family: 'Courier New', monospace;
    font-weight: 600;
    white-space: nowrap;
    color: #1e293b;
    font-size: 13.5px;
}

/* Kortingen (negatieve bedragen) → groen */
.mp-totals-wrap .mp-row-discount .mp-total-value {
    color: #16a34a;
}

/* Scheidingslijn boven het totaal */
.mp-totals-wrap .mp-row-total {
    border-top: 2px solid #d40000;
}

.mp-totals-wrap .mp-row-total td {
    padding-top: 14px;
    font-size: 16px;
    font-weight: 700;
}

.mp-totals-wrap .mp-row-total .mp-total-label {
    color: #1e293b;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}

.mp-totals-wrap .mp-row-total .mp-total-value {
    color: #d40000;
    font-size: 17px;
    font-weight: 700;
}

/* Mobiel */
@media (max-width: 600px) {
    .mp-totals-wrap {
        padding: 16px;
        justify-content: stretch;
    }
    .mp-totals-wrap .mp-totals-table {
        min-width: 0;
        width: 100%;
    }
    .mp-totals-wrap .mp-total-label {
        padding-right: 16px;
    }
}

.mp-payment-info {
    padding: 16px 20px;
    font-size: 13px;
    color: #1e293b;
}
.mp-payment-info__method {
    font-weight: 600;
    margin-bottom: 6px;
}
.mp-payment-info__cc {
    color: #64748b;
    font-size: 12px;
}
.mp-payment-info__cc-num {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: 1px;
}

/* ============================================================
   NEWSLETTERS — MarvikShop 5.0
   ============================================================ */
.mp-newsletter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    padding: 16px 20px;
}

.mp-newsletter-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mp-newsletter-card:hover {
    border-color: #d40000;
    background: #fff5f5;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(212, 0, 0, 0.08);
}

.mp-newsletter-card:has(input[type="checkbox"]:checked) {
    border-color: #d40000;
    background: #fff5f5;
    box-shadow: 0 0 0 3px rgba(212, 0, 0, 0.1);
}

.mp-newsletter-card input[type="checkbox"] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: #d40000;
    cursor: pointer;
}

.mp-newsletter-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mp-newsletter-title {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
}

.mp-newsletter-desc {
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.5;
}

.mp-newsletter-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px 20px;
    border-top: 1px solid #f1f5f9;
    margin-top: 4px;
}

.mp-newsletter-info {
    padding: 16px 20px;
    font-size: 13px;
    line-height: 1.7;
    color: #334155;
}

.mp-newsletter-info p {
    margin: 0 0 10px;
}

.mp-newsletter-info p:last-child {
    margin-bottom: 0;
}

@media (max-width: 600px) {
    .mp-newsletter-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .mp-newsletter-actions .mp-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   NOTIFICATIONS — MarvikShop 5.0
   ============================================================ */

/* Intro-blok boven de global toggle */
.mp-notif-intro {
    margin: 16px 20px 20px;
    padding: 16px 20px;
    font-size: 13px;
    line-height: 1.7;
    color: #334155;
    background: #f8fafc;
    border-left: 4px solid #2563eb;
    border-radius: 8px;
}

/* Global-toggle als klikbare kaart */
.mp-notif-global {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 8px 20px 20px;
    padding: 16px 20px;
    cursor: pointer;
    transition: all 0.15s;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
}

.mp-notif-global:hover {
    background: #fff5f5;
    border-color: #d40000;
}

.mp-notif-global input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #d40000;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
}

.mp-notif-global__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.mp-notif-global__title {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
}

.mp-notif-global__desc {
    font-size: 12.5px;
    line-height: 1.5;
    color: #64748b;
}

/* Beschrijving boven de productenlijst */
.mp-notif-desc {
    padding: 4px 20px 16px;
    font-size: 13px;
    line-height: 1.6;
    color: #475569;
}

/* Lijst met product-notificaties */
.mp-notif-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 20px 20px;
}

.mp-notif-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}

.mp-notif-item:hover {
    border-color: #d40000;
    background: #fff5f5;
}

.mp-notif-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #d40000;
    cursor: pointer;
    flex-shrink: 0;
}

.mp-notif-item__name {
    font-size: 13.5px;
    font-weight: 600;
    color: #1e293b;
    flex: 1;
    min-width: 0;
    word-break: break-word;
    line-height: 1.4;
}

/* Mobiel */
@media (max-width: 600px) {
    .mp-notif-intro {
        margin: 12px;
        padding: 14px 16px;
    }
    .mp-notif-global {
        margin: 8px 12px 16px;
        padding: 14px 16px;
    }
    .mp-notif-desc {
        padding: 4px 12px 12px;
    }
    .mp-notif-list {
        padding: 0 12px 12px;
    }
    .mp-notif-item {
        padding: 12px 14px;
    }
}

/* ============================================================
   ADDRESS BOOK — MarvikShop 5.0
   ============================================================ */

.mp-address-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    transition: all 0.15s ease;
    min-height: 180px;
}

.mp-address-card:hover {
    border-color: #2563eb;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
    transform: translateY(-1px);
}

.mp-address-card.is-primary {
    border-color: #22c55e;
    background: #f0fdf4;
}

.mp-address-card.is-primary:hover {
    border-color: #16a34a;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15);
}

.mp-address-card__badge {
    position: absolute;
    top: -10px;
    right: 14px;
    background: #22c55e;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 3px 10px;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.3);
}

.mp-address-card__name {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
}

.mp-address-card__name a {
    color: inherit;
    text-decoration: none;
}

.mp-address-card__name a:hover {
    color: #2563eb;
    text-decoration: underline;
}

.mp-address-card__format {
    flex: 1;
    font-size: 12.5px;
    line-height: 1.6;
    color: #475569;
}

.mp-address-card__actions {
    display: flex;
    gap: 6px;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}

.mp-address-card.is-primary .mp-address-card__actions {
    border-top-color: #bbf7d0;
}

/* Mobiel */
@media (max-width: 600px) {
    .mp-address-card {
        min-height: auto;
        padding: 14px 16px;
    }
    .mp-address-card__badge {
        top: -8px;
        right: 10px;
        font-size: 9px;
        padding: 2px 8px;
    }
}

/* ============================================================
   ADDRESS BOOK PROCESS — form container
   ============================================================ */
.mp-address-form-wrap {
    padding: 16px 20px 20px;
}

.mp-address-form-wrap table,
.mp-address-form-wrap .infoBox,
.mp-address-form-wrap .infoBoxContents {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

/* Fallback styling voor de osCommerce-form module */
.mp-address-form-wrap td.main {
    padding: 6px 8px;
    font-size: 13px;
    color: #1e293b;
    vertical-align: middle;
}

.mp-address-form-wrap input[type="text"],
.mp-address-form-wrap input[type="email"],
.mp-address-form-wrap select,
.mp-address-form-wrap textarea {
    padding: 9px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    background: #fff;
    color: #1e293b;
    min-height: 38px;
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
}

.mp-address-form-wrap input:focus,
.mp-address-form-wrap select:focus,
.mp-address-form-wrap textarea:focus {
    outline: none;
    border-color: #d40000;
    box-shadow: 0 0 0 4px rgba(212, 0, 0, 0.12);
}

.mp-address-form-wrap input[type="radio"],
.mp-address-form-wrap input[type="checkbox"] {
    accent-color: #d40000;
    width: 16px;
    height: 16px;
    margin-right: 6px;
}

/* ============================================================
   ADDRESS BOOK FORM — MarvikShop 5.0
   ============================================================ */

.mp-address-form {
    display: block;
}

.mp-address-form__legend {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    margin-bottom: 16px;
    background: #f8fafc;
    border-left: 4px solid #94a3b8;
    border-radius: 0 8px 8px 0;
    font-size: 12px;
    color: #475569;
}

.mp-required {
    color: #dc2626;
    font-weight: 700;
}

.mp-address-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
}

.mp-address-form__row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mp-address-form__row--full {
    grid-column: 1 / -1;
}

.mp-address-form__label {
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.mp-address-form__input {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mp-input--readonly {
    background: #f1f5f9;
    color: #64748b;
    cursor: not-allowed;
}

/* Radio group */
.mp-radio-group {
    display: flex;
    flex-direction: row;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
    padding: 6px 0;
}

.mp-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #1e293b;
    cursor: pointer;
    user-select: none;
}

.mp-radio input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: #d40000;
    cursor: pointer;
    margin: 0;
}

/* Checkbox */
.mp-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #1e293b;
    cursor: pointer;
    user-select: none;
}

.mp-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #d40000;
    cursor: pointer;
    margin: 0;
}

/* Primary address toggle block */
.mp-address-form__primary {
    margin-top: 20px;
    padding: 12px 16px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
}

/* Responsive */
@media (max-width: 600px) {
    .mp-address-form__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ============================================================
   ADVANCED SEARCH — MarvikShop 5.0
   ============================================================ */

/* Zoek-blok */
.mp-search-block {
    padding: 20px;
}

.mp-field-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
}

.mp-input,
.mp-select {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    color: #1e293b;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}

.mp-input-lg {
    padding: 12px 16px;
    font-size: 15px;
}

.mp-input:focus,
.mp-select:focus {
    outline: none;
    border-color: #d40000;
    box-shadow: 0 0 0 3px rgba(212, 0, 0, 0.12);
}

.mp-select {
    padding-right: 32px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3e%3cpath fill='%2364748b' d='M6 9L1 4h10z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Quick find resultaten */
.mp-quicksearch {
    display: block;
    margin-top: 10px;
    padding: 12px 16px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    font-size: 12.5px;
    color: #64748b;
    min-height: 50px;
    max-height: 320px;
    overflow-y: auto;
    transition: all .2s;
}

.mp-quicksearch:not(:empty) {
    background: #fff;
    border-style: solid;
    border-color: #e2e8f0;
}

/* Checkbox- en radio-rijen */
.mp-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    font-size: 13px;
    color: #1e293b;
    cursor: pointer;
    user-select: none;
}

.mp-checkbox-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #d40000;
    cursor: pointer;
    flex-shrink: 0;
}

/* Form grid */
.mp-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    padding: 20px;
}

.mp-form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.mp-form-row--full {
    grid-column: 1 / -1;
}

.mp-form-hint {
    font-size: 11px;
    color: #94a3b8;
    font-style: italic;
    margin-top: 2px;
}

/* Radio-rij */
.mp-radio-row {
    display: flex;
    gap: 20px;
    padding: 6px 0;
    flex-wrap: wrap;
}

.mp-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #1e293b;
    cursor: pointer;
    user-select: none;
}

.mp-radio input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: #d40000;
    cursor: pointer;
}

/* Checkbox-grid (multi-column) */
.mp-checkbox-grid {
    display: grid;
    gap: 8px 16px;
    padding: 8px 0;
}

.mp-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #1e293b;
    cursor: pointer;
    user-select: none;
    line-height: 1.4;
}

.mp-checkbox--inline {
    white-space: nowrap;
}

.mp-checkbox input[type="checkbox"],
.mp-checkbox input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: #d40000;
    cursor: pointer;
    flex-shrink: 0;
}

/* Datum-rij */
.mp-date-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.mp-date-selects {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.mp-date-selects select {
    min-width: 80px;
}

/* Mobiel */
@media (max-width: 600px) {
    .mp-search-block,
    .mp-form-grid {
        padding: 12px;
    }
    .mp-form-grid {
        grid-template-columns: 1fr;
    }
    .mp-checkbox-grid {
        grid-template-columns: 1fr !important;
    }
    .mp-date-selects {
        width: 100%;
    }
    .mp-date-selects select {
        flex: 1;
        min-width: 0;
    }
}

/* ============================================================
   MODAL — generiek, herbruikbaar
   ============================================================ */

.mp-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10050;
    padding: 20px;
    animation: mpModalFadeIn 0.2s ease;
}

.mp-modal.is-open {
    display: flex;
}

@keyframes mpModalFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.mp-modal__box {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px -20px rgba(15, 23, 42, 0.5);
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: mpModalSlideIn 0.25s cubic-bezier(0.34, 1.2, 0.64, 1);
}

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

.mp-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 22px;
    background: #fff5f5;
    border-bottom: 2px solid #d40000;
}

.mp-modal__header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #a80000;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mp-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s;
}

.mp-modal__close:hover {
    background: #ffe0e0;
    color: #d40000;
    border-color: #ffe0e0;
}

.mp-modal__body {
    padding: 24px 26px;
    overflow-y: auto;
    flex: 1;
    font-size: 13.5px;
    line-height: 1.75;
    color: #334155;
}

.mp-modal__body u,
.mp-modal__body b,
.mp-modal__body strong {
    color: #1e293b;
}

.mp-modal__body a {
    color: #d40000;
    text-decoration: underline;
    font-weight: 500;
}

.mp-modal__body a:hover {
    color: #a80000;
}

.mp-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

@media (max-width: 600px) {
    .mp-modal { padding: 10px; }
    .mp-modal__box { max-height: 95vh; }
    .mp-modal__header { padding: 14px 16px; }
    .mp-modal__body { padding: 18px 20px; font-size: 13px; }
    .mp-modal__footer { padding: 12px 16px; }
}

/* ============================================================
   ADVANCED SEARCH RESULT
   ============================================================ */

.mp-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 20px;
}

.mp-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #fff5f5;
    border: 1px solid #ffe0e0;
    border-radius: 20px;
    font-size: 12px;
    color: #7f1d1d;
    line-height: 1.4;
}

.mp-filter-tag strong {
    color: #a80000;
    font-weight: 700;
}

/* ============================================================
   QUICK FIND — autocomplete resultaten
   ============================================================ */

.mp-quickfind-hint,
.mp-quickfind-empty {
    padding: 12px 16px;
    color: #94a3b8;
    font-size: 12.5px;
    font-style: italic;
    text-align: center;
}

.mp-quickfind-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.mp-quickfind-item {
    border-bottom: 1px solid #f1f5f9;
    margin: 0;
    padding: 0;
}

.mp-quickfind-item:last-child {
    border-bottom: none;
}

.mp-quickfind-item a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: #1e293b;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.4;
    transition: all 0.12s ease;
}

.mp-quickfind-item a:hover {
    background: #fff5f5;
    color: #a80000;
    text-decoration: none;
}

.mp-quickfind-name {
    flex: 1;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-quickfind-model {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 4px;
    flex-shrink: 0;
    white-space: nowrap;
}

.mp-quickfind-item a:hover .mp-quickfind-model {
    background: #ffe0e0;
    color: #a80000;
}

/* ============================================================
   ALLPRODS — MarvikShop 5.0
   ============================================================ */

/* Alfabet navigatie */
.mp-alpha-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 16px 20px;
    justify-content: center;
}

.mp-alpha-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 4px 8px;
    background: #fff5f5;
    border: 1px solid #ffe0e0;
    border-radius: 6px;
    color: #7f1d1d;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.15s;
    text-transform: uppercase;
}

.mp-alpha-link:hover {
    background: #d40000;
    border-color: #b91c1c;
    color: #ffd400;
    text-decoration: none;
    transform: translateY(-1px);
}

.mp-alpha-link.is-active {
    background: #d40000;
    border-color: #b91c1c;
    color: #ffd400;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.15);
}

/* Product grid */
.mp-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.mp-product-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.mp-product-card:hover {
    border-color: #d40000;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,.1);
}

.mp-product-card__image-link {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
    overflow: hidden;
}

.mp-product-card__image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: 8px;
    transition: transform 0.2s;
}

.mp-product-card:hover .mp-product-card__image {
    transform: scale(1.04);
}

.mp-product-card__body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.mp-product-card__model {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.mp-product-card__name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: #1e293b;
    text-decoration: none;
    min-height: 36px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mp-product-card__name:hover {
    color: #d40000;
    text-decoration: none;
}

.mp-product-card__manufacturer {
    font-size: 11px;
    color: #64748b;
}

.mp-product-card__price {
    margin-top: auto;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.mp-product-card__price-old {
    font-size: 12px;
    color: #94a3b8;
    text-decoration: line-through;
    text-decoration-color: #d40000;
    text-decoration-thickness: 2px;
}

.mp-product-card__price-new {
    font-family: 'Courier New', monospace;
    font-size: 16px;
    font-weight: 700;
    color: #d40000;
}

.mp-product-card__price-normal {
    font-family: 'Courier New', monospace;
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}

.mp-product-card__stock,
.mp-product-card__weight {
    font-size: 11px;
    color: #64748b;
}

.mp-product-card__actions {
    margin-top: 6px;
}

.mp-product-card__actions .mp-btn {
    width: 100%;
    justify-content: center;
}

/* Mobiel */
@media (max-width: 600px) {
    .mp-product-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
    }
    .mp-product-card__body {
        padding: 10px;
    }
    .mp-product-card__name {
        font-size: 12px;
        min-height: 32px;
    }
    .mp-product-card__price-new,
    .mp-product-card__price-normal {
        font-size: 14px;
    }
    .mp-alpha-link {
        min-width: 28px;
        height: 28px;
        font-size: 11px;
    }
}

/* ============================================================
   ALLPRODS — MarvikShop 5.0
   ============================================================ */

/* Alfabet navigatie */
.mp-alpha-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 16px 20px;
    justify-content: center;
}

.mp-alpha-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 4px 8px;
    background: #fff5f5;
    border: 1px solid #ffe0e0;
    border-radius: 6px;
    color: #7f1d1d;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.15s;
    text-transform: uppercase;
}

.mp-alpha-link:hover {
    background: #d40000;
    border-color: #b91c1c;
    color: #ffd400;
    text-decoration: none;
    transform: translateY(-1px);
}

.mp-alpha-link.is-active {
    background: #d40000;
    border-color: #b91c1c;
    color: #ffd400;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.15);
}

/* Product grid — compact */
.mp-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.mp-product-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.15s;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

.mp-product-card:hover {
    border-color: #d40000;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
}

.mp-product-card__image-link {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
    overflow: hidden;
}

.mp-product-card__image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: 6px;
    transition: transform 0.2s;
}

.mp-product-card:hover .mp-product-card__image {
    transform: scale(1.05);
}

.mp-product-card__no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    background: #f1f5f9;
    color: #cbd5e1;
    font-size: 36px;
}

.mp-product-card__body {
    padding: 8px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.mp-product-card__name {
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.25;
    color: #1e293b;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 14px;
}

.mp-product-card__name:hover {
    color: #d40000;
    text-decoration: none;
}

/* Meta: manufacturer + SKU — compact */
.mp-product-card__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 9.5px;
    color: #64748b;
    line-height: 1.25;
}

.mp-product-card__meta i {
    opacity: 0.6;
    margin-right: 3px;
    font-size: 9px;
}

.mp-product-card__mfr {
    color: #a80000;
    font-weight: 600;
}

.mp-product-card__sku {
    font-family: 'Courier New', monospace;
    color: #94a3b8;
    font-size: 9px;
}

/* Type badge — kleiner */
.mp-product-card__type {
    margin-top: 2px;
}

.mp-product-card .ms5-ptype-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 8.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .2px;
    white-space: nowrap;
    border: 1px solid transparent;
}

.mp-product-card .ms5-ptype-badge--new {
    background: #dcfce7;
    color: #166534;
    border-color: #86efac;
}

.mp-product-card .ms5-ptype-badge--used {
    background: #ffedd5;
    color: #9a3412;
    border-color: #fdba74;
}

.mp-product-card .ms5-ptype-badge--other {
    background: #f1f5f9;
    color: #475569;
    border-color: #cbd5e1;
}

/* Voorraad-indicator — compact */
.mp-product-card__stock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9.5px;
    font-weight: 600;
    margin-top: 2px;
}

.mp-stock-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #94a3b8;
    flex-shrink: 0;
}

.mp-product-card__stock--green  { color: #16a34a; }
.mp-product-card__stock--green  .mp-stock-dot { background: #22c55e; }

.mp-product-card__stock--yellow { color: #b45309; }
.mp-product-card__stock--yellow .mp-stock-dot { background: #f59e0b; }

.mp-product-card__stock--red    { color: #b91c1c; }
.mp-product-card__stock--red    .mp-stock-dot { background: #ef4444; }

.mp-stock-qty {
    color: #94a3b8;
    font-weight: 400;
    font-family: 'Courier New', monospace;
}

/* Prijs — compacter */
.mp-product-card__price {
    margin-top: auto;
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 3px;
}

.mp-product-card__price-old {
    font-size: 10.5px;
    color: #94a3b8;
    text-decoration: line-through;
    text-decoration-color: #d40000;
    text-decoration-thickness: 2px;
}

.mp-product-card__price-new {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: 700;
    color: #d40000;
}

.mp-product-card__price-normal {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}

/* Buy now — klein */
.mp-product-card__actions {
    margin-top: 4px;
}

.mp-product-card__actions .mp-btn,
.mp-product-card__actions .mp-btn-sm {
    width: 100%;
    justify-content: center;
    padding: 5px 8px !important;
    font-size: 10.5px !important;
}

/* Mobiel — nog compacter */
@media (max-width: 600px) {
    .mp-product-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 8px;
    }
    .mp-product-card__body {
        padding: 6px 8px 8px;
        gap: 3px;
    }
    .mp-product-card__name {
        font-size: 11px;
    }
    .mp-product-card__meta,
    .mp-product-card__stock {
        font-size: 9px;
    }
    .mp-product-card__price-new,
    .mp-product-card__price-normal {
        font-size: 13px;
    }
    .mp-product-card__actions .mp-btn,
    .mp-product-card__actions .mp-btn-sm {
        padding: 4px 6px !important;
        font-size: 10px !important;
    }
    .mp-alpha-link {
        min-width: 26px;
        height: 26px;
        font-size: 10.5px;
    }
}

/* Extra klein (iPhone SE) */
@media (max-width: 400px) {
    .mp-product-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 6px;
    }
    .mp-product-card__name {
        font-size: 10.5px;
    }
    .mp-product-card__meta,
    .mp-product-card__stock {
        font-size: 8.5px;
    }
    .mp-product-card__price-new,
    .mp-product-card__price-normal {
        font-size: 12px;
    }
}

.mp-section-body {
    padding: 20px 24px;
    font-size: 13px;
    line-height: 1.7;
    color: #334155;
}

.mp-section-body h2 {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    margin: 20px 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e2e8f0;
}

.mp-section-body h2:first-child {
    margin-top: 0;
}

.mp-section-body p {
    margin: 0 0 12px;
}

.mp-section-body a {
    color: #d40000;
    text-decoration: underline;
}

.mp-section-body ul,
.mp-section-body ol {
    margin: 8px 0 12px 24px;
}

/* ============================================================
   COOKIE USAGE — content
   ============================================================ */

.mp-cookie-content {
    padding: 20px 24px;
}

.mp-cookie-info {
    background: #fef3c7;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 20px;
    color: #92400e;
    font-size: 13px;
    line-height: 1.6;
}

.mp-cookie-info p {
    margin: 0 0 8px;
}

.mp-cookie-info p:last-child {
    margin-bottom: 0;
}

.mp-cookie-text {
    font-size: 13px;
    line-height: 1.7;
    color: #334155;
}

.mp-cookie-text ol {
    margin: 8px 0 8px 20px;
    padding: 0;
}

.mp-cookie-text ol li {
    margin-bottom: 6px;
}

.mp-cookie-text b,
.mp-cookie-text strong {
    color: #1e293b;
}

@media (max-width: 600px) {
    .mp-cookie-content {
        padding: 16px;
    }
    .mp-cookie-info {
        padding: 12px 16px;
        font-size: 12px;
    }
}

/* ============================================================
   DOWN FOR MAINTENANCE
   ============================================================ */

.mp-maintenance {
    padding: 28px 24px;
    text-align: center;
}

.mp-maintenance-icon {
    margin-bottom: 18px;
}

.mp-maintenance-icon img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.mp-maintenance-message {
    font-size: 15px;
    line-height: 1.7;
    color: #1e293b;
    max-width: 640px;
    margin: 0 auto 20px;
}

.mp-maintenance-info {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 18px;
    margin: 6px 4px 0;
    background: #fff5f5;
    border-left: 4px solid #d40000;
    border-radius: 6px;
    font-size: 13px;
}

.mp-maintenance-info .label {
    font-weight: 700;
    color: #7f1d1d;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 11px;
}

.mp-maintenance-info .value {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    color: #1e293b;
}

.mp-maintenance-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 24px 20px;
    border-top: 1px solid #f1f5f9;
    font-size: 13px;
    color: #64748b;
}

@media (max-width: 600px) {
    .mp-maintenance {
        padding: 20px 16px;
    }
    .mp-maintenance-actions {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .mp-maintenance-actions .mp-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   MESSAGE STACK — MarvikShop 5.0
   Vervangt de oude osCommerce messageStackError / Warning / Success
   ============================================================ */

.ms5-message-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 20px 0;
}

.ms5-message {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    border-left: 4px solid;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.ms5-message-icon {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}

.ms5-message-text {
    flex: 1;
    color: #1e293b;
    font-weight: 500;
}

/* Error */
.ms5-message-error {
    background: #fee2e2;
    border-left-color: #dc2626;
    color: #7f1d1d;
}
.ms5-message-error .ms5-message-text { color: #7f1d1d; }

/* Warning */
.ms5-message-warning {
    background: #fef3c7;
    border-left-color: #f59e0b;
    color: #92400e;
}
.ms5-message-warning .ms5-message-text { color: #92400e; }

/* Success */
.ms5-message-success {
    background: #dcfce7;
    border-left-color: #16a34a;
    color: #166534;
}
.ms5-message-success .ms5-message-text { color: #166534; }

/* Info */
.ms5-message-info {
    background: #eff6ff;
    border-left-color: #3b82f6;
    color: #1e40af;
}
.ms5-message-info .ms5-message-text { color: #1e40af; }

/* Mobiel */
@media (max-width: 600px) {
    .ms5-message {
        padding: 12px 14px;
        font-size: 12.5px;
    }
    .ms5-message-icon {
        font-size: 16px;
    }
}

/* ============================================================
   PRINT CATALOG
   ============================================================ */
.mp-pc-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 16px;
}
.mp-pc-count { font-size: 13px; color: #64748b; }
.mp-pc-count strong { color: #a80000; font-size: 15px; font-family: 'Courier New', monospace; }

.mp-pc-view-toggle {
    display: inline-flex;
    gap: 4px;
    background: #f1f5f9;
    padding: 3px;
    border-radius: 8px;
}
.mp-pc-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    color: #64748b;
    text-decoration: none;
    font-size: 16px;
    transition: all .15s;
}
.mp-pc-view-btn:hover { background: #fff; color: #d40000; text-decoration: none; }
.mp-pc-view-btn.active { background: #d40000; color: #fff; text-decoration: none; }

.mp-pc-sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: inherit;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: .4px;
}
.mp-pc-sort:hover { color: #d40000; text-decoration: none; }
.mp-pc-sort .sort-icon { font-size: 10px; opacity: .5; }

.mp-pc-table .mp-pc-name {
    font-weight: 600;
    color: #1e293b;
    text-decoration: none;
}
.mp-pc-table .mp-pc-name:hover { color: #d40000; text-decoration: underline; }

.mp-pc-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-left: 4px;
    white-space: nowrap;
    vertical-align: middle;
}
.mp-pc-badge-new  { background: #dbeafe; color: #1e40af; }
.mp-pc-badge-sale { background: #fee2e2; color: #991b1b; }

/* Type badge */
.ms5-ptype-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    white-space: nowrap;
    border: 1px solid transparent;
}
.ms5-ptype-badge--new   { background: #dcfce7; color: #166534; border-color: #86efac; }
.ms5-ptype-badge--used  { background: #ffedd5; color: #9a3412; border-color: #fdba74; }
.ms5-ptype-badge--other { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }

.mp-print-price     { color: #16a34a; font-family: 'Courier New', monospace; font-weight: 700; }
.mp-print-price-old { color: #94a3b8; text-decoration: line-through; font-weight: 400; font-family: 'Courier New', monospace; }
.mp-print-price-new { color: #d40000; font-weight: 700; font-family: 'Courier New', monospace; }

/* Grid view */
.mp-pc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}
.mp-pc-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: all .15s;
}
.mp-pc-card:hover {
    border-color: #d40000;
    box-shadow: 0 6px 18px rgba(212,0,0,.12);
    transform: translateY(-2px);
}
.mp-pc-card-link { display: block; color: inherit; text-decoration: none; }
.mp-pc-card-link:hover { text-decoration: none; }
.mp-pc-card-image {
    position: relative;
    aspect-ratio: 1;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #f1f5f9;
    overflow: hidden;
}
.mp-pc-card-image img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    padding: 8px;
}
.mp-pc-card-image .mp-pc-badge { position: absolute; top: 8px; margin: 0; }
.mp-pc-card-image .mp-pc-badge-new  { left: 8px; }
.mp-pc-card-image .mp-pc-badge-sale { right: 8px; }

.mp-pc-card-body { padding: 12px 14px; }
.mp-pc-card-body h3 {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.35;
    min-height: 36px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mp-pc-card-mfr,
.mp-pc-card-model { font-size: 11px; color: #94a3b8; margin-bottom: 4px; }
.mp-pc-card-type  { margin: 6px 0; }
.mp-pc-card-price { margin-top: 8px; font-size: 15px; }
.mp-pc-card-stock { margin-top: 8px; font-size: 11px; color: #16a34a; font-weight: 600; }

@media (max-width: 600px) {
    .mp-pc-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    .mp-pc-card-body h3 { font-size: 12px; }
    .mp-pc-toolbar { flex-direction: column; align-items: stretch; }
}

@media print {

    /* ============================================================
       1. VERBERG ALLES
       ============================================================ */
    body * {
        visibility: hidden;
    }

    /* ============================================================
       2. TOON ALLEEN DE CATALOGUS
       ============================================================ */
    .mp-wrap,
    .mp-wrap * {
        visibility: visible;
    }

    /* Zet de wrapper op de hoek van de pagina */
    .mp-wrap {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        padding: 0 !important;
        margin: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    /* ============================================================
       3. VERBERG UI-ELEMENTEN BINNEN DE WRAPPER
       ============================================================ */
    .mp-header,
    .mp-help-bar,
    .mp-filters,
    .mp-pc-toolbar,
    .mp-actions,
    .mp-pagination-wrapper,
    .mp-section-header,
    .mp-pc-view-toggle,
    .mp-alpha-nav,
    .mp-empty-hint,
    .ms5-toast-container,
    .mp-pc-badge-new {
        display: none !important;
        visibility: hidden !important;
    }

    /* ============================================================
       4. RESET STIJLEN
       ============================================================ */
    .mp-section {
        box-shadow: none !important;
        border: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .mp-table-wrapper {
        border: 0 !important;
        overflow: visible !important;
    }

    /* ============================================================
       5. GRID LAYOUT VOOR PAPIER
       ============================================================ */
    .mp-pc-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
    }

    /* ============================================================
       6. VOORKOM AFKAPPEN
       ============================================================ */
    .mp-pc-card,
    .mp-cart-row,
    tr,
    .mp-print-product {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* ============================================================
       7. AFBEELDINGEN NIET TÉ GROOT
       ============================================================ */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* ============================================================
       8. LINKS NIET ONDERSTREPEN
       ============================================================ */
    a {
        text-decoration: none !important;
        color: #000 !important;
    }

    /* ============================================================
       9. PAGINA-MARGES
       ============================================================ */
    @page {
        margin: 1cm;
    }
}

/* ============================================================
   INFORMATION / PRIVACY / CONTENT PAGES
   ============================================================ */

.mp-info-content {
    padding: 24px 28px;
    font-size: 14px;
    line-height: 1.75;
    color: #1e293b;
}

.mp-info-content h1,
.mp-info-content h2,
.mp-info-content h3,
.mp-info-content h4 {
    color: #1e293b;
    font-weight: 700;
    margin-top: 1.5em;
    margin-bottom: .75em;
    line-height: 1.3;
}

.mp-info-content h1:first-child,
.mp-info-content h2:first-child,
.mp-info-content h3:first-child {
    margin-top: 0;
}

.mp-info-content h1 { font-size: 22px; }
.mp-info-content h2 { font-size: 18px; }
.mp-info-content h3 { font-size: 15px; }
.mp-info-content h4 { font-size: 14px; }

.mp-info-content p {
    margin: 0 0 1em;
}

.mp-info-content a {
    color: #d40000;
    text-decoration: underline;
    font-weight: 500;
}

.mp-info-content a:hover {
    color: #a80000;
    text-decoration: none;
}

.mp-info-content ul,
.mp-info-content ol {
    margin: 0 0 1em 1.5em;
    padding: 0;
}

.mp-info-content li {
    margin-bottom: .35em;
}

.mp-info-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 8px 0;
}

.mp-info-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1em;
    font-size: 13px;
}

.mp-info-content table th,
.mp-info-content table td {
    border: 1px solid #e2e8f0;
    padding: 8px 12px;
    text-align: left;
}

.mp-info-content table th {
    background: #f8fafc;
    font-weight: 700;
}

.mp-info-content blockquote {
    border-left: 4px solid #d40000;
    padding-left: 16px;
    margin: 1em 0;
    font-style: italic;
    color: #64748b;
}

.mp-info-content code {
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
}

.mp-info-content hr {
    border: 0;
    border-top: 1px solid #e2e8f0;
    margin: 1.5em 0;
}

.mp-info-content em {
    color: #64748b;
    font-style: italic;
}

/* Mobiel */
@media (max-width: 600px) {
    .mp-info-content {
        padding: 16px 18px;
        font-size: 13px;
    }
    .mp-info-content h1 { font-size: 18px; }
    .mp-info-content h2 { font-size: 16px; }
    .mp-info-content h3 { font-size: 14px; }
}


/* ============================================================
   PRODUCT REVIEWS
   ============================================================ */

/* Product-overzicht */


.mp-review-product__image {
    text-align: center;
}

.mp-review-product__image img {
    max-width: 160px;
    height: auto;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    padding: 4px;
    background: #fff;
}

.mp-review-product__image .smallText {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 6px;
}

.mp-review-product__info {
    min-width: 0;
}

.mp-review-product__info h2 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.35;
}

.mp-review-product__info h2 .smallText {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 400;
}

.mp-review-product__price {
    font-size: 18px;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    color: #16a34a;
    margin-bottom: 14px;
}

.mp-review-product__price s {
    color: #94a3b8;
    font-weight: 400;
    margin-right: 8px;
}

.mp-review-product__price .productSpecialPrice {
    color: #d40000;
}

.mp-review-product__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.mp-review-product__helplink {
    margin-top: 14px;
    padding: 10px 14px;
    background: #fff5f5;
    border-left: 3px solid #d40000;
    border-radius: 6px;
    font-size: 12px;
    color: #7f1d1d;
    line-height: 1.5;
}

.mp-review-product__helplink a {
    color: #d40000;
    text-decoration: underline;
    font-weight: 500;
}

/* Reviews-lijst */
.mp-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px 20px;
}

.mp-review-item {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    transition: all .15s;
}

.mp-review-item:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(15,23,42,.06);
}

.mp-review-item__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
    flex-wrap: wrap;
}

.mp-review-item__author {
    font-size: 13px;
    font-weight: 700;
    color: #a80000;
    text-decoration: none;
}

.mp-review-item__author:hover {
    color: #d40000;
    text-decoration: underline;
}

.mp-review-item__date {
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
}

.mp-review-item__body {
    padding: 14px 16px;
}

.mp-review-item__text {
    font-size: 13px;
    line-height: 1.65;
    color: #334155;
    margin-bottom: 8px;
}

.mp-review-item__rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #64748b;
}

.mp-review-item__rating img {
    vertical-align: middle;
    height: 14px;
}

/* Mobiel */
@media (max-width: 600px) {
    .mp-review-product {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px;
    }
    .mp-review-product__image {
        max-width: 200px;
        margin: 0 auto;
    }
    .mp-review-product__actions .mp-btn {
        flex: 1;
        min-width: 0;
        justify-content: center;
    }
    .mp-reviews-list {
        padding: 12px;
    }
    .mp-review-item__header {
        padding: 10px 12px;
    }
}

/* ============================================================
   PRODUCT REVIEW DETAIL
   ============================================================ */
.mp-review-detail {
    padding: 20px 24px;
}

.mp-review-detail__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px 24px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
}

.mp-review-detail__meta > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mp-review-detail__meta .label {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.mp-review-detail__meta .value {
    font-size: 13px;
    color: #1e293b;
}

.mp-review-detail__meta .value img {
    vertical-align: middle;
    height: 16px;
}

.mp-review-detail__meta .value i {
    color: #64748b;
    font-size: 12px;
}

.mp-review-detail__text {
    font-size: 14px;
    line-height: 1.75;
    color: #334155;
    white-space: pre-line;
    word-break: break-word;
}

.mp-review-detail__text br {
    line-height: 1.75;
}

@media (max-width: 600px) {
    .mp-review-detail {
        padding: 16px;
    }
    .mp-review-detail__meta {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* ============================================================
   SECTION HEADER — fix emoji overlap
   ============================================================ */
.mp-section-header h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.4;
    overflow: hidden;
    margin: 0;
}

.mp-section-header h2 .mp-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
}

/* ============================================================
   PRODUCT REVIEWS WRITE
   ============================================================ */

/* Grid: 2 kolommen naast elkaar */
.mp-review-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
    align-items: start;
}

/* ============================================================
   Product card (linkerkolom)
   ============================================================ */
.mp-review-card-product-body {
    padding: 20px;
    text-align: center;
}

.mp-review-product-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
    padding: 4px;
    transition: transform .15s, box-shadow .15s;
}

.mp-review-product-image:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 18px rgba(212, 0, 0, .15);
    border-color: #d40000;
}

.mp-review-product-zoom {
    font-size: 11px;
    color: #94a3b8;
    margin-bottom: 12px;
}

.mp-review-no-image {
    font-size: 64px;
    color: #cbd5e1;
    padding: 30px 0;
    line-height: 1;
}

.mp-review-product-price {
    font-size: 18px;
    font-weight: 700;
    color: #16a34a;
    font-family: 'Courier New', monospace;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}

.mp-review-product-price s {
    color: #94a3b8;
    font-weight: 400;
    font-size: 14px;
    margin-right: 6px;
}

.mp-review-product-price .productSpecialPrice {
    color: #d40000;
    font-weight: 700;
}

/* ============================================================
   Form card (rechterkolom)
   ============================================================ */
.mp-review-card-form-body {
    padding: 20px 24px;
}

.mp-review-points {
    padding: 12px 20px;
    background: #fff5f5;
    border-left: 4px solid #d40000;
    font-size: 12px;
    color: #7f1d1d;
    border-radius: 6px;
    margin: 0 20px 16px;
}

.mp-review-row {
    display: flex;
    gap: 8px;
    align-items: baseline;
    padding: 8px 0;
    font-size: 13px;
    border-bottom: 1px dashed #e2e8f0;
    margin-bottom: 16px;
}

.mp-review-label {
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.3px;
}

.mp-review-value {
    color: #1e293b;
    font-weight: 600;
}

.mp-review-field {
    margin-bottom: 20px;
}

.mp-review-field-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 8px;
}

.mp-review-field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.6;
    resize: vertical;
    min-height: 180px;
    color: #1e293b;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}

.mp-review-field textarea:focus {
    outline: none;
    border-color: #d40000;
    box-shadow: 0 0 0 3px rgba(212, 0, 0, .1);
}

.mp-review-counter-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    gap: 10px;
}

.mp-review-counter {
    font-size: 11px;
    color: #64748b;
    font-family: 'Courier New', monospace;
    padding: 2px 8px;
    border-radius: 4px;
    background: #f1f5f9;
    transition: background .2s;
}

.mp-review-hint {
    font-size: 11px;
    color: #94a3b8;
}

/* ============================================================
   Sterren-rating
   ============================================================ */
.mp-review-rating {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.mp-review-rating-bad,
.mp-review-rating-good {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
}

.mp-review-stars {
    display: inline-flex;
    gap: 2px;
    flex-direction: row-reverse;
}

.mp-review-star {
    display: inline-flex;
    cursor: pointer;
    font-size: 32px;
    line-height: 1;
    color: #cbd5e1;
    transition: color .12s, transform .12s;
}

.mp-review-star:hover,
.mp-review-star:hover ~ .mp-review-star,
.mp-review-star:has(input:checked),
.mp-review-star:has(input:checked) ~ .mp-review-star {
    color: #d40000;
}

.mp-review-star:hover {
    transform: scale(1.15);
}

.mp-review-star input {
    display: none;
}

.mp-review-star-icon {
    display: block;
    transition: color .12s;
}

/* ============================================================
   Acties
   ============================================================ */
.mp-review-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
    flex-wrap: wrap;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
    .mp-review-grid {
        grid-template-columns: 1fr;
    }
    .mp-review-card-product-body {
        padding: 16px;
    }
    .mp-review-card-form-body {
        padding: 16px;
    }
    .mp-review-actions {
        flex-direction: column-reverse;
    }
    .mp-review-actions .mp-btn {
        width: 100%;
        justify-content: center;
    }
    .mp-review-star {
        font-size: 28px;
    }
}

/* ============================================================
   PRINT CATALOG + NEW PRODUCTS — 6 kolommen op desktop
   ============================================================ */
.mp-pc-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

/* Compactere kaart-body voor smallere kolommen */
.mp-pc-card-body {
    padding: 10px 12px;
}

.mp-pc-card-body h3 {
    font-size: 12px;
    line-height: 1.3;
    min-height: 32px;
    -webkit-line-clamp: 2;
}

.mp-pc-card-mfr,
.mp-pc-card-model {
    font-size: 10px;
    margin-bottom: 3px;
}

.mp-pc-card-price {
    margin-top: 6px;
    font-size: 13px;
}

.mp-pc-card-stock {
    font-size: 10px;
    margin-top: 6px;
}

.mp-pc-card-date {
    margin-top: 6px;
    font-size: 10px;
}

/* Responsive — kolommen vallen af op kleinere schermen */
@media (max-width: 1400px) {
    .mp-pc-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 1200px) {
    .mp-pc-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
    .mp-pc-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .mp-pc-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .mp-pc-card-body h3 { font-size: 11px; }
    .mp-pc-card-body { padding: 8px 10px; }
}
@media (max-width: 400px) {
    .mp-pc-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SHIPPING ESTIMATOR
   ============================================================ */

/* Form */
.mp-ship-form {
    padding: 18px 22px 20px;
}
.mp-ship-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}
.mp-ship-form-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
}

/* Adres-blok */
.mp-ship-address {
    padding: 16px 22px;
    font-size: 13px;
    line-height: 1.7;
    color: #1e293b;
}

/* Quotes */
.mp-ship-quotes {
    padding: 16px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mp-ship-quote {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #d40000;
    border-radius: 8px;
    overflow: hidden;
}
.mp-ship-quote--free {
    border-left-color: #16a34a;
    background: #f0fdf4;
}

.mp-ship-quote__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #fff5f5;
    border-bottom: 1px solid #ffe0e0;
    font-size: 13px;
    color: #1e293b;
}
.mp-ship-quote--free .mp-ship-quote__head {
    background: #ecfdf5;
    border-bottom-color: #a7f3d0;
}
.mp-ship-quote__head img {
    max-height: 22px;
    vertical-align: middle;
}

.mp-ship-quote__body {
    padding: 12px 16px;
    font-size: 13px;
    color: #166534;
    line-height: 1.5;
}

.mp-ship-quote__error {
    padding: 12px 16px;
    font-size: 13px;
    color: #991b1b;
    background: #fee2e2;
}

.mp-ship-quote__methods {
    display: flex;
    flex-direction: column;
}
.mp-ship-quote__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
}
.mp-ship-quote__row:last-child {
    border-bottom: none;
}
.mp-ship-quote__row:hover {
    background: #fafbfc;
}

.mp-ship-quote__title {
    color: #1e293b;
    flex: 1;
}
.mp-ship-quote__cost {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    color: #16a34a;
    white-space: nowrap;
}

/* Reset-knop */
.mp-ship-reset {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 22px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    color: #64748b;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

/* Actions gecentreerd */
.mp-actions-center {
    justify-content: center;
}

/* Responsive */
@media (max-width: 600px) {
    .mp-ship-form,
    .mp-ship-address,
    .mp-ship-quotes {
        padding: 14px 16px;
    }
    .mp-ship-form-actions { flex-direction: column; }
    .mp-ship-form-actions .mp-btn { width: 100%; justify-content: center; }
    .mp-ship-reset { flex-direction: column; align-items: stretch; }
    .mp-ship-reset .mp-btn { width: 100%; justify-content: center; }
    .mp-ship-quote__row { padding: 8px 12px; font-size: 12.5px; }
}

/* ============================================================
   REVIEW NOTICE
   ============================================================ */
.mp-review-notice {
    padding: 48px 24px;
    text-align: center;
}

.mp-review-notice__icon {
    font-size: 64px;
    margin-bottom: 20px;
    line-height: 1;
    animation: ms5ReviewPop 0.5s cubic-bezier(.34,1.56,.64,1);
}

@keyframes ms5ReviewPop {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.mp-review-notice__text {
    font-size: 16px;
    line-height: 1.7;
    color: #1e293b;
    max-width: 560px;
    margin: 0 auto 28px;
    font-weight: 500;
}

.mp-review-notice__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .mp-review-notice {
        padding: 32px 16px;
    }
    .mp-review-notice__icon {
        font-size: 48px;
    }
    .mp-review-notice__text {
        font-size: 14px;
    }
    .mp-review-notice__actions {
        flex-direction: column;
    }
    .mp-review-notice__actions .mp-btn {
        width: 100%;
        justify-content: center;
    }
}


/* ============================================================
   REVIEWS — overzicht
   ============================================================ */
.mp-reviews {
    padding: 20px 24px;
}

.mp-review {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid #f1f5f9;
}

.mp-review:first-child {
    padding-top: 0;
}

.mp-review:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.mp-review__image {
    display: block;
    align-self: start;
}
.mp-review__image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
    padding: 4px;
}

.mp-review__body {
    min-width: 0;
}

.mp-review__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    margin-bottom: 8px;
}

.mp-review__product {
    font-size: 15px;
    font-weight: 700;
    color: #a80000;
    text-decoration: none;
    flex-basis: 100%;
}
.mp-review__product:hover {
    color: #d40000;
    text-decoration: underline;
}

.mp-review__by {
    font-size: 12px;
    color: #64748b;
    font-style: italic;
}

.mp-review__date {
    font-size: 12px;
    color: #94a3b8;
    margin-left: auto;
}

.mp-review__rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.mp-stars {
    display: inline-flex;
    gap: 2px;
    font-size: 15px;
    line-height: 1;
}

.mp-star {
    color: #cbd5e1;
}

.mp-star.filled {
    color: #f59e0b;
}

.mp-review__rating-text {
    font-size: 12px;
    color: #64748b;
}

.mp-review__text {
    font-size: 13px;
    line-height: 1.7;
    color: #334155;
    margin: 0 0 10px;
}

.mp-review__read-more {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #d40000;
    text-decoration: none;
}
.mp-review__read-more:hover {
    color: #a80000;
    text-decoration: underline;
}

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
    .mp-reviews {
        padding: 16px;
    }
    .mp-review {
        grid-template-columns: 80px 1fr;
        gap: 12px;
        padding: 16px 0;
    }
    .mp-review__product {
        font-size: 14px;
    }
    .mp-review__date {
        flex-basis: 100%;
        margin-left: 0;
    }
    .mp-review__text {
        font-size: 12.5px;
    }
}

/* ============================================================
   TELL A FRIEND — formulier
   ============================================================ */
.mp-tf-form {
    margin: 0;
}

.mp-tf-body {
    padding: 20px 24px;
}

/* ---------- Subtitles ---------- */
.mp-tf-subtitle {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin: 24px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}
.mp-tf-subtitle:first-child {
    margin-top: 0;
}

/* ---------- Grid ---------- */
.mp-tf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

/* ---------- Row ---------- */
.mp-tf-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.mp-tf-row--full {
    grid-column: 1 / -1;
    margin-top: 8px;
}

/* ---------- Label ---------- */
.mp-tf-label {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.mp-tf-required {
    color: #d40000;
    font-weight: 700;
}

/* ---------- Inputs ---------- */
.mp-tf-input,
.mp-tf-textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    color: #1e293b;
    font-family: inherit;
    transition: all .15s;
    box-sizing: border-box;
}

.mp-tf-input:focus,
.mp-tf-textarea:focus {
    outline: none;
    border-color: #d40000;
    box-shadow: 0 0 0 3px rgba(212, 0, 0, 0.1);
}

.mp-tf-input:invalid:not(:placeholder-shown) {
    border-color: #ef4444;
}

.mp-tf-textarea {
    resize: vertical;
    min-height: 130px;
    line-height: 1.6;
}

/* ---------- Hint ---------- */
.mp-tf-hint {
    font-size: 11px;
    color: #94a3b8;
    font-style: italic;
    margin-top: 2px;
}

/* ---------- Actions ---------- */
.mp-tf-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #e2e8f0;
    background: #f9fafb;
    flex-wrap: wrap;
}

/* ---------- Privacy ---------- */
.mp-tf-privacy {
    font-size: 11px;
    color: #64748b;
    line-height: 1.6;
    padding: 16px 24px;
    background: #f9fafb;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-top: 12px;
}

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
    .mp-tf-grid {
        grid-template-columns: 1fr;
    }
    .mp-tf-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .mp-tf-actions .mp-btn {
        width: 100%;
        justify-content: center;
    }
}