/* Glashandel Actief: eigen stijllaag bovenop sm.css.
   Pagina's zijn Flatsome UX Builder-secties ([section class="sm ..."]), dus de regels richten zich op .sm (en .dark van Flatsome).
   Navy (#0B1E3A / #00357A), lichtblauw voor knoppen (#8CCBF2), oker als accent (#E0A93B), wit en licht blauwgrijs. */

/* ---------- donkere secties (hero, werkwijze): Flatsome zet class "dark" ---------- */
.sm.dark h1,.sm.dark h2,.sm.dark h3{color:#fff}
.sm.dark,.sm.dark p,.sm.dark li,.sm.dark .sm-lead{color:#C9D6E6}
.sm.dark .sm-checks li{color:#fff}
.sm.dark .sm-checks li::before{background:var(--sm-sage);color:var(--sm-deep)}
.sm.dark .sm-eyebrow{color:var(--sm-sage)}
.sm.dark .sm-eyebrow::before{background:var(--sm-sage)}
.sm.dark .sm-trust,.sm.dark .sm-trust span{color:#B9C6D9}
.sm.dark .sm-trust b{color:#fff}
.sm.dark .sm-trust a{color:var(--sm-cta)}
.sm.dark .sm-stars{color:var(--sm-sage)}
.sm.dark a:not(.button):not(.sm-btn){color:var(--sm-cta)}
/* witte kaart in een donkere sectie: weer donkere tekst */
.sm.dark .sm-card,.sm.dark .sm-card p,.sm.dark .sm-card li{color:var(--sm-text)}
.sm.dark .sm-card h3,.sm.dark .sm-card .sm-checks li{color:var(--sm-ink)}
.sm.dark .sm-card .sm-checks li::before{background:var(--sm-sage-soft);color:var(--sm-sage-d)}
.sm.dark .sm-card a:not(.sm-btn){color:var(--sm-blue)}

/* hero: genoeg ruimte; de achtergrondfoto kies je in de UX Builder (section → Background), de overlay houdt tekst leesbaar */
.sm.sm-hero{background:var(--sm-deep)}
.sm.sm-hero h1{margin-bottom:.4em}
.sm-aanvraag h3{margin-bottom:.3em}
.sm-aanvraag .sm-checks li{font-size:15px;margin-bottom:8px}
/* sm.css verbergt hero-checks op mobiel; de checklist in de aanvraagkaart blijft zichtbaar */
.sm-hero .sm-aanvraag .sm-checks{display:block!important}

/* ---------- Flatsome-knoppen in de huisstijl ---------- */
.sm .button.sm-ux-btn{text-align:center;text-transform:none;letter-spacing:0;font-weight:700;font-size:17px;padding:6px 22px;min-height:50px;line-height:38px;margin:8px 10px 8px 0}
.sm .button.secondary.sm-ux-btn:not(.is-outline){background:var(--sm-cta)!important;color:var(--sm-on)!important;border-color:var(--sm-cta)!important}
.sm .button.secondary.sm-ux-btn:not(.is-outline):hover{background:var(--sm-cta-h)!important;box-shadow:none}
.sm .button.white.is-outline.sm-ux-btn{color:#fff!important;border-color:rgba(255,255,255,.45)!important}
.sm .button.white.is-outline.sm-ux-btn:hover{background:#fff!important;color:var(--sm-deep)!important}

/* ---------- accenten in oker ---------- */
.sm-steps .sm-step::before{background:var(--sm-sage)!important;color:var(--sm-deep)!important}
.sm.sm-sec--navy{background:var(--sm-deep)}
.sm-icon{background:var(--sm-deep);color:var(--sm-sage)}
.sm-ctaband{background:var(--sm-deep)}

/* ---------- FAQ als Flatsome-accordeon ---------- */
.sm .sm-faq .accordion-title{font-weight:700;color:var(--sm-ink);font-size:18px;border-color:var(--sm-line);padding-left:0}
.sm .sm-faq .accordion-title .toggle{color:var(--sm-sage-d)}
.sm .sm-faq .accordion-inner{padding:6px 0 18px}

/* ---------- foto's (Flatsome-afbeelding) ---------- */
.sm .sm-ux-img img{border-radius:12px}

/* ---------- mobiel ---------- */
@media (max-width:480px){
  /* het logo is breed: de offerteknop staat al in de vaste balk onderin, dus niet ook in de header */
  .sm-mh__cta{display:none!important}
  .sm-mh__logo img{height:40px;max-width:170px}
  .sm .button.sm-ux-btn{width:100%;margin-right:0;justify-content:center}
}
@media (max-width:700px){
  /* tabellen met 3-4 kolommen scrollen binnen hun eigen kader in plaats van smalle kolommen */
  .sm-table-wrap .sm-table{min-width:620px}
}

/* ---------- strakker en fijner (feedback 30-10): kleinere koppen, minder lucht, fijnere randen ---------- */
.sm{font-size:16px;line-height:1.65}
.sm h1{font-size:clamp(32px,3.6vw,46px);font-weight:700;letter-spacing:-.015em;line-height:1.08}
.sm h2{font-size:clamp(25px,2.4vw,34px);font-weight:700;letter-spacing:-.01em;line-height:1.15}
.sm h3{font-size:18px;line-height:1.3}
.sm .sm-lead{font-size:17px;line-height:1.6;max-width:600px}
.sm .sm-eyebrow{font-size:14px;margin-bottom:8px}
.sm .sm-checks li{font-size:15px;margin-bottom:8px;padding-left:28px}
.sm .sm-checks li::before{width:18px;height:18px;font-size:11px;top:3px}
/* kaarten en blokken: kleinere hoeken, dunne lijn, minder schaduw */
.sm .sm-card,.sm .sm-feature,.sm .sm-step,.sm .sm-table,.sm .sm-ctaband{border-radius:8px}
.sm .sm-card{padding:24px;box-shadow:0 1px 2px rgba(11,30,58,.06)}
.sm .sm-feature{padding:22px;box-shadow:none}
.sm .sm-feature:hover{box-shadow:0 6px 18px rgba(11,30,58,.08);transform:none}
.sm .sm-feature h3{margin:14px 0 6px}
.sm .sm-feature p{font-size:15px}
.sm .sm-icon{width:38px;height:38px;border-radius:8px}
.sm .sm-icon svg{width:18px;height:18px}
.sm .sm-step{padding:20px}
.sm .sm-ctaband{padding:36px 40px}
.sm .sm-table th,.sm .sm-table td{padding:11px 14px;font-size:15px}
.sm .sm-note{font-size:13.5px}
/* knoppen: compacter */
.sm .button.sm-ux-btn{font-size:16px;min-height:46px;line-height:34px;padding:5px 20px;border-radius:0!important;border-width:1.5px}
.sm .sm-btn{font-size:15px;padding:13px 20px;border-radius:0}
/* hero: minder hoog, kaart compacter */
.sm.sm-hero .sm-trust{margin-top:18px;gap:10px 22px;font-size:13px}
.sm .sm-aanvraag{padding:22px}
.sm .sm-aanvraag .sm-checks li{font-size:14.5px;margin-bottom:6px}
/* FAQ */
.sm .sm-faq .accordion-title{font-size:16px;padding-top:14px;padding-bottom:14px}
@media (max-width:549px){
  .sm h1{font-size:30px}
  .sm h2{font-size:24px}
}

/* ---------- verfijnd, richting high-end interieurmerk (feedback 30-10, referentie maretti.com) ----------
   hoekig in plaats van rond, haarlijnen in plaats van kaders en schaduwen, lichtere koppen, dunne iconen zonder vlak */
.sm h1{font-weight:600;letter-spacing:-.02em}
.sm h2{font-weight:600;letter-spacing:-.015em}
.sm h3{font-weight:600}
.sm .sm-eyebrow{font-weight:500;letter-spacing:.02em}
.sm .sm-eyebrow::before{width:28px;height:1px}
/* geen ronde hoeken en geen schaduwen */
.sm .sm-card,.sm .sm-feature,.sm .sm-step,.sm .sm-table,.sm .sm-ctaband,.sm .sm-ux-img img,.sm .sm-photo{border-radius:0!important;box-shadow:none!important}
.sm .button.sm-ux-btn,.sm .sm-btn{border-radius:0!important;font-weight:600;letter-spacing:.01em}
/* producten: geen kaarten maar een raster met haarlijnen */
.sm .sm-feature{background:transparent;border:0;border-top:1px solid var(--sm-line);padding:24px 0 8px}
.sm-sec--soft .sm-feature{border-top-color:#C9D3E0}
.sm .sm-feature:hover{box-shadow:none;transform:none}
.sm .sm-feature:hover h3{color:var(--sm-blue)}
.sm .sm-icon{background:transparent!important;width:auto;height:auto;border-radius:0;color:var(--sm-sage-d)!important;display:block}
.sm .sm-icon svg{width:22px;height:22px;stroke-width:1.5}
.sm .sm-feature a.sm-more{font-weight:600;font-size:14px;color:var(--sm-ink)}
.sm .sm-feature a.sm-more::after{content:"";display:inline-block;width:18px;height:1px;background:currentColor;vertical-align:middle;margin-left:8px;transition:width .2s}
.sm .sm-feature:hover a.sm-more::after{width:28px}
/* werkwijze: stappen met haarlijn bovenaan in plaats van vakken */
.sm .sm-step{background:transparent!important;border:0!important;border-top:1px solid rgba(255,255,255,.18)!important;padding:22px 0 0}
.sm .sm-step::before{width:28px;height:28px;font-size:13px}
/* kaart in de hero: strak, dunne rand */
.sm.dark .sm-card{border:0}
.sm .sm-card{border:1px solid var(--sm-line)}
/* tabellen: alleen horizontale lijnen, kop in lichte tint */
.sm .sm-table{border:0;border-top:1px solid var(--sm-ink)}
.sm .sm-table thead th{background:transparent;color:var(--sm-ink);font-weight:600;font-size:13px;letter-spacing:.02em;border-bottom:1px solid var(--sm-ink)}
.sm .sm-table td:first-child{font-weight:600}
/* FAQ en CTA-band */
.sm .sm-faq .accordion-title{font-weight:500}
.sm .sm-ctaband{padding:40px 44px}
.sm .sm-ctaband h2{font-weight:600}
/* NAP-kaart en notities */
.sm .sm-nap{border:0;border-top:1px solid var(--sm-ink);padding:22px 0 0;background:transparent}

/* mobiele header en vaste onderbalk in dezelfde hoekige stijl */
.sm-mh__bar a,.sm-mh__bar button{border-radius:0!important}
.sm-sticky a{border-radius:0!important}

/* ---------- alle knoppen strak: geen afgeronde hoeken (feedback 30-10) ---------- */
html body .button,html body button,html body input[type="submit"],html body input[type="button"],
html body .sm-btn,html body .sm .button.sm-ux-btn,
html body .nav li.sm-menu-cta>a,html body .header-button .button,html body .header-main .button.primary,
html body .sm-mh__bar a,html body .sm-mh__bar button,html body .sm-mh__cta,html body .sm-mh__foot .sm-btn,
html body .sm-sticky a,html body .sm-footer .sm-btn,html body .sm-ctaband .sm-btn,
html body .sm-form .sm-btn,html body .sm-contact__opt,html body .sm-quick .sm-btn{border-radius:0!important}

/* formuliervelden in dezelfde strakke stijl als de knoppen */
html body .sm-form input,html body .sm-form select,html body .sm-form textarea{border-radius:0!important}
/* stappen in een smalle zijkaart (offertepagina) onder elkaar in plaats van 3 smalle kolommen */
.sm .sm-card .sm-steps{grid-template-columns:1fr!important;gap:14px}

/* ---------- zwevende header zoals de mock-up (desktop) ----------
   De header staat vast bovenaan (position:fixed) en ligt over de pagina heen. Flatsome-sticky wordt geneutraliseerd:
   we gebruiken alleen de class "stuck" die Flatsome bij scrollen zet, om de topbalk te verbergen.
   Vaste maten, zodat de ruimte onder de header klopt: topbalk 40px + marge 14px + menubalk 84px = 138px. */
html body #top-bar,html body .header-top{background:#071529!important}
@media (min-width:850px){
  html body #header{position:fixed!important;top:0;left:0;right:0;z-index:1000;background:transparent!important;height:auto!important}
  html body.admin-bar #header{top:32px}
  html body #header .header-wrapper,html body #header .header-wrapper.stuck{position:relative!important;top:auto!important;left:auto!important;right:auto!important;
    width:auto!important;background:transparent!important;box-shadow:none!important;animation:none!important;transform:none!important}
  html body #header .header-top,html body #header .header-top .flex-row{height:40px!important;min-height:40px!important}
  html body #header .header-wrapper.stuck .header-top{display:none!important}
  html body #header .header-main{height:84px!important;max-width:min(1240px,calc(100% - 28px));margin:14px auto 0!important;
    background:#fff!important;border:1px solid var(--sm-line)!important;border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.28)!important}
  html body #header .header-main .header-inner{height:84px!important;padding-left:22px;padding-right:14px}
  html body #header .header-main #logo img,html body #header .header-main .logo img{max-height:62px!important;width:auto}
  /* ruimte onder de vaste header */
  html body:has(.sm-hero) .sm.sm-hero{padding-top:200px!important}
  html body:not(:has(.sm-hero)) #main{padding-top:154px}
}
/* mobiel: de eigen mobiele header van Site Machine als losse, afgeronde balk met schaduw (blijft bovenaan staan) */
@media (max-width:849px){
  .sm-mh{background:transparent}
  body:has(.sm-hero) .sm-mh:not(.is-scrolled){background:var(--sm-deep)}
  body:not(:has(.sm-hero)) .sm-mh:not(.is-scrolled){background:var(--sm-soft)}
  .sm-mh__bar,.sm-mh.is-scrolled .sm-mh__bar{margin:10px 10px 0;background:#fff;border-radius:12px;border:1px solid var(--sm-line)!important;box-shadow:0 14px 34px rgba(0,0,0,.28)}
  .sm-mh__usp{background:transparent;margin-top:2px}
  body:not(:has(.sm-hero)) .sm-mh__usp{color:var(--sm-ink)}
  body:not(:has(.sm-hero)) .sm-mh__usp svg{color:var(--sm-sage-d)}
}