/* mobiel: "Populaire kleuren" (.kleur-afbeeldingen) horizontaal laten scrollen i.p.v. 2-koloms grid -- zoals Jotun. Losstaand bestand omdat custom.css (waar .kleur-afbeeldingen normaal in staat) niet via de theme-editor bewerkbaar is (levert 404 op assets?key=assets/custom.css) -- vermoedelijk platform-gegenereerd bestand. !important gebruikt zodat dit zeker wint van de bestaande mobiele grid-regel in custom.css, ongeacht laadvolgorde in . */ @media (max-width:680px){ .kleur-afbeeldingen{ display:flex !important; flex-wrap:nowrap !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; gap:12px !important; scrollbar-width:none; } .kleur-afbeeldingen::-webkit-scrollbar{ display:none; } .kleur-item{ flex:0 0 140px !important; width:140px !important; scroll-snap-align:start; } .kleur-afbeelding{ width:100% !important; } .kleur-afbeelding img{ width:100% !important; height:auto !important; } } /* scroll-dots (balletjes) onder de horizontaal scrollende "Populaire kleuren"-rij, zoals bij de Google-reviews */ .scroll-dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 14px 0 4px; } .scroll-dot { width: 7px; height: 7px; border-radius: 50%; background: #d9d9d9; border: none; padding: 0; cursor: pointer; } .scroll-dot.active { background: #0199ff; }