/* ── Shell (vaste chrome) — niet aanpassen ── */
  *{box-sizing:border-box}
  html,body{margin:0;height:100%}
  body{background:#0f1115;color:#e7e9ee;font-family:'DM Sans',system-ui,-apple-system,sans-serif;display:flex;flex-direction:column;min-height:100vh}
  .wmo-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 18px;background:rgba(18,20,26,.9);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06);position:sticky;top:0;z-index:30}
  .wmo-brand{display:inline-flex;align-items:center;gap:9px;color:#e7e9ee;text-decoration:none;font-weight:600;font-size:14px;letter-spacing:.01em}
  .wmo-brand:hover{color:#fff}
  .wmo-brand .arrow{display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:9px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);transition:.15s}
  .wmo-brand:hover .arrow{background:rgba(255,255,255,.08);transform:translateX(-2px)}
  .wmo-brand b{font-weight:700}.wmo-brand span{color:#9aa3b2;font-weight:500}
  /* Korte brand-tekst (Dashboard / WMO) — alleen zichtbaar op mobiel.
     Desktop houdt de volledige "Website-Maker .online" wordmark. */
  .wmo-brand .wmo-brand-short{display:none}
  @media(max-width:820px){
    .wmo-brand .arrow,.wmo-brand b,.wmo-brand>span:not(.wmo-brand-short){display:none}
    .wmo-brand .wmo-brand-short{display:inline;color:#e7e9ee;font-weight:700;font-size:15px;letter-spacing:.01em}
    /* Owner heeft betaald → outer overlay rendert een menu-popover met
       Fullscreen + Download. Shell-Full-knop hier weg, anders dubbel. */
    body.paid .wmo-full{display:none}
  }
  .wmo-actions{display:inline-flex;align-items:center;gap:10px}
  .wmo-full{appearance:none;display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:#cfd4dd;font:inherit;font-size:13px;font-weight:600;padding:7px 12px 7px 11px;border-radius:999px;cursor:pointer;transition:.15s;text-decoration:none}
  .wmo-full:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.18)}
  .wmo-full svg{flex-shrink:0}
  .wmo-seg{display:inline-flex;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:3px}
  .wmo-seg button{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;background:transparent;color:#9aa3b2;font:inherit;font-size:13px;font-weight:600;padding:7px 16px;border-radius:999px;cursor:pointer;transition:.15s}
  .wmo-seg button.on{background:#e7e9ee;color:#11141a}
  .wmo-seg button svg{display:none}
  /* Op mobiel: ruimte besparen → tekst weg, icoontjes aan (zowel segment als fullscreen-label). */
  @media(max-width:820px){
    .wmo-seg button{padding:7px 11px}
    .wmo-seg button .wmo-seg-label{display:none}
    .wmo-seg button svg{display:inline-block}
    .wmo-full{padding:7px 11px}
    .wmo-full .wmo-full-label{display:none}
  }
  .wmo-stage{flex:1;display:flex;justify-content:center;align-items:flex-start;gap:24px;padding:34px 24px 24px;position:relative}
  .wmo-frame-outer{flex:0 0 auto;transition:width .35s cubic-bezier(.4,0,.2,1);width:var(--frame-w,402px);max-width:100%}
  /* transform op .wmo-frame (NIET op de scrollende .wmo-frame-inner) creëert het
     containing block voor fixed-position descendants in de site. KRITISCH dat dit
     op een NIET-scrollend element zit: zou de transform op de scroll-container
     staan, dan ankert een site-modal (position:fixed; inset:0) aan de
     scroll-INHOUD i.p.v. de viewport → bij een modal die je opent terwijl je naar
     beneden gescrold bent springt de pagina naar boven. Met de transform op
     .wmo-frame (vaste hoogte, overflow:hidden) blijven overlays gepind aan het
     zichtbare frame, ongeacht de scrollpositie. Bonus: zo'n fixed overlay telt
     ook niet meer mee in de scrollhoogte van .wmo-frame-inner (voorheen de
     'lege witte sectie'-bug). */
  .wmo-frame{position:relative;width:100%;border-radius:var(--frame-radius,40px);overflow:hidden;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.5);border:var(--frame-border,10px solid #15171d);transform:translateZ(0)}
  /* container voor @container-queries in de site (los van de transform hierboven). */
  .wmo-frame-inner{container-type:inline-size;container-name:site;width:100%}
  /* overflow-x clipt élk element dat onbedoeld buiten de viewport schuift
     (typisch een offscreen drawer/mobiel-menu met transform:translateX(100%)).
     Voorkomt horizontaal scrollen naar lege zijkanten op ELKE site, zonder
     site-specifieke fixes. overflow-x:clip schept geen scroll-context (anders
     dan hidden) en breekt sticky-positionering niet. */
  #wmo-site{width:100%;min-height:60vh;overflow-x:clip}
  /* Op desktop in Mobiel-modus: vast iPhone-formaat met een echte telefoonhoogte;
     de site scrollt BINNEN het frame i.p.v. het frame eindeloos hoog te rekken.
     (Op echt-mobiel — @media(max-width:820px) — blijft alles zoals het is.) */
  /* Frame-containment voor ELKE viewport-breedte: site scrollt BINNEN het frame
     met een vaste hoogte t.o.v. de huidige iframe/viewport. Onmisbaar omdat een
     fixed-positioned overlay in de site (age-gate, cookie-banner, modal) anders
     inset:0 van de natuurlijke site-hoogte (5000px+) krijgt — align-items:center
     plaatst die dan ver onder de fold. Geldt ook in de smalle wizard-preview
     waar @media(min-width:821px) niet vuurt. */
  body.view-mobiel .wmo-frame,
  body.view-desktop .wmo-frame{height:calc(100vh - 65px)}
  body.view-mobiel .wmo-frame-inner,
  body.view-desktop .wmo-frame-inner{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  body.view-mobiel .wmo-frame-inner::-webkit-scrollbar,
  body.view-desktop .wmo-frame-inner::-webkit-scrollbar{display:none}
  body.view-mobiel #wmo-site,
  body.view-desktop #wmo-site{min-height:100%}
  /* In de framed views (mobiel/desktop) mag het DOCUMENT zelf niet scrollen —
     anders kan een position:fixed site-element (bv. een mobiel-drawer) het html-
     document verlengen → grote lege scroll-ruimte ONDER de device-frame. Alleen
     .wmo-frame-inner scrollt de site. Fullscreen NIET clampen (daar scrollt de
     hele site). :has() houdt de html-clamp reactief op de body-view-class. */
  html:has(body.view-mobiel:not(.view-fullscreen)), html:has(body.view-desktop:not(.view-fullscreen)){height:100vh;overflow:hidden}
  body.view-mobiel:not(.view-fullscreen), body.view-desktop:not(.view-fullscreen){height:100vh;max-height:100vh;overflow:hidden}

  @media(min-width:821px){
    /* Desktop-only aesthetics — overschrijft de baseline hoogtes hierboven. */
    body.view-mobiel .wmo-frame-outer{transition:width .35s cubic-bezier(.4,0,.2,1),height .35s cubic-bezier(.4,0,.2,1)}
    body.view-mobiel .wmo-frame{height:min(860px,calc(100vh - 140px))}

    body.view-desktop .wmo-stage{padding:18px 24px 28px}
    body.view-desktop .wmo-frame-outer{width:100% !important;max-width:1700px;transition:width .35s cubic-bezier(.4,0,.2,1)}
    body.view-desktop .wmo-frame{height:calc(100vh - 110px);border-radius:14px;border-width:8px}
    body.view-desktop .wmo-frame::after{content:"";position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);width:140px;height:7px;background:#15171d;border-radius:0 0 6px 6px;z-index:6;pointer-events:none}
  }
  /* Tweaks: op álle breedtes een slide-out paneel rechts, in/uit te klappen via de
     toggle-knop rechtsboven. Standaard dicht → maximale preview-breedte. */
  .wmo-tweaks{position:fixed;top:62px;right:0;bottom:0;width:268px;max-width:86vw;background:rgba(20,22,29,.96);border:1px solid rgba(255,255,255,.08);border-radius:16px 0 0 16px;padding:16px;overflow:auto;transform:translateX(112%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:42;box-shadow:-14px 0 44px rgba(0,0,0,.5)}
  body.tweaks-open .wmo-tweaks{transform:none}
  .wmo-tweaks h2{margin:0 0 4px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#cfd4dd}
  .wmo-tweaks .grp{margin-top:16px}
  .wmo-tweaks .grp>label{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#7c869a;margin-bottom:7px}
  .wmo-opts{display:flex;flex-wrap:wrap;gap:6px}
  .wmo-opts button{appearance:none;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#aeb6c4;font:inherit;font-size:12px;font-weight:600;padding:6px 11px;border-radius:9px;cursor:pointer;transition:.12s}
  .wmo-opts button:hover{border-color:rgba(255,255,255,.25)}
  .wmo-opts button.on{background:#3b6cff;border-color:#3b6cff;color:#fff}
  .wmo-huisstijl{padding:22px 24px 40px;color:#8b94a5;font-size:13px}
  .wmo-huisstijl h3{margin:0 0 14px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#aeb6c4}
  #wmo-huisstijl-body{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
  .wmo-hs-logo{display:flex;align-items:center;justify-content:center;height:56px;padding:9px 16px;background:#fff;border-radius:13px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
  .wmo-hs-logo img{height:38px;width:auto;max-width:180px;display:block;object-fit:contain}
  .wmo-hs-colors{display:flex;gap:16px;flex-wrap:wrap}
  .wmo-sw{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#aeb6c4;font-variant-numeric:tabular-nums;text-transform:uppercase;letter-spacing:.02em}
  .wmo-sw i{width:24px;height:24px;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
  /* Tweaks-toggle: knop rechtsboven (op álle breedtes), + sluitknop in het paneel. */
  /* Tweaks-knop staat in de bar (laatste item in .wmo-actions, rechts van de
     mobiel/desktop-toggle). In fullscreen-modus blijft 'ie zichtbaar — daar
     overschrijft een aparte regel z'n positie naar fixed (zie hieronder). */
  .wmo-tweaks-toggle{display:inline-flex;width:36px;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(20,22,29,.85);color:#e7e9ee;align-items:center;justify-content:center;cursor:pointer;transition:.15s;flex:none}
  .wmo-tweaks-toggle:hover{background:rgba(28,32,42,.95);border-color:rgba(255,255,255,.22)}
  .wmo-tweaks-toggle.on{background:#3b6cff;border-color:#3b6cff}
  .wmo-tweaks-toggle .wmo-tweaks-arrow{display:none}
  .wmo-tweaks-close{display:flex;align-items:center;justify-content:center;position:absolute;top:12px;right:12px;width:28px;height:28px;border:0;background:rgba(255,255,255,.07);border-radius:8px;color:#cfd4dd;cursor:pointer}
  @media(max-width:820px){
    /* Op échte mobiel: shell-bar volstaat; geen iPhone-bezel en geen extra
       padding boven het frame — site begint direct onder de bar zodat content
       niet ver onder de fold valt. */
    .wmo-stage{padding:0;gap:0}
    .wmo-frame{border:0;border-radius:0;box-shadow:none}
    .wmo-frame-outer{width:100% !important}
  }
  /* Fullscreen-modus (?fullscreen=1) — site in nieuw tabblad zonder chrome.
     Strikt generiek: alleen wmo-* hooks, geen site-CSS. */
  body.view-fullscreen{background:#fff !important}
  body.view-fullscreen .wmo-huisstijl{display:none !important}
  /* Bar zichtbaar maar transparant; brand + Full/seg verbergen — alleen de
     tweaks-toggle blijft over en floatert top-right. .wmo-actions zelf NIET
     verbergen (containt de toggle) — alleen z'n zus-children. */
  /* position:static + z-index:auto → de bar vormt in fullscreen GEEN stacking-
     context meer. Anders zit de (position:fixed) tweaks-toggle gevangen in de
     z-index:30-context van de sticky bar en valt élk site-header met hogere
     root-z-index eroverheen, hoe hoog de toggle z'n eigen z-index ook is. */
  body.view-fullscreen .wmo-bar{background:transparent !important;backdrop-filter:none !important;border:0 !important;padding:0 !important;pointer-events:none;position:static !important;z-index:auto !important}
  body.view-fullscreen .wmo-brand,
  body.view-fullscreen .wmo-actions > :not(.wmo-tweaks-toggle){display:none !important}
  /* In fullscreen MOET de tweaks-toggle altijd bovenop liggen — boven élk
     site-element (modals/age-gates kunnen z-index 100+ gebruiken). Max 32-bit
     int zodat niks van de gegenereerde site eroverheen valt. */
  body.view-fullscreen .wmo-tweaks-toggle{position:fixed;top:14px;right:14px;pointer-events:auto;box-shadow:0 6px 20px rgba(0,0,0,.35);z-index:2147483647}
  /* Mobiel-fullscreen-override (peek-tab tegen rechterrand, ~100px van boven).
     Staat NA de bovenstaande desktop-baseline zodat 'ie cascade-wint op mobiel
     (zelfde selector-specificity, latere regel wint). */
  @media(max-width:820px){
    body.view-fullscreen .wmo-tweaks-toggle{
      top:100px;right:0;left:auto;
      transform:translateX(calc(100% - 13px));
      width:40px;height:40px;
      padding:0;gap:3px;
      flex-direction:row-reverse;
      border-radius:10px 0 0 10px;border-right:0;
      box-shadow:-4px 0 18px rgba(0,0,0,.35);
    }
    body.view-fullscreen .wmo-tweaks-toggle .wmo-tweaks-arrow{display:inline-block;width:8px;height:8px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);opacity:.85;flex:none}
    body.tweaks-open.view-fullscreen .wmo-tweaks-toggle .wmo-tweaks-arrow{transform:rotate(-135deg)}
  }
  /* Panel net onder de toggle, maar nog steeds boven alle site-content. */
  body.view-fullscreen .wmo-tweaks{top:0;z-index:2147483646}
  body.view-fullscreen .wmo-stage{padding:0 !important;gap:0 !important;min-height:0 !important}
  /* Geen breedte/hoogte-transitie in fullscreen: anders animeert het frame bij
     page-load van de mobiel-default (402px) naar 100% → "uitrekken vanuit het
     midden". De toggle-animatie hoort alleen bij een klik in NIET-fullscreen. */
  body.view-fullscreen .wmo-frame-outer{width:100% !important;max-width:none !important;height:auto !important;transition:none !important}
  /* In fullscreen is er geen device-frame: de site is een gewone pagina die via
     het venster scrollt. Haal de transform weg zodat position:fixed weer t.o.v.
     de échte viewport ankert (geen containing block meer) — anders zou een modal
     aan de volledige paginahoogte ankeren i.p.v. het scherm. */
  body.view-fullscreen .wmo-frame{border:0 !important;border-radius:0 !important;box-shadow:none !important;height:auto !important;overflow:visible !important;transform:none !important}
  body.view-fullscreen .wmo-frame::after,
  body.view-fullscreen .wmo-frame::before{display:none !important;content:none !important}
  body.view-fullscreen .wmo-frame-inner{height:auto !important;overflow:visible !important}
  body.view-fullscreen #wmo-site{min-height:0 !important}