/* Mobile-first polish — behoudt de Hair2U-vormtaal, maar voorkomt krappe en afgesneden layouts. */
html{-webkit-text-size-adjust:100%}img,video,svg{max-width:100%}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}input,select,textarea{font-size:16px}
@media(max-width:760px){
  body{overflow-x:hidden;padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}
  body[data-page="product"],body[data-page="cart"],body[data-page="checkout"],body[data-page="account"],body[data-page="admin"]{padding-bottom:0}
  .wrap{width:min(100% - 32px,1180px)}
  .announce{padding:8px 12px;font-size:.64rem;line-height:1.45}
  .site-head{height:66px}.head-inner{gap:10px}.brand{font-size:1.7rem}.brand small{font-size:.39rem}.head-actions{margin-left:auto;gap:5px}.icon-btn{height:44px;min-width:44px;padding:0 11px}.cart-count{margin-left:3px}
  .section,.legacy-section{padding:62px 0}.section-head,.legacy-section-head{display:block;margin-bottom:26px}.section-head p,.legacy-section-head p{margin-top:14px}.section-head h2,.page-hero h2,.legacy-section-head h2{font-size:clamp(2.05rem,10vw,3rem)}
  .hero,.page-hero{padding:42px 0}.hero h1,.page-hero h1,.product-copy h1{font-size:clamp(2.65rem,13vw,4rem);overflow-wrap:anywhere}.lead{font-size:1rem;line-height:1.65}.hero-actions{align-items:stretch}.hero-actions .btn{width:100%}.micro{gap:10px 18px}.hero-visual{min-height:400px;border-radius:26px}.hero-card{right:4%;top:7%;width:54%;padding:17px}.hero-card h3{font-size:1.25rem}.hero-card p{font-size:.76rem}.hero-pouch{height:68%;left:-5%}
  .product-grid,.method-grid,.legacy-method-grid,.legacy-product-grid,.all-review-grid,.pdp-proof-grid,.sharing-step-grid{grid-template-columns:1fr}.product-media{height:290px}.product-info p{min-height:0}.price-row{gap:12px}
  .community-carousel{margin-right:-16px;padding-right:16px}.community-carousel .ugc{flex-basis:min(300px,82vw);height:390px}.real-review-row{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}.real-review-row>*{min-width:min(300px,84vw);scroll-snap-align:start}
  .kb-hero,.contact-hero,.reviews-hero,.formula-hero{padding-top:42px}.knowledge-grid,.contact-grid,.faq-layout,.article-head,.article-body,.pdp-detail-grid,.sharing-hero-grid,.sharing-intro-grid,.sharing-benefit-grid,.sharing-faq-grid{grid-template-columns:1fr!important}.article-side{position:static!important}.article-hero,.article-image{min-height:240px}.contact-options{grid-template-columns:1fr}.contact-form{padding:22px 16px}
  .product-page,.pdp-story{overflow:hidden}.product-detail{gap:28px}.gallery-main{min-height:340px}.gallery-thumbs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.gallery-thumbs>*{flex:0 0 72px;scroll-snap-align:start}.buybox{padding:20px 16px}.purchase-option{gap:10px;padding:15px 12px}.purchase-option>span:last-child{margin-left:auto;text-align:right}.pdp-sticky-buy{left:8px!important;right:8px!important;bottom:calc(8px + env(safe-area-inset-bottom,0px))!important;width:auto!important}.pdp-sticky-actions{gap:8px}.pdp-sticky-actions .btn{min-height:46px;padding:11px 14px}
  .quiz-page{padding:0}.quiz-shell{min-height:100svh}.quiz-topline{gap:12px;align-items:flex-start}.quiz-topline h1{font-size:clamp(1.75rem,8vw,2.35rem)}.quiz-body{min-height:0}.quiz-visual{min-height:220px}.quiz-proof{grid-template-columns:1fr}.quiz-proof img{height:240px;width:100%;object-fit:cover}.option{min-height:64px;text-align:left}.option b{overflow-wrap:anywhere}
  main,#app,.checkout,.cart-page{min-width:0;max-width:100%}.drawer{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));overflow:hidden}.drawer-head{min-width:0;gap:12px}.drawer-head h2{min-width:0;font-size:clamp(1.8rem,10vw,2.45rem);line-height:1.05;overflow-wrap:anywhere}.drawer-head .close{flex:0 0 44px;width:44px;height:44px}.cart-items{min-width:0}.cart-item{grid-template-columns:78px minmax(0,1fr);gap:12px}.cart-item img{width:78px;height:92px}.cart-foot{padding-bottom:env(safe-area-inset-bottom,0px)}.cart-page .cart-grid,.checkout{grid-template-columns:1fr!important}.checkout-steps{overflow-x:auto;justify-content:flex-start;gap:8px}.checkout-steps>*{white-space:nowrap}.checkout-main,.checkout-side{padding:22px 16px}.checkout-side{position:static}
  .sharing-product{min-height:390px}.sharing-benefit-visual{min-height:330px}.sharing-final{padding:64px 16px}.sharing-final .btn{width:100%}
  .mobile-conversion-bar{bottom:calc(8px + env(safe-area-inset-bottom,0px));left:8px;right:8px}.mobile-conversion-bar span{min-width:0}.mobile-conversion-bar b,.mobile-conversion-bar small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mobile-conversion-bar .btn{flex:0 0 auto}
}
@media(max-width:430px){
  .wrap{width:min(100% - 24px,1180px)}
  .brand{font-size:1.55rem}.head-inner{gap:6px}.head-actions .btn{padding:11px 12px;font-size:.73rem}.icon-btn{padding:0 9px}
  .hero h1,.page-hero h1,.product-copy h1{font-size:clamp(2.35rem,12vw,3.2rem)}.hero-visual{min-height:360px}.hero-card{width:58%;padding:14px}.hero-card p{display:none}
  .visual-options{grid-template-columns:1fr}.quiz-top{padding:18px 12px}.quiz-body{padding:20px 12px}.quiz-visual{min-height:190px}.quiz-proof img{height:210px}
  .formula-review-grid article{grid-template-columns:1fr}.formula-review-grid img{height:220px}.formula-review-grid article>div{padding:18px}
  .purchase-option{align-items:flex-start;flex-wrap:wrap}.purchase-option>span:last-child{width:100%;text-align:left;margin-left:28px}.pdp-sticky-info{display:none}.pdp-sticky-actions{width:100%}.pdp-sticky-actions .btn{flex:1}
  .cart-item{grid-template-columns:68px minmax(0,1fr)}.cart-item img{width:68px;height:82px}.cart-item .qty{transform:scale(.94);transform-origin:left center}
  .mobile-conversion-bar{padding-left:11px;gap:7px}.mobile-conversion-bar small{display:none}.mobile-conversion-bar .btn{padding:11px 13px;font-size:.72rem}
}

/* Fit the available viewport, including landscape phones and display cutouts. */
@media(max-width:1100px){
  .head-inner{gap:12px}
  .nav{gap:12px;font-size:.85rem}
  .head-actions{flex-shrink:0}
}
@media(max-width:900px){
  .mobile-nav{max-height:calc(100svh - 76px);overflow-y:auto;overscroll-behavior:contain}
  .mobile-nav a{min-height:44px;display:flex;align-items:center}
  body[data-page="product"]{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:760px){
  .wrap{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
  .hero>*,.product-main>*,.checkout>*,.form-grid>*,.quiz-result>*,.quiz-question>*{min-width:0}
  .head-inner{gap:6px}.head-inner .brand{flex-shrink:0}.head-actions{gap:4px}
  .trust-inner{overflow-x:auto;justify-content:flex-start;gap:20px}.trust-inner span{flex-shrink:0}
  .product-main,.contact-grid,.cart-grid,.checkout,.quiz-result{grid-template-columns:minmax(0,1fr)}
  .hero>.hero-formula-lab{min-height:clamp(350px,110vw,470px)}
  .hero-formula-lab .pouch-stage{width:min(230px,68vw);height:min(320px,90vw)}
  .gallery-main{height:auto}.gallery-stage{height:clamp(260px,90vw,360px)}
  .purchase-option label{min-width:0;flex-wrap:wrap;gap:10px}
  .purchase-option label>span{min-width:0;flex:1 1 160px}
  .addrow{grid-template-columns:76px minmax(0,1fr)}.addrow .btn{padding:13px 10px;white-space:normal}
  .quiz-shell{min-height:0}.quiz-question{min-height:0}
  .quiz-actions{flex-wrap:wrap;gap:10px}.quiz-actions .btn{min-height:48px;white-space:normal}
  .quiz-result h2{font-size:clamp(2rem,9vw,3rem);overflow-wrap:anywhere}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  input:not([type="radio"]):not([type="checkbox"]),select,textarea{min-width:0;max-width:100%;font-size:16px}
  .drawer{width:100%;height:100vh;height:100dvh;padding-top:max(18px,env(safe-area-inset-top,0px))}
  .drawer-head,.cart-foot{flex-shrink:0}.cart-items{min-height:0;overscroll-behavior:contain}
  .cart-item>div{min-width:0}.cart-item b,.cart-item p{overflow-wrap:anywhere}
  .cart-foot{max-height:55dvh;overflow-y:auto}
  .pdp-sticky-buy,.mobile-conversion-bar{left:max(8px,env(safe-area-inset-left,0px))!important;right:max(8px,env(safe-area-inset-right,0px))!important}
  .pdp-sticky-actions{min-width:0}.pdp-sticky-actions .btn{white-space:normal}
  .portal-main,.admin-main{min-width:0}.portal-head,.panel-head{flex-wrap:wrap}
}
@media(max-width:360px){
  .head-actions .icon-btn{min-width:40px;padding:0 6px}.cart-count{min-width:18px;margin-left:2px}
  .hero h1,.page-hero h1,.product-copy h1{font-size:clamp(2rem,11vw,2.65rem)}
  .addrow{grid-template-columns:1fr}.addrow .qty{justify-self:start}
  .quiz-actions .btn{flex:1 1 100%;width:100%}
}
@media(max-width:900px) and (max-height:500px) and (orientation:landscape){
  .drawer{height:100dvh}.cart-foot{max-height:45dvh}
  .mobile-nav{max-height:calc(100dvh - 66px)}
  .quiz-visual{min-height:140px}
}