/* Sanor site-wide mobile responsive layer.
   Base markup is desktop-fixed with inline styles (no classes on most
   elements), so this file leans on attribute-substring selectors to
   retarget the known, repeated inline-style patterns without touching
   every page's markup.

   IMPORTANT: the dc-runtime (React) re-serializes every inline style
   attribute with a space after each colon ("font-size: 70px", not
   "font-size:70px") before it ever reaches the DOM, regardless of how
   the value is written in the .html source. Every attribute selector
   below MUST use the space-after-colon form or it silently matches
   nothing. See memory: this is the site's only responsive layer —
   treat any future desktop pattern addition as needing a rule here
   too, written in this spaced form. */

/* The header component's own <style> block (which defines
   .sanor-mobile-menu-btn { display: none; } as the desktop default)
   never reaches the DOM: dc-runtime only processes the top-level
   page's <helmet>, not an imported component's — so on every real
   page the hamburger/basket-icon mobile button rendered at full
   width with no default display rule at all, showing on desktop.
   mobile.css is the one file every page actually links, so the
   desktop-default hide rule has to live here, unconditionally. */
.sanor-mobile-menu-btn { display: none; }

@media (max-width: 860px) {
  /* html and body must NOT both get an explicit non-visible overflow-x
     with overflow-y left at its default: per the CSS Overflow Module's
     root-propagation rule, that mismatch makes the UA synthesize
     overflow-y:auto on BOTH elements, which (combined with support.js's
     FULL_PAGE_CSS forcing html/body to height:100%) turns <body> into
     its own independently-scrolling box completely disconnected from
     window.scrollY / the window "scroll" event. Verified live: with
     both hidden, window.scrollTo() and window.scrollY did nothing at
     768px even though the page visibly scrolled (via body's own inner
     scrollbar) — which silently breaks the header's scrolled-state
     toggle (it reads window.scrollY on a window scroll listener), so
     the header never gains its opaque background while scrolling on
     any page at this width, and content collides with it. Fix: only
     put overflow-x:hidden on body; html stays at its default (visible
     on both axes) so the CSS spec's normal body-overflow-to-viewport
     propagation applies instead, restoring native window-level scroll.
     Confirmed no horizontal-scroll regression (scrollWidth stays within
     the viewport) — body's own overflow-x:hidden is still the one
     that's actually load-bearing for that. */
  html { overflow-x: visible !important; max-width: 100vw !important; }
  body { overflow-x: hidden !important; max-width: 100vw !important; }

  /* Even with zero measured horizontal overflow (scrollWidth == viewport
     width everywhere, verified live), mobile browsers still allow a
     horizontal touch-drag to visibly shift the page a few px before
     rubber-banding back ("de site kan heen en weer bewegen") — that's
     the browser's default elastic-pan behavior, not a layout bug, and
     overflow-x:hidden alone doesn't stop it because it only clips
     rendered content, not the touch-gesture handling itself. Restrict
     panning to the vertical axis (keeping pinch-zoom for accessibility)
     so a sideways swipe can't move the page at all. */
  html { touch-action: pan-y pinch-zoom !important; overscroll-behavior-x: none !important; }
  body { overscroll-behavior-x: none !important; }

  /* Same min-width:auto shrink trap applies to flex children generally */
  [style*="display:flex"] > *, [style*="display: flex"] > * { min-width: 0 !important; }

  /* Root page wrapper forces desktop width on every real page */
  [style*="min-width: 1280px"] { min-width: 0 !important; width: 100% !important; }

  /* Any multi-column grid collapses to a single stacked column.
     min-width/min-height: 0 defeats the CSS Grid/Flexbox "never shrink
     below my content's intrinsic size" default, which otherwise forces
     the 1fr track back up to a fixed pixel width (this bit hard on the
     contact page's 1fr/420px form+sidebar grid: the collapsed track
     silently resolved to 420px instead of 100%, overflowing a 390px
     viewport, because the 420px sidebar child refused to shrink). */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; min-width: 0 !important; }
  [style*="grid-template-columns"] > * { min-width: 0 !important; }

  /* Section side padding is 72px everywhere; give it real mobile margins */
  section { padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; }

  /* Big vertical section paddings, per exact pattern found site-wide */
  [style*="padding: 72px 72px 96px"] { padding-top: 40px !important; padding-bottom: 48px !important; }
  [style*="padding: 120px 72px"] { padding-top: 48px !important; padding-bottom: 48px !important; }
  [style*="padding: 96px 72px 128px"] { padding-top: 40px !important; padding-bottom: 56px !important; }
  [style*="padding: 104px 72px"] { padding-top: 44px !important; padding-bottom: 44px !important; }
  [style*="padding: 72px 72px 88px"] { padding-top: 36px !important; padding-bottom: 40px !important; }
  [style*="padding: 96px 72px 48px"] { padding-top: 40px !important; padding-bottom: 28px !important; }
  [style*="padding: 48px 72px 96px"] { padding-top: 28px !important; padding-bottom: 44px !important; }
  [style*="padding: 48px 72px 128px"] { padding-top: 28px !important; padding-bottom: 56px !important; }
  [style*="padding: 56px 72px 96px"] { padding-top: 32px !important; padding-bottom: 44px !important; }
  [style*="padding: 72px 72px 200px"] { padding-top: 36px !important; padding-bottom: 64px !important; }
  [style*="padding: 128px 72px"] { padding-top: 52px !important; padding-bottom: 52px !important; }
  [style*="padding: 112px 72px 64px"] { padding-top: 48px !important; padding-bottom: 36px !important; }
  [style*="padding: 104px 72px 72px"] { padding-top: 44px !important; padding-bottom: 36px !important; }
  [style*="margin-top: -128px"] { margin-top: 0 !important; }

  /* Large two-value card paddings (white/dark content cards, not buttons) */
  [style*="padding: 56px 60px"] { padding: 32px 24px !important; }
  [style*="padding: 56px 64px"] { padding: 32px 24px !important; }
  [style*="padding: 56px 72px"] { padding: 32px 24px !important; }
  [style*="padding: 64px 72px"] { padding: 32px 24px !important; }
  [style*="padding: 72px 72px"] { padding: 36px 24px !important; }
  [style*="padding: 72px 80px"] { padding: 36px 24px !important; }
  [style*="padding: 88px 72px"] { padding: 40px 24px !important; }
  [style*="padding: 96px 72px"] { padding: 40px 24px !important; }
  [style*="padding: 104px 72px"] { padding: 44px 24px !important; }
  [style*="padding: 120px 72px"] { padding: 48px 24px !important; }
  [style*="padding: 128px 72px"] { padding: 48px 24px !important; }
  [style*="padding: 36px 56px"] { padding: 28px 22px !important; }

  /* Large section/grid gaps read as excessive once stacked to one column */
  [style*="gap: 96px"] { gap: 32px !important; }
  [style*="gap: 80px"] { gap: 28px !important; }
  [style*="gap: 64px"] { gap: 28px !important; }
  [style*="gap: 56px"] { gap: 24px !important; }
  [style*="gap: 40px"] { gap: 20px !important; }
  [style*="gap: 32px"] { gap: 18px !important; }

  /* Large display headings scaled down for narrow screens */
  [style*="font-size: 72px"] { font-size: 34px !important; }
  [style*="font-size: 70px"] { font-size: 34px !important; }
  [style*="font-size: 56px"] { font-size: 32px !important; }
  [style*="font-size: 54px"] { font-size: 30px !important; }
  [style*="font-size: 52px"] { font-size: 29px !important; }
  [style*="font-size: 50px"] { font-size: 28px !important; }
  [style*="font-size: 48px"] { font-size: 27px !important; }
  [style*="font-size: 46px"] { font-size: 26px !important; }
  [style*="font-size: 44px"] { font-size: 25px !important; }
  [style*="font-size: 42px"] { font-size: 24px !important; }
  [style*="font-size: 40px"] { font-size: 24px !important; }
  [style*="font-size: 38px"] { font-size: 23px !important; }
  [style*="font-size: 36px"] { font-size: 22px !important; }
  [style*="font-size: 32px"] { font-size: 21px !important; }
  [style*="font-size: 31px"] { font-size: 20px !important; }
  [style*="font-size: 30px"] { font-size: 20px !important; }
  [style*="font-size: 19px"] { font-size: 17px !important; }
  [style*="font-size: 18px"] { font-size: 16.5px !important; }

  /* CTA button rows and other tight nowrap flex rows must be able to wrap */
  [style*="gap: 16px; margin-top: 6px"] { flex-wrap: wrap !important; row-gap: 12px !important; }
  [style*="gap: 18px; flex: none"] { flex-wrap: wrap !important; row-gap: 10px !important; white-space: normal !important; }
  [style*="gap: 14px; margin-top: 8px"] { flex-wrap: wrap !important; row-gap: 12px !important; }
  /* Homepage hero CTA row (own margin-top value, missed by the pattern
     above): the two buttons together run ~418px wide, which overflows
     a real ~350px content area on narrow phones (max-width:390px). */
  [style*="gap: 16px; margin-top: 4px"] { flex-wrap: wrap !important; row-gap: 12px !important; }

  /* diensten.html hero's 4-pill jump-nav row ("01 Toilethygiëne" / "02
     Geur & beleving" / "03 Entree" / "✦ All-in Service"). No margin-top
     in its style, so none of the existing gap-based wrap rules matched
     it — at a real 390px width the 4 pills together ran to 423px, which
     forced the mobile browser to auto-widen its own viewport to fit
     them (confirmed live: window.outerWidth stayed 390 but
     window.innerWidth silently inflated to 423) — that viewport
     auto-widening is what read as the page "kan heen en weer bewegen":
     the effective page was wider than the phone screen.
     IMPORTANT: this row's inline style (gap:14px; font-size:14px;
     color:#6B7A88) is byte-identical to plain 2-item info lines used
     elsewhere (e.g. contact.html's "Reactie binnen 1 werkdag ✦ 100%
     vrijblijvend" button-row companion text) — an earlier version of
     this fix used a `[style*=...]` attribute selector on that shared
     string, which also wrapped those 2-item rows and broke their layout
     (they sit next to a button in a `justify-content:space-between`
     row with limited width, so wrapping squeezed them badly). Fixed by
     tagging ONLY the actual 4-pill row with `id="dienst-jump-chips"` in
     diensten.html and targeting that id here instead — do not go back
     to a bare `[style*="gap: 14px; font-size: 14px; color: rgb(107, 122, 136)"]`
     selector, it is not unique to this row. */
  #dienst-jump-chips { flex-wrap: wrap !important; row-gap: 10px !important; }

  /* Homepage hero: the 4-col promise bar (bottom value-prop strip)
     collapses to a single stacked column under the generic
     grid-template-columns rule above, but both it and the hero
     copy/CTAs stay position:absolute inside a fixed 940px-tall
     section — the stack's ballooned height then overlaps the hero
     copy and makes both CTA buttons unclickable (confirmed live via
     elementFromPoint at 768px: clicks on "Offerte aanvragen" resolved
     to the promise-bar's text instead of the link). Un-absolute both
     blocks so they stack in normal document flow instead; horizontal
     inset comes from the section's own 20px padding above. */
  #top[style*="position: relative; height: 940px; overflow: hidden"] {
    height: auto !important;
    min-height: 620px !important;
    padding-bottom: 32px !important;
  }
  #top [style*="left: 56px; bottom: 208px; max-width: 730px"] {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    max-width: 100% !important;
    padding-top: 128px !important;
  }
  #top [style*="left: 56px; right: 56px; bottom: 40px"] {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: 32px !important;
  }

  /* Hero title + intro paragraph side-by-side rows must stack, not squeeze into two narrow columns */
  [style*="align-items: flex-end; justify-content: space-between"] { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; }

  /* Dark CTA bands: heading + button side-by-side must stack */
  [style*="background: #0076BE; padding: 72px 80px"] { flex-direction: column !important; align-items: flex-start !important; gap: 28px !important; padding: 40px 24px !important; }
  [style*="background: #0076BE; padding:72px 80px"] { flex-direction: column !important; align-items: flex-start !important; gap: 28px !important; padding: 40px 24px !important; }
  [style*="background: rgb(0, 118, 190); padding: 72px 80px"] { flex-direction: column !important; align-items: flex-start !important; gap: 28px !important; padding: 40px 24px !important; }
  [style*="background: #0E2433; padding: 56px 64px"] { flex-direction: column !important; align-items: flex-start !important; gap: 28px !important; padding: 36px 24px !important; }
  [style*="background: rgb(14, 36, 51); padding: 56px 64px"] { flex-direction: column !important; align-items: flex-start !important; gap: 28px !important; padding: 36px 24px !important; }

  /* Hero image column: fixed pixel heights are fine, just let width follow the collapsed grid */
  [style*="position: relative; height: 540px"] { height: 420px !important; }
  [style*="position: relative; height: 480px"] { height: 380px !important; }
  [style*="position: relative; height: 440px"] { height: 340px !important; }

  /* Product photo appears far down the page on mobile (2026-08-26 report):
     the `1.05fr 0.95fr` hero grid (10 dienst-*.html pages + dienst-detail
     template + the 2 icon-only product pages, tafelaankleding/
     zonnebrand-dispensers) always puts the TEXT column first in source
     order and the image column second — fine on desktop where they sit
     side by side, but once the generic grid-template-columns collapse
     rule above stacks them into one column, the photo ends up below the
     entire breadcrumb/eyebrow/h1/intro/color-picker/checklist/CTA block,
     confirmed live at ~1000px down the page. The 6 real-photo product
     pages (afvalbak etc, `height: 480px` pattern) already have the image
     FIRST in source order, so they're unaffected and untouched here.
     `order:-1` on just the image column (its siblings default to
     order:0) moves it to the front of the single-column stack without
     needing to touch markup in 13 files. */
  [style*="position: relative; height: 540px"] { order: -1 !important; }
  [style*="position: relative; height: 440px"] { order: -1 !important; }

  /* Single-product hero photo frame (afvalbak/hygienezakjeshouder/
     poetsroldispenser/toiletborstelhouder/urinoirmatjes — the flex-
     centered `height:480px; ...; display:flex; align-items:center;
     justify-content:center; padding:40px` pattern, distinct from the
     dienst-hero two-layer absolute-positioned pattern just above that
     happens to share the same 480px number without the flex/padding
     combo). Must come AFTER the generic 480px->380px rule above (same
     specificity, later wins) to actually take effect. The generic rule
     shrinks this to 380px tall on mobile, but the source product photos
     are supplier stock shots on a wide ~4:3 canvas (1000x750,
     confirmed) with generous side-margin baked in — inside a ~260px-
     wide mobile content area, object-fit:contain scales to the WIDTH
     first, rendering the photo only ~195px tall and leaving ~135px of
     dead white space above and below (mathematically centered, not a
     true positioning bug, but reads as "the picture sits too low/
     small" — user report). Override to a height close to the photo's
     actual 4:3 content proportions so it fills the frame. NOTE: this
     `height` value sets the CONTENT box height only (content-box
     sizing, no box-sizing override here) — total rendered height is
     this value + 2*40px padding + 2px border on top, so don't confuse
     it with the total box height wanted. First attempt used 280
     (thinking in total-height terms) and only closed the gap from
     133.5px to 83.5px each side; 220 (content-height terms) brings the
     photo to within ~12px of the padding edge, matching its actual
     195px rendered height at this container width. */
  [style*="height: 480px; background: rgb(255, 255, 255); border: 1px solid rgba(14, 36, 51, 0.1); display: flex; align-items: center; justify-content: center; padding: 40px"] { height: 220px !important; }
  [style*="position: relative; height: 520px"] { height: 400px !important; }

  [style*="max-width: 1320px"] { max-width: 100% !important; }

  /* Basket drawer becomes full-width on small screens */
  [style*="width: 420px; background: #FFFFFF; z-index: 70"] { width: 100% !important; }
  [style*="width: 420px; background: rgb(255, 255, 255); z-index: 70"] { width: 100% !important; }

  /* "Sticky sidebar + scrollable list" desktop pattern (grid-template-
     columns:440px 1fr or similar, first child position:sticky; top:120px)
     — used identically across 17 files: Sectoren, FAQ and "Ons verhaal"
     on the homepage, sectoren.html, over-ons.html, diensten.html,
     all-in-pakket.html, and every dienst-*.html "Zo werkt het" block.
     On desktop the sidebar (eyebrow/heading/intro/CTA) stays pinned next
     to a separate scrolling list column. Once the grid above collapses
     to a single column, sidebar and list stack in THAT SAME column
     instead of sitting side-by-side, so the still-sticky sidebar pins
     itself over the top of the viewport and the list scrolls up
     underneath/through it — confirmed live on the homepage: "Voor elke
     sector op maat" + intro + "Bekijk alle sectoren" overlapping
     "Openbare gebouwen"/"Kantoren"/"Schoonmaakbedrijven" during scroll,
     and the same for the FAQ intro over the question list. Sticky only
     makes sense with a real second column to scroll past, so drop back
     to normal flow once collapsed. */
  [style*="position: sticky"] { position: static !important; top: auto !important; }

  /* Homepage-only "Groot genoeg / Klein genoeg" comparison grid: a
     decorative vertical divider + sparkle, absolutely centered at
     left:50% to mark the boundary between the two desktop columns.
     Once that grid collapses to one stacked column (rule above), 50%
     no longer lines up with any real boundary — the divider becomes a
     652px vertical line cutting straight through the stacked "Door heel
     Nederland" / "Storing < 24 uur opgelost" / etc. content instead.
     Only meaningful with two real side-by-side columns. */
  [style*="left: 50%; top: 8px; bottom: 8px; width: 1px"] { display: none !important; }
  [style*="translateX(-50%)"][style*="top: -6px"] { display: none !important; }

  /* Header: swap desktop nav/actions for the hamburger + mobile drawer */
  .sanor-desktop-nav, .sanor-desktop-actions { display: none !important; }
  .sanor-mobile-menu-btn { display: flex !important; }
  header[style*="padding: 0 56px"] { padding: 0 20px !important; }
  header[style*="padding: 0px 56px"] { padding: 0 20px !important; }
}

@media (max-width: 480px) {
  h1 { line-height: 1.15 !important; }
  [style*="padding: 16px 30px"] { padding: 14px 20px !important; }
  /* Only used by contact.html's "Verzenden" submit button (confirmed
     unique via a whole-tree grep) — 22px was too tight for that word at
     16px/weight:600, the text (scrollWidth 97px) overflowed the button's
     own content width (91px) by 6px since overflow:visible doesn't clip,
     it just visibly spills past the button's background/edge.
     Second bug found later (2026-08-26): this button sits in a
     `justify-content:space-between` flex row next to the "Reactie binnen
     1 werkdag / 100% vrijblijvend" meta text. Flex items default to
     flex-shrink:1 with an automatic min-width based on content — but
     that automatic minimum only applies when overflow is non-visible;
     with this button's overflow:visible (the default), the flexbox spec
     lets it shrink BELOW its own text's width when the row doesn't fit
     (326px available vs ~134px button + 24px gap + ~280px meta ≈ 438px
     needed) — confirmed live: computed content-box width collapsed to
     43.8px vs the text's actual 74.5px, so "Verzenden" bled into and
     past the right padding while the left padding stayed intact,
     reading as a lopsided/clipped button. flex-shrink:0 stops the
     button from shrinking past its natural size at all; the sibling
     meta text (plain wrapping text, already wraps to 3 lines) absorbs
     the width pressure instead — no wrap needed on the row itself. */
  [style*="padding: 16px 34px"] { padding: 14px 30px !important; white-space: nowrap !important; flex-shrink: 0 !important; }
}

/* ===== 2026-09-06 mobiele designronde (na SEO-audit): volgorde hero-foto, knoppen,
   CTA-rijen, lijstrijen, vierkoloms lijsten, sectorvolgorde, contactformulier.
   Zelfde regels als hierboven: attribuutselectors in de door de runtime
   geserialiseerde vorm (spatie na dubbele punt, kleuren als rgb()). ===== */
@media (max-width: 860px) {
  /* Home-hero: beide knoppen even breed, onder elkaar */
  [style*="gap: 16px; margin-top: 4px"] { flex-direction: column !important; align-items: stretch !important; width: 100% !important; }
  [style*="gap: 16px; margin-top: 4px"] > a { width: 100% !important; box-sizing: border-box !important; justify-content: center !important; text-align: center !important; }

  /* Dienst-/productpagina's: Offerte aanvragen + Toevoegen aan aanvraag even breed */
  [style*="gap: 16px; margin-top: 6px"] { flex-direction: column !important; align-items: stretch !important; }
  [style*="gap: 16px; margin-top: 6px"] > * { width: 100% !important; box-sizing: border-box !important; justify-content: center !important; text-align: center !important; }

  /* Blauwe CTA-blokken: witte knop op volle breedte, "of bel" eronder gecentreerd */
  [style*="gap: 18px; margin-top: 8px"], [style*="gap: 18px; flex: none"], [style*="gap: 18px; flex: 0 0 auto"] { flex-direction: column !important; align-items: stretch !important; gap: 14px !important; width: 100% !important; }
  [style*="gap: 18px; margin-top: 8px"] > a, [style*="gap: 18px; flex: none"] > a, [style*="gap: 18px; flex: 0 0 auto"] > a { width: 100% !important; box-sizing: border-box !important; text-align: center !important; }
  [style*="gap: 18px; margin-top: 8px"] > span, [style*="gap: 18px; flex: none"] > span, [style*="gap: 18px; flex: 0 0 auto"] > span { justify-content: center !important; }

  /* Vertrouwensregels met ster-scheiders: elk item op een eigen regel, scheiders weg */
  [style*="gap: 14px; font-size: 14px; color: rgb(107, 122, 136)"] { flex-wrap: wrap !important; row-gap: 6px !important; }
  [style*="gap: 14px; font-size: 14px; color: rgb(107, 122, 136)"] > span[style*="color: rgb(72, 191, 145)"] { display: none !important; }
  [style*="gap: 14px; margin-top: 10px; font-size: 14.5px"] { flex-wrap: wrap !important; justify-content: center !important; row-gap: 6px !important; column-gap: 18px !important; }
  [style*="gap: 14px; margin-top: 10px; font-size: 14.5px"] > span { white-space: nowrap !important; }
  [style*="gap: 14px; margin-top: 10px; font-size: 14.5px"] > span[style*="color: rgb(143, 224, 190)"] { display: none !important; }

  /* Lijstrijen (diensten, sectoren): nummer | naam / omschrijving | pijl, i.p.v. vier losse regels */
  [style*="grid-template-columns: 44px 320px 1fr 24px"], [style*="grid-template-columns: 52px 340px 1fr 24px"] {
    grid-template-columns: 34px 1fr 24px !important; grid-template-rows: auto auto !important;
    row-gap: 4px !important; column-gap: 12px !important; align-items: start !important; padding: 20px 4px !important;
  }
  [style*="grid-template-columns: 44px 320px 1fr 24px"] > :nth-child(1), [style*="grid-template-columns: 52px 340px 1fr 24px"] > :nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; padding-top: 6px !important; }
  [style*="grid-template-columns: 44px 320px 1fr 24px"] > :nth-child(2), [style*="grid-template-columns: 52px 340px 1fr 24px"] > :nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; font-size: 19px !important; }
  [style*="grid-template-columns: 44px 320px 1fr 24px"] > :nth-child(3), [style*="grid-template-columns: 52px 340px 1fr 24px"] > :nth-child(3) { grid-column: 2 !important; grid-row: 2 !important; }
  [style*="grid-template-columns: 44px 320px 1fr 24px"] > :nth-child(4), [style*="grid-template-columns: 52px 340px 1fr 24px"] > :nth-child(4) { grid-column: 3 !important; grid-row: 1 !important; padding-top: 4px !important; }

  /* Home-sectorenlijst: desktop vult twee kolommen kolomsgewijs (01,06,02,07...); op mobiel weer 01...10 */
  [style*="grid-template-columns: 1fr 1fr; column-gap: 64px"] { display: flex !important; flex-direction: column !important; }
  [style*="grid-template-columns: 1fr 1fr; column-gap: 64px"] > :nth-child(odd) { order: 1 !important; }
  [style*="grid-template-columns: 1fr 1fr; column-gap: 64px"] > :nth-child(even) { order: 2 !important; }

  /* Vierkoloms kenmerkenlijsten (over-ons, all-in) en de over-ons cijferbalk: geen inspringing/lijn links */
  [style*="grid-template-columns: repeat(4, 1fr)"] > *, [style*="grid-template-columns: repeat(4,1fr)"] > * { padding: 22px 0 6px 0 !important; border-left: none !important; }
  [style*="padding: 8px 32px; border-left: 1px solid rgba(255, 255, 255, 0.14)"] { padding: 8px 0 !important; border-left: none !important; }

  /* Rechts uitgelijnde intro's naast een kop: links zodra ze onder de kop staan */
  [style*="text-align: right"] { text-align: left !important; }

  /* Contact: verzendknop op volle breedte, meta-regel eronder */
  #contact-send-row { flex-direction: column !important; align-items: stretch !important; gap: 14px !important; }
  #contact-send-row > [style*="cursor: pointer"] { text-align: center !important; }

  /* Dienstpagina's: hero-volgorde breadcrumb, label, titel, intro, foto, opties/knoppen.
     De tekstkolom wordt display:contents zodat de foto tussen intro en opties kan; de bestaande
     order:-1 op de fotokolom blijft, de kop-elementen krijgen een lagere order. */
  section[style*="padding: 72px 72px 96px"] > [style*="grid-template-columns: 1.05fr 0.95fr"] { gap: 18px !important; }
  section[style*="padding: 72px 72px 96px"] > [style*="grid-template-columns: 1.05fr 0.95fr"] > [style*="flex-direction: column; align-items: flex-start; gap: 24px"] { display: contents !important; }
  section[style*="padding: 72px 72px 96px"] [style*="gap: 10px; font-size: 14px; color: rgb(107, 122, 136)"] { order: -5 !important; }
  section[style*="padding: 72px 72px 96px"] [style*="gap: 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.14em"] { order: -4 !important; }
  section[style*="padding: 72px 72px 96px"] h1 { order: -3 !important; }
  section[style*="padding: 72px 72px 96px"] p[style*="font-size: 18px; line-height: 1.65"] { order: -2 !important; margin-bottom: 6px !important; }
  section[style*="padding: 72px 72px 96px"] [style*="position: relative; height: 540px"] { margin: 6px 0 10px 0 !important; }

  /* Productpagina's met fotogalerij: de thumbnail-rij (repeat(3,1fr)) wordt door de generieke
     grid-regel tot één kolom platgeslagen; hier weer drie naast elkaar */
  [style*="grid-template-columns: 1fr 1fr; gap: 80px; align-items: start"] > [style*="flex-direction: column; gap: 14px"]:first-child > [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }

  /* Keuzechips (afmetingen): niet samendrukken, netjes omlopen */
  [style*="border-radius: 999px; padding: 9px 18px"] { white-space: nowrap !important; flex: none !important; }
  div:has(> [style*="border-radius: 999px; padding: 9px 18px"]) { flex-wrap: wrap !important; row-gap: 10px !important; }
}
