/* Videostijl pakket 4: Winkel en Verkopen.
   Webshop bouwen (lijst, templates, stap 2 en 3, editor, Liquid-secties, verwijderen-venster), Winkelwagen, Checkout-logo,
   Bundels, Advertentie maken (kop, editor, vensters), Pakkettracking en het formulier van Klantenservice.
   Rust bij werken: kaarten, velden, tabs en badges uit vs-shared.css, geen gloed, geen streepje onder koppen.

   Geladen ná vs-shared.css (in office.html, bundles.html, cart-builder.html en checkout-logo.html).
   Winnen zonder !important: elke regel begint met
     body:not(#vs):not(#vs-winkel)  → twee id's, plus het id of de klasse van de pagina zelf.
   De winkel van de student (voorbeeld van de productpagina, winkelwagen en checkout, volgpagina voor klanten) blijft zoals hij is. */

/* ================= Webshop bouwen ================= */

/* Mijn productpagina's: de lijst is één kaart, rijen met een rustige lijn. */
body:not(#vs):not(#vs-winkel) #webshopBuildCenter .pp-page-list { border: 1px solid var(--vs-edge); border-radius: 20px; background: var(--vs-card); box-shadow: none; overflow: hidden; }
body:not(#vs):not(#vs-winkel) #webshopBuildCenter .pp-page-list .pp-table-head { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vs-muted); background: var(--vs-head-bg); border-bottom: 1px solid var(--vs-hair); }
body:not(#vs):not(#vs-winkel) #webshopBuildCenter .pp-page-list .pp-page-row { border-top: 1px solid var(--vs-row); background: none; }
body:not(#vs):not(#vs-winkel) #webshopBuildCenter .pp-page-list .pp-table-head + .pp-page-row { border-top: 0; }
body:not(#vs):not(#vs-winkel) #webshopBuildCenter .pp-page-list .pp-page-row:hover { background: rgba(91, 139, 255, 0.05); }
body:not(#vs):not(#vs-winkel) #webshopBuildCenter .pp-page-date { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; color: var(--vs-muted); }
/* Status van een pagina = de gedeelde badge: concept grijs, klaar groen, in Shopify blauw. */
body:not(#vs):not(#vs-winkel) #webshopBuildCenter .pp-page-status { display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid var(--vs-hair); border-radius: 999px; background: rgba(255, 255, 255, 0.05); color: var(--vs-copy); font: 600 12px/1.4 "IBM Plex Sans", sans-serif; white-space: nowrap; }
body:not(#vs):not(#vs-winkel) #webshopBuildCenter .pp-page-status.is-ready { border-color: rgba(126, 224, 181, 0.3); background: rgba(126, 224, 181, 0.12); color: var(--vs-ok); }
body:not(#vs):not(#vs-winkel) #webshopBuildCenter .pp-page-status.is-shopify { border-color: rgba(91, 139, 255, 0.3); background: rgba(91, 139, 255, 0.14); color: var(--vs-info-text); }
/* Filterknoppen boven de lijst: de gedeelde tabs (blauwe lijn als hij aan staat). */
body:not(#vs):not(#vs-winkel) #webshopBuildCenter .pp-list-filters { gap: 24px; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
body:not(#vs):not(#vs-winkel) #webshopBuildCenter .pp-list-filters button { min-height: 44px; padding: 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--vs-muted); font: 500 14px "IBM Plex Sans", sans-serif; white-space: nowrap; }
body:not(#vs):not(#vs-winkel) #webshopBuildCenter .pp-list-filters button:hover { color: var(--vs-text); }
body:not(#vs):not(#vs-winkel) #webshopBuildCenter .pp-list-filters button[aria-pressed="true"] { border-bottom-color: var(--vs-accent); background: none; color: var(--vs-text); font-weight: 600; }
body:not(#vs):not(#vs-winkel) #webshopBuildCenter .pp-list-num { font-family: "IBM Plex Mono", ui-monospace, monospace; color: var(--vs-muted); }
/* "Meer acties"-menu en de knop met drie puntjes. */
body:not(#vs):not(#vs-winkel) #webshopBuildCenter .pp-more-button { border: 1px solid var(--vs-ghost-line); border-radius: 12px; background: transparent; color: var(--vs-copy); }
body:not(#vs):not(#vs-winkel) #webshopBuildCenter .pp-more-menu { border: 1px solid var(--vs-edge); border-radius: 14px; background: var(--vs-modal); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); }

/* Lege staten: "Nog geen productpagina's", "Nog geen eigen templates", "Geen secties voor deze zoekopdracht". */
body:not(#vs):not(#vs-winkel) #webshopBuildCenter :is(.pp-page-empty, .pp-template-empty, .wb-library-empty) {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 48px 24px; border: 1px dashed var(--vs-hair); border-radius: 20px; background: none; box-shadow: none; text-align: center;
}
body:not(#vs):not(#vs-winkel) #webshopBuildCenter :is(.pp-page-empty, .pp-template-empty, .wb-library-empty) :is(h2, h3, strong):first-child {
  margin: 0; font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; color: var(--vs-text);
}
body:not(#vs):not(#vs-winkel) #webshopBuildCenter :is(.pp-page-empty, .pp-template-empty, .wb-library-empty) p { max-width: 46ch; margin: 0; font-size: 14px; line-height: 1.6; color: var(--vs-muted); }
body:not(#vs):not(#vs-winkel) #webshopBuildCenter :is(.pp-page-empty, .pp-template-empty, .wb-library-empty) :is(button, a) { margin-top: 8px; }

/* Templates: de standaardkaart en eigen kaarten = de gedeelde kaart. */
body:not(#vs):not(#vs-winkel) #webshopBuildCenter :is(.wb-template-std, .wb-template-mine .pp-template-card) { border: 1px solid var(--vs-edge); border-radius: 20px; background: var(--vs-card); box-shadow: none; }
body:not(#vs):not(#vs-winkel) #ppTemplateDialog { border: 1px solid var(--vs-edge); border-radius: 20px; background: var(--vs-modal); color: var(--vs-text); }

/* Stap 1–3 bovenaan "Nieuwe productpagina": de gedeelde tabs, met een vinkje voor een gedane stap. */
body:not(#vs):not(#vs-winkel) #webshopBuildCenter .pp-progress { display: flex; gap: 28px; border-bottom: 1px solid var(--vs-hair); }
body:not(#vs):not(#vs-winkel) #webshopBuildCenter .pp-progress li { flex: 0 0 auto; }
body:not(#vs):not(#vs-winkel) #webshopBuildCenter .pp-progress button { width: auto; min-height: 44px; margin: 0 0 -1px; padding: 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; box-shadow: none; color: var(--vs-muted); font: 500 14px "IBM Plex Sans", sans-serif; white-space: nowrap; }
body:not(#vs):not(#vs-winkel) #webshopBuildCenter .pp-progress button.is-done { color: var(--vs-copy); }
body:not(#vs):not(#vs-winkel) #webshopBuildCenter .pp-progress button.is-done::before { content: "✓ "; color: var(--vs-ok); }
body:not(#vs):not(#vs-winkel) #webshopBuildCenter .pp-progress button:is(.is-on, [aria-current="step"]) { border-bottom-color: var(--vs-accent); background: none; color: var(--vs-text); font-weight: 600; }
body:not(#vs):not(#vs-winkel) #webshopBuildCenter .pp-progress button:hover { color: var(--vs-text); }
/* Stap 3 (klaarzetten): de uitleg is een rustige glazen kaart. */
body:not(#vs):not(#vs-winkel) #webshopBuildCenter #ppStep3 > .wb-help { padding: 14px 18px; border: 1px solid var(--vs-hair); border-radius: 16px; background: var(--vs-glass); color: var(--vs-copy); font-size: 14px; }

/* Pagina-editor (stap 2): bovenbalk, onderdelenlijst en het paneel rechts. */
html.is-pp-studio body:not(#vs):not(#vs-winkel) #ppStudioBar { border-bottom: 1px solid var(--vs-hair); background: var(--vs-navy); box-shadow: none; }
html.is-pp-studio body:not(#vs):not(#vs-winkel) #ppStudioBar .result-action { min-height: 36px; border: 1px solid var(--vs-ghost-line); border-radius: 12px; background: transparent; color: var(--vs-copy); box-shadow: none; }
html.is-pp-studio body:not(#vs):not(#vs-winkel) #ppStudioBar .result-action:hover:not(:disabled) { border-color: rgba(91, 139, 255, 0.4); color: var(--vs-text); }
html.is-pp-studio body:not(#vs):not(#vs-winkel) #ppStudioBar .result-action:is(.is-on, [aria-pressed="true"]) { border-color: rgba(91, 139, 255, 0.45); background: rgba(91, 139, 255, 0.14); color: var(--vs-text); }
html.is-pp-studio body:not(#vs):not(#vs-winkel) #ppStudioBar :is(#ppShopifySave, .cta:not(.cta-secondary)) { border: 0; background: var(--vs-accent); color: #ffffff; }
/* De naam van een onderdeel op één regel; "Leeg" schuift er niet meer overheen. */
html.is-pp-studio body:not(#vs):not(#vs-winkel) #ppSectionNav .pp-tree-row { gap: 8px; border-radius: 12px; }
html.is-pp-studio body:not(#vs):not(#vs-winkel) #ppSectionNav .pp-tree-name { flex: 1 1 auto; min-width: 0; overflow: hidden; padding: 0; line-height: 36px; text-overflow: ellipsis; white-space: nowrap; }
html.is-pp-studio body:not(#vs):not(#vs-winkel) #ppSectionNav .pp-tree-row em { flex: 0 0 auto; padding: 2px 8px; border: 1px solid var(--vs-hair); border-radius: 999px; background: rgba(255, 255, 255, 0.05); color: var(--vs-muted); font: 600 11px/1.4 "IBM Plex Sans", sans-serif; }
html.is-pp-studio body:not(#vs):not(#vs-winkel) #ppSectionNav .pp-tree-row.is-on { border-radius: 12px; background: rgba(91, 139, 255, 0.1); box-shadow: inset 2px 0 0 var(--vs-accent); }
/* Met een muis: het oogje en het menu liggen rechts óver de rij en tellen niet mee voor de breedte, zodat de naam leesbaar blijft. */
@media (hover: hover) {
  html.is-pp-studio body:not(#vs):not(#vs-winkel) #ppSectionNav .pp-tree-row { position: relative; }
  html.is-pp-studio body:not(#vs):not(#vs-winkel) #ppSectionNav .pp-tree-row :is(.pp-eye, .pp-menu-slot) { position: absolute; top: 50%; transform: translateY(-50%); }
  html.is-pp-studio body:not(#vs):not(#vs-winkel) #ppSectionNav .pp-tree-row .pp-eye { right: 36px; }
  html.is-pp-studio body:not(#vs):not(#vs-winkel) #ppSectionNav .pp-tree-row .pp-menu-slot { right: 8px; }
  html.is-pp-studio body:not(#vs):not(#vs-winkel) #ppSectionNav .pp-tree-row:is(:hover, :focus-within, .is-on) em { visibility: hidden; }
}
/* Paneel rechts: paginacontrole, merkkaart en andere blokken = glazen kaarten, velden uit vs-shared. */
html.is-pp-studio body:not(#vs):not(#vs-winkel) #ppEditor :is(.pp-page-check, .pp-brand-card) { border: 1px solid var(--vs-hair); border-radius: 16px; background: var(--vs-glass); box-shadow: none; }
html.is-pp-studio body:not(#vs):not(#vs-winkel) #ppEditor .pp-check-row { border: 1px solid var(--vs-hair); border-radius: 12px; background: rgba(255, 255, 255, 0.02); }
html.is-pp-studio body:not(#vs):not(#vs-winkel) #ppEditor > h2:first-child,
html.is-pp-studio body:not(#vs):not(#vs-winkel) #ppEditor .pp-panel-title { font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }

/* Liquid-secties: de kaarten in de lijst, de mini-labels en de zoekbalk. Het stijlpaneel en de editor gebruiken de gedeelde velden. */
body:not(#vs):not(#vs-winkel) #webshopBuildCenter #wbSections .wb-overview { border: 1px solid var(--vs-edge); border-radius: 20px; background: var(--vs-card); box-shadow: none; }
body:not(#vs):not(#vs-winkel) #webshopBuildCenter #wbSections .wb-overview:hover { border-color: rgba(91, 139, 255, 0.45); }
body:not(#vs):not(#vs-winkel) #webshopBuildCenter .wb-mini-chip { border: 1px solid var(--vs-hair); border-radius: 999px; background: rgba(255, 255, 255, 0.05); color: var(--vs-copy); font: 600 12px/1.4 "IBM Plex Sans", sans-serif; }

/* Editor van een sectie: tabs Inhoud / Vormgeving / Plaatsen = de gedeelde tabs; labels in de gedeelde stijl. */
body:not(#vs):not(#vs-winkel) #webshopBuildCenter .wb-editor-side .wb-progress { display: flex; gap: 28px; padding: 0; border: 0; border-bottom: 1px solid var(--vs-hair); border-radius: 0; background: none; box-shadow: none; }
body:not(#vs):not(#vs-winkel) #webshopBuildCenter .wb-editor-side .wb-editor-tab { flex: 0 0 auto; width: auto; min-height: 44px; margin: 0 0 -1px; padding: 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; box-shadow: none; color: var(--vs-muted); font: 500 14px "IBM Plex Sans", sans-serif; }
body:not(#vs):not(#vs-winkel) #webshopBuildCenter .wb-editor-side .wb-editor-tab:hover { color: var(--vs-text); }
body:not(#vs):not(#vs-winkel) #webshopBuildCenter .wb-editor-side .wb-editor-tab.is-on { border-bottom-color: var(--vs-accent); color: var(--vs-text); font-weight: 600; }
body:not(#vs):not(#vs-winkel) #webshopBuildCenter .wb-fields > label { font-family: "IBM Plex Sans", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--vs-copy); }
body:not(#vs):not(#vs-winkel) #webshopBuildCenter .wb-fields > label :is(input, select, textarea) { font-size: 15px; font-weight: 400; }

/* Verwijderen-venster: de gedeelde venster-kop (vs-shared) met een duidelijke rode knop. */
body:not(#vs):not(#vs-winkel) #ppDeleteModal .office-modal-card > p { color: var(--vs-copy); font-size: 15px; line-height: 1.6; }
body:not(#vs):not(#vs-winkel) #ppDeleteModal .pd-inline-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
body:not(#vs):not(#vs-winkel) #ppDeleteModal :is(#ppDeleteCancel, #ppDeleteConfirm) { min-height: 44px; padding: 0 18px; border-radius: 12px; font-weight: 600; }
body:not(#vs):not(#vs-winkel) #ppDeleteModal #ppDeleteCancel { border: 1px solid var(--vs-ghost-line); background: transparent; color: var(--vs-copy); }
body:not(#vs):not(#vs-winkel) #ppDeleteModal #ppDeleteConfirm { border: 1px solid rgba(255, 143, 156, 0.4); background: rgba(255, 143, 156, 0.12); color: var(--vs-bad); }

/* ================= Winkelwagen en Checkout-logo (eigen pagina in een venster) ================= */
/* Inspector-panelen en stappen = de gedeelde kaart; velden 12px met blauwe focusrand. */
html.is-office body:not(#vs):not(#vs-winkel) :is(.cb-panel, .cb-editor > section, .cb-stage) { border: 1px solid var(--vs-edge); border-radius: 20px; background: var(--vs-card); box-shadow: none; }
html.is-office body:not(#vs):not(#vs-winkel) :is(.cb-field input:not([type="color"]):not([type="range"]):not([type="checkbox"]), .cb-field select, .cb-field textarea) { min-height: 44px; border: 1px solid var(--vs-field-edge); border-radius: 12px; background: var(--vs-field); color: var(--vs-text); }
html.is-office body:not(#vs):not(#vs-winkel) .cb-field input[type="color"] { border: 1px solid var(--vs-field-edge); border-radius: 12px; }
html.is-office body:not(#vs):not(#vs-winkel) .cb-field > span:first-child { font-family: "IBM Plex Sans", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--vs-copy); }
body:not(#vs):not(#vs-winkel) .cl-step { border: 1px solid var(--vs-hair); border-radius: 20px; background: var(--vs-glass); box-shadow: none; }
body:not(#vs):not(#vs-winkel) .cl-step.is-on { border-color: var(--vs-edge); background: var(--vs-card); }
body:not(#vs):not(#vs-winkel) .cl-step-head > span { border: 1px solid var(--vs-hair); background: none; color: var(--vs-muted); font-family: "IBM Plex Mono", ui-monospace, monospace; }
body:not(#vs):not(#vs-winkel) .cl-step.is-on .cl-step-head > span { border-color: var(--vs-accent); background: var(--vs-accent); color: #ffffff; }
body:not(#vs):not(#vs-winkel) .cl-step-head strong { font-family: "Sora", "IBM Plex Sans", sans-serif; letter-spacing: -0.02em; }
body:not(#vs):not(#vs-winkel) .cl-stage { border: 1px solid var(--vs-edge); border-radius: 20px; background: var(--vs-card); }
body:not(#vs):not(#vs-winkel) .cl-upload { border-radius: 16px; border-color: var(--vs-edge); }
body:not(#vs):not(#vs-winkel) :is(.cl-fields input:not([type="checkbox"]), .cl-more-body input:not([type="checkbox"]):not([type="color"]):not([type="range"])) { min-height: 44px; border: 1px solid var(--vs-field-edge); border-radius: 12px; background: var(--vs-field); color: var(--vs-text); }
body:not(#vs):not(#vs-winkel) :is(.cl-fields input, .cl-more-body input):focus { border-color: var(--vs-accent); outline: 2px solid rgba(91, 139, 255, 0.35); outline-offset: 0; }
body:not(#vs):not(#vs-winkel) :is(.cl-fields label, .cl-more-body label) { font-family: "IBM Plex Sans", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--vs-copy); }
body:not(#vs):not(#vs-winkel) .cl-seg button { border-radius: 12px; }

/* ================= Bundels (eigen pagina in een venster) ================= */
body:not(#vs):not(#vs-winkel) main > #app .panel { border: 1px solid var(--vs-edge); border-radius: 20px; background: var(--vs-card); box-shadow: none; }
body:not(#vs):not(#vs-winkel) main > #app :is(.metrics) { border: 1px solid var(--vs-hair); border-radius: 16px; background: var(--vs-glass); }
body:not(#vs):not(#vs-winkel) main > #app .metric strong { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
body:not(#vs):not(#vs-winkel) main > #app .start-guide { border: 1px solid var(--vs-edge-hero); border-radius: 18px; background: var(--vs-hero); box-shadow: none; }
body:not(#vs):not(#vs-winkel) main > #app .start-guide .eyebrow { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.2em; color: var(--vs-accent); }
/* Status van een bundel = de gedeelde badge. */
body:not(#vs):not(#vs-winkel) main > #app .status { display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid var(--vs-hair); border-radius: 999px; background: rgba(255, 255, 255, 0.05); color: var(--vs-copy); font: 600 12px/1.4 "IBM Plex Sans", sans-serif; white-space: nowrap; }
body:not(#vs):not(#vs-winkel) main > #app .status:is(.running, .winner) { border-color: rgba(126, 224, 181, 0.3); background: rgba(126, 224, 181, 0.12); color: var(--vs-ok); }
body:not(#vs):not(#vs-winkel) main > #app .status:is(.paused, .preparing) { border-color: rgba(255, 196, 107, 0.3); background: rgba(255, 196, 107, 0.12); color: var(--vs-warn); }
body:not(#vs):not(#vs-winkel) main > #app .status.failed { border-color: rgba(255, 143, 156, 0.3); background: rgba(255, 143, 156, 0.12); color: var(--vs-bad); }
body:not(#vs):not(#vs-winkel) main > #app .ab { border: 1px solid rgba(91, 139, 255, 0.3); border-radius: 999px; background: rgba(91, 139, 255, 0.14); color: var(--vs-info-text); }
/* Tabel: kopregel in mono, cijfers in mono. */
body:not(#vs):not(#vs-winkel) main > #app th { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vs-muted); background: var(--vs-head-bg); }
body:not(#vs):not(#vs-winkel) main > #app td { border-top: 1px solid var(--vs-row); }
body:not(#vs):not(#vs-winkel) main > #app td:nth-child(n+3):not(:last-child) { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
body:not(#vs):not(#vs-winkel) main > #app .row-actions button { border: 1px solid var(--vs-ghost-line); border-radius: 12px; background: transparent; color: var(--vs-copy); }
/* Lege staat "Je eerste bundel begint hier" / "Geen bundels gevonden". */
body:not(#vs):not(#vs-winkel) main > #app .empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 24px; text-align: center; }
body:not(#vs):not(#vs-winkel) main > #app .empty h2 { margin: 0; font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--vs-text); }
body:not(#vs):not(#vs-winkel) main > #app .empty p { max-width: 46ch; margin: 0; font-size: 14px; line-height: 1.6; color: var(--vs-muted); }
/* Melding bovenaan (opgeslagen, of "Activatie mislukt"). */
body:not(#vs):not(#vs-winkel) #notice:not(:empty) { border: 1px solid var(--vs-edge); border-radius: 16px; background: rgba(91, 139, 255, 0.08); color: var(--vs-text); }
body:not(#vs):not(#vs-winkel) #notice.error:not(:empty) { border-color: rgba(255, 143, 156, 0.35); background: rgba(255, 143, 156, 0.1); color: var(--vs-bad); }
/* 4-stappen-ontwerper: secties, keuzes en vergelijkingen. */
body:not(#vs):not(#vs-winkel) main > #app .editor-section { border-color: var(--vs-hair); }
body:not(#vs):not(#vs-winkel) main > #app :is(.offer, .selected-product, .product-choice, .test-setup, .publish-summary, .product-next-step, .ab-choice, .ab-explanation) { border: 1px solid var(--vs-hair); border-radius: 16px; background: var(--vs-glass); box-shadow: none; }
body:not(#vs):not(#vs-winkel) main > #app :is(.product-choice, .ab-choice):is([aria-pressed="true"], .is-on) { border-color: rgba(91, 139, 255, 0.45); background: rgba(91, 139, 255, 0.1); }
body:not(#vs):not(#vs-winkel) main > #app :is(.controls, .preview-stage) { border-color: var(--vs-edge); border-radius: 20px; }
body:not(#vs):not(#vs-winkel) main > #app .section-label { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 500; letter-spacing: 0.2em; color: var(--vs-accent); }
body:not(#vs):not(#vs-winkel) main > #app .publish-checks .check-ok { color: var(--vs-ok); }
body:not(#vs):not(#vs-winkel) main > #app .publish-checks .check-missing { color: var(--vs-warn); }
body:not(#vs):not(#vs-winkel) main > #app :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]), select, textarea) { border: 1px solid var(--vs-field-edge); border-radius: 12px; background-color: var(--vs-field); color: var(--vs-text); }
body:not(#vs):not(#vs-winkel) main > #app :is(input, select, textarea):focus { border-color: var(--vs-accent); outline: 2px solid rgba(91, 139, 255, 0.35); outline-offset: 0; }
/* Bevestigen-venster in Bundels. */
body:not(#vs):not(#vs-winkel) dialog#confirm .actions button:not(.primary) { border: 1px solid var(--vs-ghost-line); border-radius: 12px; background: transparent; color: var(--vs-copy); }

/* ================= Advertentie maken (kop, editor, vensters) ================= */
/* Het klaar-scherm staat al in nieuwe-stijl.css (#167) en blijft zoals het is. */
body[data-agent="ad-maker"]:not(#vs):not(#vs-winkel) #adMakerOffice .am-title .vs-kick { font-size: 13px; }
body[data-agent="ad-maker"]:not(#vs):not(#vs-winkel) #adMakerOffice .am-title h1.vs-title { font-size: 34px; overflow-wrap: anywhere; }
body[data-agent="ad-maker"]:not(#vs):not(#vs-winkel) #adMakerOffice .am-title h1:not(.vs-title) { font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 26px; font-weight: 700; letter-spacing: -0.03em; }
body[data-agent="ad-maker"]:not(#vs):not(#vs-winkel) #adMakerOffice .am-card { border-color: var(--vs-edge); border-radius: 20px; background: var(--vs-card); box-shadow: none; }
body[data-agent="ad-maker"]:not(#vs):not(#vs-winkel) #adMakerOffice .am-k.is-accent { font-size: 12px; letter-spacing: 0.2em; color: var(--vs-accent); }
body[data-agent="ad-maker"]:not(#vs):not(#vs-winkel) #adMakerOffice .am-empty { align-items: center; padding: 40px 24px; text-align: center; }
body[data-agent="ad-maker"]:not(#vs):not(#vs-winkel) #adMakerOffice .am-empty h2 { font-family: "Sora", "IBM Plex Sans", sans-serif; letter-spacing: -0.02em; }
/* Vensters: doel kiezen, land kiezen, product kiezen = het gedeelde venster. */
body[data-agent="ad-maker"]:not(#vs):not(#vs-winkel) #adMakerOffice .am-scrim { background: rgba(6, 8, 18, 0.72); backdrop-filter: blur(6px); }
body[data-agent="ad-maker"]:not(#vs):not(#vs-winkel) #adMakerOffice .am-dialog { border: 1px solid var(--vs-edge); border-radius: 20px; background: var(--vs-modal); box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6); }
body[data-agent="ad-maker"]:not(#vs):not(#vs-winkel) #adMakerOffice .am-dialog .am-dhead h2,
body[data-agent="ad-maker"]:not(#vs):not(#vs-winkel) #adMakerOffice .am-big-top h2 { font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 26px; font-weight: 700; letter-spacing: -0.03em; }
body[data-agent="ad-maker"]:not(#vs):not(#vs-winkel) #adMakerOffice .am-big { background: rgba(6, 8, 18, 0.9); }

/* ================= Pakkettracking ================= */
/* De statusbadge krijgt zijn kleur terug: onderweg blauw, bezorgd groen, probleem oranje, de rest grijs. */
body:not(#vs):not(#vs-winkel) #parcelOffice .pt-pill:is([data-status="transit"], [data-status="delivery"], [data-status="label"], [data-status="pickup"]) { border-color: rgba(91, 139, 255, 0.3); background: rgba(91, 139, 255, 0.14); color: var(--vs-info-text); }
body:not(#vs):not(#vs-winkel) #parcelOffice .pt-pill[data-status="delivered"] { border-color: rgba(126, 224, 181, 0.3); background: rgba(126, 224, 181, 0.12); color: var(--vs-ok); }
body:not(#vs):not(#vs-winkel) #parcelOffice .pt-pill[data-status="exception"] { border-color: rgba(255, 196, 107, 0.3); background: rgba(255, 196, 107, 0.12); color: var(--vs-warn); }
body:not(#vs):not(#vs-winkel) #parcelOffice .pt-alert { color: var(--vs-warn); }
body:not(#vs):not(#vs-winkel) #parcelOffice .pt td small { font-family: "IBM Plex Mono", ui-monospace, monospace; color: var(--vs-muted); }
body:not(#vs):not(#vs-winkel) #parcelOffice .pt-notice { border-color: var(--vs-hair); border-radius: 16px; background: var(--vs-glass); color: var(--vs-copy); font-size: 13px; }
body:not(#vs):not(#vs-winkel) #parcelOffice .pt-row-btn { min-height: 36px; border: 1px solid var(--vs-ghost-line); border-radius: 12px; background: transparent; color: var(--vs-copy); }
body:not(#vs):not(#vs-winkel) #parcelOffice .pt-row-btn:hover { border-color: rgba(91, 139, 255, 0.4); color: var(--vs-text); }
/* Zendingdetail: elke zending is een glazen kaart, de tijdlijn is de blauwe lichtlijn. */
body:not(#vs):not(#vs-winkel) #parcelOffice .pt-shipment { border: 1px solid var(--vs-hair); border-radius: 16px; background: var(--vs-glass); }
body:not(#vs):not(#vs-winkel) #parcelOffice .pt-shipment h3 { font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 16px; letter-spacing: -0.02em; }
body:not(#vs):not(#vs-winkel) #parcelOffice .pt-timeline li { border-left-color: rgba(91, 139, 255, 0.35); }
body:not(#vs):not(#vs-winkel) #parcelOffice .pt-timeline li::before { background: var(--vs-accent); box-shadow: 0 0 10px rgba(91, 139, 255, 0.6); }
body:not(#vs):not(#vs-winkel) #parcelOffice .pt-timeline time { font-family: "IBM Plex Mono", ui-monospace, monospace; }
body:not(#vs):not(#vs-winkel) #parcelOffice .pt a { color: var(--vs-accent); }
body:not(#vs):not(#vs-winkel) #parcelOffice dialog .pt-notice { padding: 16px 18px; }

/* ================= Klantenservice: het formulier ================= */
/* Geen streepje onder de kop. */
body:not(#vs):not(#vs-winkel) #customerServiceOffice .cs-head { border-bottom: 0; }
body:not(#vs):not(#vs-winkel) #customerServiceOffice .cs-card { border: 1px solid var(--vs-edge); border-radius: 20px; background: var(--vs-card); box-shadow: none; }
body:not(#vs):not(#vs-winkel) #customerServiceOffice .cs label { font-family: "IBM Plex Sans", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--vs-copy); }
body:not(#vs):not(#vs-winkel) #customerServiceOffice .cs :is(textarea, input) { border: 1px solid var(--vs-field-edge); border-radius: 12px; background: var(--vs-field); color: var(--vs-text); }
body:not(#vs):not(#vs-winkel) #customerServiceOffice .cs input { min-height: 48px; }
body:not(#vs):not(#vs-winkel) #customerServiceOffice .cs :is(textarea, input):focus { border-color: var(--vs-accent); outline: 2px solid rgba(91, 139, 255, 0.35); outline-offset: 0; }
/* "Nog geen antwoord": de gedeelde lege staat; de kaart eromheen wordt een stille kaart met stippellijn. */
body:not(#vs):not(#vs-winkel) #customerServiceOffice #csResult:has(> .cs-empty:only-child) { display: flex; align-items: center; justify-content: center; min-height: 240px; border-style: dashed; border-color: var(--vs-hair); background: none; }
body:not(#vs):not(#vs-winkel) #customerServiceOffice .cs-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 32px 16px; border: 0; background: none; text-align: center; }
body:not(#vs):not(#vs-winkel) #customerServiceOffice .cs-empty h2 { margin: 0; font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--vs-text); }
body:not(#vs):not(#vs-winkel) #customerServiceOffice .cs-empty p { max-width: 46ch; margin: 0 auto; font-size: 14px; line-height: 1.6; color: var(--vs-muted); }
body:not(#vs):not(#vs-winkel) #customerServiceOffice .cs-status { font-size: 13px; color: var(--vs-muted); }
body:not(#vs):not(#vs-winkel) #customerServiceOffice .cs-status.cs-error { color: var(--vs-bad); }
body:not(#vs):not(#vs-winkel) #customerServiceOffice .cs-tag { border-radius: 999px; }

/* ================= Telefoon ================= */
@media (max-width: 560px) {
  body:not(#vs):not(#vs-winkel) #webshopBuildCenter .pp-progress { gap: 18px; overflow-x: auto; scrollbar-width: none; }
  body:not(#vs):not(#vs-winkel) #webshopBuildCenter .pp-list-filters { gap: 18px; }
  body:not(#vs):not(#vs-winkel) #webshopBuildCenter :is(.pp-page-empty, .pp-template-empty, .wb-library-empty),
  body:not(#vs):not(#vs-winkel) main > #app .empty { padding: 32px 16px; }
  body[data-agent="ad-maker"]:not(#vs):not(#vs-winkel) #adMakerOffice .am-title h1.vs-title { font-size: 30px; }
}

/* Dagwinst verbeterd (sessie dagwinst-verbeteren): hele breedte, lege velden zien er leeg uit,
   terugbetalingen als vaste regel, break-even ROAS en winst per bestelling, opslagstatus. */
#calcCenter #wcPage .wc-day-layout { max-width: 1560px; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 18px; }
#calcCenter #wcPage .wc-day-main { gap: 18px; }
@media (min-width: 1500px) {
  #calcCenter #wcPage .wc-day-main { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  #calcCenter #wcPage .wc-day-main .wc-fetch-actions { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  #calcCenter #wcPage .wc-day-layout { grid-template-columns: minmax(0, 1fr); }
}
#calcCenter #wcPage .wc-field input::placeholder { color: #4f587a; font-style: italic; font-weight: 400; }
#calcCenter #wcPage .wc-primary-costs input::placeholder { font-size: 16px; }
#calcCenter #wcPage .wc-loaded-overview input:not([readonly])::placeholder { font-size: 18px; }
#calcCenter #wcPage .wc-meta-import > .wc-fetch-status { margin: 8px 0 0; }

#calcCenter #wcPage .wc-refund-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, 0.02); color: var(--copy); font-size: 14px; }
#calcCenter #wcPage .wc-refund-line.is-refund { border-color: rgba(255, 107, 122, 0.25); background: rgba(255, 107, 122, 0.06); }
#calcCenter #wcPage .wc-refund-line strong { font-family: var(--font-num); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
#calcCenter #wcPage .wc-refund-line.is-refund strong { color: var(--afwijzen); }
#calcCenter #wcPage .wc-refund-end { display: inline-flex; align-items: center; gap: 12px; }
#calcCenter #wcPage .wc-refund-note { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
#calcCenter #wcPage .wc-link-btn { padding: 0; border: 0; background: none; color: #9db4ff; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
#calcCenter #wcPage .wc-link-btn:hover { color: var(--text); text-decoration: underline; }
#calcCenter #wcPage .wc-cost-auto { margin: 2px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
#calcCenter #wcPage .wc-cost-auto b { color: var(--copy); font-weight: 500; }
#calcCenter #wcPage .wc-cost-auto .wc-link-btn { font-size: 12px; }

#calcCenter #wcDayResult .wc-result-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
#calcCenter #wcDayResult .wc-result-head .wc-panel-title { margin: 0; }
#calcCenter #wcPage .wc-save-chip { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 5px 11px; border: 1px solid rgba(227, 184, 106, 0.35); border-radius: 999px; background: rgba(227, 184, 106, 0.07); color: #e3b86a; font-size: 12px; font-weight: 500; white-space: nowrap; }
#calcCenter #wcPage .wc-save-chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
#calcCenter #wcPage .wc-save-chip.is-ok { border-color: rgba(62, 207, 142, 0.35); background: rgba(62, 207, 142, 0.08); color: var(--testen); }
#calcCenter #wcDayResult #wcProfitCard { grid-row: auto; grid-column: auto; }
#calcCenter #wcDayResult .wc-result-main { display: grid; gap: 4px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
#calcCenter #wcDayResult .wc-result-main .wc-result-value { font-family: var(--font-brand); font-size: 38px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
#calcCenter #wcDayResult .wc-result-main .wc-result-value.is-pending { color: var(--copy); }
#calcCenter #wcDayResult .wc-result-main .wc-result-note { margin: 0; font-size: 13px; color: var(--muted); }
#calcCenter #wcDayResult .wc-result-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#calcCenter #wcDayResult .wc-result-item { padding: 12px; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 3px; align-content: start; }
#calcCenter #wcDayResult .wc-result-item .wc-result-value { font-size: 20px; white-space: nowrap; }
#calcCenter #wcDayResult .wc-result-item .wc-result-note { margin: 0; font-size: 12px; color: var(--muted); }
#calcCenter #wcDayResult .wc-result-note.is-profit { color: var(--testen); }
#calcCenter #wcDayResult .wc-result-note.is-loss { color: var(--afwijzen); }
#calcCenter #wcPage .wc-day-missing { display: grid; gap: 6px; margin: 14px 0 0; padding: 12px 14px; border: 1px dashed rgba(227, 184, 106, 0.45); border-radius: 12px; background: transparent; }
#calcCenter #wcPage .wc-day-missing p { margin: 0; color: #e3b86a; font-size: 13px; font-weight: 600; }
#calcCenter #wcPage .wc-day-missing ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; color: var(--copy); font-size: 13px; }
#calcCenter #wcDayResult .wc-footnote { margin: 12px 0 0; font-size: 12px; color: var(--muted); }
#calcCenter #wcDayResult .wc-save-row { display: grid; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
#calcCenter #wcDayResult .wc-save-row .wc-field-hint { margin: 0; font-size: 13px; }
@media (max-width: 600px) {
  #calcCenter #wcDayResult .wc-result-main .wc-result-value { font-size: 32px; }
  #calcCenter #wcDayResult .wc-result-item .wc-result-value { font-size: 18px; }
}
/* Winst berekenen gebruikt de breedte van een groot scherm. */
body[data-agent="calculator"] #calcCenter { max-width: 1640px; }
body[data-agent="calculator"] .center-head-calc { max-width: 1576px; }
#calcCenter #wcPage .wc-product-results { max-width: 1560px; }

/* BEP berekenen verbeterd (sessie bep-verbeteren): product bovenaan, 1/2/3 stuks naast elkaar,
   lege velden zien er leeg uit, "Nog nodig" zoals bij Dagwinst. */
#calcCenter #wcPage .wc-bep-block { display: grid; gap: 16px; width: 100%; max-width: 1560px; margin: 0 auto 18px; }
#calcCenter #wcPage .wc-bep-setup { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
#calcCenter #wcPage .wc-bep-setup select { min-height: 46px; padding: 0 12px; border: 1px solid #262e52; border-radius: 10px; background: rgba(10, 13, 26, 0.5); color: var(--text); font: inherit; font-size: 15px; }
#calcCenter #wcPage .wc-bep-setup select:focus { border-color: var(--ice); outline: none; }
#calcCenter #wcPage .wc-bep-source { font-size: 12px; font-weight: 400; color: var(--muted); line-height: 1.5; }
#calcCenter #wcPage .wc-field input::placeholder { color: #4f587a; font-style: italic; font-weight: 400; }
#calcCenter #wcPage #wcBepPricesPanel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
#calcCenter #wcPage #wcBepPricesPanel .wc-bep-qty { margin: 0; padding: 18px 20px; display: grid; gap: 14px; border-top: 1px solid var(--line); }
#calcCenter #wcPage #wcBepPricesPanel .wc-bep-qty[hidden] { display: grid; }
#calcCenter #wcPage #wcBepPricesPanel .wc-fields { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
#calcCenter #wcPage .wc-bep-qty-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0; }
#calcCenter #wcPage .wc-bep-qty-head h3 { font-size: 18px; }
#calcCenter #wcPage .wc-bep-best { padding: 3px 10px; border: 1px solid rgba(62, 207, 142, 0.3); border-radius: 999px; background: rgba(62, 207, 142, 0.1); color: var(--testen); font-size: 11px; font-weight: 600; white-space: nowrap; }
#calcCenter #wcPage #wcBepPricesPanel .wc-bep-outcome { display: grid; gap: 10px; padding: 14px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
#calcCenter #wcPage #wcBepPricesPanel .wc-bep-outcome .wc-day-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; border: 0; background: none; overflow: visible; }
#calcCenter #wcPage #wcBepPricesPanel .wc-bep-outcome .wc-day-result-card { display: grid; gap: 4px; align-content: start; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(10, 13, 26, 0.35); }
#calcCenter #wcPage #wcBepPricesPanel .wc-bep-outcome .wc-day-result-card:first-child .wc-day-result-value { color: var(--testen); }
#calcCenter #wcPage #wcBepPricesPanel .wc-bep-outcome .wc-day-result-kicker { font-size: 11px; letter-spacing: 0.06em; line-height: 1.35; }
#calcCenter #wcPage #wcBepPricesPanel .wc-bep-outcome .wc-day-result-value { margin: 0; font-size: 22px; white-space: nowrap; }
#calcCenter #wcPage #wcBepPricesPanel .wc-field-hint:empty { display: none; }
#calcCenter #wcPage .wc-bep-need { display: grid; gap: 6px; margin: 0; padding: 12px 14px; border: 1px dashed rgba(227, 184, 106, 0.45); border-radius: 12px; }
#calcCenter #wcPage .wc-bep-need p { margin: 0; color: #e3b86a; font-size: 13px; font-weight: 600; }
#calcCenter #wcPage .wc-bep-need ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; color: var(--copy); font-size: 13px; font-weight: 400; }
#calcCenter #wcPage .wc-bep-need.is-error { border-color: rgba(255, 107, 122, 0.45); }
#calcCenter #wcPage .wc-bep-need.is-error p { color: var(--afwijzen); }
#calcCenter #wcPage .wc-bep-build { margin: 0; }
#calcCenter #wcPage .wc-bep-build .wc-vs-result { margin-top: 8px; }
#calcCenter #wcPage .wc-bep-explain, #calcCenter #wcPage #wcBepSettingsNote { margin: 0; max-width: 90ch; font-size: 12px; color: var(--muted); line-height: 1.55; }
@media (max-width: 1250px) {
  #calcCenter #wcPage #wcBepPricesPanel { grid-template-columns: minmax(0, 1fr); }
  #calcCenter #wcPage .wc-bep-setup { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #calcCenter #wcPage .wc-bep-setup > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  #calcCenter #wcPage .wc-bep-setup { grid-template-columns: minmax(0, 1fr); }
}
/* Bronlabel (Bundelmaker / Leveranciersprijs / Meta CSV / Handmatig) bij BEP en de kosten van Dagwinst. */
#calcCenter #wcPage :is(#wcBepPricesPanel, #wcDayPanel .wc-primary-costs) .wc-source-badge:not([hidden]) { display: inline-flex; align-items: center; padding: 2px 8px; border: 0; border-radius: 999px; background: rgba(91, 139, 255, 0.12); color: #9db4ff; font-size: 11px; font-style: normal; font-weight: 500; white-space: nowrap; }
#calcCenter #wcPage :is(#wcBepPricesPanel, #wcDayPanel .wc-primary-costs) .wc-field-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }