/* Gedeelde startschermstijl van de Productscan (scan-start.css) voor de andere tabbladen.
   Kop met .vs-kick / .vs-title / .vs-acc (videostijl.css), stappen 1-2-3 links (.ts-step, .ts-n),
   rechts een telefoon met draaiend randlicht (.ts-stage > .ts-phone) en een grote gloeiende knop (.ts-go).
   De telefoon alleen waar je laat zien wat je klant ziet; voor dagelijks werk een brede kaart met hetzelfde randlicht (.ts-stage.ts-card).
   De animaties (ps-spin, ps-glow, ps-aurora, ps-btn) komen uit scan-start.css.
   Geladen als laatste stylesheet; body:not(#vs):not(#ts) wint van de oudere lagen. Per tabblad staat onderaan
   alleen de indeling: welke bestaande onderdelen in de stappen, in de telefoon en onder de telefoon komen. */

body:not(#vs):not(#ts) .ts-start {
  --ts-blue: #4f6fff;
  --ts-ice: #7c9bff;
  --ts-pw: 244px;
  --ts-ph: 474px;
  --ts-s: 1;
}

/* ---------- Kop en stappen ---------- */
body:not(#vs):not(#ts) .ts-start .vs-title { font-size: clamp(34px, 3.4vw, 50px); }
body:not(#vs):not(#ts) .ts-n { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px; width: 30px; height: 30px; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 50%; background: #0e1226; color: var(--muted, #8790b5); font-family: var(--font-num, "IBM Plex Mono", monospace); font-size: 12px; font-weight: 600; letter-spacing: 0; }
body:not(#vs):not(#ts) .ts-start .ts-n.is-current { border: 2px solid var(--ice, #5b8bff); background: #16204a; color: #ffffff; }
body:not(#vs):not(#ts) .ts-step { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
body:not(#vs):not(#ts) .ts-step strong { display: block; font-size: 15px; font-weight: 600; color: var(--text, #eef1f8); }
body:not(#vs):not(#ts) .ts-step small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted, #8790b5); }

/* ---------- Telefoon met randlicht ---------- */
body:not(#vs):not(#ts) .ts-side { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
body:not(#vs):not(#ts) .ts-stage { position: relative; width: min(340px, 100%); height: calc((var(--ts-ph) + 16px) * var(--ts-s)); display: flex; align-items: center; justify-content: center; }
body:not(#vs):not(#ts) .ts-aurora { position: absolute; left: 50%; top: 50%; width: 320px; height: 320px; margin: -160px 0 0 -160px; border-radius: 50%; background: radial-gradient(circle, rgba(92, 110, 255, 0.55) 0%, rgba(140, 90, 255, 0.25) 45%, rgba(7, 11, 24, 0) 70%); filter: blur(24px); pointer-events: none; transform: scale(var(--ts-s)); animation: ps-aurora 9s ease-in-out infinite; }
body:not(#vs):not(#ts) .ts-phone { position: relative; flex: 0 0 auto; width: var(--ts-pw); height: var(--ts-ph); box-sizing: border-box; padding: 2px; border-radius: 46px; overflow: hidden; isolation: isolate; transform: scale(var(--ts-s)); animation: ps-glow 6s ease-in-out infinite; }
body:not(#vs):not(#ts) .ts-spin { position: absolute; left: 50%; top: 50%; width: 700px; height: 700px; margin: -350px 0 0 -350px; background: conic-gradient(from 0deg, #2a3a90 0deg, #2a3a90 200deg, #7c9bff 260deg, #ffffff 290deg, #a98bff 320deg, #2a3a90 360deg); animation: ps-spin 4s linear infinite; }
body:not(#vs):not(#ts) .ts-body { position: relative; width: 100%; height: 100%; box-sizing: border-box; padding: 10px; border-radius: 44px; background: #0b1230; }
body:not(#vs):not(#ts) .ts-screen { position: relative; width: 100%; height: 100%; box-sizing: border-box; margin: 0; border: 0; border-radius: 34px; overflow: hidden auto; scrollbar-width: none; background: linear-gradient(180deg, #1c2a6e 0%, #12195a 30%, #0b1230 70%, #0a0f28 100%); box-shadow: none; }
body:not(#vs):not(#ts) .ts-screen::-webkit-scrollbar { display: none; }

/* ---------- Brede kaart: zelfde randlicht en gloed, geen apparaat ---------- */
body:not(#vs):not(#ts) .ts-stage.ts-card { width: 100%; height: auto; display: block; }
body:not(#vs):not(#ts) .ts-card .ts-aurora { left: 10%; top: 10%; width: 80%; height: 80%; margin: 0; border-radius: 40%; transform: none; }
body:not(#vs):not(#ts) .ts-card .ts-phone { width: 100%; height: auto; border-radius: 22px; transform: none; }
body:not(#vs):not(#ts) .ts-card .ts-spin { width: 1600px; height: 1600px; margin: -800px 0 0 -800px; animation-duration: 8s; }
body:not(#vs):not(#ts) .ts-card .ts-body { height: auto; padding: 8px; border-radius: 20px; }
body:not(#vs):not(#ts) .ts-card .ts-screen { height: auto; overflow: visible; border-radius: 14px; }

/* ---------- Grote gloeiende knop en de regel eronder ---------- */
body:not(#vs):not(#ts) .ts-go { display: flex; width: min(280px, 100%); min-height: 60px; margin: 0; padding: 0 24px; border: 0; border-radius: 999px; background: var(--ts-blue, #4f6fff); color: #ffffff; font: 700 18px "Sora", "IBM Plex Sans", sans-serif; letter-spacing: 0.01em; align-items: center; justify-content: center; gap: 10px; cursor: pointer; box-shadow: 0 10px 40px rgba(84, 120, 255, 0.45); animation: ps-btn 2s ease-in-out infinite; }
body:not(#vs):not(#ts) .ts-go:hover:not(:disabled) { background: #6080ff; }
body:not(#vs):not(#ts) .ts-go:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }
body:not(#vs):not(#ts) .ts-go:disabled { background: #1c2650; color: #8892b0; box-shadow: none; cursor: not-allowed; animation: none; }
body:not(#vs):not(#ts) .ts-note { max-width: 340px; margin: -6px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted, #8892b0); text-align: center; }

/* Laptop: de telefoon schaalt mee met de schermhoogte, zodat alles zonder scrollen past. */
@media (min-width: 961px) and (max-height: 920px) { body:not(#vs):not(#ts) .ts-start { --ts-s: 0.9; } }
@media (min-width: 961px) and (max-height: 860px) { body:not(#vs):not(#ts) .ts-start { --ts-s: 0.8; } }
@media (min-width: 961px) and (max-height: 800px) { body:not(#vs):not(#ts) .ts-start { --ts-s: 0.7; } }
@media (min-width: 961px) and (max-height: 720px) { body:not(#vs):not(#ts) .ts-start { --ts-s: 0.62; } }

@media (max-width: 720px) {
  body:not(#vs):not(#ts) .ts-start { --ts-pw: 214px; --ts-ph: 416px; }
  body:not(#vs):not(#ts) .ts-aurora { width: 260px; height: 260px; margin: -130px 0 0 -130px; }
  body:not(#vs):not(#ts) .ts-phone { border-radius: 40px; }
  body:not(#vs):not(#ts) .ts-body { border-radius: 38px; padding: 8px; }
  body:not(#vs):not(#ts) .ts-screen { border-radius: 30px; }
  body:not(#vs):not(#ts) .ts-go { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  body:not(#vs):not(#ts) :is(.ts-aurora, .ts-phone, .ts-spin, .ts-go) { animation: none !important; }
  body:not(#vs):not(#ts) .ts-phone { box-shadow: 0 0 50px rgba(84, 120, 255, 0.5), 0 0 140px rgba(84, 120, 255, 0.25); }
}

/* =========================================================================
   Winst berekenen › Dagwinst
   Tabs bovenaan, links kop + stappen, rechts de dagwinst in de brede kaart en de knop Shopify-cijfers ophalen.
   ========================================================================= */
body:not(#vs):not(#ts) #calcCenter #wcPage.ts-start:has(#wcTabDayPanel:not([hidden])) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); grid-template-areas: "tabs tabs" "head side" "main side"; grid-template-rows: auto auto 1fr; gap: 0 56px; align-items: start; max-width: 1180px; }
body:not(#vs):not(#ts) #calcCenter #wcPage.ts-start:has(#wcTabDayPanel:not([hidden])) .wc-tabs { grid-area: tabs; }
body:not(#vs):not(#ts) #calcCenter #wcPage.ts-start:has(#wcTabDayPanel:not([hidden])) .vs-page-head { grid-area: head; margin: 28px 0 14px; }
body:not(#vs):not(#ts) #calcCenter #wcPage.ts-start > .wc-tabs { order: -1; }
body:not(#vs):not(#ts) #calcCenter #wcPage #wcTabDayPanel:not([hidden]), body:not(#vs):not(#ts) #calcCenter #wcPage #wcTabDayPanel .wc-day-layout { display: contents; }
body:not(#vs):not(#ts) #calcCenter #wcPage .wc-tab-panel[hidden] { display: none; }
body:not(#vs):not(#ts) #calcCenter #wcPage .wc-day-main { grid-area: main; display: block; min-width: 0; max-width: 640px; }
body:not(#vs):not(#ts) #calcCenter #wcPage .wc-day-result-col { grid-area: side; align-self: center; position: static; margin: 0; padding: 8px 0 16px; }

/* Stappen: geen kaarten meer, alleen een lijn ertussen. De velden springen in onder de titel. */
body:not(#vs):not(#ts) #calcCenter #wcPage .wc-day-main > .wc-panel { margin: 0; padding: 12px 0 14px 44px; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.06); border-radius: 0; background: none; box-shadow: none; }
body:not(#vs):not(#ts) #calcCenter #wcPage .wc-day-main .wc-panel-title { display: flex; align-items: center; gap: 14px; margin: 0 0 10px -44px; font-family: "IBM Plex Sans", sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--text, #eef1f8); }
body:not(#vs):not(#ts) #calcCenter #wcPage #wcFetchPanel .ts-n { border: 2px solid var(--ice, #5b8bff); background: #16204a; color: #ffffff; }
body:not(#vs):not(#ts) #calcCenter #wcPage .wc-step-last { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
body:not(#vs):not(#ts) #calcCenter #wcPage .wc-day-main .wc-field input, body:not(#vs):not(#ts) #calcCenter #wcPage .wc-day-main .wc-primary-costs input { min-height: 44px; padding: 0 12px; font-size: 15px; }
body:not(#vs):not(#ts) #calcCenter #wcPage .wc-day-main .wc-field { gap: 4px; font-size: 12px; }

/* Stap 1: datum, omzet en bestellingen op één rij; Shopify-status en Meta CSV klein eronder. */
body:not(#vs):not(#ts) #calcCenter #wcPage #wcFetchPanel { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr) minmax(0, 1fr); gap: 8px 10px; align-items: end; }
body:not(#vs):not(#ts) #calcCenter #wcPage #wcFetchPanel > *, body:not(#vs):not(#ts) #calcCenter #wcPage #wcFetchPanel :is(.wc-fetch-top, .wc-loaded-overview) > * { grid-column: 1 / -1; min-width: 0; }
body:not(#vs):not(#ts) #calcCenter #wcPage #wcFetchPanel :is(.wc-fetch-top, .wc-loaded-overview, .wc-loaded-overview > .wc-fields) { display: contents; }
body:not(#vs):not(#ts) #calcCenter #wcPage #wcFetchPanel > .wc-panel-title { grid-column: 1 / 3; grid-row: 1; margin-bottom: 2px; }
body:not(#vs):not(#ts) #calcCenter #wcPage #wcFetchPanel .wc-overview-head { grid-column: 3; grid-row: 1; justify-self: end; align-self: center; margin: 0; }
body:not(#vs):not(#ts) #calcCenter #wcPage #wcFetchPanel .wc-overview-head h3 { display: none; }
body:not(#vs):not(#ts) #calcCenter #wcPage #wcFetchPanel .wc-field-date { grid-column: 1; grid-row: 2; }
body:not(#vs):not(#ts) #calcCenter #wcPage #wcFetchPanel label[for="manualRevenue"] { grid-column: 2; grid-row: 2; }
body:not(#vs):not(#ts) #calcCenter #wcPage #wcFetchPanel label[for="manualSales"] { grid-column: 3; grid-row: 2; }
body:not(#vs):not(#ts) #calcCenter #wcPage #wcFetchPanel .wc-loaded-overview input[readonly] { min-height: 44px; font-size: 22px; }
body:not(#vs):not(#ts) #calcCenter #wcPage #wcFetchPanel .wc-link-status { margin: 0; font-size: 12px; }
body:not(#vs):not(#ts) #calcCenter #wcPage #wcFetchPanel .wc-fetch-actions { display: block; margin: 0; }
body:not(#vs):not(#ts) #calcCenter #wcPage #wcFetchPanel .wc-meta-import { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
body:not(#vs):not(#ts) #calcCenter #wcPage #wcFetchPanel .wc-meta-import > .wc-fetch-status { margin: 0; font-size: 12px; }
body:not(#vs):not(#ts) #calcCenter #wcPage #wcFetchPanel #wcMetaCsvUpload { width: auto; min-height: 36px; padding: 0 14px; font-size: 13px; }
body:not(#vs):not(#ts) #calcCenter #wcPage #wcFetchPanel .wc-refund-line { margin: 0; }

/* Stap 2: twee velden naast elkaar, correcties ingeklapt. */
body:not(#vs):not(#ts) #calcCenter #wcPage #wcDayPanel .wc-primary-costs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
body:not(#vs):not(#ts) #calcCenter #wcPage #wcDayPanel .wc-quiet-help { margin: 8px 0 0; }
body:not(#vs):not(#ts) #calcCenter #wcPage #wcDayPanel .wc-quiet-help > summary { min-height: 32px; font-size: 13px; }

/* In de kaart: de dagwinst groot, vier tegels eronder. */
body:not(#vs):not(#ts) #calcCenter #wcDayResult.ts-screen { display: flex; flex-direction: column; gap: 12px; padding: 24px 22px 20px; }
body:not(#vs):not(#ts) #calcCenter #wcDayResult .wc-result-head { flex-direction: column; justify-content: center; gap: 8px; margin: 0; }
body:not(#vs):not(#ts) #calcCenter #wcDayResult .wc-result-head .wc-panel-title { font-family: var(--font-num, "IBM Plex Mono", monospace); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #a9bcff; width: auto; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; text-align: center; }
body:not(#vs):not(#ts) #calcCenter #wcDayResult .wc-save-chip { padding: 3px 9px; font-size: 11px; }
body:not(#vs):not(#ts) #calcCenter #wcDayResult .wc-result-main { gap: 2px; margin: 0; padding: 0 0 4px; border: 0; text-align: center; }
body:not(#vs):not(#ts) #calcCenter #wcDayResult .wc-result-main .wc-result-label { display: none; }
body:not(#vs):not(#ts) #calcCenter #wcDayResult .wc-result-main .wc-result-value { font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 44px; font-weight: 700; }
body:not(#vs):not(#ts) #calcCenter #wcDayResult .wc-result-main .wc-result-note { font-size: 11px; line-height: 1.4; }
body:not(#vs):not(#ts) #calcCenter #wcDayResult .wc-result-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; }
body:not(#vs):not(#ts) #calcCenter #wcDayResult .wc-result-item { padding: 9px 10px; border: 0; border-radius: 12px; background: rgba(7, 11, 24, 0.55); }
body:not(#vs):not(#ts) #calcCenter #wcDayResult .wc-result-item .wc-result-label { margin: 0; font-size: 11px; line-height: 1.3; letter-spacing: 0.04em; }
body:not(#vs):not(#ts) #calcCenter #wcDayResult .wc-result-item .wc-result-value { font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 18px; font-weight: 600; }
body:not(#vs):not(#ts) #calcCenter #wcDayResult .wc-result-item .wc-result-note { font-size: 10px; }
body:not(#vs):not(#ts) #calcCenter #wcDayResult .wc-day-missing { margin: 0; padding: 8px 10px; }
body:not(#vs):not(#ts) #calcCenter #wcDayResult .wc-day-missing :is(p, ul) { font-size: 11px; }
body:not(#vs):not(#ts) #calcCenter #wcDayResult .wc-result-details { margin: auto 0 0; font-size: 12px; text-align: center; }
body:not(#vs):not(#ts) #calcCenter #wcDayResult .wc-result-details[open] { text-align: left; }
body:not(#vs):not(#ts) #calcCenter #wcDayResult .wc-result-details > summary { justify-content: center; min-height: 32px; color: #a9bcff; }
body:not(#vs):not(#ts) #calcCenter #wcDayResult .wc-result-row { font-size: 12px; }
body:not(#vs):not(#ts) #calcCenter #wcDayResult .wc-save-row { margin: 0; padding: 0; border: 0; }
body:not(#vs):not(#ts) #calcCenter #wcDayResult .wc-save-row .wc-field-hint { display: none; }
body:not(#vs):not(#ts) #calcCenter #wcDayResult .wc-save-test { width: 100%; min-height: 44px; border: 0; border-radius: 12px; background: var(--ts-blue, #4f6fff); color: #ffffff; font: 600 14px "IBM Plex Sans", sans-serif; cursor: pointer; }
body:not(#vs):not(#ts) #calcCenter #wcDayResult .wc-save-test:disabled { background: rgba(7, 11, 24, 0.55); color: #8892b0; cursor: not-allowed; }
body:not(#vs):not(#ts) #calcCenter #wcPage .wc-day-result-col #wcShopifyLoadStatus { max-width: 300px; margin: -6px 0 0; font-size: 13px; text-align: center; }
body:not(#vs):not(#ts) #calcCenter #wcPage .wc-day-result-col .ts-note .wc-settings-link { padding: 0; border: 0; background: none; color: #c9d6ff; font: inherit; text-decoration: underline; cursor: pointer; }

/* Lage laptopschermen: kop en stappen dichter op elkaar, zodat stap 3 zonder scrollen zichtbaar blijft. */
@media (min-width: 961px) and (max-height: 820px) {
  body:not(#vs):not(#ts) #calcCenter #wcPage.ts-start:has(#wcTabDayPanel:not([hidden])) .vs-page-head { margin: 16px 0 6px; }
  body:not(#vs):not(#ts) #calcCenter #wcPage.ts-start .vs-title { font-size: 40px; }
  body:not(#vs):not(#ts) #calcCenter #wcPage .wc-day-main > .wc-panel { padding-top: 8px; padding-bottom: 10px; }
  body:not(#vs):not(#ts) #calcCenter #wcPage .wc-day-main .wc-panel-title { margin-bottom: 6px; }
  body:not(#vs):not(#ts) #calcCenter #wcPage #wcFetchPanel { row-gap: 6px; }
  body:not(#vs):not(#ts) #calcCenter #wcPage .wc-day-main .wc-field input, body:not(#vs):not(#ts) #calcCenter #wcPage .wc-day-main .wc-primary-costs input, body:not(#vs):not(#ts) #calcCenter #wcPage #wcFetchPanel .wc-loaded-overview input[readonly] { min-height: 40px; }
  body:not(#vs):not(#ts) #calcCenter #wcPage .ts-step { padding: 8px 0; }
  body:not(#vs):not(#ts) #calcCenter #wcDayResult.ts-screen { gap: 8px; padding: 16px 18px; }
  body:not(#vs):not(#ts) #calcCenter #wcDayResult .wc-result-main .wc-result-value { font-size: 36px; }
  body:not(#vs):not(#ts) #calcCenter #wcPage .wc-day-result-col { gap: 12px; padding: 0; }
}
@media (min-width: 961px) and (max-height: 700px) {
  body:not(#vs):not(#ts) #calcCenter #wcPage.ts-start .vs-title { font-size: 34px; }
  body:not(#vs):not(#ts) #calcCenter #wcPage.ts-start:has(#wcTabDayPanel:not([hidden])) .vs-page-head { margin: 10px 0 4px; }
  body:not(#vs):not(#ts) #calcCenter #wcPage .ts-step small { display: none; }
  body:not(#vs):not(#ts) #calcCenter #wcPage #wcDayPanel .wc-quiet-help { margin-top: 2px; }
  body:not(#vs):not(#ts) #calcCenter #wcPage .wc-day-main > .wc-panel { padding-top: 6px; padding-bottom: 6px; }
  body:not(#vs):not(#ts) #calcCenter #wcPage .ts-step { padding: 6px 0; }
}

/* Smaller dan een laptop: alles onder elkaar, kaart onder de stappen. */
@media (max-width: 960px) {
  body:not(#vs):not(#ts) #calcCenter #wcPage.ts-start:has(#wcTabDayPanel:not([hidden])) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tabs" "head" "main" "side"; }
  body:not(#vs):not(#ts) #calcCenter #wcPage .wc-day-result-col { padding-top: 24px; }
}
@media (max-width: 720px) {
  body:not(#vs):not(#ts) #calcCenter #wcPage.ts-start:has(#wcTabDayPanel:not([hidden])) .vs-page-head { margin: 20px 0 8px; }
  body:not(#vs):not(#ts) #calcCenter #wcPage .wc-day-main > .wc-panel { padding-left: 0; }
  body:not(#vs):not(#ts) #calcCenter #wcPage .wc-day-main .wc-panel-title { margin-left: 0; }
  body:not(#vs):not(#ts) #calcCenter #wcPage #wcFetchPanel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body:not(#vs):not(#ts) #calcCenter #wcPage #wcFetchPanel > .wc-panel-title { grid-column: 1; }
  body:not(#vs):not(#ts) #calcCenter #wcPage #wcFetchPanel .wc-overview-head { grid-column: 2; }
  body:not(#vs):not(#ts) #calcCenter #wcPage #wcFetchPanel .wc-field-date { grid-column: 1 / -1; }
  body:not(#vs):not(#ts) #calcCenter #wcPage #wcFetchPanel label[for="manualRevenue"] { grid-column: 1; grid-row: 3; }
  body:not(#vs):not(#ts) #calcCenter #wcPage #wcFetchPanel label[for="manualSales"] { grid-column: 2; grid-row: 3; }
  body:not(#vs):not(#ts) #calcCenter #wcPage #wcDayPanel .wc-primary-costs { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   Klantenservice
   Links de mail van je klant in stap 1 en de stappen 2-3, rechts het antwoord in de brede kaart met Schrijf antwoord eronder.
   Het antwoord staat in een brede kaart met randlicht; is het klaar, dan wordt de kaart breder.
   ========================================================================= */
body:not(#vs):not(#ts) #customerServiceOffice .cs.ts-start { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); grid-template-areas: "head side" "moment side" "main side"; grid-template-rows: auto auto 1fr; gap: 0 56px; align-items: start; max-width: 1180px; }
body:not(#vs):not(#ts) #customerServiceOffice .cs.ts-start > .cs-head { grid-area: head; min-height: 0; margin: 0; padding: 28px 0 14px; border: 0; }
body:not(#vs):not(#ts) #customerServiceOffice .cs.ts-start > .cs-moment { grid-area: moment; }
body:not(#vs):not(#ts) #customerServiceOffice .cs.ts-start .cs-grid { display: contents; }
body:not(#vs):not(#ts) #customerServiceOffice .cs-input { grid-area: main; min-width: 0; max-width: 640px; gap: 10px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
body:not(#vs):not(#ts) #customerServiceOffice .cs-input > :is(textarea, .cs-order, .cs-gmail) { margin-left: 44px; width: calc(100% - 44px); }
body:not(#vs):not(#ts) #customerServiceOffice .cs-step-title { display: flex; align-items: center; gap: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 15px; font-weight: 600; color: var(--text, #eef1f8); }
body:not(#vs):not(#ts) #customerServiceOffice .cs-order { display: flex; flex-direction: column; gap: 4px; max-width: 260px; }
body:not(#vs):not(#ts) #customerServiceOffice .cs-gmail summary, body:not(#vs):not(#ts) #customerServiceOffice .cs-settings summary { display: flex; align-items: center; gap: 6px; min-height: 32px; font-size: 13px; font-weight: 500; color: #c3d2ff; }
body:not(#vs):not(#ts) #customerServiceOffice :is(.cs-gmail, .cs-settings) summary::before { content: ""; width: 6px; height: 6px; margin-right: 4px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform 0.2s; }
body:not(#vs):not(#ts) #customerServiceOffice :is(.cs-gmail, .cs-settings)[open] summary::before { transform: rotate(45deg); }
body:not(#vs):not(#ts) #customerServiceOffice .cs-gmail[open] .cs-row { margin-top: 6px; }
body:not(#vs):not(#ts) #customerServiceOffice .cs-input .ts-step { margin-top: 4px; }
body:not(#vs):not(#ts) #customerServiceOffice .cs-step-last { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
body:not(#vs):not(#ts) #customerServiceOffice .cs-settings { margin: 0; padding: 0; border: 0; }
body:not(#vs):not(#ts) #customerServiceOffice .cs-side { grid-area: side; align-self: center; padding: 8px 0 16px; }
body:not(#vs):not(#ts) #customerServiceOffice .cs-side .cs-status { min-height: 0; }
body:not(#vs):not(#ts) #customerServiceOffice .cs-side .cs-status:empty { display: none; }
body:not(#vs):not(#ts) #customerServiceOffice .cs-side .cs-status.cs-error { color: #ff8b8b; }
body:not(#vs):not(#ts) #customerServiceOffice .cs .cs-side #csClear.cs-clear { min-height: 32px; margin-top: -8px; padding: 0 8px; border: 0; background: none; color: var(--muted, #8790b5); font-size: 13px; font-weight: 500; text-decoration: underline; }
body:not(#vs):not(#ts) #customerServiceOffice .cs .cs-side #csClear.cs-clear:hover { background: none; border-color: transparent;  color: var(--text, #eef1f8); }

/* In de kaart: leeg een vage mail met de belofte, bezig de stappen, klaar het antwoord. */
body:not(#vs):not(#ts) #customerServiceOffice #csResult { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 10px; min-height: 340px; padding: 24px 22px; border: 0; }
body:not(#vs):not(#ts) #customerServiceOffice #csResult .cs-empty { flex: 1; align-items: center; justify-content: center; gap: 22px; padding: 0; text-align: center; }
body:not(#vs):not(#ts) #customerServiceOffice #csResult .cs-empty h2 { font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; color: #f2f5ff; }
body:not(#vs):not(#ts) #customerServiceOffice .cs-ghost { display: flex; flex-direction: column; gap: 9px; width: 100%; padding: 16px; box-sizing: border-box; border-radius: 16px; background: rgba(7, 11, 24, 0.45); }
body:not(#vs):not(#ts) #customerServiceOffice .cs-ghost i { display: block; height: 7px; border-radius: 999px; background: #a9bcff; opacity: 0.14; }
body:not(#vs):not(#ts) #customerServiceOffice .cs-ghost i:nth-child(1) { width: 45%; height: 9px; opacity: 0.22; }
body:not(#vs):not(#ts) #customerServiceOffice .cs-ghost i:nth-child(3) { width: 85%; }
body:not(#vs):not(#ts) #customerServiceOffice .cs-ghost i:nth-child(4) { width: 60%; }
body:not(#vs):not(#ts) #customerServiceOffice #csResult .cs-steps li { padding: 10px 0; font-size: 13px; }
body:not(#vs):not(#ts) #customerServiceOffice .cs[data-moment="busy"] #csResult { justify-content: center; }
body:not(#vs):not(#ts) #customerServiceOffice .cs[data-moment="busy"] .ts-phone { animation-name: ps-glow-hard; animation-duration: 4s; }
body:not(#vs):not(#ts) #customerServiceOffice .cs[data-moment="ready"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
body:not(#vs):not(#ts) #customerServiceOffice .cs[data-moment="ready"] .ts-aurora { display: none; }
body:not(#vs):not(#ts) #customerServiceOffice .cs[data-moment="ready"] #csResult { min-height: 0; padding: 20px; background: #0e1430; }
body:not(#vs):not(#ts) #customerServiceOffice .cs[data-moment="ready"] .ts-go { display: none; }
body:not(#vs):not(#ts) #customerServiceOffice .cs[data-moment="ready"] .cs-side { align-self: start; }

@media (min-width: 901px) and (max-height: 820px) {
  body:not(#vs):not(#ts) #customerServiceOffice .cs.ts-start > .cs-head { padding: 16px 0 6px; }
  body:not(#vs):not(#ts) #customerServiceOffice .cs.ts-start .vs-title { font-size: 40px; }
  body:not(#vs):not(#ts) #customerServiceOffice #csMessage { height: 120px; }
  body:not(#vs):not(#ts) #customerServiceOffice .cs-input .ts-step { padding: 8px 0; }
}
@media (max-width: 900px) {
  body:not(#vs):not(#ts) #customerServiceOffice .cs.ts-start, body:not(#vs):not(#ts) #customerServiceOffice .cs.ts-start[data-moment] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "moment" "main" "side"; }
  body:not(#vs):not(#ts) #customerServiceOffice .cs-side { padding-top: 24px; }
}
@media (max-width: 720px) {
  body:not(#vs):not(#ts) #customerServiceOffice .cs.ts-start > .cs-head { padding: 20px 0 8px; }
  body:not(#vs):not(#ts) #customerServiceOffice .cs-input > :is(textarea, .cs-order, .cs-gmail) { margin-left: 0; width: 100%; }
  body:not(#vs):not(#ts) #customerServiceOffice .cs-order { max-width: none; }
}

/* =========================================================================
   Bundels & A/B-tests (bundles.html in een iframe), alleen zolang er nog geen bundel is.
   Links kop en stappen, rechts een telefoon met het aanbod van 1, 2 en 3 stuks, Nieuwe bundel als gloeiende knop.
   ========================================================================= */
body.bundle-start:not(#vs):not(#ts) main > .vs-page-head, body.bundle-start:not(#vs):not(#ts) #newBundle { display: none; }
body:not(#vs):not(#ts) .bundle-start-screen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 40px 56px; align-items: center; max-width: 1180px; padding: 24px 0 32px; }
body:not(#vs):not(#ts) .bundle-start-screen .bs-intro { min-width: 0; max-width: 620px; }
body:not(#vs):not(#ts) .bundle-start-screen .vs-title { margin: 14px 0 22px; }
body:not(#vs):not(#ts) .bundle-start-screen .bs-step-last { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
body:not(#vs):not(#ts) .bundle-start-screen .bs-screen { display: flex; flex-direction: column; gap: 10px; padding: 30px 16px 18px; }
body:not(#vs):not(#ts) .bundle-start-screen .bs-photo { flex: 0 0 118px; border-radius: 16px; background: linear-gradient(135deg, rgba(169, 188, 255, 0.2), rgba(169, 188, 255, 0.05)); }
body:not(#vs):not(#ts) .bundle-start-screen .bs-heading { width: 70%; height: 10px; margin: 4px auto 2px; border-radius: 999px; background: rgba(169, 188, 255, 0.25); }
body:not(#vs):not(#ts) .bundle-start-screen .bs-option { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 11px 10px; border: 1px solid rgba(169, 188, 255, 0.16); border-radius: 12px; background: rgba(7, 11, 24, 0.45); font-size: 12px; color: #c9d6ff; }
body:not(#vs):not(#ts) .bundle-start-screen .bs-option.is-on { border-color: var(--ts-ice, #7c9bff); background: rgba(79, 111, 255, 0.16); }
body:not(#vs):not(#ts) .bundle-start-screen .bs-radio { flex: 0 0 12px; height: 12px; box-sizing: border-box; border: 1.5px solid var(--ts-ice, #7c9bff); border-radius: 50%; }
body:not(#vs):not(#ts) .bundle-start-screen .bs-option.is-on .bs-radio { background: var(--ts-ice, #7c9bff); box-shadow: inset 0 0 0 2px #0b1230; }
body:not(#vs):not(#ts) .bundle-start-screen .bs-option b { font-weight: 600; color: #f2f5ff; white-space: nowrap; }
body:not(#vs):not(#ts) .bundle-start-screen .bs-option em { margin-left: auto; padding: 2px 6px; border-radius: 999px; background: var(--ts-blue, #4f6fff); color: #ffffff; font-size: 10px; font-style: normal; font-weight: 600; white-space: nowrap; }
body:not(#vs):not(#ts) .bundle-start-screen .bs-cart { margin-top: auto; flex: 0 0 38px; border-radius: 999px; background: var(--ts-blue, #4f6fff); opacity: 0.85; }
@media (max-width: 720px) {
  body:not(#vs):not(#ts) .bundle-start-screen { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 8px 0 24px; }
}

/* =========================================================================
   Pakkettracking, alleen zonder bestellingen of zonder Shopify-koppeling.
   Links kop en stappen, rechts een telefoon met de volgpagina van je klant, Vernieuwen of Shopify koppelen als gloeiende knop.
   ========================================================================= */
body:not(#vs):not(#ts) #parcelOffice .pt.is-start :is(.vs-page-head, #ptNotice, #ptStats, .pt-panel, #ptMessage) { display: none; }
body:not(#vs):not(#ts) #parcelOffice .pt-start:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 40px 56px; align-items: center; max-width: 1180px; padding: 24px 0 32px; }
body:not(#vs):not(#ts) #parcelOffice .pt-start-intro { min-width: 0; max-width: 620px; }
body:not(#vs):not(#ts) #parcelOffice .pt-start .vs-title { margin: 14px 0 22px; }
body:not(#vs):not(#ts) #parcelOffice .pt-start-last { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
body:not(#vs):not(#ts) #parcelOffice .pt-start .ts-go { border: 0; font: 700 18px "Sora", "IBM Plex Sans", sans-serif; }
body:not(#vs):not(#ts) #parcelOffice .pt.is-start #ptRefresh { display: none; }
body:not(#vs):not(#ts) #parcelOffice .pt-screen { display: flex; flex-direction: column; gap: 6px; padding: 34px 20px 20px; }
body:not(#vs):not(#ts) #parcelOffice .pt-s-kick { margin: 0; font-family: var(--font-num, "IBM Plex Mono", monospace); font-size: 10px; letter-spacing: 0.16em; color: #a9bcff; }
body:not(#vs):not(#ts) #parcelOffice .pt-s-title { margin: 0 0 14px; font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: #f2f5ff; }
body:not(#vs):not(#ts) #parcelOffice .pt-s-line { margin: 0; padding: 0; list-style: none; }
body:not(#vs):not(#ts) #parcelOffice .pt-s-line li { position: relative; padding: 0 0 22px 28px; font-size: 13px; color: #6f7aa6; }
body:not(#vs):not(#ts) #parcelOffice .pt-s-line li::before { content: ""; position: absolute; left: 0; top: 2px; width: 14px; height: 14px; box-sizing: border-box; border: 2px solid #34458f; border-radius: 50%; background: #0b1230; }
body:not(#vs):not(#ts) #parcelOffice .pt-s-line li:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: 18px; bottom: 2px; width: 2px; background: #34458f; }
body:not(#vs):not(#ts) #parcelOffice .pt-s-line li.is-done { color: #c9d6ff; }
body:not(#vs):not(#ts) #parcelOffice .pt-s-line li.is-done::before { border-color: #2bb98a; background: #2bb98a; }
body:not(#vs):not(#ts) #parcelOffice .pt-s-line li.is-done::after { background: #2bb98a; }
body:not(#vs):not(#ts) #parcelOffice .pt-s-line li.is-on { font-weight: 600; color: #f2f5ff; }
body:not(#vs):not(#ts) #parcelOffice .pt-s-line li.is-on::before { border-color: var(--ts-ice, #7c9bff); background: var(--ts-ice, #7c9bff); box-shadow: 0 0 0 4px rgba(124, 155, 255, 0.25); }
body:not(#vs):not(#ts) #parcelOffice .pt-s-bar { margin-top: auto; height: 40px; border-radius: 999px; background: var(--ts-blue, #4f6fff); opacity: 0.85; }
@media (max-width: 720px) {
  body:not(#vs):not(#ts) #parcelOffice .pt-start:not([hidden]) { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 8px 0 24px; }
}

/* =========================================================================
   Verlaten checkout, zolang de flow nog nooit aan is geweest.
   Links kop en de drie stappen, rechts de herinnering zoals je klant hem ziet, de knop naar de volgende stap of Flow aanzetten.
   ========================================================================= */
body:not(#vs):not(#ts) #checkoutMailOffice .cm.is-start > .cm-head { display: none; }
body:not(#vs):not(#ts) #checkoutMailOffice .cm.is-start > .cm-hero { padding: 0; border: 0; background: none; box-shadow: none; }
body:not(#vs):not(#ts) #checkoutMailOffice .cm-start { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 40px 56px; align-items: center; max-width: 1180px; padding: 24px 0 32px; }
body:not(#vs):not(#ts) #checkoutMailOffice .cm-start-intro { min-width: 0; max-width: 620px; }
body:not(#vs):not(#ts) #checkoutMailOffice .cm-start .vs-title { margin: 14px 0 22px; }
body:not(#vs):not(#ts) #checkoutMailOffice .cm-start-last { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
body:not(#vs):not(#ts) #checkoutMailOffice .cm-start .ts-step .cm-link { margin-left: auto; }
body:not(#vs):not(#ts) #checkoutMailOffice .cm-start .ts-step.is-done .ts-n { border: 0; background: #2bb98a; color: #ffffff; font-size: 0; }
body:not(#vs):not(#ts) #checkoutMailOffice .cm-start .ts-step.is-done .ts-n::after { content: ""; width: 12px; height: 7px; margin-top: -3px; border: solid #ffffff; border-width: 0 0 3px 3px; transform: rotate(-45deg); }
body:not(#vs):not(#ts) #checkoutMailOffice .cm-start .ts-go { border: 0; font: 700 18px "Sora", "IBM Plex Sans", sans-serif; }
body:not(#vs):not(#ts) #checkoutMailOffice .cm-start-mail { display: flex; flex-direction: column; gap: 10px; padding: 30px 18px 20px; }
body:not(#vs):not(#ts) #checkoutMailOffice .cm-sm-shop { margin: 0; font-family: var(--font-num, "IBM Plex Mono", monospace); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #a9bcff; text-align: center; }
body:not(#vs):not(#ts) #checkoutMailOffice .cm-sm-title { margin: 0 0 4px; font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 20px; font-weight: 700; line-height: 1.2; color: #f2f5ff; text-align: center; }
body:not(#vs):not(#ts) #checkoutMailOffice .cm-sm-photo { flex: 0 0 150px; border-radius: 16px; background: linear-gradient(135deg, rgba(169, 188, 255, 0.2), rgba(169, 188, 255, 0.05)); }
body:not(#vs):not(#ts) #checkoutMailOffice .cm-sm-line { height: 7px; border-radius: 999px; background: rgba(169, 188, 255, 0.16); }
body:not(#vs):not(#ts) #checkoutMailOffice .cm-sm-line.is-short { width: 65%; }
body:not(#vs):not(#ts) #checkoutMailOffice .cm-sm-btn { margin-top: auto; display: flex; align-items: center; justify-content: center; height: 42px; border-radius: 999px; background: var(--ts-blue, #4f6fff); color: #ffffff; font-size: 13px; font-weight: 600; }
@media (max-width: 720px) {
  body:not(#vs):not(#ts) #checkoutMailOffice .cm-start { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 8px 0 24px; }
}

/* =========================================================================
   Winst berekenen › dagelijks gebruik
   Geen dubbele kop, kaart blijft staan, op de telefoon een balk met dagwinst en knop,
   lege Per product met knop, BEP zonder scrollen.
   ========================================================================= */

/* Bovenste regel "Winst berekenen" weg; Hulp en uitleg staat rechts naast de tabs. Op de telefoon is daar geen plek: daar blijft de regel. */
@media (min-width: 721px) {
  body[data-agent="calculator"]:not(#vs):not(#ts) .center-head-calc { position: relative; min-height: 0; height: 0; margin-bottom: 0; padding: 0; border: 0; overflow: visible; }
  body[data-agent="calculator"]:not(#vs):not(#ts) .center-head-calc > div:first-child { display: none; }
  body[data-agent="calculator"]:not(#vs):not(#ts) .center-head-calc .wc-head-tools { position: absolute; right: 0; top: 8px; z-index: 2; }
}

/* Dagwinst: de kaart blijft in beeld terwijl je links correcties invult; de opbouw in twee kolommen. */
@media (min-width: 961px) {
  body:not(#vs):not(#ts) #calcCenter #wcPage .wc-day-result-col { position: sticky; top: 12px; align-self: start; }
  body:not(#vs):not(#ts) #calcCenter #wcDayResult .wc-result-details[open] .wc-result-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px; }
  body:not(#vs):not(#ts) #calcCenter #wcDayResult .wc-result-details[open] .wc-result-row { gap: 6px; padding: 3px 0; font-size: 11px; }
  body:not(#vs):not(#ts) #calcCenter #wcDayResult.ts-screen:has(.wc-result-details[open]) { gap: 6px; }
  body:not(#vs):not(#ts) #calcCenter #wcDayResult:has(.wc-result-details[open]) .wc-result-main .wc-result-note { display: none; }
}

/* Telefoon: balk onderin met dagwinst en knop, weg zodra de grote kaart in beeld is. */
body:not(#vs):not(#ts) #calcCenter .wc-mobile-bar { display: none; }
@media (max-width: 720px) {
  body:not(#vs):not(#ts) #calcCenter #wcPage:has(#wcTabDayPanel:not([hidden])) .wc-mobile-bar:not(.is-card-visible) { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(124, 155, 255, 0.35); background: #0b1230; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.45); }
  body:not(#vs):not(#ts) #calcCenter .wc-mobile-bar-sum { flex: 1; min-width: 0; margin: 0; display: flex; flex-direction: column; }
  body:not(#vs):not(#ts) #calcCenter .wc-mobile-bar-sum span { font-family: var(--font-num, "IBM Plex Mono", monospace); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #a9bcff; }
  body:not(#vs):not(#ts) #calcCenter .wc-mobile-bar-sum strong { font: 700 20px "Sora", "IBM Plex Sans", sans-serif; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body:not(#vs):not(#ts) #calcCenter .wc-mobile-bar-go { flex: 0 0 auto; min-height: 46px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--ts-blue, #4f6fff); color: #ffffff; font: 700 14px "Sora", "IBM Plex Sans", sans-serif; cursor: pointer; }
  body:not(#vs):not(#ts) #calcCenter .wc-mobile-bar-go:disabled { background: #1c2650; color: #8892b0; cursor: not-allowed; }
  body:not(#vs):not(#ts) #calcCenter .wc-mobile-bar-go[hidden] { display: none; }
  body:not(#vs):not(#ts) #calcCenter #wcPage:has(#wcTabDayPanel:not([hidden])) { padding-bottom: 80px; }
}

/* Per product zonder cijfers: één zin en een knop naar Dagwinst. */
body:not(#vs):not(#ts) #calcCenter .wc-products-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 8px 0 18px; }
body:not(#vs):not(#ts) #calcCenter .wc-products-empty[hidden] { display: none; }
body:not(#vs):not(#ts) #calcCenter .wc-products-empty .wc-field-hint { margin: 0; font-size: 14px; }
body:not(#vs):not(#ts) #calcCenter .wc-products-empty .ts-go { width: auto; min-height: 48px; font-size: 15px; animation: none; }

/* BEP: per kaart de twee velden naast elkaar, zodat de uitkomst op een laptop zonder scrollen in beeld staat. */
body:not(#vs):not(#ts) #calcCenter .wc-bep-switch { display: none; }
@media (min-width: 961px) {
  body:not(#vs):not(#ts) #calcCenter #wcPage #wcBepPricesPanel .wc-bep-qty .wc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
/* Telefoon: 1 · 2 · 3 stuks als knopjes, één kaart tegelijk. */
@media (max-width: 720px) {
  body:not(#vs):not(#ts) #calcCenter .wc-bep-switch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 14px 0 0; padding: 4px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; background: #0a0e1d; }
  body:not(#vs):not(#ts) #calcCenter .wc-bep-switch button { min-height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--muted, #8790b5); font: 600 14px "IBM Plex Sans", sans-serif; cursor: pointer; }
  body:not(#vs):not(#ts) #calcCenter .wc-bep-switch button[aria-pressed="true"] { background: #16204a; color: #ffffff; box-shadow: inset 0 0 0 1px var(--ice, #5b8bff); }
  body:not(#vs):not(#ts) #calcCenter #wcPage #wcBepPricesPanel[data-show="1"] .wc-bep-qty:not([data-bep-qty="1"]),
  body:not(#vs):not(#ts) #calcCenter #wcPage #wcBepPricesPanel[data-show="2"] .wc-bep-qty:not([data-bep-qty="2"]),
  body:not(#vs):not(#ts) #calcCenter #wcPage #wcBepPricesPanel[data-show="3"] .wc-bep-qty:not([data-bep-qty="3"]) { display: none; }
  body:not(#vs):not(#ts) #calcCenter #wcPage #wcBepPricesPanel .wc-bep-qty-head h3 { display: none; }
  body:not(#vs):not(#ts) #calcCenter #wcPage #wcBepPricesPanel .wc-bep-qty-head:not(:has(.wc-bep-best:not([hidden]))) { display: none; }
  body:not(#vs):not(#ts) #calcCenter #wcPage #wcBepPricesPanel .wc-bep-qty .wc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: end; }
  body:not(#vs):not(#ts) #calcCenter #wcPage .wc-bep-setup { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: end; }
  body:not(#vs):not(#ts) #calcCenter #wcPage .wc-bep-setup > .wc-field:first-child { grid-column: 1 / -1; }
}

/* Telefoon: waar een telefoonplaatje staat, komen de grote knop en de regel eronder erboven,
   zodat de knop zonder scrollen in beeld staat. De brede kaart blijft zoals hij is. */
@media (max-width: 720px) {
  body:not(#vs):not(#ts) .ts-side:has(> .ts-stage:not(.ts-card)) > .ts-go { order: -2; }
  body:not(#vs):not(#ts) .ts-side:has(> .ts-stage:not(.ts-card)) > .ts-note { order: -1; margin: -6px 0 4px; }
}

/* Dagafsluiting: in Dagwinst per gekoppeld product alleen de advertentiekosten invullen. */
body:not(#vs):not(#ts) #calcCenter #wcPage #wcDayPanel.is-products .wc-primary-costs,
body:not(#vs):not(#ts) #calcCenter #wcPage #wcDayPanel.is-products #wcCorrections { display: none; }
body:not(#vs):not(#ts) #calcCenter .wc-dp[hidden] { display: none; }
body:not(#vs):not(#ts) #calcCenter .wc-dp { display: grid; gap: 10px; }
body:not(#vs):not(#ts) #calcCenter .wc-dp-lead { margin: -4px 0 0; font-size: 13px; color: var(--muted, #8790b5); }
body:not(#vs):not(#ts) #calcCenter .wc-dp-list { display: grid; }
body:not(#vs):not(#ts) #calcCenter .wc-dp-row { display: grid; grid-template-columns: minmax(0, 1fr) 76px 34px 88px 100px 78px; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
body:not(#vs):not(#ts) #calcCenter .wc-dp-head { padding: 0 0 6px; font: 500 10px "IBM Plex Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted, #8790b5); }
body:not(#vs):not(#ts) #calcCenter .wc-dp-name { min-width: 0; font-size: 14px; font-weight: 600; color: var(--text, #eef1f8); overflow-wrap: break-word; hyphens: auto; }
body:not(#vs):not(#ts) #calcCenter .wc-dp-num { font: 400 13px "IBM Plex Mono", monospace; color: var(--muted, #8790b5); }
body:not(#vs):not(#ts) #calcCenter .wc-dp-label { display: none; }
body:not(#vs):not(#ts) #calcCenter .wc-dp-field input { box-sizing: border-box; width: 100%; min-height: 44px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; background: #0a0e1d; color: #ffffff; font: 500 14px "IBM Plex Mono", monospace; }
body:not(#vs):not(#ts) #calcCenter .wc-dp-spend input { border-color: var(--ice, #5b8bff); background: #10173a; }
body:not(#vs):not(#ts) #calcCenter .wc-dp-row.is-missing .wc-dp-spend input { border-style: dashed; }
body:not(#vs):not(#ts) #calcCenter .wc-dp-row.is-invalid input { border-color: var(--afwijzen, #ff7a7a); }
body:not(#vs):not(#ts) #calcCenter .wc-dp-field input::placeholder { color: #5d6587; }
body:not(#vs):not(#ts) #calcCenter .wc-dp-profit { font: 500 14px "IBM Plex Mono", monospace; text-align: right; color: var(--muted, #8790b5); }
body:not(#vs):not(#ts) #calcCenter .wc-dp-profit.is-profit { color: var(--testen, #7ee2a8); }
body:not(#vs):not(#ts) #calcCenter .wc-dp-profit.is-loss { color: var(--afwijzen, #ff7a7a); }
body:not(#vs):not(#ts) #calcCenter .wc-dp-open, body:not(#vs):not(#ts) #calcCenter .wc-dp-status { margin: 0; font-size: 13px; color: var(--muted, #8790b5); }
body:not(#vs):not(#ts) #calcCenter .wc-dp-open[hidden], body:not(#vs):not(#ts) #calcCenter .wc-dp-status[hidden], body:not(#vs):not(#ts) #calcCenter .wc-dp-confirm[hidden] { display: none; }
body:not(#vs):not(#ts) #calcCenter .wc-dp-status.is-error { color: var(--afwijzen, #ff7a7a); }
body:not(#vs):not(#ts) #calcCenter .wc-dp-confirm { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid rgba(243, 195, 122, 0.35); border-radius: 12px; background: rgba(243, 195, 122, 0.06); font-size: 13px; }
body:not(#vs):not(#ts) #calcCenter .wc-dp-confirm p { margin: 0; }
body:not(#vs):not(#ts) #calcCenter .wc-dp-confirm-actions { display: flex; flex-wrap: wrap; gap: 8px; }
body:not(#vs):not(#ts) #calcCenter .wc-dp-reload { justify-self: start; }
/* Telefoon: elk product een eigen blokje, advertentiekosten groot onderaan. */
@media (max-width: 720px) {
  body:not(#vs):not(#ts) #calcCenter .wc-dp-head { display: none; }
  body:not(#vs):not(#ts) #calcCenter .wc-dp-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; padding: 12px 0; }
  body:not(#vs):not(#ts) #calcCenter .wc-dp-name { grid-column: 1 / 3; }
  body:not(#vs):not(#ts) #calcCenter .wc-dp-profit { grid-column: 3; grid-row: 1; }
  body:not(#vs):not(#ts) #calcCenter .wc-dp-num::before { content: attr(data-label); display: block; font: 500 10px "IBM Plex Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; color: #6f7899; }
  body:not(#vs):not(#ts) #calcCenter .wc-dp-label { display: block; margin-bottom: 4px; font: 500 10px "IBM Plex Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; color: #6f7899; }
  body:not(#vs):not(#ts) #calcCenter .wc-dp-cost { grid-column: 3; }
  body:not(#vs):not(#ts) #calcCenter .wc-dp-spend { grid-column: 1 / -1; }
  body:not(#vs):not(#ts) #calcCenter .wc-dp-spend input { min-height: 48px; font-size: 16px; }
}

/* Rustig onder de knop: geen kleine regels meer direct onder de grote knop. */
/* Winst: tandwiel (btw en betaalkosten) naast Hulp en uitleg; de uitleg en de ophaaltijd staan in Bekijk opbouw. */
body[data-agent="calculator"]:not(#vs):not(#ts) .center-head-calc .wc-head-tools { display: flex; align-items: center; gap: 8px; }
body[data-agent="calculator"]:not(#vs):not(#ts) .center-head-calc .page-help-btn { position: static; margin: 0; }
body[data-agent="calculator"]:not(#vs):not(#ts) .center-head-calc .wc-head-settings { display: inline-flex; align-items: center; justify-content: center; width: 36px; min-width: 36px; padding: 0; }
body:not(#vs):not(#ts) #calcCenter #wcDayResult .wc-opbouw-note { margin: 8px 0 0; font-size: 11px; line-height: 1.4; text-align: left; }
body:not(#vs):not(#ts) #calcCenter #wcDayResult .wc-opbouw-note[hidden] { display: none; }
/* Pakkettracking: alleen een melding (bijv. een fout) staat onder de knop. */
body:not(#vs):not(#ts) #ptStartNote:empty { display: none; }