/* Desktop (breed scherm): Zoë's schermen staan als een rustige kaart in het midden; productpagina's en gewone pagina's
   worden breed, met de foto links (blijft staan bij scrollen) en de informatie rechts. Mobiel verandert er niets. */
@media (min-width: 900px) {
  html,body{background:radial-gradient(90% 70% at 50% 0%,#FFE9D6 0%,#F6EDE4 55%,#EFE6DC 100%)}
  .scherm{max-width:460px;height:calc(100dvh - 40px);margin:20px auto;border-radius:28px;box-shadow:0 30px 80px rgba(124,72,24,.16),0 0 0 1px rgba(124,72,24,.06);
    transition:max-width .45s cubic-bezier(.16,1,.3,1)}
  .scherm.op-product{max-width:1080px}
  .scherm.op-product .ppagina{padding:8px 40px calc(var(--balk,190px) + 40px)}
  /* productpagina: twee kolommen */
  .ppagina:not(.ipagina){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:44px;align-content:start}
  .ppagina:not(.ipagina)>*{grid-column:2}
  .ppagina:not(.ipagina)>.p-boven{grid-column:1;grid-row:1 / span 12;position:sticky;top:8px;align-self:start;grid-template-columns:1fr;gap:18px}
  .ppagina:not(.ipagina)>.p-boven .p-usps{flex-direction:row;justify-content:space-between;order:2}
  .ppagina:not(.ipagina)>.i-voet{grid-column:1 / -1}
  .p-kop h1{font-size:32px}
  /* gewone pagina's: leesbare kolom */
  .ipagina .i-inhoud{max-width:760px;margin:0 auto}
  .ipagina .kaarten3{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  /* bestellaag onderin: niet over de hele breedte */
  /* de witte laag loopt over de hele breedte (anders steekt de tekst links en rechts erlangs), de inhoud blijft 720px in het midden */
  .scherm.op-product .p-balk{padding-left:max(16px,calc(50% - 360px));padding-right:max(16px,calc(50% - 360px));transform:translateY(110%)}
  .scherm.op-product .p-balk.actief{transform:none}
  /* geluid en herhaal naast de bestellaag, niet over de inhoud */
  .scherm.op-product .geluid{right:calc(50% - 360px - 60px);bottom:24px;z-index:6}
  .scherm.op-product .geluid.herhaal{bottom:78px}
  /* staffel: op een breed scherm passen alle knoppen naast elkaar, geen schuifrij */
  .scherm.op-product .p-staffel{overflow:visible;margin:0;padding:10px 0 0}
  .scherm.op-product .p-staffel .p-aantal{flex:1 1 0;min-width:0;padding-left:6px;padding-right:6px}
}