/* sk-mobilefix.css — mobiele fixes verlanglijstje/uitjeslijstje/ouder-login/register/ouderpaneel. 2026-10-26 */
/* 1. Beveel aan-knop: groen, small caps */
body .vl-recommend-btn,body #vl-recommend-share{background:#1f7a3a!important;background-image:none!important;color:#fff!important;-webkit-text-fill-color:#fff!important;border:0!important;font-variant:small-caps!important;text-transform:none!important;letter-spacing:.04em!important;font-weight:700!important;box-shadow:0 4px 12px rgba(31,122,58,.3)!important}
body .vl-recommend-btn:hover,body #vl-recommend-share:hover{background:#18642f!important}
/* 2. Ouderpaneel: sectiekop leesbaar op wit */
.op-section-head .op-eyebrow,.op-section-head h2#op-lijstjes-title{color:#2a1a5e!important;-webkit-text-fill-color:#2a1a5e!important;text-shadow:none!important;opacity:1!important}
.op-section-head>p{color:#4a3d78!important;-webkit-text-fill-color:#4a3d78!important;text-shadow:none!important}
/* hero-overlay iets lichter */
body:not(.index-page) .header-image::before{opacity:.17!important}
body:not(.index-page) p.sk-header-slogan{text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 8px rgba(0,0,0,.25)!important}
/* Bol-blok compact zolang er geen resultaten zijn */
.webshop-bol-grid:empty{display:none!important;min-height:0!important}
.webshop-bol .webshop-bol-hint a{display:inline-block;padding:12px 0;min-height:44px;box-sizing:border-box}
/* Ouderpaneel: avatar-placeholder en doneerknop */
.ouderpaneel-profile-avatar .profile-avatar-placeholder{width:64px!important;height:64px!important;border-radius:50%!important;background:#f3f0ff!important;border:2px dashed rgba(124,77,255,.35)!important;display:flex!important;align-items:center;justify-content:center;box-sizing:border-box}
.ouderpaneel-profile-avatar .profile-avatar-placeholder::after{content:"";width:26px;height:26px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237c4dff' opacity='.55'%3E%3Ccircle cx='12' cy='8' r='4.2'/%3E%3Cpath d='M3.5 21c.8-4.4 4.2-7 8.5-7s7.7 2.6 8.5 7z'/%3E%3C/svg%3E")}
a.ouderpaneel-donate-btn{display:inline-flex!important;align-items:center;justify-content:center;min-height:44px;padding:6px 16px!important;border-radius:999px!important;background:#fff!important;border:1px solid rgba(0,48,135,.18)!important;box-shadow:0 2px 8px rgba(15,23,42,.08)!important;box-sizing:border-box}
a.ouderpaneel-donate-btn:hover{box-shadow:0 4px 12px rgba(15,23,42,.14)!important}
img.ouderpaneel-donate-img{width:auto!important;height:22px!important;display:block}
/* login/register links */
.ouder-links a{display:block!important;padding:12px 0!important}
@media (max-width:767.98px){
 .vl-steps .vl-step,.vl-steps .vl-step span{font-size:15px!important;line-height:1.5!important}
 p.sk-header-slogan{font-size:14px!important}
 span.nav-text{font-size:12px!important}
 .site-mobile-nav-link-hint,.site-mobile-nav-tagline{font-size:12px!important}
 .footer-brand,.footer-settings-label{font-size:13.5px!important}
 .ouderpaneel-card p,.ouderpaneel-card li,.ouderpaneel-card .op-card-text{font-size:14px!important}
 #opGuestLoginBtn,.op-login-top{font-size:13px!important;min-height:44px}
 .footer-nav-list a{display:inline-flex!important;align-items:center;min-height:44px;box-sizing:border-box}
 .footer-right .sk-fb-link--bar{width:44px!important;height:44px!important}
 a.footer-settings-btn{min-width:44px!important;min-height:44px!important;display:inline-flex!important;align-items:center;justify-content:center;box-sizing:border-box}
 a.footer-logo-link{min-width:44px;min-height:44px;display:inline-flex!important;align-items:center;justify-content:center}
}
/* v2: specificiteit boven verlanglijstje-redesign (:is(#vlsk)) */
html body.vl-page:is(#vlsk,.vl-page) #vl-recommend-share.vl-recommend-btn,html body.vl-page:is(#vlsk,.vl-page) main .vl-recommend-btn#vl-recommend-share{background:#1f7a3a!important;background-image:none!important;color:#fff!important;-webkit-text-fill-color:#fff!important;border:0!important;text-shadow:none!important}
html body.vl-page:is(#vlsk,.vl-page) #vl-recommend-share.vl-recommend-btn:hover{background:#18642f!important}
.ouder-links a{min-height:44px;box-sizing:border-box}
#opGuestLoginBtn,.op-login-top{font-size:13px!important}
/* v3: Bol-kaarten mobiel: prijs niet afgesneden */
@media (max-width:767.98px){
 .webshop-bol-card-body{min-width:0!important;flex:1 1 auto!important}
 .webshop-bol-card-foot{flex-wrap:wrap!important;align-items:center!important;gap:6px 10px!important;min-width:0!important}
 .webshop-bol-card-foot .webshop-bol-card-price{order:-1;flex:0 0 auto;white-space:nowrap;max-width:100%}
 .webshop-bol-card-foot .webshop-bol-card-link{flex:1 1 100%!important;width:100%!important;min-width:0!important;box-sizing:border-box}
}
/* r2 mobile fixes 20261026 */
@media (max-width:767px){
 body.index-page .index-uitjes-cta-wrap{display:flex!important;justify-content:center!important;text-align:center!important}
 body.index-page .index-uitjes-cta-wrap>a.index-uitjes-promo__all{margin:0 auto!important;justify-content:center!important}
 body.index-page{padding-bottom:max(80px,env(safe-area-inset-bottom))!important}
 body.index-page :is(.index-home-games-eyebrow,.index-school-promo__eyebrow,.index-teken-tover-promo__eyebrow,.index-uitjes-promo-card__badge){font-size:max(12px,1em)!important}
 body.index-page main a:not(p a):not(li p a),body.index-page main button,body.index-page footer a,body.index-page footer button{min-height:44px;box-sizing:border-box}
 body.index-page main :is(a.btn,a[class*="btn"],a[class*="__all"],a[class*="cta"],button){display:inline-flex;align-items:center;justify-content:center}
 .webshop-bol :is(.webshop-bol-form,.webshop-bol-filters,form){display:grid!important;grid-template-columns:1fr 1fr;gap:8px}
 .webshop-bol select{width:100%!important;min-width:0!important;max-width:none!important;box-sizing:border-box}
 .webshop-bol form>:not(select){grid-column:1/-1}
 body.vl-page :is(.vl-chip,.vl-shop-pill){font-size:13px!important}
 body .footer-nav-heading{font-size:max(12px,1em)!important}
 :is(.ouderpaneel-version,.ouderpaneel-email-label,.rating-text){font-size:max(12px,1em)!important}
 .op-btn--sm{font-size:14px!important;min-height:44px!important}
 body:has(.ouderpaneel-card) :is(main,.ouderpaneel) :is(a:not(p a),button,.op-btn){min-height:44px;box-sizing:border-box}
 body:has(.ouderpaneel-card) :is(main,.ouderpaneel) a.op-btn,body:has(.ouderpaneel-card) :is(main,.ouderpaneel) a[class*="btn"]{display:inline-flex;align-items:center;justify-content:center}
}
@media (max-width:379px){
 #vl-hero-cta{display:flex!important;flex-direction:column!important;align-items:center!important;gap:10px!important}
 #vl-hero-cta .vl-btn{width:100%!important;max-width:280px!important;margin:0 auto!important;justify-content:center!important}
}
@media (max-width:479px){.webshop-bol select{grid-column:auto}}
@media (max-width:767px){
 html body.index-page:is(#skx,.index-page) :is(main,footer,#app) :is(a.index-uitjes-promo__all,a.index-uitjes-promo__search-btn,a.footer-logo-link,button.footer-share-btn,button.footer-music-btn,button.footer-settings-btn,button.sk-car-btn,a.index-school-promo__secondary,button.index-vl-submit,a[class*="btn"],button){min-height:44px!important;max-height:none!important;height:auto!important;box-sizing:border-box!important}
 html body:has(.ouderpaneel-card) :is(a.op-btn,button,.op-btn,a[class*="btn"]){min-height:44px!important;height:auto!important}
}
/* r3 20261026 */
html body .webshop-bol .webshop-bol-card a.webshop-bol-card-link,html body a.webshop-bol-card-link{font-size:13px!important;min-height:44px!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;line-height:1.2!important;box-sizing:border-box!important}
@media (max-width:767px){
 html body .webshop-bol-card-rating,html body .webshop-bol-card-price-was{font-size:13px!important}
 html body .webshop-bol .webshop-bol-toolbar{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
 html body .webshop-bol .webshop-bol-toolbar>:not(.webshop-bol-dropdown){grid-column:1/-1}
 html body .webshop-bol .webshop-bol-dropdown,html body .webshop-bol .webshop-bol-dropdown-toggle{width:100%!important;min-width:0!important;max-width:none!important;box-sizing:border-box!important}
 html body.index-page:is(#skx,.index-page) :is([class*="-promo__eyebrow"],.index-faq-section-eyebrow,.index-school-promo__secondary,.talenten-check-eindtest-badge,.index-uitjes-promo-card__place,.blog-artikel-card-date,.talenten-check-text,.talenten-check-text span,.index-vl-hint,label){font-size:max(12px,1em)!important}
 html body.index-page:is(#skx,.index-page) .index-vl-submit{font-size:14px!important}
 html body.index-page:is(#skx,.index-page) .index-uitjes-promo__search-input{min-height:44px!important;box-sizing:border-box!important}
 html body.index-page:is(#skx,.index-page) .index-school-digibord__list a{display:inline-block!important;padding:12px 0!important}
 html body.index-page:is(#skx,.index-page) .site-footer .footer-right{max-width:100%!important;padding-right:56px!important;box-sizing:border-box!important;flex-wrap:wrap!important}
 html body:is(#skx,body) :is(.ouderpaneel-title-subtitle,.ouderpaneel-email,.ouderpaneel-email strong,.ouderpaneel small,.ouderpaneel small strong){font-size:13px!important}
 html body:is(#skx,body) :is(a,button).op-btn--sm,html body:is(#skx,body) .op-btn.op-btn--sm{font-size:13px!important;min-height:44px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important}
}
/* r4 Bol-kaarten gecentreerd + lichter */
html body .webshop-bol .webshop-bol-grid,html body .webshop-bol-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),300px))!important;justify-content:center!important;margin-left:auto!important;margin-right:auto!important;gap:16px!important}
html body .webshop-bol-grid>.webshop-bol-card{display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;width:100%!important;max-width:300px!important;margin:0 auto!important;box-sizing:border-box!important}
html body .webshop-bol-card .webshop-bol-card-media{display:flex!important;justify-content:center!important;align-items:center!important;width:100%!important;margin:0 auto!important}
html body .webshop-bol-card .webshop-bol-card-media img{margin:0 auto!important;display:block!important}
html body .webshop-bol-card .webshop-bol-card-body{display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;width:100%!important;flex:1 1 auto!important}
html body .webshop-bol-card .webshop-bol-card-title{font-weight:500!important;text-align:center!important}
html body .webshop-bol-card .webshop-bol-card-rating{font-weight:400!important;text-align:center!important;justify-content:center!important}
html body .webshop-bol-card .webshop-bol-card-foot{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:8px!important;width:100%!important;margin-top:auto!important}
html body .webshop-bol-card .webshop-bol-card-price{font-weight:600!important;text-align:center!important;order:-1!important;display:flex!important;gap:6px!important;align-items:baseline!important;justify-content:center!important;flex-wrap:wrap!important}
html body .webshop-bol-card .webshop-bol-card-price-was{font-weight:400!important}
html body .webshop-bol-card a.webshop-bol-card-link{font-weight:600!important;width:100%!important;max-width:240px!important;margin:0 auto!important}
@media (max-width:767px){html body.index-page:is(#skx,.index-page) .index-vl-eyebrow{font-size:max(12px,1em)!important}}
html body:is(#skx,body) .webshop-bol-card .webshop-bol-card-foot{display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:center!important;position:static!important;width:100%!important}
html body:is(#skx,body) .webshop-bol-card .webshop-bol-card-foot>*{position:static!important;transform:none!important;flex:0 0 auto!important;margin-left:auto!important;margin-right:auto!important}
html body:is(#skx,body) .webshop-bol-card a.webshop-bol-card-link{width:100%!important;max-width:240px!important;min-height:44px!important;padding:10px 16px!important;background:#1f7a3a!important;color:#fff!important;border-radius:999px!important;font-variant:small-caps;font-weight:600!important;font-size:13px!important;letter-spacing:.04em}
html body:is(#skx,body) .webshop-bol-card a.webshop-bol-card-link:hover{background:#17652f!important}
/* r5 20261026 */
@media (max-width:767px){
 html body:is(#skx,body) .talenten-check-klok-card-cta{font-size:13px!important;min-height:44px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important}
 html body:is(#skx,body) .talenten-check-klok-card-badge{font-size:12px!important}
 html body:is(#skx,body) :is(.index-faq-more-btn,.index-contact-select,.index-uitjes-promo__search-input){min-height:44px!important;box-sizing:border-box!important}
 html body:is(#skx,body) .index-faq-more-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important}
 html body:has(.ouderpaneel-card) :is(main,.ouderpaneel,.ouderpaneel-card) :is(span,strong,small){font-size:max(12.5px,1em)!important}
 html body:is(#skx,body) .site-footer :is(nav a,li a,.sk-fb-link span,.sk-fb-link--footer span){font-size:max(12px,1em)!important}
}
@media (max-width:400px){
 html body:is(#skx,body) .webshop-bol .webshop-bol-dropdown-toggle{font-size:13px!important;white-space:nowrap!important;padding-inline:12px!important;overflow:hidden;text-overflow:ellipsis}
}
/* r6 20261026 */
@media (max-width:767px){
 html body:is(#skx,body) .ouderpaneel-title-subtitle span{font-size:12px!important}
 html body.index-page:is(#skx,.index-page) :is(#index-vl-kind,#index-vl-titel,#index-vl-naam,main form input[type=text]:not(.index-contact-honeypot),main form input[type=email]){min-height:44px!important;box-sizing:border-box!important}
}
/* mf13 20261026: index Net toegevoegd + witte uitjes-sectie (mobiel) */
@media (max-width:768px){
 html body #home section#indexUitjesPromo{background:#fff!important;background-image:none!important}
 html body #home section#indexUitjesPromo::after{background:#fff!important;background-image:none!important}
 html body #home section#indexUitjesPromo p.index-uitjes-promo__eyebrow{display:table!important;width:auto!important;margin:0 auto 6px!important;text-align:center!important;font-size:12px!important;line-height:1.2!important;letter-spacing:.08em!important}
}