/* Desktop finishing pass r1 (presentation only).
   Every rule is limited to >=1367px and body[data-layout="desktop"]; phone/portrait layouts are not selected.
   Original controls, handlers, values, prices and submission entry points are unchanged. */
@media (min-width: 1367px) {
  /* Menu cards: title, ingredients and price share one left edge. */
  body[data-layout="desktop"] section .menu-row.menu-item[data-name] .menu-content > h3,
  body[data-layout="desktop"] section .menu-row.menu-item[data-name] .menu-content > .ingredients {
    padding-left: 0 !important;
    text-indent: 0 !important;
  }
  body[data-layout="desktop"] section .menu-row.menu-item[data-name] .menu-content > .ingredients { margin-top: 6px !important; }

  /* Option dialog: separated group tabs, left-aligned summary, scroll hint only when the list overflows. */
  body[data-layout="desktop"] #desktopBox-config #desktopBox-groups { display: flex; flex-wrap: wrap; gap: 8px; }
  body[data-layout="desktop"] #desktopBox-config .group-tab { flex: 0 1 auto; min-width: 118px; }
  body[data-layout="desktop"] #desktopBox-config .selection,
  body[data-layout="desktop"] #desktopBox-config .selection :is(h3, p, .picked-group, .picked-group p) { text-align: left !important; }
  body[data-layout="desktop"] #desktopBox-config .picked-group p:not(.empty) { color: var(--site-ink); font-weight: 600; }
  body[data-layout="desktop"] #desktopBox-group-hint[data-scroll-hint="generic"][data-overflow="true"]::after { content: " · Scroll voor alle opties"; }
  html[lang="en"] body[data-layout="desktop"] #desktopBox-group-hint[data-scroll-hint="generic"][data-overflow="true"]::after { content: " · Scroll for all options"; }

  /* Basket supplies link uses the same accent in both themes. */
  body[data-layout="desktop"] #desktopMenuCartMount #touchSuppliesToggle .touch-supplies-indicator { color: var(--site-accent-text, #b93830) !important; }

  /* ---------- Checkout (desktop acquired view only) ---------- */
  /* Right column: order summary, amounts and final confirmation stay one continuous block. */
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] .customer-details-sheet {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto !important;
  }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopR3Summary,
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #touchCustomerScroll,
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"]:is([data-desktop-section="discount"], [data-desktop-section="tip"], [data-desktop-section="remark"]) #desktopOriginalControls {
    grid-row: 2 / 5 !important;
    align-self: start;
  }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopSummaryActions { grid-row: 5 !important; }
  /* Edit view: the editor card matches the summary column height; its actions sit inside the card footer. */
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #touchCustomerScroll,
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"]:is([data-desktop-section="discount"], [data-desktop-section="tip"], [data-desktop-section="remark"]) #desktopOriginalControls {
    align-self: stretch !important; padding-bottom: 92px !important; box-sizing: border-box;
  }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #desktopEditActions:not([hidden]) {
    grid-column: 1 !important; grid-row: 2 / 5 !important; align-self: end; position: relative; z-index: 1;
    margin: 0 !important; padding: 20px 24px !important; border-top: 1px solid var(--site-line, #e4e5dd);
  }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #desktopSummaryActions { grid-row: 5 !important; margin-top: 16px !important; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopCheckoutCartMount { grid-row: 2 !important; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] .touch-customer-footer { grid-row: 3 !important; padding-top: 4px; }

  /* Item list: full card width, no side borders, height follows content up to a scroll limit. */
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #mobileCart #cart {
    height: auto !important; min-height: 0 !important; max-height: 260px !important;
    padding: 0 18px 0 24px !important;
  }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #cart li.cart-item {
    border: 0 !important; border-bottom: 1px solid var(--site-line, #e4e5dd) !important;
    margin: 0 !important; width: 100% !important; box-sizing: border-box;
  }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #cart li.cart-item:last-child { border-bottom: 0 !important; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #cart .cart-item-header { gap: 12px; align-items: flex-start; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #cart .cart-qty-control { font-size: 14px !important; height: 34px; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #cart .cart-qty-display { font-size: 15px !important; min-width: 22px; text-align: center; }

  /* Amounts: same type scale as the rest of the page; total is the emphasis. */
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #mobileCart .price-details .price-row {
    font-size: 14px !important; line-height: 1.5 !important; padding: 3px 0 !important; color: var(--site-muted, #62695f) !important;
  }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #mobileCart .price-details .price-row > span:last-child { color: var(--site-ink, #242a26) !important; font-weight: 600; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #mobileCart .price-details .total-row {
    font-size: 18px !important; font-weight: 700 !important; color: var(--site-ink, #242a26) !important;
    margin-top: 8px !important; padding-top: 10px !important; border-top: 1px solid var(--site-line, #e4e5dd) !important;
  }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #mobileCart .price-details .total-row * { font-size: inherit !important; font-weight: inherit !important; color: inherit !important; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #mobileCart .price-details :is(.btw-note, .price-note, small) { font-size: 12px !important; color: var(--site-muted, #62695f) !important; }

  /* The page canvas is the only background; the legacy preflight sheet tint is not used on desktop. */
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-mode] .customer-details-sheet { background: transparent !important; }
  /* Header: brand, tools and close on one row; title below. */
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] .customer-details-header {
    grid-template-columns: 1fr auto auto !important; padding: 8px 0 22px !important;
  }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopCheckoutBrand { grid-column: 1 !important; grid-row: 1 !important; letter-spacing: .02em; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopCheckoutTools { grid-column: 2 !important; grid-row: 1 !important; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #customerDetailsClose { grid-column: 3 !important; grid-row: 1 !important; width: 40px; height: 40px; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] .customer-details-header > div:not([id]) { grid-column: 1 / -1 !important; grid-row: 2 !important; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #customerDetailsTitle { text-align: left !important; font-size: 24px !important; }

  /* Uniform secondary links and outer actions. */
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopSuppliesMount .touch-supplies-indicator { color: var(--site-accent-text, #b93830) !important; font-size: 12px; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] :is(#desktopEditActions, #desktopSummaryActions) { gap: 10px !important; margin: 4px 0 24px !important; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] :is(#desktopEditActions, #desktopSummaryActions) button {
    min-height: 44px; padding: 10px 18px !important; border-radius: 10px !important; font: inherit; font-size: 14px; font-weight: 600;
    background: var(--site-surface, #fff) !important; color: var(--site-ink, #242a26) !important; border: 1px solid var(--site-line, #e4e5dd) !important;
  }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopEditActions button#desktopEditSave {
    background: var(--site-accent, #b93830) !important; border-color: var(--site-accent, #b93830) !important; color: #fff !important;
  }

  /* ---------- Edit view: the original controls, presented as one desktop card ---------- */
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #touchCustomerScroll {
    padding: 22px 24px !important; color: var(--site-ink, #242a26);
  }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #touchCustomerScroll .customer-details-compact-controls { gap: 0 !important; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #touchCustomerScroll .touch-customer-card > h3,
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #touchCustomerScroll .touch-customer-contact-title {
    display: block !important; margin: 0 0 14px !important; font-size: 18px !important; line-height: 1.4 !important; font-weight: 700 !important;
    text-align: left !important; color: var(--site-ink, #242a26) !important; letter-spacing: -.25px;
  }
  /* Segmented choices (order type, timing, payment) */
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #touchCustomerScroll :is(.customer-details-order-toggle, .touch-customer-timing, .customer-details-payment-toggle) {
    display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px !important;
    width: 100% !important; height: auto !important; min-height: 0 !important; padding: 5px !important; margin: 0 !important;
    border: 1px solid var(--site-line, #e4e5dd) !important; border-radius: 12px !important;
    background: var(--site-raised, #f0f1eb) !important; box-shadow: none !important; box-sizing: border-box;
  }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #touchCustomerScroll .customer-details-payment-toggle::before { display: none !important; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #touchCustomerScroll :is(.customer-details-order-option, .touch-customer-timing > button, .customer-details-payment-option) {
    position: relative !important; inset: auto !important; transform: none !important;
    display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
    min-height: 48px !important; height: auto !important; width: auto !important; margin: 0 !important; padding: 8px 12px !important;
    border: 1px solid transparent !important; border-radius: 9px !important; background: transparent !important; box-shadow: none !important;
    color: var(--site-ink, #242a26) !important; opacity: 1 !important; font: inherit; font-size: 14px !important; font-weight: 600 !important; cursor: pointer;
  }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #touchCustomerScroll :is(.customer-details-order-option.is-active, .customer-details-order-option[aria-pressed="true"], .touch-customer-timing > button[aria-pressed="true"], .customer-details-payment-option.is-active, .customer-details-payment-option[aria-pressed="true"]) {
    background: var(--site-surface, #fff) !important; border-color: var(--site-accent, #b93830) !important; color: var(--site-accent-text, #b93830) !important;
  }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #touchCustomerScroll :is(.customer-details-order-option, .customer-details-payment-option)[aria-disabled="true"] { opacity: .5 !important; cursor: not-allowed; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #touchCustomerScroll :is(.customer-details-order-label, .checkout-top-label) {
    position: static !important; transform: none !important; font-size: 14px !important; font-weight: 600 !important; color: inherit !important; opacity: 1 !important; white-space: nowrap;
  }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #touchCustomerScroll :is(.customer-details-order-icon, .checkout-top-icon) {
    position: static !important; transform: none !important; display: inline-flex !important; width: 20px !important; height: 20px !important; margin: 0 !important; color: inherit !important; opacity: 1 !important;
  }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #touchCustomerScroll :is(.customer-details-order-icon, .checkout-top-icon) :is(svg, img) { width: 20px !important; height: 20px !important; object-fit: contain; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #touchCustomerScroll .customer-details-order-time-wrap {
    position: static !important; transform: none !important; display: inline-flex !important; align-items: center; gap: 2px; font-size: 12px !important; font-weight: 500; color: var(--site-muted, #62695f) !important;
  }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #touchCustomerScroll .customer-details-order-time-wrap :is(span, svg) { font-size: 12px !important; width: auto; height: 12px; color: inherit !important; }
  /* Timing details */
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #touchCustomerScroll .touch-customer-time-status {
    display: block !important; margin: 12px 0 0 !important; font-size: 13px !important; color: var(--site-muted, #62695f) !important; text-align: left !important;
  }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #touchCustomerScroll .touch-customer-later:not([hidden]) {
    display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 12px;
  }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #touchCustomerScroll .touch-customer-time-button {
    min-height: 46px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--site-line, #e4e5dd); background: var(--site-surface, #fff); color: var(--site-ink, #242a26); font: inherit; font-size: 14px; text-align: left;
  }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"][data-desktop-section="time"] #touchCustomerScroll .customer-details-date-row {
    display: grid !important; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; margin: 16px 0 0 !important; padding: 0 !important;
    border: 0 !important; background: none !important; box-shadow: none !important;
  }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #touchCustomerScroll .customer-details-date-label { font-size: 13px !important; font-weight: 600; color: var(--site-muted, #62695f) !important; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #touchCustomerScroll .customer-details-date-mount > * {
    min-height: 46px; border-radius: 10px !important; border: 1px solid var(--site-line, #e4e5dd) !important; background: var(--site-surface, #fff) !important; color: var(--site-ink, #242a26) !important; box-shadow: none !important;
  }
  /* Contact fields */
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #touchCustomerScroll .touch-customer-contact { margin-top: 0 !important; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #touchCustomerScroll :is(input.field, .customer-details-fields-mount input, .touch-delivery-address-fields input, .touch-delivery-address-fields select) {
    display: block; width: 100% !important; box-sizing: border-box; min-height: 46px; margin: 0 0 10px !important; padding: 11px 14px !important;
    border: 1px solid var(--site-line, #e4e5dd) !important; border-radius: 10px !important; background: var(--site-surface, #fff) !important;
    color: var(--site-ink, #242a26) !important; font: inherit; font-size: 15px !important; box-shadow: none !important;
  }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #touchCustomerScroll :is(input.field, .customer-details-fields-mount input)::placeholder { color: var(--site-muted, #62695f); opacity: 1; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #touchCustomerScroll :is(input.field, .customer-details-fields-mount input):focus { outline: 2px solid var(--site-focus, #b93830); outline-offset: 1px; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #touchCustomerScroll .touch-delivery-address > summary {
    min-height: 44px; padding: 11px 14px; border: 1px solid var(--site-line, #e4e5dd); border-radius: 10px; background: var(--site-raised, #f0f1eb); color: var(--site-ink, #242a26); font-size: 14px; font-weight: 600; cursor: pointer;
  }
  /* Current choice note */
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #customerDetailsOrderConfirmation {
    display: block; margin: 18px 0 0 !important; padding: 11px 13px !important; border-radius: 8px; background: var(--site-raised, #f0f1eb) !important;
    color: var(--site-muted, #62695f) !important; font-size: 13px !important; text-align: left !important;
  }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #customerDetailsOrderConfirmation strong { color: var(--site-ink, #242a26) !important; font-weight: 600; }
}
/* Measured right column (desktop-checkout-column.js): summary, amounts and final confirmation share one
   grid cell, so the left column's length can never open a gap between them. Without the measurement the
   row-based layout above remains in effect. */
@media (min-width: 1367px) {
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-summary-measured="true"] .customer-details-sheet { grid-template-rows: auto auto auto !important; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-summary-measured="true"] :is(#desktopR3Summary, #touchCustomerScroll, #desktopOriginalControls, #desktopCheckoutCartMount, .touch-customer-footer) { grid-row: 2 !important; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-summary-measured="true"] #desktopCheckoutCartMount { align-self: start !important; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-summary-measured="true"] .touch-customer-footer { align-self: start !important; margin-top: var(--desktop-summary-h) !important; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-summary-measured="true"][data-desktop-view="edit"] #desktopEditActions:not([hidden]) { grid-row: 2 !important; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-summary-measured="true"] #desktopSummaryActions { grid-row: 3 !important; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-summary-measured="true"][data-desktop-summary-fits="true"] #desktopCheckoutCartMount { position: sticky !important; top: 16px; z-index: 2; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-summary-measured="true"][data-desktop-summary-fits="true"] .touch-customer-footer { position: sticky !important; top: calc(16px + var(--desktop-summary-h)); z-index: 2; }
}
/* Discount, tip and remark editors: the moved original controls get a heading and full-width fields. */
@media (min-width: 1367px) {
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopOriginalControls { color: var(--site-ink, #242a26); }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopOriginalControls .price-row {
    display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 10px; margin: 0 !important; padding: 0 !important; border: 0 !important; font-size: 15px !important;
  }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopOriginalControls .price-row > label {
    display: block !important; grid-column: 1 / -1; margin: 0 0 2px !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.4; color: var(--site-ink, #242a26) !important;
  }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopOriginalControls[data-section="remark"]::before {
    content: "Opmerking"; display: block; margin: 0 0 14px; font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--site-ink, #242a26);
  }
  html[lang="en"] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopOriginalControls[data-section="remark"]::before { content: "Remark"; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopOriginalControls :is(select, textarea) {
    width: 100% !important; min-height: 46px; box-sizing: border-box; padding: 11px 14px !important; border-radius: 10px !important;
    border: 1px solid var(--site-line, #e4e5dd) !important; background: var(--site-surface, #fff) !important; color: var(--site-ink, #242a26) !important; font: inherit; font-size: 15px !important;
  }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopOriginalControls[data-section="tip"] .price-row { grid-template-columns: minmax(0, 220px); }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopOriginalControls textarea { min-height: 120px; resize: vertical; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopOriginalControls .apply-discount-btn {
    min-height: 46px; margin: 0 !important; padding: 10px 18px !important; border-radius: 10px !important; font-size: 14px !important; font-weight: 600;
    background: var(--site-accent, #b93830) !important; border: 1px solid var(--site-accent, #b93830) !important; color: #fff !important;
  }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopOriginalControls .apply-discount-btn:disabled {
    background: var(--site-raised, #f0f1eb) !important; border-color: var(--site-line, #e4e5dd) !important; color: var(--site-muted, #62695f) !important;
  }
}
/* Light theme only: the desktop theme toggle (toolbar and checkout header) has no border and no filled circle.
   The border is made transparent rather than removed so the 44px hit area and position stay identical.
   Dark theme and phone/portrait layouts keep the shared component styling. */
@media (min-width: 1367px) {
  html[data-nova-public]:not([data-theme="dark"]) body[data-layout="desktop"] .site-theme-toggle { border-color: transparent !important; background: transparent !important; }
  /* Checkout header language switch matches: text only, like the toolbar "NL"; the close button keeps its circle. */
  html[data-nova-public]:not([data-theme="dark"]) body[data-layout="desktop"] [data-desktop-checkout="true"] #desktopCheckoutTools #touchLanguage { border-color: transparent !important; background: transparent !important; box-shadow: none !important; }
}
/* Basket "Bevestigen" uses the same 10px radius as the checkout "Afrekenen" button (desktop, both themes). */
@media (min-width: 1367px) {
  body[data-layout="desktop"] #desktopMenuCartMount #mobileCart .cart-summary .checkout-btn { border-radius: 10px !important; }
}
/* Category navigation: the current category is a solid ink pill (light: dark pill / white text; dark: cream pill / dark text),
   so it reads clearly without competing with the red action buttons. Desktop only; behaviour (aria-current) unchanged. */
@media (min-width: 1367px) {
  html[data-nova-public] body[data-layout="desktop"] #desktopRefreshTools #desktopRefreshCategories a[aria-current="location"] {
    background: var(--site-ink, #242a26) !important;
    color: var(--site-canvas, #f7f6f2) !important;
  }
}
/* Option dialog quick wins (desktop): compact cards in three columns, whole card clickable (desktop-box-assist.js
   forwards to the card's own control), neutral progress line instead of the red generic requirement message. */
@media (min-width: 1367px) {
  body[data-layout="desktop"] #desktopBox-config #desktopBox-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  body[data-layout="desktop"] #desktopBox-config #desktopBox-options .option { min-height: 58px; padding: 10px 12px; gap: 10px; cursor: pointer; transition: border-color .12s ease, background-color .12s ease; }
  body[data-layout="desktop"] #desktopBox-config #desktopBox-options .option:hover { border-color: var(--site-accent, #b93830); }
  body[data-layout="desktop"] #desktopBox-config #desktopBox-options .option.soldout { cursor: not-allowed; }
  body[data-layout="desktop"] #desktopBox-config #desktopBox-options .option.soldout:hover { border-color: var(--site-line, #e4e5dd); }
  body[data-layout="desktop"] #desktopBox-config #desktopBox-options .option-label { font-size: 13px; line-height: 1.35; }
  body[data-layout="desktop"] #desktopBox-config #desktopBox-options .option-label :is(span, .option-price) { margin-top: 2px; }
  body[data-layout="desktop"] #desktopBox-config #desktopBox-progress { margin: 0; font-size: 12px; line-height: 1.5; color: var(--site-muted, #62695f); }
  body[data-layout="desktop"] #desktopBox-config #desktopBox-validation[data-tone="pending"] {
    position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important;
  }
  body[data-layout="desktop"] #desktopBox-config #desktopBox-validation[data-tone="ready"] { color: var(--site-ink, #242a26); }
  body[data-layout="desktop"] #desktopBox-config #desktopBox-validation[data-tone="ready"]::before { content: "\2713  "; color: var(--site-accent-text, #b93830); font-weight: 700; }
}
/* Single-choice option cards: the card itself is the control. The original button is stretched invisibly over the
   whole card (still the real, focusable, keyboard-operable control with its original handler), and a radio mark
   replaces the "+" / "\2713" glyph. Counted cards (with a number output) keep their visible stepper. option-radio */
@media (min-width: 1367px) {
  body[data-layout="desktop"] #desktopBox-config #desktopBox-options .option:not(:has(output)) { position: relative; padding-right: 44px; }
  body[data-layout="desktop"] #desktopBox-config #desktopBox-options .option:not(:has(output)) .option-controls { position: static; }
  body[data-layout="desktop"] #desktopBox-config #desktopBox-options .option:not(:has(output)) .option-controls > button[data-delta="1"] {
    position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: inherit !important; background: transparent !important; color: transparent !important; font-size: 0 !important;
    cursor: pointer; z-index: 1; outline: none;
  }
  body[data-layout="desktop"] #desktopBox-config #desktopBox-options .option:not(:has(output)) .option-controls > button[data-delta="1"]:disabled { cursor: not-allowed; }
  /* The name sits above the stretched button, so a click on the name lands on the name itself and goes through the
     whole-card forwarding (desktop-box-assist.js) to the same button. Automated browsers that click the visible name
     (agent review 2026-10-29) no longer hit an "intercepting" overlay; people see and get the same result. */
  body[data-layout="desktop"] #desktopBox-config #desktopBox-options .option:not(:has(output)) .option-label { position: relative; z-index: 2; cursor: pointer; }
  body[data-layout="desktop"] #desktopBox-config #desktopBox-options .option.soldout:not(:has(output)) .option-label { cursor: not-allowed; }
  body[data-layout="desktop"] #desktopBox-config #desktopBox-options .option:not(:has(output))::after {
    content: ""; position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; box-sizing: border-box;
    border: 2px solid var(--site-line, #c9ccc2); border-radius: 50%; background: var(--site-surface, #fff); transition: border-color .12s ease, box-shadow .12s ease;
  }
  body[data-layout="desktop"] #desktopBox-config #desktopBox-options .option.selected:not(:has(output))::after {
    border-color: var(--site-accent, #b93830); box-shadow: inset 0 0 0 4px var(--site-surface, #fff); background: var(--site-accent, #b93830);
  }
  body[data-layout="desktop"] #desktopBox-config #desktopBox-options .option:not(:has(output)):hover::after { border-color: var(--site-accent, #b93830); }
  body[data-layout="desktop"] #desktopBox-config #desktopBox-options .option.soldout:not(:has(output))::after { opacity: .45; }
  body[data-layout="desktop"] #desktopBox-config #desktopBox-options .option:has(button:focus-visible) { outline: 2px solid var(--site-focus, #b93830); outline-offset: 2px; }
  body[data-layout="desktop"] #desktopBox-config #desktopBox-options .option:not(:has(output)):hover { box-shadow: 0 2px 8px rgba(0, 0, 0, .06); }
}
/* Selected state "B" (selected-ink): selection is shown in ink, red stays reserved for actions.
   Option cards: surface background, 2px ink border, ink check mark (single choice); group tabs: solid ink pill.
   Both themes via tokens (dark theme ink is the light cream colour). Desktop only. */
@media (min-width: 1367px) {
  html[data-nova-public] body[data-layout="desktop"] #desktopBox-config #desktopBox-options .option.selected {
    background: var(--site-surface, #fff) !important; border: 2px solid var(--site-ink, #242a26) !important; padding: 9px 11px !important;
  }
  html[data-nova-public] body[data-layout="desktop"] #desktopBox-config #desktopBox-options .option.selected:not(:has(output)) { padding-right: 43px !important; }
  html[data-nova-public] body[data-layout="desktop"] #desktopBox-config #desktopBox-options .option.selected:hover { border-color: var(--site-ink, #242a26) !important; }
  html[data-nova-public] body[data-layout="desktop"] #desktopBox-config #desktopBox-options .option.selected:not(:has(output))::after {
    border-color: var(--site-ink, #242a26) !important; background: var(--site-ink, #242a26) !important; box-shadow: none !important;
  }
  html[data-nova-public] body[data-layout="desktop"] #desktopBox-config #desktopBox-options .option.selected:not(:has(output))::before {
    content: ""; position: absolute; right: 20px; top: 50%; width: 5px; height: 9px; margin-top: -6px; box-sizing: content-box;
    border: solid var(--site-surface, #fff); border-width: 0 2px 2px 0; transform: rotate(45deg); z-index: 1; pointer-events: none;
  }
  html[data-nova-public] body[data-layout="desktop"] #desktopBox-config #desktopBox-groups .group-tab[aria-current="true"] {
    background: var(--site-ink, #242a26) !important; border-color: var(--site-ink, #242a26) !important; color: var(--site-canvas, #f7f6f2) !important;
  }
  html[data-nova-public] body[data-layout="desktop"] #desktopBox-config #desktopBox-groups .group-tab[aria-current="true"] strong { color: inherit !important; }
}
/* light-ink-headings: in the light theme, headings and titles that fell back to pure black (#000) use the same warm
   ink as body text (#242a26). Dark theme already uses the cream ink token. Desktop only. */
@media (min-width: 1367px) {
  html[data-nova-public]:not([data-theme="dark"]) body[data-layout="desktop"] section .menu-group h2,
  html[data-nova-public]:not([data-theme="dark"]) body[data-layout="desktop"] section h2:not(.customer-details-title),
  html[data-nova-public]:not([data-theme="dark"]) body[data-layout="desktop"] .legacy-bestseller-title,
  html[data-nova-public]:not([data-theme="dark"]) body[data-layout="desktop"] .bestseller-strip-title,
  html[data-nova-public]:not([data-theme="dark"]) body[data-layout="desktop"] .bestseller-card-title,
  html[data-nova-public]:not([data-theme="dark"]) body[data-layout="desktop"] #desktopMenuCartMount h2,
  html[data-nova-public]:not([data-theme="dark"]) body[data-layout="desktop"] #desktopBox-config :is(h2, h3),
  html[data-nova-public]:not([data-theme="dark"]) body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] :is(#desktopCheckoutBrand, #customerDetailsTitle, h2, h3, .desktop-r3-card-head > strong, #desktopSummaryMode, .cart-qty-display, #touchLanguage) { color: var(--site-ink, #242a26) !important; }
}
/* tab-raised: the current option group uses the same surface as the "Jouw samenstelling" panel (--site-raised in
   each theme) instead of a solid ink block; completed groups show a check before their count. Desktop only. */
@media (min-width: 1367px) {
  html[data-nova-public] body[data-layout="desktop"] #desktopBox-config #desktopBox-groups .group-tab.group-tab[aria-current="true"] {
    background: var(--site-raised, #eceee5) !important; border-color: var(--site-raised, #eceee5) !important; color: var(--site-ink, #242a26) !important; font-weight: 700;
  }
  html[data-nova-public] body[data-layout="desktop"] #desktopBox-config #desktopBox-groups .group-tab.group-tab[aria-current="true"] strong { color: inherit !important; }
  html[data-nova-public] body[data-layout="desktop"] #desktopBox-config #desktopBox-groups .group-tab[data-complete="true"] strong::before { content: "\2713  "; font-weight: 700; }
}
/* dialog-polish: (1) hover never uses the action red; (2) dialog height follows content within limits;
   (3) the summary panel lists only the picks (no explanatory sentence, no duplicate "still to choose" line). */
@media (min-width: 1367px) {
  html[data-nova-public] body[data-layout="desktop"] #desktopBox-config #desktopBox-options .option:not(.selected):not(.soldout):hover { border-color: var(--site-muted, #62695f) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }
  html[data-nova-public] body[data-layout="desktop"] #desktopBox-config #desktopBox-options .option:not(.selected):not(:has(output)):hover::after { border-color: var(--site-ink, #242a26) !important; }
  html[data-nova-public] body[data-layout="desktop"] #desktopBox-config {
    height: fit-content !important; min-height: min(460px, calc(100vh - 86px)); max-height: min(780px, calc(100vh - 86px)) !important;
  }
  html[data-nova-public] body[data-layout="desktop"] #desktopBox-config .dialog-frame { height: auto !important; max-height: min(780px, calc(100vh - 86px)); min-height: inherit; }
  html[data-nova-public] body[data-layout="desktop"] #desktopBox-config .config-body { min-height: 0; }
  html[data-nova-public] body[data-layout="desktop"] #desktopBox-config .selection > p.muted, html[data-nova-public] body[data-layout="desktop"] #desktopBox-config #desktopBox-progress { display: none !important; }
}
/* ordertype-switch: Bestelgegevens leads with an inline "Afhalen | Bezorgen" switch (desktop-checkout-ordertype-switch.js
   forwards to the original order-type buttons). Rows follow in decision order: address/pickup, time, contact, remark.
   The separate "Bestelwijze" row and the duplicate mode badge are hidden. Desktop only. */
@media (min-width: 1367px) {
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopDetailsCard { display: flex; flex-direction: column; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopDetailsCard > .desktop-r3-head { order: 0; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopModeBadge, html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopDetailsCard > .desktop-r3-row[data-desktop-section="order"] { display: none !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopOrderTypeSwitch { order: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 0 4px; padding: 5px;
    border-radius: 14px; background: var(--site-raised, #eceee5); }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopOrderTypeSwitch button { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
    min-height: 58px; padding: 9px 14px; border: 2px solid transparent; border-radius: 10px; background: transparent; color: var(--site-ink, #242a26);
    font: inherit; text-align: left; cursor: pointer; transition: background-color .12s ease, border-color .12s ease; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopOrderTypeSwitch button .switch-icon { grid-row: 1 / 3; display: inline-flex; width: 24px; height: 24px; color: inherit; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopOrderTypeSwitch button .switch-icon svg { width: 24px; height: 24px; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopOrderTypeSwitch button .switch-label { font-size: 15px; font-weight: 700; line-height: 1.25; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopOrderTypeSwitch button .switch-sub { font-size: 12px; line-height: 1.3; color: var(--site-muted, #62695f); }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopOrderTypeSwitch button[aria-checked="true"] { background: var(--site-ink, #242a26); border-color: transparent; color: var(--site-canvas, #fff); cursor: default; }
  /* switch-solid: the active segment is a solid ink block (light: ink on white text; dark: light ink with dark text), same selection language as the category nav. */
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopOrderTypeSwitch button[aria-checked="true"] .switch-sub { color: inherit; opacity: .78; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopOrderTypeSwitch button[aria-checked="false"]:not([aria-disabled="true"]):hover { background: var(--site-surface, #fff); }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopOrderTypeSwitch button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopOrderTypeSwitch button:focus-visible { outline: 2px solid var(--site-focus, #b93830); outline-offset: 2px; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopDetailsCard > .desktop-r3-row[data-desktop-section="address"] { order: 2; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopDetailsCard > .desktop-r3-row[data-desktop-section="time"] { order: 3; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopDetailsCard > .desktop-r3-row[data-desktop-section="customer"] { order: 4; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopDetailsCard > .desktop-r3-row[data-desktop-section="remark"] { order: 5; }
}
/* edit-compact: in the edit view the editor card keeps its own content height and the existing edit actions sit
   directly under its fields (measured by desktop-checkout-column.js). Without the measurement the stretched
   card from the rules above remains in effect. Desktop only. */
@media (min-width: 1367px) {
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"][data-desktop-edit-measured="true"] #touchCustomerScroll,
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"][data-desktop-edit-measured="true"]:is([data-desktop-section="discount"], [data-desktop-section="tip"], [data-desktop-section="remark"]) #desktopOriginalControls {
    align-self: start !important; padding-bottom: var(--desktop-edit-actions-h, 92px) !important;
  }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"][data-desktop-edit-measured="true"] #desktopEditActions:not([hidden]) {
    align-self: start !important; margin-top: var(--desktop-edit-actions-top, 0px) !important;
  }
}
/* time-side-by-side: in the time editor the date and the time sit next to each other, each with a small label.
   Layout only: wrappers become display:contents so the existing original controls (date chip with its native date
   input, time button, status line and choice note) are placed on one grid. No node is moved. Desktop only. */
@media (min-width: 1367px) {
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"][data-desktop-section="time"] #touchCustomerScroll {
    display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 10px; align-content: start;
    grid-template-areas: "head head" "timing timing" "dlabel tlabel" "date time" "status status" "confirm confirm";
  }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"][data-desktop-section="time"] #touchCustomerScroll > *, body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"][data-desktop-section="time"] #touchCustomerScroll .touch-customer-card > * { grid-column: 1 / -1; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"][data-desktop-section="time"] #touchCustomerScroll :is(.customer-details-compact-controls, .touch-customer-schedule) { display: contents !important; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"][data-desktop-section="time"] #touchCustomerScroll .touch-customer-later.touch-customer-later:not([hidden]) { display: contents !important; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"][data-desktop-section="time"] #touchCustomerScroll .customer-details-date-row.customer-details-date-row { display: contents !important; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"][data-desktop-section="time"] #touchCustomerScroll #touchCustomerScheduleTitle { grid-area: head; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"][data-desktop-section="time"] #touchCustomerScroll .touch-customer-timing { grid-area: timing; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"][data-desktop-section="time"] #touchCustomerScroll #touchCustomerDateHost:empty { display: none !important; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"][data-desktop-section="time"] #touchCustomerScroll .customer-details-date-label, body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"][data-desktop-section="time"] #touchCustomerScroll .touch-customer-later::before {
    display: block; margin: 16px 0 6px !important; font-size: 13px !important; font-weight: 600; line-height: 1.3; color: var(--site-muted, #62695f) !important;
  }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"][data-desktop-section="time"] #touchCustomerScroll .customer-details-date-label { grid-area: dlabel; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"][data-desktop-section="time"] #touchCustomerScroll .touch-customer-later::before { content: "Tijd"; grid-area: tlabel; }
  html[lang="en"] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"][data-desktop-section="time"] #touchCustomerScroll .touch-customer-later::before { content: "Time"; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"][data-desktop-section="time"] #touchCustomerScroll #customerDetailsDateMount { grid-area: date; display: flex !important; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"][data-desktop-section="time"] #touchCustomerScroll #customerDetailsDateMount > #orderDateChip {
    flex: 1 1 auto; justify-content: space-between !important; width: 100%; min-height: 46px !important; padding: 10px 14px !important; box-sizing: border-box;
  }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"][data-desktop-section="time"] #touchCustomerScroll #customerDetailsDateMount :is(.order-date-inline-label, .order-date-inline-icon) { color: var(--site-ink, #242a26) !important; -webkit-text-fill-color: var(--site-ink, #242a26) !important; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"][data-desktop-section="time"] #touchCustomerScroll #customerDetailsDateMount .order-date-inline-label { font-size: 15px !important; font-weight: 500 !important; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"][data-desktop-section="time"] #touchCustomerScroll #customerDetailsDateMount > #orderDateChip { overflow: hidden; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"][data-desktop-section="time"] #touchCustomerScroll #customerDetailsDateMount #scheduledDateInput { box-sizing: border-box !important; padding: 0 !important; inset: 0 !important; width: 100% !important; height: 100% !important; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"][data-desktop-section="time"] #touchCustomerScroll #touchCustomerTimeButton { grid-area: time; width: 100%; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"][data-desktop-section="time"] #touchCustomerScroll #touchCustomerTimeStatus { grid-area: status; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"][data-desktop-section="time"] #touchCustomerScroll #customerDetailsOrderConfirmation { grid-area: confirm; }
}
/* time-menu: the original desktop time dropdown (appended to body) follows the site theme and field width. Desktop only. */
@media (min-width: 1367px) {
  html[data-nova-public] body[data-layout="desktop"] #checkoutOrderTypeTimeMenu:not(.is-ios-sheet) {
    gap: 2px !important; padding: 6px !important; border-radius: 12px !important; border: 1px solid var(--site-line, #e4e5dd) !important; background: var(--site-surface, #fff) !important;
    box-shadow: 0 16px 32px rgba(0, 0, 0, .18) !important; max-height: 280px !important;
  }
  html[data-nova-public] body[data-layout="desktop"] #checkoutOrderTypeTimeMenu:not(.is-ios-sheet) .checkout-order-time-option {
    min-height: 40px !important; padding: 8px 12px !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: var(--site-ink, #242a26) !important;
    font: inherit !important; font-size: 15px !important; text-align: left !important; cursor: pointer !important;
  }
  html[data-nova-public] body[data-layout="desktop"] #checkoutOrderTypeTimeMenu:not(.is-ios-sheet) .checkout-order-time-option:hover:not(:disabled) { background: var(--site-raised, #eceee5) !important; }
  html[data-nova-public] body[data-layout="desktop"] #checkoutOrderTypeTimeMenu:not(.is-ios-sheet) .checkout-order-time-option.is-active { background: var(--site-ink, #242a26) !important; color: var(--site-canvas, #fff) !important; font-weight: 600 !important; }
  html[data-nova-public] body[data-layout="desktop"] #checkoutOrderTypeTimeMenu:not(.is-ios-sheet) .checkout-order-time-option:disabled { opacity: .45 !important; cursor: not-allowed !important; }
  /* The time field reads as a normal field value (ink), like the date field next to it. */
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"][data-desktop-section="time"] #touchCustomerScroll #touchCustomerTimeButton { color: var(--site-ink, #242a26) !important; background: var(--site-surface, #fff) !important; border-color: var(--site-line, #e4e5dd) !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"][data-desktop-section="time"] #touchCustomerScroll #customerDetailsDateMount :is(.order-date-inline-label, .order-date-inline-icon) { color: var(--site-ink, #242a26) !important; -webkit-text-fill-color: var(--site-ink, #242a26) !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"][data-desktop-section="time"] #touchCustomerScroll #orderDateChip { background: var(--site-surface, #fff) !important; }
}
/* ideal-label: the online option shows the word "iDEAL" next to its logo, like Pin and Contant show theirs. The same
   word is already used for this choice in the desktop summary row and the "Uw keuze" note. The original hidden
   label (desktop: "Card" / Apple Pay) and the button's aria-label ("iDEAL or Card") are left untouched. Desktop only. */
@media (min-width: 1367px) {
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #touchCustomerScroll .customer-details-payment-option[data-payment-method="online"]::before { content: "iDEAL"; font-size: 14px; font-weight: 600; line-height: 1; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #touchCustomerScroll .customer-details-payment-option[data-payment-method="online"] .checkout-top-icon { width: 26px !important; height: 26px !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #touchCustomerScroll .customer-details-payment-option[data-payment-method="online"] .checkout-top-icon img { width: 26px !important; height: 26px !important; border-radius: 5px; }
}
/* edit-segments-ink: the segmented choices in the edit view (Wanneer: ZSM / Voor later, Betaalmethode) use the same
   selection language as the order-type switch: the chosen segment is a solid ink block. Text fill follows the text
   colour, so the chosen label stays readable (an inherited white text fill used to hide it in the light theme). Desktop only. */
@media (min-width: 1367px) {
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #touchCustomerScroll :is(.customer-details-order-option, .touch-customer-timing > button, .customer-details-payment-option), html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #touchCustomerScroll :is(.customer-details-order-option, .touch-customer-timing > button, .customer-details-payment-option) *, html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #touchCustomerScroll :is(.customer-details-order-option, .touch-customer-timing > button, .customer-details-payment-option)::before { -webkit-text-fill-color: currentColor !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #touchCustomerScroll :is(.customer-details-order-option, .touch-customer-timing > button, .customer-details-payment-option) { color: var(--site-ink, #242a26) !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #touchCustomerScroll :is(.customer-details-order-option, .touch-customer-timing > button, .customer-details-payment-option):not(.is-active):not([aria-pressed="true"]):not([aria-disabled="true"]):not(:disabled):hover { background: var(--site-surface, #fff) !important; }
  /* Pin and Contant keep their word when chosen (the shared style shows only the icon then). */
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #touchCustomerScroll .customer-details-payment-option:not([data-payment-method="online"]) .checkout-top-label { display: inline-flex !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #touchCustomerScroll :is(.customer-details-order-option.is-active, .customer-details-order-option[aria-pressed="true"], .touch-customer-timing > button[aria-pressed="true"], .customer-details-payment-option.is-active, .customer-details-payment-option[aria-pressed="true"]), html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #touchCustomerScroll :is(.customer-details-order-option.is-active, .customer-details-order-option[aria-pressed="true"], .touch-customer-timing > button[aria-pressed="true"], .customer-details-payment-option.is-active, .customer-details-payment-option[aria-pressed="true"]):hover {
    background: var(--site-ink, #242a26) !important; border-color: transparent !important; box-shadow: none !important; color: var(--site-canvas, #fff) !important;
  }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-view="edit"] #touchCustomerScroll :is(.customer-details-order-option.is-active, .customer-details-order-option[aria-pressed="true"], .touch-customer-timing > button[aria-pressed="true"], .customer-details-payment-option.is-active, .customer-details-payment-option[aria-pressed="true"]) :is(.checkout-top-label, .customer-details-order-label, .checkout-top-icon, svg) { color: inherit !important; }
}
/* when-inline: in the summary the original "Wanneer?" controls (moved in by desktop-checkout-when-inline.js) replace
   the "Tijd" row: ZSM | Voor later as a segmented choice, then Datum and Tijd side by side, then the original status
   line. Same row rhythm (24px icon column, 17px padding, divider) as the other Bestelgegevens rows. Desktop only. */
@media (min-width: 1367px) {
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-when-inline="true"] #desktopDetailsCard > .desktop-r3-row[data-desktop-section="time"] { display: none !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-when-inline="true"] #desktopWhenMount { order: 3; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; padding: 17px 0; border-bottom: 1px solid var(--site-line, #e4e5dd); }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-when-inline="true"] #desktopWhenMount > .inline-icon { color: var(--site-accent-text, #b93830); font-size: 20px; line-height: 1.2; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-when-inline="true"] #desktopWhenMount .inline-body {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 10px; align-content: start; min-width: 0;
    grid-template-areas: "head head" "timing timing" "dlabel tlabel" "date time" "status status";
  }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-when-inline="true"] #desktopWhenMount .inline-body > *, html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-when-inline="true"] #desktopWhenMount .touch-customer-schedule > * { grid-column: 1 / -1; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-when-inline="true"] #desktopWhenMount .touch-customer-schedule { display: contents !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-when-inline="true"] #desktopWhenMount .touch-customer-later.touch-customer-later:not([hidden]) { display: contents !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-when-inline="true"] #desktopWhenMount .customer-details-date-row.customer-details-date-row { display: contents !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-when-inline="true"] #desktopWhenMount #touchCustomerDateHost:empty { display: none !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-when-inline="true"] #desktopWhenMount #touchCustomerScheduleTitle {
    grid-area: head; display: block !important; margin: 0 0 10px !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.4 !important;
    text-align: left !important; color: var(--site-ink, #242a26) !important; -webkit-text-fill-color: currentColor !important; letter-spacing: 0;
  }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-when-inline="true"] #desktopWhenMount .touch-customer-timing {
    grid-area: timing; display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px !important;
    width: 100% !important; height: auto !important; min-height: 0 !important; padding: 5px !important; margin: 0 !important; box-sizing: border-box;
    border: 0 !important; border-radius: 14px !important; background: var(--site-raised, #eceee5) !important; box-shadow: none !important;
  }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-when-inline="true"] #desktopWhenMount .touch-customer-timing > button {
    position: relative !important; inset: auto !important; transform: none !important; display: flex !important; align-items: center; justify-content: center;
    min-height: 44px !important; height: auto !important; width: auto !important; margin: 0 !important; padding: 8px 12px !important;
    border: 0 !important; border-radius: 10px !important; background: transparent !important; box-shadow: none !important; opacity: 1 !important;
    color: var(--site-ink, #242a26) !important; -webkit-text-fill-color: currentColor !important; font: inherit; font-size: 14px !important; font-weight: 600 !important; cursor: pointer;
  }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-when-inline="true"] #desktopWhenMount .touch-customer-timing > button:not([aria-pressed="true"]):not(:disabled):hover { background: var(--site-surface, #fff) !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-when-inline="true"] #desktopWhenMount .touch-customer-timing > button[aria-pressed="true"], html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-when-inline="true"] #desktopWhenMount .touch-customer-timing > button[aria-pressed="true"]:hover {
    background: var(--site-ink, #242a26) !important; color: var(--site-canvas, #fff) !important; cursor: default;
  }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-when-inline="true"] #desktopWhenMount .touch-customer-timing > button:disabled { opacity: .45 !important; cursor: not-allowed; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-when-inline="true"] #desktopWhenMount .customer-details-date-label, html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-when-inline="true"] #desktopWhenMount .touch-customer-later::before {
    display: block; margin: 14px 0 6px !important; font-size: 13px !important; font-weight: 600; line-height: 1.3;
    color: var(--site-muted, #62695f) !important; -webkit-text-fill-color: currentColor !important;
  }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-when-inline="true"] #desktopWhenMount .customer-details-date-label { grid-area: dlabel; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-when-inline="true"] #desktopWhenMount .touch-customer-later::before { content: "Tijd"; grid-area: tlabel; }
  html[lang="en"] html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-when-inline="true"] #desktopWhenMount .touch-customer-later::before { content: "Time"; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-when-inline="true"] #desktopWhenMount #customerDetailsDateMount { grid-area: date; display: flex !important; min-width: 0; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-when-inline="true"] #desktopWhenMount #customerDetailsDateMount > #orderDateChip {
    flex: 1 1 auto; justify-content: space-between !important; width: 100%; min-height: 46px !important; padding: 10px 14px !important; box-sizing: border-box; overflow: hidden;
    border: 1px solid var(--site-line, #e4e5dd) !important; border-radius: 10px !important; background: var(--site-surface, #fff) !important; box-shadow: none !important;
  }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-when-inline="true"] #desktopWhenMount #customerDetailsDateMount #scheduledDateInput { box-sizing: border-box !important; padding: 0 !important; inset: 0 !important; width: 100% !important; height: 100% !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-when-inline="true"] #desktopWhenMount #customerDetailsDateMount :is(.order-date-inline-label, .order-date-inline-icon) { color: var(--site-ink, #242a26) !important; -webkit-text-fill-color: var(--site-ink, #242a26) !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-when-inline="true"] #desktopWhenMount #customerDetailsDateMount .order-date-inline-label { font-size: 15px !important; font-weight: 500 !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-when-inline="true"] #desktopWhenMount #touchCustomerTimeButton {
    grid-area: time; width: 100%; min-height: 46px; padding: 10px 14px; box-sizing: border-box; border-radius: 10px;
    border: 1px solid var(--site-line, #e4e5dd) !important; background: var(--site-surface, #fff) !important; color: var(--site-ink, #242a26) !important;
    -webkit-text-fill-color: currentColor !important; font: inherit; font-size: 15px; text-align: left; cursor: pointer;
  }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-when-inline="true"] #desktopWhenMount :is(#touchCustomerTimeButton, #orderDateChip):hover { border-color: var(--site-muted, #62695f) !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-when-inline="true"] #desktopWhenMount #touchCustomerTimeStatus {
    grid-area: status; display: block !important; margin: 10px 0 0 !important; font-size: 12px !important; line-height: 1.4;
    color: var(--site-muted, #62695f) !important; -webkit-text-fill-color: currentColor !important; text-align: left !important;
  }
}
/* switch-no-time: with "Wanneer?" inline, the order-type switch no longer repeats the time under each option. The
   "Nu niet beschikbaar" note of an unavailable option stays visible. Desktop only. */
@media (min-width: 1367px) {
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-when-inline="true"] #desktopOrderTypeSwitch button:not([aria-disabled="true"]) .switch-sub { display: none !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-when-inline="true"] #desktopOrderTypeSwitch button { min-height: 52px !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-when-inline="true"] #desktopOrderTypeSwitch button:not([aria-disabled="true"]) .switch-icon { grid-row: 1 !important; }
}
/* payment-inline: in the summary the original payment toggle (moved in by desktop-checkout-when-inline.js) replaces
   the payment row: iDEAL | Pin | Contant as a segmented choice with the same ink selection as the other choices.
   Options the original hides (Pin for delivery) stay hidden. The moved card title stays for assistive tech only,
   because the card already has the visible "Betaalmethode" heading. Desktop only. */
@media (min-width: 1367px) {
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-payment-inline="true"] #desktopPaymentCard > .desktop-r3-row[data-desktop-section="payment"] { display: none !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-payment-inline="true"] #desktopPaymentMount { display: block; margin: 14px 0 4px; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-payment-inline="true"] #desktopPaymentMount .touch-customer-payment { display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-payment-inline="true"] #desktopPaymentMount #touchCustomerPaymentTitle {
    position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important;
    overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
  }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-payment-inline="true"] #desktopPaymentMount .customer-details-payment-toggle {
    position: relative !important; display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px !important;
    width: 100% !important; height: auto !important; min-height: 0 !important; padding: 5px !important; margin: 0 !important; box-sizing: border-box;
    border: 0 !important; border-radius: 14px !important; background: var(--site-raised, #eceee5) !important; box-shadow: none !important;
  }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-payment-inline="true"] #desktopPaymentMount .customer-details-payment-toggle::before { display: none !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-payment-inline="true"] #desktopPaymentMount .customer-details-payment-option {
    position: relative !important; inset: auto !important; transform: none !important;
    display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
    min-height: 48px !important; height: auto !important; width: auto !important; margin: 0 !important; padding: 8px 12px !important;
    border: 0 !important; border-radius: 10px !important; background: transparent !important; box-shadow: none !important; opacity: 1 !important;
    color: var(--site-ink, #242a26) !important; -webkit-text-fill-color: currentColor !important; font: inherit; font-size: 14px !important; font-weight: 600 !important; cursor: pointer;
  }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-payment-inline="true"] #desktopPaymentMount .customer-details-payment-option *, html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-payment-inline="true"] #desktopPaymentMount .customer-details-payment-option::before { -webkit-text-fill-color: currentColor !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-payment-inline="true"] #desktopPaymentMount .customer-details-payment-option.is-hidden { display: none !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-payment-inline="true"] #desktopPaymentMount .customer-details-payment-option:not(.is-active):not(:disabled):hover { background: var(--site-surface, #fff) !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-payment-inline="true"] #desktopPaymentMount .customer-details-payment-option.is-active, html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-payment-inline="true"] #desktopPaymentMount .customer-details-payment-option.is-active:hover {
    background: var(--site-ink, #242a26) !important; color: var(--site-canvas, #fff) !important; cursor: default;
  }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-payment-inline="true"] #desktopPaymentMount .customer-details-payment-option :is(.checkout-top-label, .checkout-top-icon, svg) { color: inherit !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-payment-inline="true"] #desktopPaymentMount .customer-details-payment-option .checkout-top-label {
    position: static !important; transform: none !important; display: inline-flex !important; font-size: 14px !important; font-weight: 600 !important; opacity: 1 !important; white-space: nowrap;
  }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-payment-inline="true"] #desktopPaymentMount .customer-details-payment-option[data-payment-method="online"] .checkout-top-label { display: none !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-payment-inline="true"] #desktopPaymentMount .customer-details-payment-option[data-payment-method="online"]::before { content: "iDEAL"; font-size: 14px; font-weight: 600; line-height: 1; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-payment-inline="true"] #desktopPaymentMount .customer-details-payment-option .checkout-top-icon {
    position: static !important; transform: none !important; display: inline-flex !important; width: 20px !important; height: 20px !important; margin: 0 !important; opacity: 1 !important;
  }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-payment-inline="true"] #desktopPaymentMount .customer-details-payment-option .checkout-top-icon :is(svg, img) { width: 20px !important; height: 20px !important; object-fit: contain; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-payment-inline="true"] #desktopPaymentMount .customer-details-payment-option[data-payment-method="online"] .checkout-top-icon,
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-payment-inline="true"] #desktopPaymentMount .customer-details-payment-option[data-payment-method="online"] .checkout-top-icon img { width: 26px !important; height: 26px !important; border-radius: 5px; }
}
/* payment-card-rows: the payment note becomes one small muted line, and Kortingscode / Fooi use the same row rhythm
   as the Bestelgegevens rows (24px icon column, title + value, chevron, divider). The visible "Wijzigen" link text
   stays in the button for assistive tech; the chevron is drawn in its place. Desktop only. */
@media (min-width: 1367px) {
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopPaymentCard .desktop-r3-note {
    display: block !important; margin: 10px 0 6px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important;
    font-size: 12px !important; line-height: 1.45 !important; font-weight: 400 !important; text-align: left !important; color: var(--site-muted, #62695f) !important;
  }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopPaymentCard .desktop-r3-offer {
    display: grid !important; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%;
    padding: 17px 0 !important; margin: 0 !important; border: 0 !important; border-top: 1px solid var(--site-line, #e4e5dd) !important; border-radius: 0 !important;
    background: none !important; color: inherit !important; text-align: left; font: inherit; cursor: pointer;
  }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopPaymentCard .desktop-r3-offer:last-child { padding-bottom: 2px !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopPaymentCard .desktop-r3-offer::before { color: var(--site-accent-text, #b93830); font-size: 18px; line-height: 1; text-align: left; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopPaymentCard .desktop-r3-offer[data-desktop-section="discount"]::before { content: "%"; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopPaymentCard .desktop-r3-offer[data-desktop-section="tip"]::before { content: "♡"; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopPaymentCard .desktop-r3-offer b { display: block; font-size: 14px !important; font-weight: 700 !important; color: var(--site-ink, #242a26) !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopPaymentCard .desktop-r3-offer > span:last-child { font-size: 0 !important; color: var(--site-ink, #242a26) !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopPaymentCard .desktop-r3-offer > span:last-child::after { content: "›"; font-size: 16px; line-height: 1; }
}
/* supplies-desktop-dialog: the shared supplies decision dialog (same module and rules as phone/portrait) gets a
   desktop presentation: dimmed, slightly blurred page behind it instead of an opaque sheet, a wider panel and the
   action at the bottom right. Content, order of rows and buttons are unchanged. Desktop only. */
@media (min-width: 1367px) {
  html[data-nova-public] body[data-layout="desktop"][data-desktop-basket="true"] #touchSuppliesDialog {
    width: min(560px, calc(100vw - 48px)) !important; border-radius: 16px !important; overflow: hidden;
    background: var(--site-surface, #fff) !important; color: var(--site-ink, #242a26) !important; box-shadow: 0 24px 64px rgba(0, 0, 0, .28) !important;
  }
  html[data-nova-public] body[data-layout="desktop"][data-desktop-basket="true"] #touchSuppliesDialog::backdrop { background: rgba(20, 24, 21, .45) !important; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
  html[data-nova-public][data-theme="dark"] body[data-layout="desktop"][data-desktop-basket="true"] #touchSuppliesDialog::backdrop { background: rgba(0, 0, 0, .6) !important; }
  html[data-nova-public] body[data-layout="desktop"][data-desktop-basket="true"] #touchSuppliesDialog .supplies-dialog-header { padding: 18px 16px 14px 24px !important; border-bottom: 1px solid var(--site-line, #e4e5dd) !important; background: transparent !important; }
  html[data-nova-public] body[data-layout="desktop"][data-desktop-basket="true"] #touchSuppliesTitle { font-size: 20px !important; font-weight: 700 !important; line-height: 1.3 !important; color: var(--site-ink, #242a26) !important; letter-spacing: 0; }
  html[data-nova-public] body[data-layout="desktop"][data-desktop-basket="true"] #touchSuppliesDialog .supplies-dialog-scroll { padding: 16px 24px !important; }
  html[data-nova-public] body[data-layout="desktop"][data-desktop-basket="true"] #touchSuppliesDialog #touchSuppliesRows { gap: 8px !important; }
  html[data-nova-public] body[data-layout="desktop"][data-desktop-basket="true"] #touchSuppliesDialog .supplies-dialog-row {
    padding: 10px 12px !important; border-radius: 12px !important; border: 1px solid var(--site-line, #e4e5dd) !important;
    background: var(--site-surface, #fff) !important; color: var(--site-ink, #242a26) !important; font-size: 15px !important; font-weight: 600 !important;
  }
  html[data-nova-public] body[data-layout="desktop"][data-desktop-basket="true"] #touchSuppliesDialog .supplies-dialog-quantity { background: var(--site-raised, #eceee5) !important; border-radius: 10px !important; }
  html[data-nova-public] body[data-layout="desktop"][data-desktop-basket="true"] #touchSuppliesDialog .supplies-dialog-quantity button { color: var(--site-ink, #242a26) !important; }
  html[data-nova-public] body[data-layout="desktop"][data-desktop-basket="true"] #touchSuppliesDialog .supplies-dialog-footer {
    display: flex !important; justify-content: flex-end; padding: 14px 24px 20px !important;
    border-top: 1px solid var(--site-line, #e4e5dd) !important; background: transparent !important;
  }
  html[data-nova-public] body[data-layout="desktop"][data-desktop-basket="true"] #touchSuppliesContinue {
    width: auto !important; min-width: 220px; min-height: 46px !important; padding: 11px 22px !important; border-radius: 10px !important;
    font-size: 15px !important; font-weight: 700 !important;
  }
}
/* supplies-checkout-row: the Benodigdheden card in the desktop checkout uses the same row rhythm as the other cards
   (24px icon column, title + chosen items, chevron). The original "Wijzigen" text stays for assistive tech; the
   chevron is drawn in its place. The original disabled/hidden states are respected. Desktop only. */
@media (min-width: 1367px) {
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopSuppliesMount #touchSuppliesToggle:not([hidden]) {
    display: grid !important; grid-template-columns: 24px minmax(0, 1fr) auto !important; grid-template-rows: auto auto; column-gap: 14px !important; row-gap: 3px !important;
    align-items: center; width: 100%; padding: 4px 0 !important; border: 0 !important; background: none !important; text-align: left; cursor: pointer;
  }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopSuppliesMount #touchSuppliesToggle:disabled { cursor: default; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopSuppliesMount #touchSuppliesToggle::before { content: "⫽"; grid-column: 1; grid-row: 1 / 3; align-self: center; color: var(--site-accent-text, #b93830); font-size: 18px; line-height: 1; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopSuppliesMount #touchSuppliesToggle [data-supplies-label] { grid-column: 2 !important; grid-row: 1 !important; font-size: 14px !important; font-weight: 700 !important; color: var(--site-ink, #242a26) !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopSuppliesMount #touchSuppliesToggle .touch-supplies-summary:not([hidden]) { display: block !important; grid-column: 2 !important; grid-row: 2 !important; font-size: 12px !important; color: var(--site-muted, #62695f) !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopSuppliesMount #touchSuppliesToggle .touch-supplies-indicator:not([hidden]) { grid-column: 3 !important; grid-row: 1 / 3 !important; align-self: center; font-size: 0 !important; color: var(--site-ink, #242a26) !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopSuppliesMount #touchSuppliesToggle .touch-supplies-indicator:not([hidden])::after { content: "›"; font-size: 16px; line-height: 1; }
}
/* supplies-limit-note: the automatic-adjustment note sits under the chosen items in the checkout supplies row. */
@media (min-width: 1367px) {
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopSuppliesMount #touchSuppliesToggle .touch-supplies-limit-note { grid-column: 2 !important; grid-row: 3 !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopSuppliesMount #touchSuppliesToggle::before { grid-row: 1 / 4 !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopSuppliesMount #touchSuppliesToggle .touch-supplies-indicator:not([hidden]) { grid-row: 1 / 4 !important; }
}
/* nav-popups: the pop-ups opened from the desktop top bar (Favoriets, Help / Nova Agent, Nieuws, Info, Klantgegevens)
   use the same panel language as the checkout and supplies dialogs: dimmed and slightly blurred page, 16px surface
   panel with a line border, 20px title, transparent close button, rows with line borders, ink quantity controls, one
   red primary action at the bottom right and outlined secondary actions. Colours follow the light/dark site tokens.
   Presentation only; every control keeps its original element, handler and text. Desktop layout (>=1367px) only. */
@media (min-width: 1367px) {
  /* Shared backdrop */
  html[data-nova-public] body[data-layout="desktop"] #favoritesOverlay, html[data-nova-public] body[data-layout="desktop"] #mobileAgentOverlay, html[data-nova-public] body[data-layout="desktop"] #mobileAnnouncementOverlay {
    background: rgba(20, 24, 21, .45) !important; backdrop-filter: blur(3px) !important; -webkit-backdrop-filter: blur(3px) !important;
  }
  html[data-nova-public][data-theme="dark"] body[data-layout="desktop"] :is(#favoritesOverlay, #mobileAgentOverlay, #mobileAnnouncementOverlay) { background: rgba(0, 0, 0, .6) !important; }
  html[data-nova-public] body[data-layout="desktop"] #favoritesOverlay { align-items: center !important; padding: 24px !important; }
  html[data-nova-public] body[data-layout="desktop"] #desktopProfileDialog::backdrop { background: rgba(20, 24, 21, .45) !important; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
  html[data-nova-public][data-theme="dark"] body[data-layout="desktop"] #desktopProfileDialog::backdrop { background: rgba(0, 0, 0, .6) !important; }

  /* Shared panel */
  html[data-nova-public] body[data-layout="desktop"] #favoritesOverlay .favorites-panel, html[data-nova-public] body[data-layout="desktop"] #mobileAgentOverlay .mobile-agent-sheet, html[data-nova-public] body[data-layout="desktop"] #mobileAnnouncementOverlay .mobile-announcement-sheet, html[data-nova-public] body[data-layout="desktop"] #desktopProfileDialog {
    border: 1px solid var(--site-line, #e4e5dd) !important; border-radius: 16px !important; background: var(--site-surface, #fff) !important;
    color: var(--site-ink, #242a26) !important; box-shadow: 0 24px 64px rgba(0, 0, 0, .28) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    padding: 0 !important; overflow: hidden !important; font-family: inherit;
  }
  html[data-nova-public] body[data-layout="desktop"] #favoritesOverlay .favorites-panel { width: min(560px, calc(100vw - 48px)) !important; max-height: min(80vh, 720px) !important; display: flex !important; flex-direction: column; }
  html[data-nova-public] body[data-layout="desktop"] #mobileAgentOverlay .mobile-agent-sheet { width: min(600px, calc(100vw - 48px)) !important; display: flex !important; flex-direction: column; gap: 0 !important; }
  html[data-nova-public] body[data-layout="desktop"] #mobileAnnouncementOverlay .mobile-announcement-sheet { width: min(520px, calc(100vw - 48px)) !important; }
  html[data-nova-public] body[data-layout="desktop"] #desktopProfileDialog { width: min(560px, calc(100vw - 48px)) !important; }

  /* Shared header: title left, close right, divider */
  html[data-nova-public] body[data-layout="desktop"] #favoritesOverlay .favorites-panel-header, html[data-nova-public] body[data-layout="desktop"] #mobileAgentOverlay .mobile-agent-header, html[data-nova-public] body[data-layout="desktop"] #mobileAnnouncementOverlay .mobile-announcement-header, html[data-nova-public] body[data-layout="desktop"] #desktopProfileDialog .desktop-profile-header {
    display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important;
    margin: 0 !important; padding: 18px 16px 14px 24px !important; border: 0 !important; border-bottom: 1px solid var(--site-line, #e4e5dd) !important; background: transparent !important;
  }
  html[data-nova-public] body[data-layout="desktop"] #favoritesOverlay #favoritesPanelTitle, html[data-nova-public] body[data-layout="desktop"] #mobileAgentOverlay #mobileAgentTitle, html[data-nova-public] body[data-layout="desktop"] #mobileAnnouncementOverlay #mobileAnnouncementTitle, html[data-nova-public] body[data-layout="desktop"] #desktopProfileDialog #desktopProfileTitle {
    margin: 0 !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 0 !important;
    color: var(--site-ink, #242a26) !important; -webkit-text-fill-color: currentColor !important; text-align: left !important;
  }
  html[data-nova-public] body[data-layout="desktop"] #mobileAgentOverlay .mobile-agent-subtitle, html[data-nova-public] body[data-layout="desktop"] #desktopProfileDialog #desktopProfileIntro { display: block; margin: 2px 0 0 !important; font-size: 13px !important; line-height: 1.4 !important; color: var(--site-muted, #62695f) !important; }
  html[data-nova-public] body[data-layout="desktop"] #favoritesOverlay .favorites-close-btn, html[data-nova-public] body[data-layout="desktop"] #mobileAgentOverlay #mobileAgentClose, html[data-nova-public] body[data-layout="desktop"] #mobileAnnouncementOverlay #mobileAnnouncementClose, html[data-nova-public] body[data-layout="desktop"] #desktopProfileDialog #desktopProfileClose {
    position: static !important; flex: 0 0 40px; width: 40px !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 !important;
    display: inline-flex !important; align-items: center; justify-content: center; border: 0 !important; border-radius: 10px !important;
    background: transparent !important; box-shadow: none !important; color: var(--site-muted, #62695f) !important; font-size: 18px !important; cursor: pointer;
  }
  html[data-nova-public] body[data-layout="desktop"] #favoritesOverlay .favorites-close-btn:hover, html[data-nova-public] body[data-layout="desktop"] #mobileAgentOverlay #mobileAgentClose:hover, html[data-nova-public] body[data-layout="desktop"] #mobileAnnouncementOverlay #mobileAnnouncementClose:hover, html[data-nova-public] body[data-layout="desktop"] #desktopProfileDialog #desktopProfileClose:hover { background: var(--site-raised, #eceee5) !important; color: var(--site-ink, #242a26) !important; }

  /* Shared primary / secondary actions */
  html[data-nova-public] body[data-layout="desktop"] #favoritesOverlay #favoritesCheckoutBtn, html[data-nova-public] body[data-layout="desktop"] #mobileAgentOverlay #mobileAgentSubmit, html[data-nova-public] body[data-layout="desktop"] #desktopProfileDialog #desktopProfileSave {
    width: auto !important; min-width: 180px; min-height: 46px !important; height: auto !important; margin: 0 !important; padding: 11px 22px !important;
    border: 0 !important; border-radius: 10px !important; background: var(--site-accent, #b93830) !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
    box-shadow: none !important; font: inherit; font-size: 15px !important; font-weight: 700 !important; cursor: pointer;
  }
  html[data-nova-public] body[data-layout="desktop"] #favoritesOverlay #favoritesCheckoutBtn:hover, html[data-nova-public] body[data-layout="desktop"] #mobileAgentOverlay #mobileAgentSubmit:hover, html[data-nova-public] body[data-layout="desktop"] #desktopProfileDialog #desktopProfileSave:hover:not(:disabled) { filter: brightness(.94); border-color: transparent !important; }
  html[data-nova-public] body[data-layout="desktop"] #mobileAgentOverlay #mobileAgentCheckoutShortcut, html[data-nova-public] body[data-layout="desktop"] #desktopProfileDialog #desktopProfileCancel {
    width: auto !important; min-height: 46px !important; margin: 0 !important; padding: 11px 18px !important; border: 1px solid var(--site-line, #e4e5dd) !important; border-radius: 10px !important;
    background: var(--site-surface, #fff) !important; color: var(--site-ink, #242a26) !important; box-shadow: none !important; font: inherit; font-size: 14px !important; font-weight: 600 !important;
  }
  html[data-nova-public] body[data-layout="desktop"] #mobileAgentOverlay #mobileAgentCheckoutShortcut svg { color: inherit !important; }

  /* Favorieten */
  html[data-nova-public] body[data-layout="desktop"] #favoritesOverlay #favoritesList { display: grid !important; gap: 8px !important; padding: 16px 24px !important; margin: 0 !important; overflow-y: auto; min-height: 0; }
  html[data-nova-public] body[data-layout="desktop"] #favoritesOverlay .favorite-list-item {
    display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin: 0 !important;
    padding: 12px 12px 12px 16px !important; border: 1px solid var(--site-line, #e4e5dd) !important; border-radius: 12px !important; background: var(--site-surface, #fff) !important; box-shadow: none !important;
  }
  html[data-nova-public] body[data-layout="desktop"] #favoritesOverlay .favorite-list-name { font-size: 15px !important; font-weight: 600 !important; color: var(--site-ink, #242a26) !important; }
  html[data-nova-public] body[data-layout="desktop"] #favoritesOverlay .favorite-list-price { font-size: 13px !important; color: var(--site-muted, #62695f) !important; }
  html[data-nova-public] body[data-layout="desktop"] #favoritesOverlay .favorite-list-actions { display: flex !important; align-items: center !important; gap: 8px !important; }
  html[data-nova-public] body[data-layout="desktop"] #favoritesOverlay .favorite-list-qty-control {
    display: inline-flex !important; align-items: center !important; gap: 2px !important; height: auto !important; padding: 3px !important; border: 0 !important;
    border-radius: 10px !important; background: var(--site-raised, #eceee5) !important; box-shadow: none !important;
  }
  html[data-nova-public] body[data-layout="desktop"] #favoritesOverlay .favorite-list-qty-control .cart-qty-button {
    width: 32px !important; height: 32px !important; min-width: 32px !important; padding: 0 !important; border: 0 !important; border-radius: 8px !important;
    background: transparent !important; color: var(--site-ink, #242a26) !important; -webkit-text-fill-color: currentColor !important; box-shadow: none !important; font-size: 18px !important;
  }
  html[data-nova-public] body[data-layout="desktop"] #favoritesOverlay .favorite-list-qty-control .cart-qty-button:hover:not(:disabled) { background: var(--site-surface, #fff) !important; }
  html[data-nova-public] body[data-layout="desktop"] #favoritesOverlay .favorite-list-qty-control .cart-qty-display { min-width: 24px; font-size: 15px !important; font-weight: 600 !important; color: var(--site-ink, #242a26) !important; background: transparent !important; text-align: center; }
  html[data-nova-public] body[data-layout="desktop"] #favoritesOverlay .favorite-list-qty-control .desktop-per-unit-neutral { padding: 0 6px 0 10px !important; font-size: 13px !important; font-weight: 600 !important; color: var(--site-muted, #62695f) !important; background: transparent !important; white-space: nowrap; }
  html[data-nova-public] body[data-layout="desktop"] #favoritesOverlay .favorite-list-remove-btn {
    width: 40px !important; height: 40px !important; padding: 0 !important; border: 0 !important; border-radius: 10px !important; background: transparent !important;
    color: var(--site-accent-text, #b93830) !important; box-shadow: none !important;
  }
  html[data-nova-public] body[data-layout="desktop"] #favoritesOverlay .favorite-list-remove-btn:hover { background: var(--site-raised, #eceee5) !important; }
  html[data-nova-public] body[data-layout="desktop"] #favoritesOverlay .favorite-list-remove-btn svg { color: inherit !important; fill: currentColor; }
  html[data-nova-public] body[data-layout="desktop"] #favoritesOverlay .favorites-panel-footer {
    display: flex !important; justify-content: flex-end !important; margin: 0 !important; padding: 14px 24px 20px !important;
    border-top: 1px solid var(--site-line, #e4e5dd) !important; background: transparent !important;
  }

  /* Nova Agent */
  html[data-nova-public] body[data-layout="desktop"] #mobileAgentOverlay #mobileAgentForm { display: flex !important; flex-direction: column; align-items: flex-end; gap: 12px !important; margin: 0 !important; padding: 16px 24px 0 !important; }
  html[data-nova-public] body[data-layout="desktop"] #mobileAgentOverlay #mobileAgentInput {
    width: 100% !important; min-height: 112px !important; box-sizing: border-box; margin: 0 !important; padding: 12px 14px !important; resize: vertical;
    border: 1px solid var(--site-line, #e4e5dd) !important; border-radius: 10px !important; background: var(--site-surface, #fff) !important;
    color: var(--site-ink, #242a26) !important; -webkit-text-fill-color: var(--site-ink, #242a26) !important; box-shadow: none !important; font: inherit; font-size: 15px !important;
  }
  html[data-nova-public] body[data-layout="desktop"] #mobileAgentOverlay #mobileAgentInput::placeholder { color: var(--site-muted, #62695f) !important; -webkit-text-fill-color: var(--site-muted, #62695f) !important; opacity: 1; }
  html[data-nova-public] body[data-layout="desktop"] #mobileAgentOverlay #mobileAgentInput:focus { outline: 2px solid var(--site-focus, #b93830) !important; outline-offset: 1px; border-color: transparent !important; }
  html[data-nova-public] body[data-layout="desktop"] #mobileAgentOverlay #mobileAgentStatus { margin: 0 !important; padding: 12px 24px 0 !important; font-size: 13px !important; line-height: 1.45 !important; color: var(--site-muted, #62695f) !important; text-align: left !important; background: none !important; }
  html[data-nova-public] body[data-layout="desktop"] #mobileAgentOverlay .mobile-agent-shortcut-row { display: flex !important; justify-content: flex-start; margin: 0 !important; padding: 14px 24px 0 !important; }
  html[data-nova-public] body[data-layout="desktop"] #mobileAgentOverlay #mobileAgentContactDock { margin: 18px 0 0 !important; padding: 12px 24px 16px !important; border-top: 1px solid var(--site-line, #e4e5dd) !important; background: transparent !important; }
  html[data-nova-public] body[data-layout="desktop"] #mobileAgentOverlay #mobileAgentContactDock .contact-links-compact { justify-content: flex-start !important; gap: 4px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
  html[data-nova-public] body[data-layout="desktop"] #mobileAgentOverlay #mobileAgentContactDock .contact-icon-link { width: 40px !important; height: 40px !important; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 10px !important; color: var(--site-muted, #62695f) !important; background: transparent !important; }
  html[data-nova-public] body[data-layout="desktop"] #mobileAgentOverlay #mobileAgentContactDock .contact-icon-link:hover { background: var(--site-raised, #eceee5) !important; color: var(--site-ink, #242a26) !important; }
  html[data-nova-public] body[data-layout="desktop"] #mobileAgentOverlay #mobileAgentContactDock .contact-icon-link svg { width: 22px !important; height: 22px !important; color: inherit !important; }
  html[data-nova-public] body[data-layout="desktop"] #mobileAgentOverlay #mobileAgentContactDock .contact-brand-mark { display: none !important; }

  /* Mededeling */
  html[data-nova-public] body[data-layout="desktop"] #mobileAnnouncementOverlay #mobileAnnouncementContent { margin: 0 !important; padding: 18px 24px 22px !important; background: transparent !important; }
  html[data-nova-public] body[data-layout="desktop"] #mobileAnnouncementOverlay #mobileAnnouncementContent :is(p, .mobile-announcement-promo) {
    margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
    font-size: 15px !important; line-height: 1.55 !important; text-align: left !important; color: var(--site-ink, #242a26) !important; -webkit-text-fill-color: currentColor !important;
  }

  /* Info popover */
  html[data-nova-public] body[data-layout="desktop"] #desktopNavInfoPanel {
    padding: 8px !important; border: 1px solid var(--site-line, #e4e5dd) !important; border-radius: 12px !important; background: var(--site-surface, #fff) !important;
    color: var(--site-ink, #242a26) !important; box-shadow: 0 16px 40px rgba(0, 0, 0, .18) !important; min-width: 320px;
  }
  html[data-nova-public] body[data-layout="desktop"] #desktopNavInfoPanel .desktop-nav-info-links { display: grid !important; gap: 2px !important; padding: 0 !important; background: transparent !important; }
  html[data-nova-public] body[data-layout="desktop"] #desktopNavInfoPanel .desktop-nav-info-link { display: flex !important; align-items: center !important; gap: 12px !important; padding: 10px 12px !important; border-radius: 8px !important; background: transparent !important; color: inherit !important; }
  html[data-nova-public] body[data-layout="desktop"] #desktopNavInfoPanel a.desktop-nav-info-link:hover { background: var(--site-raised, #eceee5) !important; }
  html[data-nova-public] body[data-layout="desktop"] #desktopNavInfoPanel .desktop-nav-info-link-icon { flex: 0 0 36px; width: 36px !important; height: 36px !important; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 10px !important; background: var(--site-raised, #eceee5) !important; color: var(--site-ink, #242a26) !important; }
  html[data-nova-public] body[data-layout="desktop"] #desktopNavInfoPanel .desktop-nav-info-link-icon svg { width: 20px !important; height: 20px !important; color: inherit !important; }
  html[data-nova-public] body[data-layout="desktop"] #desktopNavInfoPanel .desktop-nav-info-link-copy strong { display: block; font-size: 14px !important; font-weight: 700 !important; color: var(--site-ink, #242a26) !important; }
  html[data-nova-public] body[data-layout="desktop"] #desktopNavInfoPanel .desktop-nav-info-link-copy span { display: block; font-size: 13px !important; color: var(--site-muted, #62695f) !important; }

  /* Klantgegevens (profile) */
  html[data-nova-public] body[data-layout="desktop"] #desktopProfileDialog .desktop-profile-body { padding: 18px 24px !important; }
  html[data-nova-public] body[data-layout="desktop"] #desktopProfileDialog .desktop-profile-footer { padding: 14px 24px 20px !important; background: transparent !important; }
  html[data-nova-public] body[data-layout="desktop"] #desktopProfileDialog input { border-radius: 10px !important; min-height: 46px; font-size: 15px !important; }
}
/* quiet-row-icons: the small icons at the start of the checkout rows (Bestelgegevens, Wanneer, Kortingscode, Fooi,
   Benodigdheden) are muted grey; red stays reserved for actions. Desktop only. */
@media (min-width: 1367px) {
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] :is(#desktopDetailsCard, #desktopPaymentCard) .desktop-r3-row > span:first-child,
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopWhenMount > .inline-icon,
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopPaymentCard .desktop-r3-offer::before,
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopSuppliesMount #touchSuppliesToggle::before { color: var(--site-muted, #62695f) !important; }
}
/* profile-address: the Klantgegevens dialog always offers the (optional) delivery address under its own small heading. */
@media (min-width: 1367px) {
  html[data-nova-public] body[data-layout="desktop"] #desktopProfileDialog #desktopProfileAddressFields { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--site-line, #e4e5dd); }
  html[data-nova-public] body[data-layout="desktop"] #desktopProfileDialog .desktop-profile-section { text-align: left !important; margin: 0 0 2px !important; font-size: 14px !important; line-height: 1.4; color: var(--site-ink, #242a26); }
  html[data-nova-public] body[data-layout="desktop"] #desktopProfileDialog .desktop-profile-section strong { font-weight: 700; }
  html[data-nova-public] body[data-layout="desktop"] #desktopProfileDialog .desktop-profile-section span { margin-left: 6px; font-size: 13px; color: var(--site-muted, #62695f); }
}
/* when-slider-align: the ZSM | Voor later control lines up with the Afhalen | Bezorgen switch above it (same left and
   right edge): it extends left over the 24px icon column and its 14px gap. Desktop only. */
@media (min-width: 1367px) {
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-when-inline="true"] #desktopWhenMount .touch-customer-timing { margin-left: -38px !important; width: calc(100% + 38px) !important; }
}
/* extras-inline (owner decision 2026-10-12, option A): in the summary the original note field, the original discount
   code list + Toepassen button and the original tip list (moved in by desktop-checkout-when-inline.js) replace the
   Opmerking / Kortingscode / Fooi rows, so none of them opens a separate editor. Same row rhythm as the other rows
   (24px muted icon column, bold title, fields in the site's field style). Desktop only. */
@media (min-width: 1367px) {
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-remark-inline="true"] #desktopDetailsCard > .desktop-r3-row[data-desktop-section="remark"],
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-discount-inline="true"] #desktopPaymentCard > .desktop-r3-offer[data-desktop-section="discount"],
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-tip-inline="true"] #desktopPaymentCard > .desktop-r3-offer[data-desktop-section="tip"] { display: none !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] :is(#desktopRemarkMount, #desktopDiscountMount, #desktopTipMount) {
    display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 17px 0; text-align: left;
  }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopRemarkMount { order: 5; padding-bottom: 4px; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] :is(#desktopDiscountMount, #desktopTipMount) { border-top: 1px solid var(--site-line, #e4e5dd); }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopTipMount { align-items: center; padding-bottom: 2px; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] :is(#desktopRemarkMount, #desktopDiscountMount, #desktopTipMount) > .inline-icon {
    color: var(--site-muted, #62695f); font-size: 18px; line-height: 20px; text-align: left;
  }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] :is(#desktopRemarkMount, #desktopDiscountMount, #desktopTipMount) .inline-body { min-width: 0; }
  /* shared field look (same as the date / time fields) */
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] :is(#desktopRemarkMount #remark, #desktopDiscountMount #discountCode, #desktopTipMount #tipSelect) {
    box-sizing: border-box !important; min-height: 46px !important; margin: 0 !important; border: 1px solid var(--site-line, #e4e5dd) !important; border-radius: 10px !important;
    background-color: var(--site-surface, #fff) !important; color: var(--site-ink, #242a26) !important; -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important; font: inherit !important; font-size: 15px !important; line-height: 1.4 !important;
  }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] :is(#desktopRemarkMount #remark, #desktopDiscountMount #discountCode, #desktopTipMount #tipSelect):hover { border-color: var(--site-muted, #62695f) !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] :is(#desktopRemarkMount #remark, #desktopDiscountMount #discountCode, #desktopTipMount #tipSelect):focus-visible {
    outline: 2px solid var(--site-focus, #b93830) !important; outline-offset: 1px !important; border-color: var(--site-ink, #242a26) !important;
  }
  /* Opmerking */
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopRemarkMount .touch-remark-label {
    display: flex !important; align-items: baseline; gap: 8px; margin: 0 0 10px !important; padding: 0 !important; text-align: left !important; line-height: 20px !important;
  }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopRemarkMount .touch-remark-label > span { display: inline !important; color: var(--site-ink, #242a26) !important; -webkit-text-fill-color: currentColor !important; font-size: 14px !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopRemarkMount .touch-remark-label > span + span { color: var(--site-muted, #62695f) !important; font-size: 12px !important; font-weight: 400 !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopRemarkMount #remark {
    display: block !important; width: 100% !important; max-height: 112px; padding: 12px 14px !important; resize: none !important; overflow-y: auto;
  }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopRemarkMount #remark::placeholder { color: var(--site-muted, #62695f); -webkit-text-fill-color: var(--site-muted, #62695f); opacity: 1; }
  /* Kortingscode: title, then code list + Toepassen side by side */
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopDiscountMount .discount-row {
    display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important;
  }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopDiscountMount .touch-discount-label {
    grid-column: 1 / -1; display: block !important; margin: 0 !important; font-size: 14px !important; font-weight: 700 !important; line-height: 20px !important; text-align: left !important;
    color: var(--site-ink, #242a26) !important; -webkit-text-fill-color: currentColor !important; text-transform: none !important; letter-spacing: 0 !important;
  }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopDiscountMount #discountCode { display: block !important; width: 100% !important; padding: 0 14px !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopDiscountMount #validateDiscountBtn {
    display: inline-flex !important; align-items: center; justify-content: center; min-height: 46px !important; margin: 0 !important; padding: 0 18px !important; box-sizing: border-box;
    border: 1px solid var(--site-line, #e4e5dd) !important; border-radius: 10px !important; background: var(--site-surface, #fff) !important; box-shadow: none !important;
    color: var(--site-ink, #242a26) !important; -webkit-text-fill-color: currentColor !important; font: inherit !important; font-size: 14px !important; font-weight: 700 !important; cursor: pointer; white-space: nowrap;
  }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopDiscountMount #validateDiscountBtn:not(:disabled):hover { border-color: var(--site-ink, #242a26) !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopDiscountMount #validateDiscountBtn:disabled { cursor: default; background: var(--site-raised, #f1f1ec) !important; color: var(--site-muted, #62695f) !important; }
  /* Fooi: title left, the original list right */
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopTipMount .inline-body { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopTipMount .inline-title { font-size: 14px; font-weight: 700; line-height: 20px; color: var(--site-ink, #242a26); }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopTipMount .touch-tip-row { display: flex !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopTipMount .touch-tip-row > label {
    position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
  }
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopTipMount #tipSelect { display: block !important; width: 120px !important; padding: 0 12px !important; cursor: pointer; }
  /* both lists: one quiet chevron instead of the original list arrows */
  html[data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] :is(#desktopDiscountMount #discountCode, #desktopTipMount #tipSelect) {
    -webkit-appearance: none !important; appearance: none !important; padding-right: 38px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2362695f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 12px 8px !important;
  }
  html[data-theme="dark"][data-nova-public] body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] :is(#desktopDiscountMount #discountCode, #desktopTipMount #tipSelect) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23b9bcb0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; color-scheme: dark; }
}
/* checkout-header-and-summary (owner 2026-10-12):
   - the page title ("Bevestig uw bestelgegevens") takes the place of the "NOVA ASIA" brand line, which is removed;
   - Besteloverzicht: no "Nova Asia" line and no "Artikelen bekijken" toggle; the items are always shown;
   - item rows: the quantity control is centred on the item name / price line;
   - light theme: the quantity control uses the same quiet style as the menu basket (raised pill, no shadow);
     the dark theme control is unchanged. Desktop only. */
@media (min-width: 1367px) {
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopCheckoutBrand { display: none !important; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] .customer-details-header > div:not([id]) { grid-column: 1 !important; grid-row: 1 !important; align-self: center; min-width: 0; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] .customer-details-header #customerDetailsTitle { margin: 0 !important; line-height: 1.25 !important; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopCheckoutCartMount .desktop-r3-card-head > strong,
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopCheckoutCartMount #desktopShowItems { display: none !important; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"][data-desktop-items="collapsed"] #desktopCheckoutCartMount #mobileCart #cart { display: block !important; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopCheckoutCartMount #cart .cart-item-header { align-items: flex-start !important; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopCheckoutCartMount #cart .cart-qty-control {
    box-sizing: border-box; height: 36px !important; margin-top: calc((1.4em - 36px) / 2) !important; align-self: flex-start !important; flex: 0 0 auto;
  }
  html[data-nova-public]:not([data-theme="dark"]) body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopCheckoutCartMount #cart .cart-qty-control {
    background: var(--site-raised, #f0f1eb) !important; border: 0 !important; box-shadow: none !important; color: var(--site-ink, #242a26) !important;
  }
  html[data-nova-public]:not([data-theme="dark"]) body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopCheckoutCartMount #cart .cart-qty-button {
    background: transparent !important; border: 0 !important; box-shadow: none !important; text-shadow: none; color: var(--site-accent-text, #b93830) !important;
  }
  html[data-nova-public]:not([data-theme="dark"]) body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopCheckoutCartMount #cart .cart-qty-button:not(:disabled):hover { background: var(--site-accent-soft, #fcede9) !important; }
  html[data-nova-public]:not([data-theme="dark"]) body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopCheckoutCartMount #cart .cart-qty-button:disabled { color: var(--site-muted, #62695f) !important; opacity: .5; cursor: not-allowed; }
  html[data-nova-public]:not([data-theme="dark"]) body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopCheckoutCartMount #cart .cart-qty-display { color: var(--site-ink, #242a26) !important; background: transparent !important; text-shadow: none; }
  body[data-layout="desktop"] #customerDetailsModal[data-desktop-checkout="true"] #desktopCheckoutCartMount #cart .cart-qty-button:focus-visible { outline: 2px solid var(--site-focus, #b93830); outline-offset: 2px; }
}
/* nav-customer-chevron (owner option A, 2026-10-12): the chevron after "Welkom terug, <naam>" is a small muted hint
   (12px, muted grey, a little space before it) instead of a 20px ink icon. Desktop only. */
@media (min-width: 1367px) {
  html[data-nova-public] body[data-layout="desktop"] .desktop-nav-customer-chevron {
    width: 12px !important; height: 12px !important; flex: 0 0 12px !important; stroke-width: 2.4 !important;
    margin-left: 2px !important; color: var(--site-muted, #62695f) !important;
  }
}
/* menu-card-sauce-hint (owner option A, 2026-10-12): the legacy "Laatst gekozen saus / optie" line on menu cards was
   only drawn by some legacy routes (e.g. "−" in the basket), so it appeared on random cards in the old style. The
   chosen sauce of every portion is already listed in the basket line, so the hint is not shown on desktop cards.
   Phone / portrait already hide it. Nothing about the choice itself changes. Desktop only. */
@media (min-width: 1367px) {
  body[data-layout="desktop"] .menu-item .pokebowl-sauce-info { display: none !important; }
}