/* Diensten- en productbeheer in de dashboard-vormtaal. */
.page-services,
.page-products,
.page-offer {
    --catalog-ink: var(--os-color-ink);
    --catalog-muted: #8b93a7;
    --catalog-line: var(--os-color-border);
    --catalog-brand: #5547ed;
    --catalog-canvas: var(--os-color-canvas);
}

/* Diensten v2: dezelfde rustige werkplek-, dossier- en modalpatronen als Klanten. */
.page-services .services-index-workspace,
.page-services .service-detail-workspace {
    width: 100%;
    max-width: none;
}

.page-services .services-index-hero {
    min-height: 150px;
    margin: 0;
    padding: 10px 6px 28px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.page-services .services-index-hero h1 {
    margin: 9px 0 5px;
    font-size: clamp(34px, 3.3vw, 48px);
}

.page-services .services-index-hero p {
    max-width: 760px;
    font-size: 16px;
}

.page-services .services-directory {
    min-height: calc(100vh - 320px);
    overflow: hidden;
    border: 1px solid var(--catalog-line);
    border-radius: 18px;
    background: var(--os-color-surface);
}

.page-services .services-directory-header {
    display: grid;
    grid-template-columns: minmax(280px, 1.35fr) minmax(190px, .65fr) auto;
    gap: 12px;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--catalog-line);
}

.page-services .services-directory-header > .catalog-directory-controls {
    display: contents;
}

.page-services .services-search,
.page-services .services-select-filter {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 15px;
    border: 1px solid var(--catalog-line);
    border-radius: 13px;
    background: var(--os-color-surface);
    color: #7d879c;
}

.page-services .services-search input,
.page-services .services-select-filter select {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--catalog-ink);
    font: inherit;
}

.page-services .services-select-filter > svg:last-child {
    margin-left: auto;
}

.page-services .services-filter-tabs {
    min-height: 48px;
    white-space: nowrap;
}

.page-services .services-index-table {
    min-height: 360px;
    padding: 0 20px;
}

.page-services .service-list-grid {
    grid-template-columns: minmax(230px, 1.5fr) minmax(130px, .7fr) 92px 82px minmax(130px, .7fr) 112px 94px 48px;
}

.page-services .services-index-table .catalog-list-head {
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-bottom: 1px solid var(--catalog-line);
    border-radius: 0;
}

.page-services .services-index-table .catalog-list-head button {
    display: flex;
    align-items: center;
    gap: 5px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.page-services .service-directory-row {
    min-height: 78px;
    margin: 0;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--catalog-line);
    border-radius: 0;
    box-shadow: none;
}

.page-services .service-directory-row:hover {
    border-color: var(--catalog-line);
    background: #fafaff;
    transform: none;
}

.page-services .service-row-identity {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    color: inherit;
    text-decoration: none;
}

.page-services .service-row-action {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #66718a;
    text-decoration: none;
}

.page-services .service-row-action:hover {
    background: #efedff;
    color: #5745f5;
}

.page-services .services-index-pagination {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-top: 1px solid var(--catalog-line);
    color: #6e7890;
    font-size: 13px;
}

.page-services .services-index-pagination > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-services .services-index-pagination label {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--catalog-line);
    border-radius: 10px;
}

.page-services .services-index-pagination select {
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--catalog-ink);
}

.page-services .services-index-pagination button {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--catalog-line);
    border-radius: 10px;
    background: var(--os-color-surface);
    color: #65708a;
}

.page-services .services-index-pagination button:disabled {
    opacity: .42;
}

body.service-modal-open {
    overflow: hidden;
}

.service-create-modal,
.service-edit-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 24px;
}

.service-create-modal[hidden],
.service-edit-modal[hidden] {
    display: none;
}

.service-modal-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(17, 24, 50, .56);
    backdrop-filter: blur(5px);
}

.service-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(920px, calc(100vw - 48px));
    height: min(800px, calc(100vh - 48px));
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    border: 1px solid var(--catalog-line);
    border-radius: 22px;
    background: var(--os-color-surface);
    box-shadow: 0 30px 90px rgba(25, 31, 58, .24);
}

.service-create-dialog {
    grid-template-rows: auto auto minmax(0, 1fr);
}

.service-modal-header {
    min-height: 82px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 40px;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--catalog-line);
}

.service-modal-header > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #efedff;
    color: #5a46f5;
}

.service-modal-header h2,
.service-modal-header p {
    margin: 0;
}

.service-modal-header h2 {
    color: var(--catalog-ink);
    font-size: 20px;
}

.service-modal-header p {
    margin-top: 3px;
    color: #778198;
    font-size: 13px;
}

.service-modal-header > button {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #69738a;
    cursor: pointer;
}

.service-modal-header > button:hover {
    background: #f1f3f7;
}

.service-wizard-progress {
    min-height: 60px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 0 24px;
    border-bottom: 1px solid var(--catalog-line);
    background: #fafbfe;
}

.service-wizard-progress button {
    position: relative;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 15px 8px;
    border: 0;
    background: transparent;
    color: #a2a9b8;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.service-wizard-progress button::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    border-radius: 3px 3px 0 0;
    background: transparent;
}

.service-wizard-progress button > span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    flex: 0 0 28px;
    border: 1px solid #d6dce8;
    border-radius: 50%;
    background: var(--os-color-surface);
    color: #9aa3b5;
    font-size: 11px;
    font-weight: 800;
}

.service-wizard-progress button.is-active {
    color: var(--catalog-ink);
}

.service-wizard-progress button.is-active::after {
    background: #5a46f5;
}

.service-wizard-progress button.is-active > span {
    border-color: #5a46f5;
    background: #5a46f5;
    color: #fff;
}

.service-wizard-progress button.is-complete > span {
    border-color: #cec8ff;
    color: #5a46f5;
}

.service-wizard-progress em {
    overflow: hidden;
    font-size: 11px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.service-wizard-form,
.service-edit-dialog form {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "error"
        "body"
        "footer";
    overflow: hidden;
}

.service-modal-error {
    grid-area: error;
    margin: 14px 20px 0;
}

.service-wizard-body,
.service-edit-body {
    grid-area: body;
    min-height: 0;
    overflow: auto;
    padding: 22px 24px 28px;
}

.service-wizard-intro {
    margin-bottom: 20px;
}

.service-wizard-intro > span {
    color: #5a46f5;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.service-wizard-intro h3,
.service-wizard-intro p {
    margin: 0;
}

.service-wizard-intro h3 {
    margin-top: 5px;
    color: var(--catalog-ink);
    font-size: 24px;
}

.service-wizard-intro p {
    margin-top: 5px;
    color: #747e94;
    font-size: 14px;
}

.service-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.service-modal-grid > label,
.service-edit-body .service-modal-grid > label,
.service-icon-field {
    display: grid;
    align-content: start;
    gap: 7px;
}

.service-modal-grid > label > span:first-child,
.service-icon-field > label {
    color: var(--catalog-ink);
    font-size: 13px;
    font-weight: 800;
}

.service-modal-grid .span-2,
.service-detail-data-grid .span-2,
.service-facts-grid .span-2 {
    grid-column: 1 / -1;
}

.service-modal-grid textarea {
    min-height: 104px;
    resize: vertical;
}

.service-wizard-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.service-wizard-choices.service-team-only {
    grid-template-columns: minmax(0, 1fr);
}

.service-wizard-choices.service-team-only > section {
    padding: 0;
    border: 0;
    border-radius: 0;
}

.service-team-only .service-choice-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
}

.service-team-only .service-choice-grid > label {
    grid-template-columns: 40px minmax(0, 1fr) 22px;
    padding: 9px 12px;
    border: 0;
    background: #f8f9fc;
}

.service-team-only .service-choice-grid > label > input {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    margin: 0;
}

.service-team-only .service-choice-grid > label > .service-employee-avatar {
    grid-column: 1;
    grid-row: 1;
}

.service-team-only .service-choice-grid > label > span:last-child {
    grid-column: 2;
    grid-row: 1;
}

.service-wizard-choices > section {
    padding: 16px;
    border: 1px solid var(--catalog-line);
    border-radius: 15px;
}

.service-wizard-choices h4,
.service-wizard-choices p {
    margin: 0;
}

.service-wizard-choices h4 {
    color: var(--catalog-ink);
    font-size: 15px;
}

.service-wizard-choices > section > p {
    margin-top: 4px;
    color: #7b859b;
    font-size: 12px;
}

.service-choice-grid {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.service-choice-grid > label {
    min-height: 56px;
    display: grid;
    grid-template-columns: 20px 36px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--catalog-line);
    border-radius: 11px;
    cursor: pointer;
}

.service-choice-grid > label:has(input:checked) {
    border-color: #8477ff;
    background: #f6f4ff;
}

.service-choice-grid > label > span:nth-last-child(1) strong,
.service-choice-grid > label > span:nth-last-child(1) small {
    display: block;
}

.service-choice-grid strong {
    color: var(--catalog-ink);
    font-size: 13px;
}

.service-choice-grid small {
    margin-top: 2px;
    color: #7c869b;
    font-size: 11px;
}

.service-wizard-review {
    display: grid;
    gap: 9px;
}

.service-wizard-review section {
    min-height: 72px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--catalog-line);
    border-radius: 13px;
}

.service-wizard-review section > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #efedff;
    color: #5a46f5;
}

.service-wizard-review section > span.is-green {
    background: #e4f8ef;
    color: #129267;
}

.service-wizard-review section > span.is-orange {
    background: #fff0df;
    color: #dc741b;
}

.service-wizard-review small,
.service-wizard-review strong,
.service-wizard-review p {
    display: block;
    margin: 0;
}

.service-wizard-review small,
.service-wizard-review p {
    color: #7b859b;
    font-size: 11px;
}

.service-wizard-review strong {
    margin: 2px 0;
    color: var(--catalog-ink);
    font-size: 14px;
}

.service-wizard-review button {
    border: 0;
    background: transparent;
    color: #5a46f5;
    font-weight: 800;
    cursor: pointer;
}

.service-visibility-options {
    display: grid;
    gap: 8px;
    margin-top: 16px;
    padding: 8px 14px;
    border-radius: 14px;
    background: #f7f7ff;
}

.service-modal-footer {
    grid-area: footer;
    position: relative;
    z-index: 4;
    min-height: 74px;
    flex: 0 0 74px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px;
    border-top: 1px solid var(--catalog-line);
    background: var(--os-color-surface);
}

/* Dienstenoverzicht vult de werkruimte; alleen de inhoud zelf bepaalt de inspringing. */
.page-services .main.services-index-main {
    width: 100% !important;
    max-width: none !important;
    min-height: calc(100dvh - 68px) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--os-color-surface) !important;
    box-sizing: border-box;
}

.page-services .services-index-workspace {
    min-height: calc(100dvh - 68px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    background: var(--os-color-surface);
}

.page-services .services-workspace-tabs {
    min-height: 58px;
    display: flex;
    align-items: end;
    gap: 38px;
    padding: 0 32px;
    border-bottom: 1px solid var(--catalog-line);
    background: var(--os-color-surface);
}

.page-services .services-workspace-tabs a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 58px;
    padding: 5px 0 0;
    color: #66718a;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
}

.page-services .services-workspace-tabs a.active {
    color: var(--catalog-brand);
}

.page-services .services-workspace-tabs a.active::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--catalog-brand);
}

.page-services .services-workspace-panel {
    min-height: 0;
    min-width: 0;
}

.page-services .services-workspace-panel[hidden] {
    display: none;
}

.page-services .services-workspace-panel-diensten {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
}

.page-services .services-workspace-panel-categorieen {
    padding: 24px 32px 32px;
    background: #f8f9fc;
}

.page-services .services-index-hero {
    min-height: 176px !important;
    margin: 0 !important;
    padding: 30px 32px 28px !important;
    border-bottom: 1px solid var(--catalog-line) !important;
    background: var(--os-color-surface) !important;
    box-sizing: border-box;
}

.page-services .services-directory {
    min-height: 0;
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(360px, 1fr) auto;
    margin: 0;
    padding: 0 32px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: var(--os-color-surface);
}

.page-services .services-directory-header {
    min-height: 92px;
    grid-template-columns: minmax(280px, 1fr) 250px minmax(390px, auto);
    gap: 14px;
    padding: 18px 0;
    border-bottom: 0;
}

.page-services .services-search,
.page-services .services-select-filter {
    width: 100%;
    min-height: 48px;
    border-color: #dde2ea;
    border-radius: 11px;
}

.page-services .services-filter-tabs {
    justify-self: end;
    min-height: 48px;
    padding: 3px;
    border: 1px solid #e3e6ed;
    border-radius: 11px;
    background: var(--os-color-surface);
    box-shadow: none;
}

.page-services .services-filter-tabs button {
    min-width: 92px;
    min-height: 40px;
    justify-content: center;
    border-radius: 9px;
    color: #3f485d;
    font-size: 12px;
}

.page-services .services-filter-tabs button.active {
    background: var(--catalog-brand);
    color: #fff;
    box-shadow: none;
}

.page-services .services-index-table {
    min-height: 0;
    display: grid;
    grid-template-rows: 58px minmax(300px, 1fr);
    padding: 0;
    border-top: 1px solid #edf0f4;
    border-bottom: 1px solid #edf0f4;
}

.page-services .services-index-table .catalog-list-head {
    min-height: 58px;
    padding: 0 12px;
    background: #fbfcfe;
    color: #202a42;
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
}

.page-services .services-list {
    min-height: 0;
    overflow-y: auto;
}

.page-services .service-directory-row {
    min-height: 76px;
    padding: 0 12px;
}

.page-services .services-index-pagination {
    min-height: 84px;
    padding: 0;
    border-top: 0;
}

.page-services .services-index-alert {
    margin: 20px 32px 0;
}

/* Dienstdetail sluit net als het klantdossier direct op de werkruimte aan. */
.page-services .main.service-detail-main-shell {
    width: 100% !important;
    max-width: none !important;
    min-height: calc(100dvh - 68px) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #f8f9fc !important;
    box-sizing: border-box;
}

.page-services .service-detail-workspace {
    min-height: calc(100dvh - 68px);
    padding-bottom: 28px;
    background: #f8f9fc;
}

.page-services .service-detail-top {
    margin: 0 !important;
    padding: 0 32px !important;
}

.page-services .service-detail-back {
    margin-top: 24px;
}

.page-services .service-detail-workspace > .profile-alert,
.page-services .service-detail-panels {
    margin: 18px 32px 0;
}

.service-modal-footer > span {
    margin: 0 auto;
    color: #7b859a;
    font-size: 12px;
}

.service-modal-footer .btn:last-child {
    margin-left: auto;
}

.service-detail-top {
    margin: 0 -26px 18px;
    padding: 0 26px;
    border-bottom: 1px solid var(--catalog-line);
    background: var(--os-color-surface);
}

.service-detail-back {
    width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 7px 0 2px;
    padding: 8px 11px;
    border-radius: 9px;
    background: #f5f6fa;
    color: #59647d;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.page-services .service-detail-hero {
    min-height: 110px;
    margin: 0;
    padding: 12px 0 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.page-services .service-detail-name h1 {
    font-size: clamp(32px, 3vw, 44px);
}

.page-services .service-detail-name {
    gap: 12px;
}

.service-detail-tabs {
    display: flex;
    gap: 28px;
    overflow-x: auto;
    scrollbar-width: none;
}

.service-detail-tabs a {
    position: relative;
    padding: 13px 1px 15px;
    color: #66718a;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.service-detail-tabs a.active {
    color: #5945f5;
}

.service-detail-tabs a.active::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: #5945f5;
}

.service-detail-panel[hidden] {
    display: none;
}

.service-detail-panel {
    outline: none;
}

.page-services .service-profile-metrics {
    margin-bottom: 14px;
}

.service-overview-grid .service-detail-main,
.service-overview-grid .service-detail-side {
    display: grid;
    gap: 14px;
}

.service-card-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 8px 11px;
    border: 1px solid var(--catalog-line);
    border-radius: 9px;
    color: #5945f5;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.service-card-action.icon-only {
    width: 34px;
    height: 34px;
    justify-content: center;
    padding: 0;
}

.service-overview-copy {
    padding: 18px;
}

.service-overview-copy > p {
    margin: 0 0 16px;
    color: #5f6a82;
    font-size: 14px;
    line-height: 1.65;
}

.service-overview-copy dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.service-overview-copy dl > div,
.service-detail-data-grid > div {
    padding: 13px;
    border-radius: 11px;
    background: #f7f8fb;
}

.service-overview-copy dt,
.service-detail-data-grid small {
    display: block;
    margin-bottom: 4px;
    color: #7c869b;
    font-size: 11px;
}

.service-inline-visibility {
    margin: 0;
    padding: 4px 16px;
}

.service-visibility-save-state {
    min-height: 28px;
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 7px 2px 4px;
    color: #7a8499;
    font-size: 10px;
}

.service-visibility-save-state > span {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #aeb5c3;
}

.service-visibility-save-state.is-saving > span {
    border: 2px solid #d8d4ff;
    border-top-color: #5a46f5;
    background: transparent;
    animation: service-visibility-spin .65s linear infinite;
}

.service-visibility-save-state.is-saved {
    color: #16825c;
}

.service-visibility-save-state.is-saved > span {
    background: #20a36d;
}

.service-visibility-save-state.is-error {
    color: #b42318;
}

.service-visibility-save-state.is-error > span {
    background: #d92d20;
}

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

.service-live-toggle {
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 2px;
    border-bottom: 1px solid #eef0f4;
    cursor: pointer;
}

.service-live-toggle:last-child {
    border-bottom: 0;
}

.service-live-toggle > span:first-child,
.service-live-toggle strong,
.service-live-toggle small {
    display: block;
}

.service-live-toggle strong {
    color: #343c4f;
    font-size: 13px;
}

.service-live-toggle small {
    margin-top: 3px;
    color: #7f889b;
    font-size: 10px;
    line-height: 1.35;
}

.service-live-switch {
    position: relative;
    width: 50px;
    height: 28px;
    flex: 0 0 50px;
}

.service-live-switch input {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.service-live-switch i {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #d3d8e2;
    transition: background .18s ease;
}

.service-live-switch i::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(19, 27, 47, .18);
    transition: transform .18s ease;
}

.service-live-switch input:checked + i {
    background: #5945f5;
}

.service-live-switch input:checked + i::after {
    transform: translateX(22px);
}

.service-live-switch input:focus-visible + i {
    outline: 3px solid rgba(89, 69, 245, .22);
    outline-offset: 2px;
}

.service-live-switch input:disabled {
    cursor: not-allowed;
}

.service-live-switch input:disabled + i {
    opacity: .55;
}

.service-overview-copy dd,
.service-detail-data-grid strong {
    margin: 0;
    color: var(--catalog-ink);
    font-size: 13px;
}

.service-appointment-list > a {
    min-height: 64px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto 12px;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--catalog-line);
    color: inherit;
    text-decoration: none;
}

.service-appointment-list > a:last-child {
    border-bottom: 0;
}

.service-appointment-list > a > span:first-child,
.service-history-list > :is(a, article) > span {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #efedff;
    color: #5945f5;
}

.service-appointment-list strong,
.service-appointment-list small {
    display: block;
}

.service-appointment-list strong {
    color: var(--catalog-ink);
    font-size: 13px;
}

.service-appointment-list small {
    margin-top: 3px;
    color: #7a849a;
    font-size: 11px;
}

.service-appointment-list em {
    padding: 5px 8px;
    border-radius: 999px;
    background: #f0f2f6;
    color: #657088;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
}

.service-appointment-list-full > a {
    grid-template-columns: 36px minmax(0, 1fr) auto auto 12px;
}

.service-relation-list > div {
    min-height: 58px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 9px 15px;
    border-bottom: 1px solid var(--catalog-line);
}

.service-relation-list > div:last-child {
    border-bottom: 0;
}

.service-panel-card {
    min-height: 420px;
}

.service-detail-data-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 18px;
}

.service-panel-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.service-history-list > :is(a, article) {
    min-height: 66px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 14px;
    align-items: center;
    gap: 11px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--catalog-line);
    color: inherit;
    text-decoration: none;
}

.service-history-list strong,
.service-history-list small {
    display: block;
}

.service-history-list strong {
    color: var(--catalog-ink);
    font-size: 13px;
}

.service-history-list small {
    margin-top: 3px;
    color: #7a849a;
    font-size: 11px;
}

.service-edit-dialog {
    width: min(820px, calc(100vw - 48px));
    height: auto;
    min-height: 0;
    max-height: calc(100dvh - 48px);
    display: flex;
    flex-direction: column;
}

.service-edit-dialog .service-modal-header {
    flex: 0 0 auto;
}

.service-edit-dialog form {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
}

.service-edit-dialog .service-edit-body {
    flex: 0 1 auto;
}

.service-edit-dialog .service-modal-footer {
    min-height: 64px;
    flex-basis: 64px;
    padding: 8px 18px;
}

.service-edit-choices {
    align-items: start;
}

html[data-theme="dark"] .page-services :is(.services-directory, .service-modal-dialog, .service-detail-top, .service-profile-card, .service-profile-metrics article) {
    background: var(--os-color-surface);
    border-color: var(--os-color-border);
}

html[data-theme="dark"] .page-services :is(.service-directory-row:hover, .service-overview-copy dl > div, .service-detail-data-grid > div) {
    background: var(--os-color-surface-strong);
}

html[data-theme="dark"] .page-services :is(.services-search, .services-select-filter, .service-choice-grid > label, .service-wizard-review section, .service-wizard-choices > section) {
    border-color: var(--os-color-border);
    background: var(--os-color-surface);
}

html[data-theme="dark"] .page-services .service-choice-grid > label:has(input:checked),
html[data-theme="dark"] .page-services .service-visibility-options {
    background: var(--os-color-primary-soft);
}

@media (max-width: 1180px) {
    .page-services .services-directory-header {
        grid-template-columns: 1fr 220px;
    }
    .page-services .services-filter-tabs {
        grid-column: 1 / -1;
        width: max-content;
        justify-self: end;
    }
    .page-services .service-list-grid {
        grid-template-columns: minmax(220px, 1.4fr) minmax(120px, .7fr) 90px 76px minmax(120px, .7fr) 92px 46px;
    }
    .page-services .service-list-grid > :nth-child(6) {
        display: none;
    }
}

@media (max-width: 900px) {
    .page-services .service-list-grid {
        grid-template-columns: minmax(210px, 1.4fr) minmax(120px, .7fr) 90px 84px 46px;
    }
    .page-services .service-list-grid > :nth-child(4),
    .page-services .service-list-grid > :nth-child(5),
    .page-services .service-list-grid > :nth-child(6) {
        display: none;
    }
    .page-services .service-detail-hero {
        align-items: stretch;
        flex-direction: column;
    }
    .service-detail-tabs {
        gap: 20px;
    }
    .service-overview-grid.service-detail-layout,
    .service-panel-columns {
        grid-template-columns: 1fr;
    }
    .service-wizard-progress em {
        display: none;
    }
}

@media (max-width: 720px) {
    .page-services .services-workspace-tabs {
        min-height: 52px;
        gap: 28px;
        padding-inline: 16px;
    }
    .page-services .services-workspace-tabs a {
        min-height: 52px;
        font-size: 14px;
    }
    .page-services .services-workspace-panel-categorieen {
        padding: 14px;
    }
    .page-services .services-index-hero {
        align-items: stretch;
        flex-direction: column;
        padding-bottom: 18px;
    }
    .page-services .services-hero-actions {
        width: 100%;
    }
    .page-services .services-hero-actions .btn {
        flex: 1;
    }
    .page-services .services-directory-header {
        grid-template-columns: 1fr;
        padding: 14px;
    }
    .page-services .services-filter-tabs {
        grid-column: auto;
        width: 100%;
        overflow-x: auto;
    }
    .page-services .services-index-table {
        padding: 0 14px;
        grid-template-rows: minmax(300px, 1fr);
    }
    .page-services .services-index-table .catalog-list-head {
        display: none;
    }
    .page-services .service-directory-row.service-list-grid {
        grid-template-columns: minmax(0, 1fr) 44px;
        padding: 12px 0;
    }
    .page-services .service-directory-row > :not(.service-row-identity):not(.service-row-action) {
        display: none;
    }
    .page-services .services-index-pagination {
        padding-inline: 14px;
        flex-wrap: wrap;
        gap: 12px;
    }
    .service-create-modal,
    .service-edit-modal {
        padding: 0;
    }
    .service-modal-dialog,
    .service-edit-dialog {
        width: 100%;
        height: 100%;
        max-height: none;
        border: 0;
        border-radius: 0;
    }
    .service-edit-dialog form {
        flex: 1 1 auto;
    }
    .service-modal-header {
        min-height: 72px;
        grid-template-columns: minmax(0, 1fr) 38px;
        padding: 12px 14px;
    }
    .service-modal-header > span {
        display: none;
    }
    .service-wizard-progress {
        min-height: 70px;
        padding-inline: 8px;
    }
    .service-wizard-progress button {
        justify-content: center;
        gap: 0;
        padding: 9px 4px;
    }
    .service-wizard-progress button > span {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }
    .service-wizard-body,
    .service-edit-body {
        padding: 18px 14px 22px;
    }
    .service-modal-grid,
    .service-wizard-choices,
    .service-team-only .service-choice-grid,
    .service-detail-data-grid,
    .service-overview-copy dl {
        grid-template-columns: 1fr;
    }
    .service-modal-grid .span-2,
    .service-detail-data-grid .span-2,
    .service-facts-grid .span-2 {
        grid-column: auto;
    }
    .service-modal-footer > span {
        display: none;
    }
    .service-detail-top {
        margin: 0 !important;
        padding-inline: 16px !important;
    }
    .page-services .service-detail-back {
        margin-top: 16px;
    }
    .page-services .service-detail-workspace > .profile-alert,
    .page-services .service-detail-panels {
        margin-inline: 14px;
    }
    .service-detail-actions .btn {
        flex: 1 1 auto;
    }
    .service-appointment-list-full > a {
        grid-template-columns: 36px minmax(0, 1fr) 12px;
    }
    .service-appointment-list-full > a > strong,
    .service-appointment-list-full > a > em {
        display: none;
    }
}

.page-services .main.main-uniform-page,
.page-products .main.main-uniform-page,
.page-offer .main.main-uniform-page {
    width: 100%;
    max-width: 1500px;
    padding: 30px 38px 56px;
}

.page-services [hidden],
.page-products [hidden],
.page-offer [hidden] { display: none !important; }

/* Aanbodhub: een live doorsnede van de diensten- en productcatalogus. */
.offer-heading { margin-bottom: 18px !important; }
.page-company-app .main.main-uniform-page > .offer-heading > .offer-header-actions {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin-top: 12px;
}
.offer-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
}
.offer-header-actions .btn { min-height: 44px; padding-inline: 17px; border-radius: 12px; box-shadow: none; }

.offer-catalog-status {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
    padding: 15px 17px;
    border: 1px solid var(--catalog-line);
    border-radius: 18px;
    background: var(--os-color-surface);
}
.offer-status-lead {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 13px;
}
.offer-status-lead > span {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    border-radius: 13px;
    background: #efedff;
    color: #5b4df0;
}
.offer-status-lead small,
.offer-status-lead strong,
.offer-status-lead p { display: block; margin: 0; }
.offer-status-lead small {
    margin-bottom: 2px;
    color: #6457ef;
    font-size: 10.5px;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.offer-status-lead strong { color: var(--catalog-ink); font-size: 15px; letter-spacing: -.02em; }
.offer-status-lead p { margin-top: 3px; color: #8a92a4; font-size: 12px; }
.offer-status-metrics {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid #e9ebf1;
    border-radius: 13px;
    background: #e9ebf1;
}
.offer-status-metrics > span {
    min-width: 112px;
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 11px 13px;
    background: #fafbfc;
}
.offer-status-metrics strong { color: #20283b; font-size: 18px; }
.offer-status-metrics small { color: #8c94a5; font-size: 10.5px; white-space: nowrap; }
.offer-status-metrics .needs-attention strong,
.offer-status-metrics .needs-attention small { color: #cb6b19; }

.offer-workspace-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.offer-workspace {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--catalog-line);
    border-radius: 21px;
    background: var(--os-color-surface);
}
.offer-workspace-header {
    position: relative;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto;
    align-items: start;
    gap: 13px;
    padding: 20px;
    border-bottom: 1px solid #eaecf2;
    background: #faf9ff;
}
.offer-products-card .offer-workspace-header { background: #f7faff; }
.offer-workspace-icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #ebe8ff;
    color: #5b4df0;
    font-size: 17px;
}
.offer-products-card .offer-workspace-icon { background: #e7f1ff; color: #3478db; }
.offer-workspace-header small {
    display: block;
    margin: 1px 0 3px;
    color: #6255ec;
    font-size: 10.5px;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.offer-products-card .offer-workspace-header small { color: #3478db; }
.offer-workspace-header h2 { margin: 0; color: var(--catalog-ink); font-size: 24px; letter-spacing: -.04em; }
.offer-workspace-header p { max-width: 440px; margin: 5px 0 0; color: #7f889a; font-size: 12px; line-height: 1.5; }
.offer-workspace-count {
    align-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid #dfdcff;
    border-radius: 999px;
    color: #5f53df;
    background: var(--os-color-surface);
    font-size: 10.5px;
    font-weight: 800;
    white-space: nowrap;
}
.offer-products-card .offer-workspace-count { border-color: #d8e7fb; color: #3478db; }

.offer-preview-panel { padding: 16px 18px 0; }
.offer-preview-panel > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
    padding-inline: 2px;
}
.offer-preview-panel > header strong { color: #333c50; font-size: 12px; }
.offer-preview-panel > header span { color: #8b93a5; font-size: 10.5px; }
.offer-preview-panel > header .needs-attention { color: #cb6b19; font-weight: 800; }
.offer-preview-list {
    overflow: hidden;
    border: 1px solid #e8eaf0;
    border-radius: 15px;
}
.offer-preview-row {
    min-width: 0;
    min-height: 72px;
    display: grid;
    grid-template-columns: 34px minmax(110px, 1fr) auto auto 9px;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--os-color-border);
    color: inherit;
    background: var(--os-color-surface);
    text-decoration: none;
    transition: background .15s ease;
}
.offer-preview-row:last-child { border-bottom: 0; }
.offer-preview-row:hover { background: #fafbff; }
.offer-preview-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #f0eeff;
    color: #6255ec;
    font-size: 10px;
}
.offer-products-card .offer-preview-icon { background: #edf5ff; color: #3478db; }
.offer-preview-identity,
.offer-preview-value { min-width: 0; }
.offer-preview-identity strong,
.offer-preview-identity small,
.offer-preview-value strong,
.offer-preview-value small { display: block; }
.offer-preview-identity strong {
    overflow: hidden;
    color: #283145;
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.offer-preview-identity small,
.offer-preview-value small { margin-top: 2px; color: #969dae; font-size: 10.5px; }
.offer-preview-value { min-width: 67px; text-align: right; }
.offer-preview-value strong { color: #4a5365; font-size: 12px; }
.offer-preview-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 7px;
    border-radius: 999px;
    color: var(--os-color-text-secondary);
    background: #f1f3f6;
    font-size: 9.5px;
    font-weight: 800;
    white-space: nowrap;
}
.offer-preview-status i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.offer-preview-status.is-ready { color: #168259; background: #e7f7ef; }
.offer-preview-status.is-low { color: #c76a1b; background: #fff0df; }
.offer-preview-arrow { color: #aab0bd; font-size: 9px; }
.offer-preview-empty {
    min-height: 182px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 22px;
    color: #8c94a5;
    text-align: left;
}
.offer-preview-empty > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: #f0eeff; color: #6255ec; }
.offer-preview-empty strong { display: block; color: #343d50; font-size: 13px; }
.offer-preview-empty p { margin: 3px 0 0; font-size: 11px; }

.offer-workspace-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px 18px;
}
.offer-workspace-actions .btn { min-height: 41px; padding-inline: 15px; border-radius: 12px; font-size: 12px; }
.offer-secondary-action { display: inline-flex; align-items: center; gap: 6px; color: #5f53e9; font-size: 11.5px; font-weight: 800; }
.offer-products-card .offer-secondary-action { color: #3478db; }
.offer-workspace.is-unavailable { background: #fafbfc; }
.offer-workspace-locked { min-height: 260px; display: flex; align-items: center; justify-content: center; gap: 11px; padding: 24px; color: #8e96a7; }
.offer-workspace-locked > i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: #eef0f4; }
.offer-workspace-locked strong { display: block; color: #4b5467; font-size: 13px; }
.offer-workspace-locked p { margin: 3px 0 0; font-size: 11px; }

.offer-context-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    margin-top: 18px;
    padding: 14px 18px;
    border: 1px solid var(--catalog-line);
    border-radius: 17px;
    background: var(--os-color-surface);
}
.offer-context-strip > div { min-width: 0; display: flex; align-items: center; gap: 11px; }
.offer-context-strip > div > span { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 36px; border-radius: 11px; }
.offer-context-strip .is-violet { color: #5e51e8; background: #eeecff; }
.offer-context-strip .is-blue { color: #3478db; background: #e8f2ff; }
.offer-context-strip p { margin: 0; color: #8a92a3; font-size: 11px; line-height: 1.45; }
.offer-context-strip strong { display: block; margin-bottom: 2px; color: #343d50; font-size: 12.5px; }
.offer-context-strip > i { color: #bec3ce; }

.catalog-heading { margin-bottom: 20px !important; }
.main-uniform-page > .catalog-heading > .catalog-hero-actions {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin-top: 3px;
}
.catalog-heading .catalog-hero-actions .btn { min-height: 44px; padding-inline: 18px; border-radius: 12px; box-shadow: none; }

.catalog-hero,
.catalog-subpage-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 30px;
}

.catalog-kicker,
.catalog-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: #5b50ec;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.catalog-back-link { letter-spacing: .04em; text-transform: none; }
.catalog-kicker i,
.catalog-back-link i { font-size: 10px; }

.catalog-hero h1,
.catalog-subpage-hero h1 {
    margin: 0;
    color: var(--catalog-ink);
    font-size: clamp(34px, 3vw, 48px);
    font-weight: 820;
    letter-spacing: -.055em;
    line-height: 1.02;
}

.catalog-hero p,
.catalog-subpage-hero p {
    max-width: 700px;
    margin: 12px 0 0;
    color: var(--catalog-muted);
    font-size: 15px;
    line-height: 1.55;
}

.catalog-hero-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.catalog-hero-actions .btn,
.catalog-subpage-hero > .btn { min-height: 50px; padding-inline: 19px; border-radius: 14px; font-size: 13px; }

.catalog-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.catalog-metric-grid article {
    min-width: 0;
    min-height: 112px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 20px 23px;
    border: 1px solid var(--catalog-line);
    border-radius: 20px;
    background: var(--os-color-surface);
}

.catalog-metric-icon {
    width: 49px;
    height: 49px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    font-size: 16px;
}

.catalog-metric-icon.violet { background: #eeeaff; color: #6a55f4; }
.catalog-metric-icon.green { background: #e4f8ef; color: #1aa779; }
.catalog-metric-icon.orange { background: #fff1df; color: #ed7e1e; }
.catalog-metric-icon.blue { background: #e8f2ff; color: #3478db; }
.catalog-metric-grid strong,
.catalog-metric-grid small { display: block; }
.catalog-metric-grid strong { color: var(--catalog-ink); font-size: 27px; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.catalog-metric-grid small { margin-top: 4px; color: #969eaf; font-size: 11px; }

.page-services .catalog-table-panel,
.page-products .catalog-table-panel,
.page-products .catalog-category-panel {
    margin-bottom: 22px;
    overflow: visible;
    border-color: var(--catalog-line);
    border-radius: 22px;
    box-shadow: none;
}

.catalog-table-panel .table-wrap { overflow-x: auto; border-radius: 0 0 22px 22px; }
.catalog-table-toolbar {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--os-color-border);
    background: var(--os-color-surface);
    border-radius: 22px 22px 0 0;
}

.catalog-table-toolbar > div { display: grid !important; gap: 3px !important; }
.catalog-table-toolbar > div strong { color: var(--catalog-ink); font-size: 17px; letter-spacing: -.02em; }
.catalog-table-toolbar > div span { color: var(--catalog-muted); font-size: 11px; }
.catalog-search {
    width: min(350px, 34vw);
    height: 42px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    border: 1px solid #e1e4ea;
    border-radius: 12px;
    background: #f9fafc;
    color: #9aa1b2;
}
.catalog-search:focus-within { border-color: #aaa3f8; box-shadow: 0 0 0 3px rgba(85,71,237,.1); }
.catalog-search .input { width: 100%; height: auto; padding: 0; border: 0; background: transparent; box-shadow: none !important; }

.catalog-table-name { min-width: 220px; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 11px; }
.catalog-table-name > span {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #eeedff;
    color: #6256ec;
}
.page-products .catalog-table-name > span { background: #e8f2ff; color: #3478db; }
.catalog-table-name > div { min-width: 0; }
.catalog-table-name a,
.catalog-table-name strong { display: block; color: var(--catalog-ink); font-size: 13px; }
.catalog-table-name small { display: block; max-width: 270px; margin-top: 3px; overflow: hidden; color: #969eaf; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.catalog-table-panel th { height: 46px; background: #fafbfe; color: #9098aa; font-size: 9px; letter-spacing: .08em; }
.catalog-table-panel td { height: 70px; color: #4e586c; font-size: 12px; }
.catalog-table-panel .table-actions { white-space: nowrap; }
.catalog-empty { min-height: 250px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 36px; text-align: center; }
.catalog-empty .empty-icon { width: 54px; height: 54px; display: grid; place-items: center; margin: 0 0 5px; border-radius: 16px; background: #eeedff; color: #6256ec; font-size: 19px; }
.catalog-empty p { margin: 0 0 10px; color: var(--catalog-muted); }

/* Dienst- en productcategorieën */
.catalog-category-modal { width: min(920px, calc(100% - 32px)); border-radius: 22px; }
.catalog-category-modal > .dialog-shell > header > div:first-child { display: flex; align-items: center; gap: 12px; }
.catalog-category-modal > .dialog-shell > header > div:first-child > div { min-width: 0; }
.catalog-modal-icon { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 44px; border-radius: 13px; background: #eeedff; color: #6256ec; }
.catalog-category-modal .modal-body { padding: 22px; }
.catalog-category-modal .inline-category-create { padding: 16px; border: 1px solid #e5e7ed; border-radius: 15px; background: #fafbfe; }
.catalog-category-modal .category-list { gap: 10px; }
.catalog-category-modal .category-row { padding: 12px; border-color: #e5e7ed; border-radius: 14px; background: var(--os-color-surface); }
.catalog-category-modal .category-row > form { gap: 10px; }
.catalog-category-modal .product-category-row > form { grid-template-columns: minmax(180px, 1fr) 120px auto; }
.catalog-category-modal .product-category-count { color: var(--catalog-muted); font-size: 11px; font-weight: 700; }

/* Formulieren */
.catalog-subpage-hero { margin-bottom: 26px; }
.catalog-subpage-hero h1 { font-size: clamp(32px, 2.7vw, 42px); }
.catalog-editor-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; }
.catalog-editor-layout .editor-main,
.catalog-editor-layout .editor-side { gap: 20px; }
.catalog-editor-layout .editor-side { top: 30px; }
.catalog-editor-card { overflow: hidden; border-color: var(--catalog-line) !important; border-radius: 20px !important; }
.catalog-editor-card > .card-header { min-height: 82px; display: flex; align-items: center; gap: 13px; padding: 18px 22px; background: var(--os-color-surface); }
.catalog-editor-card .settings-icon { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 44px; border-radius: 13px; background: #eeedff; color: #6256ec; font-size: 15px; }
.page-products .catalog-editor-card .settings-icon { background: #e8f2ff; color: #3478db; }
.catalog-editor-card .card-header h2 { margin: 0; color: var(--catalog-ink); font-size: 17px; }
.catalog-editor-card .card-header p { margin: 4px 0 0; color: var(--catalog-muted); font-size: 11px; }
.catalog-editor-card > .card-body { padding: 22px; }
.catalog-editor-card .field { gap: 7px; }
.catalog-editor-card .field label { color: #3e475a; font-size: 11px; font-weight: 780; }
.catalog-editor-card .field > small { color: #929aad; font-size: 10px; }
.catalog-editor-card .input { min-height: 44px; }
.catalog-editor-card textarea.input { min-height: 108px; padding-top: 11px; }
.catalog-editor-card .choice-card { min-height: 68px; padding: 13px; border-radius: 13px; }
.service-employee-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.service-employee-choice { position: relative; align-items: center; min-width: 0; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.service-employee-choice:hover { border-color: #cbc7f8; transform: translateY(-1px); }
.service-employee-choice > input { width: 17px; height: 17px; flex: 0 0 17px; margin: 0; }
.service-employee-avatar { width: 38px; height: 38px; display: grid !important; place-items: center; flex: 0 0 38px; border-radius: 12px; background: color-mix(in srgb, var(--employee-color) 13%, white); color: var(--employee-color); font-size: 12px; font-weight: 820; }
.service-employee-copy { min-width: 0; }
.service-employee-copy strong, .service-employee-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.service-employee-copy strong { color: var(--catalog-ink); font-size: 12px; }
.service-employee-copy small { color: var(--catalog-muted); font-size: 10px; }
.service-employee-help { margin-top: 14px; }
.service-employee-empty { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 16px; border: 1px dashed #d9dce6; border-radius: 15px; background: #fafbfe; }
.service-employee-empty > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: #eeedff; color: #6256ec; }
.service-employee-empty strong { display: block; color: var(--catalog-ink); font-size: 12px; }
.service-employee-empty p { margin: 3px 0 0; color: var(--catalog-muted); font-size: 10px; }
.catalog-editor-card .switch-row { min-height: 67px; align-items: center; padding: 13px 0; }
.catalog-editor-card .switch-row input { width: 38px; height: 21px; flex: 0 0 38px; }
.catalog-editor-card .ux-more-options { border-top-color: var(--os-color-border); }
.catalog-editor-card .ux-more-options summary { color: #6256ec; }
.catalog-save-button { min-height: 52px !important; border-radius: 14px !important; font-size: 13px !important; }
.catalog-field-link { color: #6256ec; font-weight: 750; }
.product-price-card .card-body { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.catalog-number-suffix { position: relative; }
.catalog-number-suffix .input { width: 100%; padding-right: 58px; }
.catalog-number-suffix span { position: absolute; top: 50%; right: 13px; color: #929aad; font-size: 10px; transform: translateY(-50%); }
.catalog-stock-threshold { margin-top: 18px; }
.catalog-editor-help { display: flex; gap: 10px; padding: 14px; border: 1px solid #dcd9ff; border-radius: 14px; background: #f7f6ff; color: #6256ec; }
.catalog-editor-help > i { margin-top: 2px; }
.catalog-editor-help p { display: grid; gap: 2px; margin: 0; }
.catalog-editor-help strong { color: #38316e; font-size: 11px; }
.catalog-editor-help span { color: #746f99; font-size: 10px; line-height: 1.45; }

.catalog-image-field { grid-column: 1 / -1; display: grid; gap: 11px; }
.catalog-image-field-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.catalog-image-field-heading > div { display: flex; align-items: center; gap: 8px; }
.catalog-image-field-heading strong { color: #3e475a; font-size: 11px; font-weight: 780; }
.catalog-image-field-heading span { padding: 3px 7px; border-radius: 999px; background: #f0f1f5; color: #858d9e; font-size: 9px; font-weight: 750; }
.catalog-image-field-heading p { max-width: 420px; margin: 0; color: #929aad; font-size: 10px; text-align: right; }
.catalog-image-dropzone { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 13px; border: 1px dashed #d4d8e2; border-radius: 16px; background: #fafbfe; transition: border-color .15s ease, background .15s ease; }
.catalog-image-dropzone:focus-within,
.catalog-image-dropzone.is-dragging { border-color: #aaa3f8; background: #faf9ff; }
.catalog-image-dropzone.is-dragging { box-shadow: 0 0 0 3px rgba(85,71,237,.1); }
.catalog-image-preview { min-width: 0; min-height: 92px; display: flex; align-items: center; overflow: hidden; border-radius: 12px; background: var(--os-color-surface); }
.catalog-image-preview > img { width: 148px; height: 92px; display: block; object-fit: cover; border-radius: 12px; }
.catalog-image-placeholder { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 16px; }
.catalog-image-placeholder > span { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 44px; border-radius: 13px; background: #eeedff; color: #6256ec; }
.page-products .catalog-image-placeholder > span { background: #e8f2ff; color: #3478db; }
.catalog-image-placeholder strong, .catalog-image-placeholder small { display: block; }
.catalog-image-placeholder strong { color: var(--catalog-ink); font-size: 11px; }
.catalog-image-placeholder small { margin-top: 3px; color: #929aad; font-size: 9.5px; }
.catalog-image-actions { display: flex; align-items: center; gap: 8px; }
.catalog-image-select { min-height: 42px !important; margin: 0; white-space: nowrap; cursor: pointer; }
.catalog-image-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; }
.catalog-image-remove { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 0; background: transparent; color: #c64b54; font-size: 10px; font-weight: 750; cursor: pointer; }
.catalog-image-feedback { grid-column: 1 / -1; min-height: 14px; margin: -4px 2px 0; color: #ba4b55; font-size: 9.5px; }

/* Dienstdetail */
.catalog-detail-hero { min-height: 116px; margin-bottom: 24px; }
.catalog-detail-hero .entity-icon { width: 58px; height: 58px; border-radius: 17px; background: #eeedff; color: #6256ec; font-size: 20px; }
.catalog-detail-hero .catalog-back-link { margin-bottom: 7px; }
.catalog-detail-hero .title-with-status h1 { color: var(--catalog-ink); font-size: clamp(30px, 2.6vw, 40px); font-weight: 820; letter-spacing: -.05em; }
.catalog-detail-hero .detail-title p { color: var(--catalog-muted); font-size: 12px; }
.page-services .detail-layout .card { overflow: hidden; border-radius: 20px; }
.page-services .detail-layout .card-header { min-height: 72px; padding: 18px 22px; }
.page-services .detail-layout .card-body { padding: 22px; }
.page-services .detail-grid { gap: 0; overflow: hidden; padding: 0; border: 1px solid var(--os-color-border); border-radius: 15px; }
.page-services .detail-grid > div { min-height: 92px; justify-content: center; padding: 17px; border-right: 1px solid var(--os-color-border); border-bottom: 1px solid var(--os-color-border); }
.page-services .detail-grid > div:nth-child(3n) { border-right: 0; }
.page-services .detail-grid > div:nth-last-child(-n+3) { border-bottom: 0; }
.page-services .relation-list > a,
.page-services .relation-list.simple > div { min-height: 58px; padding: 11px; border-radius: 13px; }

/* Klantenbestand-geïnspireerde catalogusoverzichten */
.catalog-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.catalog-summary-card {
    min-height: 108px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    align-items: center;
    column-gap: 15px;
    padding: 19px 21px;
    border: 1px solid var(--catalog-line);
    border-radius: 18px;
    background: var(--os-color-surface);
    transition: border-color .15s ease, transform .15s ease;
}

.catalog-summary-card:hover { border-color: #cbc7f8; transform: translateY(-1px); }
.catalog-summary-icon { width: 48px; height: 48px; grid-row: 1 / span 2; display: grid; place-items: center; border-radius: 14px; font-size: 16px; }
.catalog-summary-icon.metric-violet { background: #efedff; color: #6558dd; }
.catalog-summary-icon.metric-green { background: #e5f8ef; color: #1a9c70; }
.catalog-summary-icon.metric-orange { background: #fff1df; color: #e67a1d; }
.catalog-summary-card strong, .catalog-summary-card small { display: block; }
.catalog-summary-card strong { color: var(--catalog-ink); font-size: 23px; line-height: 1.08; letter-spacing: -.035em; }
.catalog-summary-card small { margin-top: 3px; color: #7f889b; font-size: 10px; }
.catalog-summary-note { grid-column: 2; color: #a0a6b5; font-size: 9px; }

.catalog-directory { overflow: hidden; border: 1px solid var(--catalog-line); border-radius: 20px; background: var(--os-color-surface); }
.catalog-directory-header { min-height: 112px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 22px; border-bottom: 1px solid #e8eaf0; }
.catalog-directory-header h2 { margin: 0; color: var(--catalog-ink); font-size: 20px; letter-spacing: -.025em; }
.catalog-directory-header p { margin: 4px 0 0; color: var(--catalog-muted); font-size: 12px; }
.catalog-directory-controls { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.catalog-directory-search { width: min(340px, 32vw); height: 42px; display: flex; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid #dfe2e9; border-radius: 12px; background: #fafbfc; color: #929bad; transition: border-color .15s ease, box-shadow .15s ease; }
.catalog-directory-search:focus-within { border-color: #aaa3f8; box-shadow: 0 0 0 3px rgba(85,71,237,.1); }
.catalog-directory-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--catalog-ink); font-size: 12px; }
.catalog-directory-filter { position: relative; min-width: 145px; height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid #dfe2e9; border-radius: 12px; background: #fafbfc; color: #929bad; transition: border-color .15s ease, box-shadow .15s ease; }
.catalog-directory-filter:focus-within { border-color: #aaa3f8; box-shadow: 0 0 0 3px rgba(85,71,237,.1); }
.catalog-directory-filter select { min-width: 0; width: 100%; height: 100%; padding: 0 17px 0 0; border: 0; outline: 0; appearance: none; background: transparent; color: #657086; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.catalog-directory-filter > i:last-child { position: absolute; right: 11px; font-size: 8px; pointer-events: none; }
.catalog-filter-tabs { display: flex; gap: 3px; padding: 3px; border-radius: 11px; background: #f0f2f6; }
.catalog-filter-tabs button { min-height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 11px; border: 0; border-radius: 8px; background: transparent; color: #727b8e; font-size: 11px; font-weight: 750; cursor: pointer; }
.catalog-filter-tabs button span { display: inline-grid; min-width: 19px; height: 19px; place-items: center; padding: 0 4px; border-radius: 999px; background: var(--os-color-surface); color: #8d95a6; font-size: 9.5px; }
.catalog-filter-tabs button.active { background: var(--catalog-brand); color: #fff; }
.catalog-filter-tabs button.active span { background: rgba(255,255,255,.18); color: #fff; }

.catalog-list-head, .catalog-directory-row { display: grid; align-items: center; gap: 14px; padding-inline: 22px; }
.service-list-grid { grid-template-columns: minmax(245px, 1.7fr) minmax(100px, .7fr) minmax(105px, .65fr) minmax(110px, .7fr) 94px 92px 10px; }
.product-list-grid { grid-template-columns: minmax(230px, 1.55fr) minmax(105px, .72fr) minmax(100px, .66fr) minmax(90px, .6fr) 88px 88px 88px 38px; }
.catalog-list-head { min-height: 46px; border-bottom: 1px solid #e7e9ef; background: #fafbfc; color: #9299aa; font-size: 10.5px; font-weight: 800; letter-spacing: .065em; text-transform: uppercase; }
.catalog-directory-row { position: relative; min-height: 86px; border-bottom: 1px solid var(--os-color-border); color: inherit; transition: background .15s ease; }
.catalog-directory-row:last-child { border-bottom: 0; }
.catalog-directory-row:hover { background: #faf9ff; }
.catalog-directory-row:hover .catalog-row-identity strong, .catalog-directory-row:hover .catalog-row-arrow { color: var(--catalog-brand); }
.catalog-row-identity { min-width: 0; display: flex; align-items: center; gap: 11px; }
.catalog-row-icon { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 40px; overflow: hidden; border-radius: 12px; background: #efedff; color: #6558dd; }
.catalog-row-icon.is-blue { background: #e8f2ff; color: #3478db; }
.catalog-row-icon > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.catalog-row-identity > span:last-child, .catalog-row-identity strong, .catalog-row-identity small, .catalog-row-fact strong, .catalog-row-fact small, .catalog-row-stock strong, .catalog-row-stock small { min-width: 0; display: block; }
.catalog-row-identity strong { overflow: hidden; color: var(--catalog-ink); font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.catalog-row-identity small { max-width: 300px; margin-top: 3px; overflow: hidden; color: #969eaf; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.catalog-row-fact strong, .catalog-row-stock strong { overflow: hidden; color: #343c4f; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.catalog-row-fact small, .catalog-row-stock small { margin-top: 3px; overflow: hidden; color: #9ba2b1; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.catalog-row-stock.is-low strong, .catalog-row-stock.is-low small { color: #d5751d; }
.catalog-status { min-height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.catalog-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.catalog-status.is-active { background: #e5f8ed; color: #218d58; }
.catalog-status.is-inactive { background: #eef0f4; color: #737b8e; }
.catalog-status.is-archived { background: #fff1df; color: #c87323; }
.catalog-soft-status { min-height: 28px; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.catalog-soft-status.is-online { background: #eeedff; color: #6256dc; }
.catalog-soft-status.is-muted { background: #eef0f4; color: #7b8394; }
.catalog-row-arrow, .catalog-row-action { position: relative; z-index: 2; color: #c2c7d2; font-size: 10px; text-align: right; transition: color .15s ease, transform .15s ease; }
.catalog-directory-row:hover .catalog-row-arrow { transform: translateX(2px); }
.catalog-row-overlay-link { position: absolute; z-index: 1; inset: 0; }
.product-directory-row.is-clickable { cursor: pointer; }
.catalog-stock-button { position: relative; z-index: 3; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #dfe2e9; border-radius: 10px; background: var(--os-color-surface); color: #657086; cursor: pointer; }
.catalog-stock-button:hover { border-color: #bdb7f7; color: var(--catalog-brand); background: #faf9ff; }
.catalog-filter-empty, .catalog-empty-state { min-height: 240px; display: grid; justify-items: center; align-content: center; padding: 32px; text-align: center; }
.catalog-filter-empty > span, .catalog-empty-state > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: #efedff; color: var(--catalog-brand); }
.catalog-filter-empty strong, .catalog-empty-state h2 { margin: 10px 0 0; color: var(--catalog-ink); font-size: 15px; }
.catalog-filter-empty p, .catalog-empty-state p { max-width: 420px; margin: 4px 0 13px; color: var(--catalog-muted); font-size: 10px; }

/* Dienstdetail in dezelfde dossierstijl als klantdetail */
.service-detail-hero { min-height: 112px; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 16px; padding: 22px 24px; border: 1px solid var(--catalog-line); border-radius: 21px; background: var(--os-color-surface); }
.service-detail-heading { min-width: 0; }
.service-detail-identity { min-width: 0; display: flex; align-items: center; gap: 15px; }
.service-detail-avatar { width: 62px; height: 62px; display: grid; place-items: center; flex: 0 0 62px; overflow: hidden; border-radius: 18px; background: #efedff; color: #6558dd; font-size: 20px; }
.service-detail-avatar > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.service-detail-kicker { color: var(--catalog-brand); font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.service-detail-name { display: flex; align-items: center; gap: 10px; }
.service-detail-name h1 { margin: 2px 0 0; color: var(--catalog-ink); font-size: 27px; letter-spacing: -.035em; }
.service-detail-name .catalog-status { min-height: 30px; font-size: 11px; }
.service-detail-identity p { margin: 4px 0 0; color: #8e96a8; font-size: 11px; }
.service-detail-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: nowrap; }
.service-detail-actions form { display: flex; margin: 0; }
.service-detail-actions .btn { min-height: 44px; border-radius: 12px; box-shadow: none; font-size: 14px; white-space: nowrap; }
.service-more-actions > summary { width: 54px; padding: 0; }
.service-profile-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.service-profile-metrics article { min-height: 82px; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 11px; padding: 14px 16px; border: 1px solid var(--catalog-line); border-radius: 16px; background: var(--os-color-surface); }
.service-profile-metrics article > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; }
.service-profile-metrics .metric-violet { background: #efedff; color: #6558dd; }
.service-profile-metrics .metric-green { background: #e5f8ef; color: #1a9c70; }
.service-profile-metrics .metric-orange { background: #fff1df; color: #e67a1d; }
.service-profile-metrics .metric-slate { background: #eef1f6; color: #697286; }
.service-profile-metrics strong, .service-profile-metrics small { display: block; }
.service-profile-metrics strong { overflow: hidden; color: var(--catalog-ink); font-size: 19px; text-overflow: ellipsis; white-space: nowrap; }
.service-profile-metrics small { margin-top: 4px; color: #7f889b; font-size: 12px; }
.service-detail-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(270px, .62fr); gap: 16px; align-items: start; }
.service-detail-main, .service-detail-side { display: grid; gap: 16px; }
.service-profile-card { overflow: hidden; border: 1px solid var(--catalog-line); border-radius: 18px; background: var(--os-color-surface); }
.service-card-heading { min-height: 78px; display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--os-color-border); }
.service-card-heading.compact { min-height: 70px; padding: 13px 16px; }
.service-card-heading > span, .service-facts-grid > div > span { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 42px; border-radius: 12px; background: #efedff; color: #6558dd; }
.service-card-heading.compact > span { width: 38px; height: 38px; flex-basis: 38px; }
.service-card-heading .is-green, .service-facts-grid .is-green { background: #e5f8ef; color: #1a9c70; }
.service-card-heading .is-orange, .service-facts-grid .is-orange { background: #fff1df; color: #e67a1d; }
.service-card-heading .is-slate, .service-facts-grid .is-slate { background: #eef1f6; color: #697286; }
.service-card-heading h2, .service-card-heading p { margin: 0; }
.service-card-heading h2 { color: var(--catalog-ink); font-size: 17px; letter-spacing: -.02em; }
.service-card-heading p { margin-top: 4px; color: #7f889b; font-size: 12px; }
.service-card-heading em { margin-left: auto; padding: 4px 8px; border-radius: 999px; background: #f1f0ff; color: #6558dd; font-size: 11px; font-style: normal; font-weight: 800; }
.service-facts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--os-color-border); }
.service-facts-grid > div { min-width: 0; min-height: 88px; display: flex; align-items: center; gap: 12px; padding: 17px 20px; background: var(--os-color-surface); }
.service-facts-grid > div > span { width: 38px; height: 38px; flex-basis: 38px; }
.service-facts-grid > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.service-facts-grid small, .service-facts-grid strong { display: block; }
.service-facts-grid small { color: #7f889b; font-size: 12px; }
.service-facts-grid strong { margin-top: 4px; color: #31394c; font-size: 14px; }
.service-copy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--os-color-border); }
.service-copy-grid > div { min-height: 140px; padding: 20px; background: var(--os-color-surface); }
.service-copy-grid span { color: #7f889b; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.service-copy-grid p { margin: 8px 0 0; color: #4d5669; font-size: 14px; line-height: 1.65; }
.service-relation-list > a { min-height: 68px; display: grid; grid-template-columns: 38px minmax(0, 1fr) 10px; align-items: center; gap: 11px; padding: 10px 18px; border-bottom: 1px solid var(--os-color-border); }
.service-relation-list > a:last-child { border-bottom: 0; }
.service-relation-list > a:hover { background: #faf9ff; }
.service-relation-list strong, .service-relation-list small { display: block; }
.service-relation-list strong { color: #30384b; font-size: 14px; }
.service-relation-list small { margin-top: 3px; color: #7f889b; font-size: 12px; }
.service-relation-list > a > span:last-child { color: #c2c7d2; font-size: 11px; }
.service-mini-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #efedff; color: #6558dd; font-size: 11px; font-weight: 850; }
.service-card-empty { min-height: 170px; display: grid; justify-items: center; align-content: center; padding: 26px; text-align: center; }
.service-card-empty > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: #efedff; color: #6558dd; }
.service-card-empty strong { margin-top: 9px; font-size: 14px; }
.service-card-empty p { margin: 4px 0 0; color: #7f889b; font-size: 12px; }
.service-relation-list > .service-card-empty {
    min-height: 110px;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-content: center;
    gap: 0;
    padding: 20px 16px;
    text-align: center;
}
.service-relation-list > .service-card-empty > strong:first-child { margin-top: 0; }
.service-setting-list, .service-metadata-list { padding: 4px 16px; }
.service-setting-list > div, .service-metadata-list > div { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #eef0f4; }
.service-setting-list > div:last-child, .service-metadata-list > div:last-child { border-bottom: 0; }
.service-setting-list span, .service-metadata-list span { color: #697286; font-size: 13px; }
.service-setting-list span { display: inline-flex; align-items: center; gap: 7px; }
.service-setting-list span i { width: 7px; height: 7px; border-radius: 50%; background: #c4c9d2; }
.service-setting-list span i.is-on { background: #21a36d; }
.service-setting-list strong, .service-metadata-list strong { color: #343c4f; font-size: 13px; text-align: right; }
.service-location-list > div { min-height: 62px; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #eef0f4; }
.service-location-list > div:last-child { border-bottom: 0; }
.service-location-list > div > span { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; border-radius: 10px; background: #fff1df; color: #e67a1d; }
.service-location-list strong, .service-location-list small { display: block; }
.service-location-list strong { color: #343c4f; font-size: 14px; }
.service-location-list small { margin-top: 2px; color: #7f889b; font-size: 12px; }
.service-location-list .service-location-fallback { min-height: 100px; justify-content: center; color: #969eaf; text-align: center; }
.service-location-fallback p { margin: 0; font-size: 12px; }

@media (max-width: 1280px) {
    .offer-status-metrics > span { min-width: 98px; }
    .catalog-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .service-list-grid { grid-template-columns: minmax(230px, 1.6fr) 110px 110px 94px 92px 10px; }
    .service-list-grid > :nth-child(4) { display: none; }
    .product-list-grid { grid-template-columns: minmax(220px, 1.5fr) 120px 110px 100px 90px 90px 38px; }
    .catalog-list-head.product-list-grid > :nth-child(5),
    .product-directory-row > :nth-child(6) { display: none; }
}

@media (max-width: 980px) {
    .page-services .main.main-uniform-page,
    .page-products .main.main-uniform-page,
    .page-offer .main.main-uniform-page { padding: 30px 24px 54px; }
    .offer-catalog-status { align-items: stretch; flex-direction: column; gap: 14px; }
    .offer-status-metrics { align-self: flex-start; }
    .offer-workspace-grid { grid-template-columns: 1fr; }
    .catalog-editor-layout { grid-template-columns: 1fr; }
    .catalog-editor-layout .editor-side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .catalog-editor-layout .editor-side > .catalog-save-button,
    .catalog-editor-layout .editor-side > .catalog-editor-help { grid-column: 1 / -1; }
    .catalog-directory-header { align-items: stretch; flex-direction: column; gap: 14px; }
    .catalog-directory-controls { justify-content: space-between; }
    .catalog-directory-search { width: min(420px, 52vw); }
    .service-list-grid { grid-template-columns: minmax(220px, 1.7fr) 110px 105px 90px 10px; }
    .service-list-grid > :nth-child(2), .service-list-grid > :nth-child(4) { display: none; }
    .product-list-grid { grid-template-columns: minmax(220px, 1.7fr) 120px 100px 90px 38px; }
    .catalog-list-head.product-list-grid > :nth-child(2),
    .catalog-list-head.product-list-grid > :nth-child(3),
    .catalog-list-head.product-list-grid > :nth-child(5),
    .product-directory-row > :nth-child(3),
    .product-directory-row > :nth-child(4),
    .product-directory-row > :nth-child(6) { display: none; }
    .service-detail-layout { grid-template-columns: 1fr; }
    .service-detail-side { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .main-uniform-page > .catalog-heading > .catalog-hero-actions {
        width: 100%;
        grid-column: 1;
        grid-row: 3;
        margin-top: 9px;
    }
    .page-company-app .main.main-uniform-page > .offer-heading > .offer-header-actions {
        width: 100%;
        grid-column: 1;
        grid-row: 3;
        justify-content: flex-start;
        margin-top: 9px;
    }
    .service-detail-actions { flex-wrap: wrap; }
}

@media (max-width: 720px) {
    .page-services .main.main-uniform-page,
    .page-products .main.main-uniform-page,
    .page-offer .main.main-uniform-page { padding: 24px 14px 40px; }
    .page-offer .offer-heading h1 { display: block; font-size: 28px; line-height: 1.08; }
    .page-offer .offer-heading p { margin-top: 7px; }
    .offer-header-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .offer-header-actions .btn { width: 100%; justify-content: center; }
    .offer-catalog-status { padding: 14px; border-radius: 16px; }
    .offer-status-metrics { width: 100%; }
    .offer-status-metrics > span { min-width: 0; flex: 1; justify-content: center; padding-inline: 8px; }
    .offer-workspace-grid { gap: 13px; }
    .offer-workspace { border-radius: 18px; }
    .offer-workspace-header { grid-template-columns: 44px minmax(0, 1fr); padding: 17px; }
    .offer-workspace-icon { width: 44px; height: 44px; border-radius: 13px; }
    .offer-workspace-count { grid-column: 2; justify-self: start; }
    .offer-preview-panel { padding: 14px 14px 0; }
    .offer-workspace-actions { align-items: stretch; flex-direction: column; padding: 14px; }
    .offer-workspace-actions .btn { width: 100%; justify-content: center; }
    .offer-secondary-action { justify-content: center; min-height: 34px; }
    .offer-context-strip { grid-template-columns: 1fr; gap: 12px; padding: 14px; }
    .offer-context-strip > i { display: none; }
    .catalog-hero,
    .catalog-subpage-hero { align-items: stretch; flex-direction: column; gap: 18px; margin-bottom: 22px; }
    .catalog-kicker,
    .catalog-back-link { margin-bottom: 10px; font-size: 10px; }
    .catalog-hero h1,
    .catalog-subpage-hero h1 { font-size: 32px; }
    .catalog-hero p,
    .catalog-subpage-hero p { margin-top: 8px; font-size: 13px; }
    .catalog-hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .catalog-hero-actions .btn,
    .catalog-subpage-hero > .btn { width: 100%; min-height: 46px; justify-content: center; }
    .catalog-metric-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
    .catalog-metric-grid article { min-height: 92px; gap: 11px; padding: 14px; border-radius: 16px; }
    .catalog-metric-icon { width: 42px; height: 42px; border-radius: 12px; }
    .catalog-metric-grid strong { font-size: 22px; }
    .catalog-metric-grid small { font-size: 9px; }
    .catalog-table-toolbar { align-items: stretch; flex-direction: column; padding: 16px; }
    .catalog-search { width: 100%; }
    .catalog-table-name { min-width: 190px; }
    .catalog-category-modal .product-category-row > form { grid-template-columns: 1fr auto; }
    .catalog-category-modal .product-category-count { display: none; }
    .catalog-editor-layout .editor-side { grid-template-columns: 1fr; }
    .catalog-editor-layout .editor-side > .catalog-save-button,
    .catalog-editor-layout .editor-side > .catalog-editor-help { grid-column: auto; }
    .catalog-editor-card { border-radius: 17px !important; }
    .catalog-editor-card > .card-header { min-height: 72px; padding: 15px 17px; }
    .catalog-editor-card > .card-body { padding: 17px; }
    .catalog-image-field-heading { display: grid; gap: 4px; }
    .catalog-image-field-heading p { text-align: left; }
    .catalog-image-dropzone { grid-template-columns: 1fr; }
    .catalog-image-preview > img { width: 100%; height: 180px; }
    .catalog-image-actions { display: grid; grid-template-columns: 1fr auto; }
    .catalog-image-select { width: 100%; justify-content: center; }
    .service-employee-grid { grid-template-columns: 1fr; }
    .service-employee-empty { grid-template-columns: auto minmax(0, 1fr); }
    .service-employee-empty .btn { grid-column: 1 / -1; justify-content: center; }
    .product-price-card .card-body { grid-template-columns: 1fr; }
    .catalog-detail-hero { align-items: stretch; flex-direction: column; }
    .catalog-detail-hero .heading-actions { width: 100%; }
    .page-services .detail-grid { grid-template-columns: 1fr 1fr; }
    .page-services .detail-grid > div:nth-child(3n) { border-right: 1px solid var(--os-color-border); }
    .page-services .detail-grid > div:nth-child(2n) { border-right: 0; }
    .page-services .detail-grid > div:nth-last-child(-n+3) { border-bottom: 1px solid var(--os-color-border); }
    .page-services .detail-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
    .catalog-summary-grid { grid-template-columns: 1fr; gap: 9px; }
    .catalog-summary-card { min-height: 88px; padding: 14px 16px; }
    .catalog-directory-header { min-height: 0; padding: 16px; }
    .catalog-directory-controls { display: grid; grid-template-columns: 1fr; }
    .catalog-directory-search { width: 100%; }
    .catalog-directory-filter { width: 100%; }
    .catalog-filter-tabs { overflow-x: auto; }
    .catalog-filter-tabs button { flex: 1; justify-content: center; }
    .catalog-list-head { display: none; }
    .catalog-directory-list { display: grid; gap: 9px; padding: 10px; background: var(--os-color-canvas); }
    .catalog-directory-row, .service-list-grid, .product-list-grid { min-height: 0; grid-template-columns: 1fr auto; gap: 11px; padding: 14px; border: 1px solid #e4e7ee !important; border-radius: 14px; background: var(--os-color-surface); }
    .catalog-directory-row > * { display: none !important; }
    .catalog-directory-row > .catalog-row-identity, .service-directory-row > .catalog-row-arrow, .product-directory-row > .catalog-row-action, .customer-directory-row > .customer-row-arrow { display: flex !important; }
    .product-directory-row > .catalog-row-overlay-link { display: block !important; }
    .catalog-row-identity { min-width: 0; }
    .catalog-row-identity small { max-width: 60vw; }
    .catalog-row-action { align-items: center; }
    .service-detail-hero { align-items: stretch; flex-direction: column; padding: 18px; }
    .service-detail-actions { justify-content: flex-start; }
    .service-profile-metrics { grid-template-columns: 1fr 1fr; }
    .service-detail-side { grid-template-columns: 1fr; }
    .service-copy-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .offer-header-actions { grid-template-columns: 1fr; }
    .offer-status-lead { align-items: flex-start; }
    .offer-status-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .offer-status-metrics > span { align-items: center; flex-direction: column; gap: 2px; text-align: center; }
    .offer-preview-row { grid-template-columns: 34px minmax(0, 1fr) auto 9px; }
    .offer-preview-status { display: none; }
    .offer-preview-panel > header { align-items: flex-start; flex-direction: column; gap: 3px; }
    .catalog-hero-actions { grid-template-columns: 1fr; }
    .catalog-metric-grid { grid-template-columns: 1fr; }
    .catalog-metric-grid article { min-height: 82px; }
    .page-services .detail-grid { grid-template-columns: 1fr; }
    .page-services .detail-grid > div { border-right: 0 !important; border-bottom: 1px solid var(--os-color-border) !important; }
    .page-services .detail-grid > div:last-child { border-bottom: 0 !important; }
    .service-detail-identity { align-items: flex-start; }
    .service-detail-avatar { width: 52px; height: 52px; flex-basis: 52px; border-radius: 15px; }
    .service-detail-name { align-items: flex-start; flex-direction: column; gap: 5px; }
    .service-detail-name h1 { font-size: 23px; }
    .service-detail-actions .btn { flex: 1; }
    .service-profile-metrics { grid-template-columns: 1fr; }
    .service-facts-grid { grid-template-columns: 1fr; }
}

/* Producten v3: hetzelfde werkplek-, dossier- en modalpatroon als Diensten. */
.page-products .main.products-index-main,
.page-products .main.product-detail-main-shell {
    width: 100% !important;
    max-width: none !important;
    min-height: calc(100dvh - 68px) !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

.page-products .main.products-index-main { background: var(--os-color-surface) !important; }
.page-products .main.product-detail-main-shell { background: #f8f9fc !important; }

.page-products .products-index-workspace {
    min-height: calc(100dvh - 68px);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    background: var(--os-color-surface);
}

.page-products .products-index-hero {
    min-height: 176px !important;
    margin: 0 !important;
    padding: 30px 32px 28px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--catalog-line) !important;
    border-radius: 0 !important;
    background: var(--os-color-surface) !important;
    box-sizing: border-box;
}

.page-products .products-index-hero h1 {
    margin: 9px 0 5px;
    font-size: clamp(34px, 3.3vw, 48px);
}

.page-products .products-index-hero p {
    max-width: 760px;
    font-size: 16px;
}

.page-products .products-workspace-tabs {
    min-height: 58px;
    display: flex;
    align-items: end;
    gap: 38px;
    padding: 0 32px;
    border-bottom: 1px solid var(--catalog-line);
    background: var(--os-color-surface);
}

.page-products .products-workspace-tabs a {
    position: relative;
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    padding: 5px 0 0;
    color: #66718a;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
}

.page-products .products-workspace-tabs a.active { color: var(--catalog-brand); }
.page-products .products-workspace-tabs a.active::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--catalog-brand);
}

.page-products .products-workspace-panel { min-height: 0; }
.page-products .products-workspace-panel[hidden] { display: none !important; }
.page-products .products-workspace-panel-producten {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}
.page-products .products-workspace-panel-categorieen {
    padding: 24px 32px 32px;
    background: #f8f9fc;
}

.page-products .products-index-alert { margin: 20px 32px 0; }
.page-products .products-directory {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(360px, 1fr) auto;
    margin: 0;
    padding: 0 32px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: var(--os-color-surface);
}

.page-products .products-directory-header {
    min-height: 92px;
    display: block;
    padding: 18px 0;
    border-bottom: 0;
}

.page-products .products-directory-header .catalog-directory-controls {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(180px, .48fr) minmax(180px, .48fr) auto;
    align-items: center;
    gap: 14px;
}

.page-products .products-search,
.page-products .products-select-filter {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 15px;
    border: 1px solid #dde2ea;
    border-radius: 11px;
    background: var(--os-color-surface);
    color: #7d879c;
}

.page-products .products-search input,
.page-products .products-select-filter select {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    appearance: none;
    background: transparent;
    color: var(--catalog-ink);
    font: inherit;
}

.page-products .products-select-filter > svg:last-child { margin-left: auto; }
.page-products .products-filter-tabs {
    justify-self: end;
    min-height: 48px;
    padding: 3px;
    border: 1px solid #e3e6ed;
    border-radius: 11px;
    background: var(--os-color-surface);
    box-shadow: none;
    white-space: nowrap;
}
.page-products .products-filter-tabs button {
    min-width: 82px;
    min-height: 40px;
    justify-content: center;
    border-radius: 9px;
    color: #3f485d;
    font-size: 12px;
}
.page-products .products-filter-tabs button.active {
    background: var(--catalog-brand);
    color: #fff;
    box-shadow: none;
}

.page-products .products-index-table {
    min-height: 0;
    display: grid;
    grid-template-rows: 58px minmax(300px, 1fr);
    border-top: 1px solid #edf0f4;
    border-bottom: 1px solid #edf0f4;
}
.page-products .products-index-table .catalog-list-head {
    min-height: 58px;
    padding: 0 12px;
    border: 0;
    border-bottom: 1px solid var(--catalog-line);
    border-radius: 0;
    background: #fbfcfe;
    color: #202a42;
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
}
.page-products .products-list { min-height: 0; overflow-y: auto; }
.page-products .product-directory-row {
    min-height: 76px;
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-bottom: 1px solid var(--catalog-line);
    border-radius: 0;
    box-shadow: none;
}
.page-products .product-directory-row:hover {
    border-color: var(--catalog-line);
    background: #fafaff;
    transform: none;
}
.page-products .product-row-action {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #66718a;
    text-decoration: none;
}
.page-products .product-row-action:hover { background: #efedff; color: #5745f5; }
.page-products .products-index-pagination {
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    color: #6e7890;
    font-size: 13px;
}

.page-products .product-category-workspace {
    min-height: calc(100dvh - 350px);
    border-radius: 18px;
    box-shadow: none;
}
.page-products .product-category-workspace > .catalog-directory-header { min-height: 86px; }
.page-products .product-category-list { padding: 0 20px 20px; }
.page-products .product-category-item {
    min-height: 72px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 40px;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--catalog-line);
}
.page-products .product-category-item:last-child { border-bottom: 0; }
.page-products .product-category-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #edf4ff;
    color: #3f77ce;
}
.page-products .product-category-item form {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 110px auto;
    align-items: center;
    gap: 12px;
}
.page-products .product-category-item input { width: 100%; min-height: 40px; }
.page-products .product-category-item form > span { color: #80899c; font-size: 12px; }
.page-products .product-category-delete {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #b44f5a;
    cursor: pointer;
}
.page-products .product-category-delete:hover { background: #fff0f2; }

.page-products .product-organizer {
    --organizer-line: #e5e7ee;
    --organizer-muted: #7c8496;
    --organizer-ink: #202433;
    display: block;
    width: 100%;
    overflow: visible;
}
.page-products .product-organizer-toolbar {
    min-height: 104px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--organizer-line);
    border-radius: 20px 20px 0 0;
    background: var(--os-color-surface);
}
.page-products .product-organizer-controls { min-width: min(570px, 54vw); flex-wrap: nowrap; }
.page-products .product-organizer-controls > .btn { min-height: 42px; white-space: nowrap; }
.page-products .product-organizer-search {
    width: min(390px, 42vw);
    height: 42px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 0 7px 0 12px;
    border: 1px solid #dfe2e9;
    border-radius: 12px;
    background: #fafbfc;
    color: #929bad;
}
.page-products .product-organizer-search:focus-within { border-color: #aaa3f8; background: #fff; box-shadow: 0 0 0 3px rgba(85,71,237,.1); }
.page-products .product-organizer-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--organizer-ink); font: inherit; font-size: 13px; }
.page-products .product-organizer-search > button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: #8992a4; cursor: pointer; }
.page-products .product-organizer-search > button:hover { background: #eceef4; color: var(--organizer-ink); }
.page-products .product-organizer-list { display: grid; gap: 10px; padding: 14px; border-radius: 0 0 20px 20px; background: var(--os-color-canvas); }
.page-products .product-organizer-category { overflow: visible; border: 1px solid var(--organizer-line); border-radius: 14px; background: var(--os-color-surface); }
.page-products .product-organizer-category-header {
    min-height: 68px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    padding: 0 11px 0 10px;
    border-radius: 13px;
    background: var(--os-color-surface);
}
.page-products .product-organizer-category:not(.is-collapsed) .product-organizer-category-header { border-bottom: 1px solid #ececf2; border-radius: 13px 13px 0 0; }
.page-products .product-organizer-grip { width: 38px; height: 38px; display: grid; place-items: center; color: #a3a9b8; }
.page-products .product-organizer-category-toggle {
    min-width: 0;
    height: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 8px 1px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.page-products .product-organizer-category-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: #efedff; color: var(--catalog-brand); }
.page-products .product-organizer-category-copy { min-width: 0; display: grid; gap: 3px; }
.page-products .product-organizer-category-copy strong { overflow: hidden; color: var(--organizer-ink); font-size: 14px; font-weight: 820; text-overflow: ellipsis; white-space: nowrap; }
.page-products .product-organizer-category-copy small { color: var(--organizer-muted); font-size: 10.5px; font-weight: 650; }
.page-products .product-organizer-category-chevron { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; color: #9098a9; font-size: 10px; transition: transform .2s ease, background .15s ease; }
.page-products .product-organizer-category-toggle:hover .product-organizer-category-chevron { background: #eff0f5; }
.page-products .product-organizer-category.is-collapsed .product-organizer-category-chevron { transform: rotate(180deg); }
.page-products .product-organizer-category-menu { position: relative; z-index: 4; }
.page-products .product-organizer-category-menu > summary { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px; color: #7f8798; cursor: pointer; list-style: none; }
.page-products .product-organizer-category-menu > summary:hover { background: #eff0f5; color: var(--catalog-ink); }
.page-products .product-organizer-category-menu > div { right: 0; left: auto; }
.page-products .product-organizer-category-body { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .22s ease, opacity .18s ease; }
.page-products .product-organizer-category.is-collapsed .product-organizer-category-body { grid-template-rows: 0fr; opacity: 0; }
.page-products .product-organizer-category-body-inner { min-height: 0; overflow: hidden; }
.page-products .product-organizer-product-list { min-height: 12px; padding: 6px 14px 10px 54px; }
.page-products .product-organizer-product-row {
    min-height: 56px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto 10px;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #eeeef3;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
}
.page-products .product-organizer-product-row:last-of-type { border-bottom-color: transparent; }
.page-products .product-organizer-product-row:hover { background: #faf9ff; }
.page-products .product-organizer-product-row .catalog-row-icon { width: 34px; height: 34px; flex-basis: 34px; border-radius: 9px; }
.page-products .product-organizer-product-row strong,
.page-products .product-organizer-product-row small { display: block; }
.page-products .product-organizer-product-row strong { color: var(--organizer-ink); font-size: 13px; }
.page-products .product-organizer-product-row small { margin-top: 2px; color: var(--organizer-muted); font-size: 10.5px; }
.page-products .product-organizer-product-row em { color: #5f687a; font-size: 12px; font-style: normal; font-weight: 740; }
.page-products .product-organizer-product-row > svg:last-child { color: #a1a8b6; font-size: 10px; }
.page-products .product-organizer-category-empty { min-height: 54px; display: grid; place-items: center; margin: 4px 0 0; border: 1px dashed #d9dce6; border-radius: 10px; color: #9299a9; font-size: 11.5px; }
.page-products .product-organizer-empty,
.page-products .product-organizer-search-empty { min-height: 250px; display: grid; place-items: center; align-content: center; gap: 7px; padding: 34px; border-radius: 0 0 20px 20px; background: var(--os-color-canvas); color: var(--organizer-muted); text-align: center; }
.page-products .product-organizer-empty > span,
.page-products .product-organizer-search-empty > span { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 3px; border-radius: 14px; background: #efedff; color: var(--catalog-brand); font-size: 18px; }
.page-products .product-organizer-empty strong,
.page-products .product-organizer-search-empty strong { color: var(--organizer-ink); font-size: 15px; }
.page-products .product-organizer-empty p,
.page-products .product-organizer-search-empty p { margin: 0 0 10px; font-size: 12px; }

/* Productformulier blijft compact; alleen de inhoud scrolt en de knoppen blijven staan. */
.page-products .product-editor-dialog {
    width: min(920px, calc(100vw - 40px));
    max-width: none;
    max-height: calc(100dvh - 40px);
    height: min(800px, calc(100dvh - 40px));
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--catalog-line);
    border-radius: 22px;
    background: var(--os-color-surface);
    box-shadow: 0 30px 90px rgba(25, 31, 58, .24);
}
.page-products .product-editor-dialog[open] { display: flex; flex-direction: column; }
.page-products .product-editor-dialog::backdrop { background: rgba(17, 24, 50, .56); backdrop-filter: blur(5px); }
.page-products .product-modal-header {
    min-height: 82px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 40px;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--catalog-line);
    background: var(--os-color-surface);
}
.product-modal-header > span,
.product-modal-section > header > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    border-radius: 13px;
    background: #efedff;
    color: #6558dd;
}
.product-modal-header h2,
.product-modal-header p,
.product-modal-section h3,
.product-modal-section p { margin: 0; }
.product-modal-header h2 { color: var(--catalog-ink); font-size: 20px; }
.product-modal-header p { margin-top: 3px; color: #7f889b; font-size: 12px; }
.product-modal-header > button { justify-self: end; }
.product-modal-form {
    min-height: 0;
    flex: 1 1 auto;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
}
.product-modal-body {
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
    background: #f8f9fc;
}
.product-modal-alert { margin-bottom: 14px; }
.product-modal-section {
    overflow: hidden;
    margin-bottom: 14px;
    border: 1px solid var(--catalog-line);
    border-radius: 16px;
    background: var(--os-color-surface);
}
.page-products .product-modal-section > header {
    min-height: 70px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--catalog-line);
    justify-content: flex-start;
}
.product-modal-section > header > span { width: 38px; height: 38px; flex-basis: 38px; }
.product-modal-section > header > span.is-green { background: #e5f8ef; color: #1a9c70; }
.product-modal-section > header > span.is-orange { background: #fff1df; color: #e67a1d; }
.product-modal-section h3 { color: var(--catalog-ink); font-size: 15px; }
.product-modal-section p { margin-top: 3px; color: #7f889b; font-size: 11px; }
.product-modal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 16px; }
.product-modal-grid .span-2 { grid-column: 1 / -1; }
.product-modal-grid .field,
.product-stock-settings .field { display: grid; gap: 7px; }
.product-modal-grid .field > span,
.product-stock-settings .field > span { color: #414a5f; font-size: 12px; font-weight: 800; }
.product-modal-grid .input,
.product-stock-settings .input { min-height: 44px; }
.product-modal-grid textarea.input { min-height: 96px; padding-top: 11px; resize: vertical; }
.product-price-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-stock-settings { display: grid; grid-template-columns: minmax(0, 1fr) 220px; align-items: center; gap: 18px; padding: 16px; }
.product-stock-settings .switch-row { min-height: 58px; margin: 0; padding: 0; }
.product-modal-body > .catalog-image-field {
    padding: 16px;
    border: 1px solid var(--catalog-line);
    border-radius: 16px;
    background: var(--os-color-surface);
}
.product-modal-footer {
    grid-area: auto;
    min-height: 72px;
    flex: 0 0 72px;
    justify-content: flex-end;
    padding: 12px 20px;
}
.product-modal-footer .btn:last-child { margin-left: 0; }

/* Nieuw product: dezelfde rustige vierstapswizard als de klantflow. */
.page-products #product-create.product-editor-dialog { width: min(1120px, calc(100vw - 40px)); height: min(850px, calc(100dvh - 40px)); }
.product-wizard { grid-template-rows: auto minmax(0, 1fr) auto; }
.product-wizard-progress {
    min-height: 60px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 0 24px;
    border-bottom: 1px solid var(--catalog-line);
    background: #fafbfe;
}
.product-wizard-progress button {
    position: relative;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 15px 8px;
    border: 0;
    background: transparent;
    color: #a2a9b8;
    cursor: pointer;
}
.product-wizard-progress button::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; border-radius: 3px 3px 0 0; background: transparent; content: ''; }
.product-wizard-progress button:disabled { cursor: default; }
.product-wizard-progress button > span { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 28px; border: 1px solid #d9ddea; border-radius: 50%; background: #fff; color: #9aa3b5; font-size: 11px; font-weight: 800; }
.product-wizard-progress button strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.product-wizard-progress button.is-active { color: var(--catalog-ink); }
.product-wizard-progress button.is-active::after { background: var(--catalog-brand); }
.product-wizard-progress button.is-active > span { border-color: var(--catalog-brand); background: var(--catalog-brand); color: #fff; }
.product-wizard-progress button.is-complete { color: #5c6579; }
.product-wizard-progress button.is-complete > span { border-color: #d7d2ff; color: var(--catalog-brand); }
.product-wizard-body { padding: 0; background: #fff; }
.product-wizard-body > .product-modal-alert { margin: 18px 34px 0; }
.product-wizard-panel { width: min(980px, 100%); min-height: 100%; margin: 0 auto; padding: 32px 34px 38px; }
.product-wizard-panel[hidden] { display: none !important; }
.product-wizard-intro { margin-bottom: 26px; }
.product-wizard-intro > span { display: block; margin-bottom: 8px; color: var(--catalog-brand); font-size: 12px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.product-wizard-intro h3 { margin: 0; color: var(--catalog-ink); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; }
.product-wizard-intro p { margin: 8px 0 0; color: #7b8498; font-size: 14px; }
.product-wizard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.product-wizard-grid .span-2 { grid-column: 1 / -1; }
.product-wizard-grid .field { display: grid; gap: 8px; }
.product-wizard-grid .field > span { color: #3f485c; font-size: 13px; font-weight: 800; }
.product-wizard-grid .input { min-height: 50px; }
.product-wizard-grid textarea.input { min-height: 92px; padding-top: 13px; resize: vertical; }
.product-wizard-grid .field > small { color: #8a93a5; font-size: 11px; }
.product-wizard-price-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-wizard-stock-card { margin-bottom: 18px; overflow: hidden; border: 1px solid var(--catalog-line); border-radius: 16px; background: var(--os-color-surface); }
.product-wizard-stock-toggle { position: relative; min-height: 76px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 15px 18px; border-bottom: 1px solid var(--catalog-line); background: #fafbfe; cursor: pointer; }
.product-wizard-stock-toggle > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.product-wizard-stock-toggle:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--catalog-brand) 20%, transparent); outline-offset: -3px; }
.product-wizard-stock-toggle-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: #f0f1f5; color: #737c90; transition: background .16s ease, color .16s ease; }
.product-wizard-stock-toggle-copy { min-width: 0; display: grid; gap: 2px; }
.product-wizard-stock-toggle-copy strong { color: var(--catalog-ink); font-size: 14px; }
.product-wizard-stock-toggle-copy small { color: #7d8699; font-size: 11px; }
.product-wizard-stock-switch { position: relative; width: 40px; height: 23px; border-radius: 999px; background: #d8dce5; transition: background .16s ease; }
.product-wizard-stock-switch::after { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .2); content: ''; transition: transform .16s ease; }
.product-wizard-stock-toggle:has(input:checked) .product-wizard-stock-toggle-icon { background: #efedff; color: var(--catalog-brand); }
.product-wizard-stock-toggle:has(input:checked) .product-wizard-stock-switch { background: var(--catalog-brand); }
.product-wizard-stock-toggle:has(input:checked) .product-wizard-stock-switch::after { transform: translateX(17px); }
.product-wizard-stock-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 18px; }
.product-wizard-stock-fields.is-single { grid-template-columns: minmax(0, 1fr); }
.product-wizard-stock-field { min-width: 0; display: grid; gap: 7px; margin: 0; padding: 0; }
.product-wizard-stock-field.is-disabled { opacity: .48; }
.product-wizard-stock-field > span { color: #414a5f; font-size: 12px; font-weight: 800; }
.product-wizard-stock-field .input { min-height: 48px; background: var(--os-color-surface); }
.product-wizard-stock-field > small { min-height: 17px; color: #8a93a5; font-size: 11px; }
.product-wizard-panel > .catalog-image-field { padding: 18px; border: 1px solid var(--catalog-line); border-radius: 15px; background: #fff; }
.product-wizard-review { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.product-wizard-review article { min-height: 114px; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 16px; border: 1px solid var(--catalog-line); border-radius: 15px; background: #fff; }
.product-wizard-review article > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: #efedff; color: var(--catalog-brand); }
.product-wizard-review article > span.is-green { background: #e5f8ef; color: #15966b; }
.product-wizard-review article > span.is-orange { background: #fff1df; color: #e67a1d; }
.product-wizard-review small,
.product-wizard-review strong,
.product-wizard-review p { display: block; margin: 0; }
.product-wizard-review small { margin-bottom: 3px; color: #8b94a6; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.product-wizard-review strong { color: var(--catalog-ink); font-size: 15px; }
.product-wizard-review p { margin-top: 4px; color: #7d8699; font-size: 11px; }
.product-wizard-review button { align-self: start; padding: 4px; border: 0; background: transparent; color: var(--catalog-brand); font-size: 11px; font-weight: 800; cursor: pointer; }
.product-wizard-ready { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 14px 16px; border: 1px solid #ccebdd; border-radius: 14px; background: #f0fbf6; color: #168b65; }
.product-wizard-ready > svg { font-size: 22px; }
.product-wizard-ready strong,
.product-wizard-ready p { display: block; margin: 0; }
.product-wizard-ready p { margin-top: 2px; color: #607d72; font-size: 11px; }
.page-products .product-wizard-footer { align-items: center; justify-content: space-between; }
.page-products .product-wizard-footer > span { margin: 0 auto 0 0; color: #8a93a5; font-size: 12px; font-weight: 750; }
.product-wizard-footer > div { display: flex; gap: 10px; }
.product-wizard-footer .btn[hidden] { display: none !important; }

/* Productdetail gebruikt dezelfde rustige dossierverdeling als een dienst. */
.page-products .product-detail-workspace {
    min-height: calc(100dvh - 68px);
    padding-bottom: 28px;
    background: #f8f9fc;
}
.page-products .product-detail-top {
    margin: 0 !important;
    padding: 0 32px !important;
    border-bottom: 1px solid var(--catalog-line);
    background: var(--os-color-surface);
}
.page-products .product-detail-top .service-detail-back { margin-top: 24px; }
.page-products .product-detail-hero {
    min-height: 110px;
    margin: 0 !important;
    padding: 12px 0 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}
.page-products .product-detail-hero h1 { font-size: clamp(32px, 3vw, 44px); }
.page-products .product-detail-workspace > .profile-alert,
.page-products .product-detail-panels { margin: 18px 32px 0; }
.page-products .product-detail-panel[hidden] { display: none !important; }
.page-products .product-overview-grid { margin-top: 0; }
.page-products .service-overview-copy { padding: 20px; }
.page-products .service-overview-copy > p { margin: 0 0 18px; color: #4d5669; font-size: 14px; line-height: 1.65; }
.page-products .service-overview-copy dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.page-products .service-overview-copy dl > div { padding: 13px; border-radius: 12px; background: #f7f8fb; }
.page-products .service-overview-copy dt { color: #8790a3; font-size: 11px; }
.page-products .service-overview-copy dd { margin: 4px 0 0; color: #343c4f; font-size: 13px; font-weight: 800; }
.page-products .service-card-action {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    padding: 0 11px;
    border: 1px solid var(--catalog-line);
    border-radius: 10px;
    background: var(--os-color-surface);
    color: #5c4deb;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}
.page-products .product-stock-summary { min-height: 180px; display: grid; justify-items: start; align-content: center; padding: 20px; }
.page-products .product-stock-summary strong { color: var(--catalog-ink); font-size: 24px; letter-spacing: -.03em; }
.page-products .product-stock-summary strong.is-low { color: #c66b1d; }
.page-products .product-stock-summary p { margin: 5px 0 16px; color: #7f889b; font-size: 12px; }
.page-products .product-card-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.page-products .product-card-actions .service-card-action { margin-left: 0; }
.page-products .service-panel-card { min-height: 0; overflow: hidden; }
.page-products .service-detail-data-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
    padding: 2px 24px 20px;
    border-top: 1px solid var(--catalog-line);
    background: var(--os-color-surface);
}
.page-products .service-detail-data-grid > div { min-height: 78px; display: grid; align-content: center; padding: 15px 0; border-bottom: 1px solid var(--catalog-line); background: transparent; }
.page-products .service-detail-data-grid .span-2 { grid-column: 1 / -1; }
.page-products .service-detail-data-grid small,
.page-products .service-detail-data-grid strong { display: block; }
.page-products .service-detail-data-grid small { color: #7f889b; font-size: 12px; }
.page-products .service-detail-data-grid strong { margin-top: 5px; color: #31394c; font-size: 14px; }
.page-products .service-history-list article { min-height: 72px; display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--catalog-line); }
.page-products .service-history-list article:last-child { border-bottom: 0; }
.page-products .service-history-list article > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: #efedff; color: #6558dd; }
.page-products .service-history-list strong,
.page-products .service-history-list small { display: block; }
.page-products .service-history-list strong { color: #31394c; font-size: 13px; }
.page-products .service-history-list small { margin-top: 3px; color: #7f889b; font-size: 11px; }

/* Productinstellingen openen per onderdeel in een eigen compacte modal. */
.page-products .product-section-edit-dialog { width: min(760px, calc(100vw - 48px)); }
.page-products [data-product-edit-modal="prijzen"] .product-section-edit-dialog { width: min(660px, calc(100vw - 48px)); }
.page-products [data-product-edit-modal="voorraad"] .product-section-edit-dialog { width: min(620px, calc(100vw - 48px)); }
.page-products .product-section-edit-body { padding: 20px 22px 24px; }
.page-products .product-section-modal-grid { gap: 17px 18px; }
.page-products .product-section-modal-grid .input { min-height: 48px; }
.page-products .product-section-modal-grid textarea.input { min-height: 96px; }
.page-products .product-section-image-field { margin-top: 2px; }
.page-products .product-section-image-field .catalog-image-field { padding: 16px; border: 1px solid var(--catalog-line); border-radius: 14px; }
.page-products .product-section-price-grid select { width: 100%; }
.page-products .product-section-stock-settings { display: grid; gap: 18px; }
.page-products .product-section-stock-toggle {
    position: relative;
    min-height: 72px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--catalog-line);
    border-radius: 14px;
    background: #fafbfe;
    cursor: pointer;
}
.page-products .product-section-stock-toggle > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.page-products .product-section-stock-toggle:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--catalog-brand) 20%, transparent); outline-offset: 2px; }
.page-products .product-section-stock-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: #efedff; color: var(--catalog-brand); }
.page-products .product-section-stock-toggle strong,
.page-products .product-section-stock-toggle small { display: block; }
.page-products .product-section-stock-toggle strong { color: var(--catalog-ink); font-size: 13px; }
.page-products .product-section-stock-toggle small { margin-top: 3px; color: #7d8699; font-size: 11px; }
.page-products .product-section-stock-switch { position: relative; width: 40px; height: 23px; border-radius: 999px; background: #d8dce5; transition: background .16s ease; }
.page-products .product-section-stock-switch::after { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .2); content: ''; transition: transform .16s ease; }
.page-products .product-section-stock-toggle:has(input:checked) .product-section-stock-switch { background: var(--catalog-brand); }
.page-products .product-section-stock-toggle:has(input:checked) .product-section-stock-switch::after { transform: translateX(17px); }
.page-products .product-section-stock-threshold { display: grid; gap: 8px; }
.page-products .product-section-stock-threshold > span { color: var(--catalog-ink); font-size: 13px; font-weight: 800; }
.page-products .product-section-stock-threshold .input { min-height: 48px; }
.page-products .product-section-stock-threshold > small { color: #7d8699; font-size: 11px; }

html[data-theme="dark"] .page-products :is(.product-section-edit-dialog, .product-section-stock-toggle, .service-detail-data-grid) { border-color: var(--os-color-border); background: var(--os-color-surface); }

@media (max-width: 1200px) {
    .page-products .products-directory-header .catalog-directory-controls { grid-template-columns: minmax(240px, 1fr) 180px 180px; }
    .page-products .products-filter-tabs { grid-column: 1 / -1; justify-self: end; }
}

@media (max-width: 900px) {
    .page-products .products-directory-header .catalog-directory-controls { grid-template-columns: 1fr 1fr; }
    .page-products .products-search { grid-column: 1 / -1; }
    .page-products .products-filter-tabs { grid-column: 1 / -1; justify-self: stretch; }
    .page-products .products-filter-tabs button { flex: 1; }
    .page-products .product-category-item form { grid-template-columns: minmax(150px, 1fr) auto; }
    .page-products .product-category-item form > span { display: none; }
    .product-price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .product-price-grid .field:last-child { grid-column: 1 / -1; }
    .page-products .service-detail-layout { grid-template-columns: 1fr; }
    .page-products .service-detail-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .page-products .product-section-edit-dialog { width: 100%; height: 100%; max-height: none; }
    .page-products .product-section-edit-body { padding: 18px 14px 22px; }
    .page-products .product-card-actions { width: 100%; justify-content: flex-start; margin: 10px 0 0; }
    .page-products .service-card-heading:has(.product-card-actions) { flex-wrap: wrap; }
    .page-products .service-card-heading:has(.product-card-actions) > div:not(.product-card-actions) { min-width: calc(100% - 58px); }
    .page-products .products-index-hero { min-height: 0 !important; padding: 24px 16px !important; }
    .page-products .products-workspace-tabs { gap: 26px; padding-inline: 16px; }
    .page-products .products-workspace-panel-categorieen { padding: 16px; }
    .page-products .products-index-alert { margin: 14px 16px 0; }
    .page-products .products-directory { padding-inline: 16px; }
    .page-products .products-directory-header .catalog-directory-controls { grid-template-columns: 1fr; }
    .page-products .products-search,
    .page-products .products-filter-tabs { grid-column: auto; }
    .page-products .products-index-table { grid-template-rows: minmax(280px, 1fr); }
    .page-products .products-index-table .catalog-list-head { display: none; }
    .page-products .products-list { display: grid; align-content: start; gap: 9px; padding: 10px 0; background: #f8f9fc; }
    .page-products .product-directory-row { min-height: 72px; grid-template-columns: minmax(0, 1fr) auto; padding: 12px; border: 1px solid var(--catalog-line); border-radius: 14px; background: var(--os-color-surface); }
    .page-products .product-directory-row > * { display: none !important; }
    .page-products .product-directory-row > .catalog-row-identity,
    .page-products .product-directory-row > .product-row-action,
    .page-products .product-directory-row > .catalog-row-overlay-link { display: flex !important; }
    .page-products .product-directory-row > .catalog-row-overlay-link { display: block !important; }
    .page-products .product-category-workspace > .catalog-directory-header { align-items: stretch; }
    .page-products .product-category-item { grid-template-columns: 38px minmax(0, 1fr) 36px; }
    .page-products .product-category-item form { grid-template-columns: 1fr; gap: 7px; padding: 9px 0; }
    .page-products .product-category-item form .btn { width: max-content; }
    .page-products .product-organizer-toolbar { min-height: 0; align-items: stretch; flex-direction: column; gap: 14px; padding: 16px; }
    .page-products .product-organizer-controls { width: 100%; min-width: 0; align-items: stretch; flex-direction: column; }
    .page-products .product-organizer-search { width: 100%; }
    .page-products .product-organizer-list { gap: 9px; padding: 9px; }
    .page-products .product-organizer-category-header { min-height: 58px; grid-template-columns: 40px minmax(0, 1fr) 38px; padding-inline: 6px; }
    .page-products .product-organizer-category-icon { display: none; }
    .page-products .product-organizer-product-list { padding: 5px 8px 8px 17px; }
    .page-products .product-editor-dialog { width: calc(100vw - 20px); height: calc(100dvh - 20px); max-height: calc(100dvh - 20px); border-radius: 18px; }
    .product-modal-header { min-height: 72px; grid-template-columns: 38px minmax(0, 1fr) 36px; padding: 12px 14px; }
    .product-modal-header > span { width: 36px; height: 36px; }
    .product-modal-header h2 { font-size: 17px; }
    .product-modal-header p { display: none; }
    .product-modal-body { padding: 12px; }
    .product-modal-grid,
    .product-price-grid,
    .product-stock-settings { grid-template-columns: 1fr; }
    .product-modal-grid .span-2,
    .product-price-grid .field:last-child { grid-column: auto; }
    .product-modal-footer { min-height: 66px; flex-basis: 66px; padding: 9px 12px; }
    .product-modal-footer .btn { flex: 1; padding-inline: 10px; }
    .page-products #product-create.product-editor-dialog { width: calc(100vw - 20px); height: calc(100dvh - 20px); }
    .product-wizard-progress { min-height: 70px; padding: 0 8px; }
    .product-wizard-progress button { gap: 0; padding: 9px 4px; }
    .product-wizard-progress button > span { width: 32px; height: 32px; flex-basis: 32px; }
    .product-wizard-progress button strong { display: none; }
    .product-wizard-panel { padding: 24px 16px 28px; }
    .product-wizard-body > .product-modal-alert { margin: 12px 16px 0; }
    .product-wizard-grid,
    .product-wizard-price-grid,
    .product-wizard-review { grid-template-columns: 1fr; }
    .product-wizard-stock-fields { grid-template-columns: 1fr; }
    .product-wizard-stock-toggle { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; padding: 14px; }
    .product-wizard-stock-toggle-icon { width: 38px; height: 38px; }
    .product-wizard-stock-fields { gap: 14px; padding: 14px; }
    .product-wizard-grid .span-2 { grid-column: auto; }
    .product-wizard-footer > span { display: none; }
    .product-wizard-footer > div { width: 100%; }
    .page-products .product-detail-top { padding-inline: 16px !important; }
    .page-products .product-detail-top .service-detail-back { margin-top: 16px; }
    .page-products .product-detail-workspace > .profile-alert,
    .page-products .product-detail-panels { margin-inline: 14px; }
    .page-products .product-detail-hero { align-items: stretch; flex-direction: column; }
    .page-products .product-detail-hero .service-detail-actions { justify-content: flex-start; }
    .page-products .service-profile-metrics { grid-template-columns: 1fr 1fr; }
    .page-products .service-detail-side,
    .page-products .service-overview-copy dl,
    .page-products .service-detail-data-grid { grid-template-columns: 1fr; }
    .page-products .service-detail-data-grid .span-2 { grid-column: auto; }
}

@media (max-width: 480px) {
    .page-products .products-filter-tabs { overflow-x: auto; }
    .page-products .products-filter-tabs button { min-width: 74px; }
    .page-products .service-profile-metrics { grid-template-columns: 1fr; }
    .page-products .product-detail-hero h1 { font-size: 27px; }
}