:root{
  --bg:#010404; --panel:#061112; --text:#f5f8f8; --muted:#d6e0df; --teal:#00d5bf;
  --line:rgba(0,213,191,.42); --green:#8fff32; --dark:#030909;
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{
  margin:0;color:var(--text);background:#010404;font-family:Inter,Arial,sans-serif;overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-4;
  background:
  radial-gradient(circle at 76% 12%,rgba(0,213,191,.13),transparent 27%),
  radial-gradient(circle at 20% 70%,rgba(0,100,90,.18),transparent 31%),
  linear-gradient(180deg,#010404,#06100f);
}
.site{width:min(100%,1728px);margin:0 auto;padding:34px 55px 0;position:relative;isolation:isolate}
.hero-image{position:absolute;z-index:-2;top:69px;right:0;width:1120px;height:555px;overflow:hidden}
.hero-image::before{
  content:"";position:absolute;inset:0;
  background:
  linear-gradient(90deg,#010404 0%,rgba(1,4,4,.92) 10%,rgba(1,4,4,.35) 34%,rgba(1,4,4,.02) 58%),
  linear-gradient(180deg,rgba(1,4,4,.02),rgba(1,4,4,.08) 55%,#010404 100%),
  url("./achtergrond.png") center center/cover no-repeat;
  filter:brightness(.9) contrast(1.04) saturate(1.03);transform:scale(1.03)
}
header{height:62px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:5}
.brand-row{display:flex;align-items:center;gap:47px}.brand{width:263px;line-height:1}
.brand-main{font-family:Orbitron,sans-serif;font-weight:900;font-size:35px;letter-spacing:-3px;white-space:nowrap}
.brand-main span{color:#00c88e;font-weight:500;letter-spacing:-1px}.brand-main .leaf{font-size:35px;color:#00c88e;margin-left:-2px;vertical-align:16px}
.tagline{margin-top:9px;font-size:11px;letter-spacing:5px;text-transform:uppercase;color:#f4f8f8;white-space:nowrap}
.vline{width:2px;height:62px;background:linear-gradient(transparent,rgba(255,255,255,.65),transparent);opacity:.72}
nav{display:flex;align-items:center;gap:38px;text-transform:uppercase;font-size:14px;font-weight:800}
nav a{color:#fff;text-decoration:none;letter-spacing:.2px;position:relative} nav a.active{color:var(--teal)}
nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-16px;height:2px;background:var(--teal)}
.quote{border:1.4px solid var(--teal);color:var(--teal);border-radius:20px;padding:15px 25px;min-width:190px;text-align:center}
.hero{height:510px;display:flex;align-items:flex-start;padding-top:70px}.hero-content{width:575px}
h1{margin:0 0 17px;font-family:Orbitron,sans-serif;font-size:48px;line-height:1.14;font-weight:600;letter-spacing:3px;text-transform:uppercase}
h1 span{display:block;color:var(--teal);font-size:49px;letter-spacing:3px}
.lead{font-size:18px;line-height:1.55;color:#f2f7f6;margin:0;width:520px}.cta-row{display:flex;gap:20px;margin:30px 0 38px}
.btn{height:50px;display:inline-flex;align-items:center;justify-content:center;gap:13px;padding:0 29px;border-radius:22px;color:white;text-decoration:none;text-transform:uppercase;font-size:14px;font-weight:800;letter-spacing:.5px;border:1.2px solid rgba(255,255,255,.88);min-width:230px;background:rgba(0,0,0,.2)}
.btn.primary{border:none;background:linear-gradient(90deg,#08cab7,#10d5bf);box-shadow:0 13px 34px rgba(0,213,191,.22)}
.quick{display:flex;gap:38px;font-size:15px;color:#ecf3f2}.tick{display:inline-flex;align-items:center;gap:12px;white-space:nowrap}
.tick i{width:20px;height:20px;border:1.3px solid var(--teal);border-radius:50%;display:grid;place-items:center;color:var(--teal);font-style:normal;font-size:12px}
.cards,.solution-grid,.project-grid,.steps,.stats,.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.cards{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.card,.panel-box,.project-card,.contact-card,.about-card,.stat,.step,.highlight-card{
  border:1px solid var(--line);border-radius:12px;background:linear-gradient(135deg,rgba(8,22,23,.94),rgba(2,9,10,.9));overflow:hidden;
  box-shadow:0 18px 45px rgba(0,0,0,.22);
}
.card{height:178px;display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:18px;align-items:center;padding:17px 18px;position:relative}
.card::after{content:"→";position:absolute;right:20px;bottom:14px;color:var(--teal);font-size:24px}.card h3,.project-card h3,.panel-box h3{margin:0 0 10px;font-size:16px;line-height:1.15;font-weight:900;text-transform:uppercase}.card p,.panel-box p,.project-card p,.step p,.stat p{margin:0;color:#eef4f3;font-size:14px;line-height:1.55}
.model{position:relative;filter:drop-shadow(0 16px 18px rgba(0,0,0,.55))}.battery{width:74px;height:112px;border-radius:6px;background:linear-gradient(90deg,#8d9497,#f1f5f4 18%,#b6bec0)}
.pump{width:96px;height:80px;border-radius:4px;background:linear-gradient(135deg,#e6ebe9,#899396)}.thermo{width:72px;height:82px;border-radius:13px;background:linear-gradient(135deg,#f0f2f2,#91999b)}
.boiler{width:74px;height:112px;border-radius:36px;background:linear-gradient(90deg,#848b8d,#f6f7f7 48%,#747b7c)}.panel{width:78px;height:106px;border-radius:2px;background:repeating-linear-gradient(90deg,#14222d 0 24px,#657783 25px 27px),repeating-linear-gradient(0deg,transparent 0 25px,rgba(255,255,255,.28) 26px 27px)}
.partner,.content-section,.about-section,.contact-section,.split-section{margin-top:22px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(100deg,rgba(6,18,19,.96),rgba(8,54,45,.55),rgba(5,14,15,.98));padding:34px 30px;position:relative;z-index:4}
.partner{display:grid;grid-template-columns:28% 31% 20% 21%;gap:22px;align-items:center;min-height:265px}
.section-heading{max-width:980px;margin-bottom:24px}.section-heading p,.mini-title{margin:0 0 9px;color:var(--teal);text-transform:uppercase;font-weight:900;letter-spacing:1.5px}
.section-heading h2,.about-section h2,.contact-section h2,.partner h2,.split-section h2{margin:0 0 12px;font-size:32px;line-height:1.18;text-transform:uppercase}
.section-heading span,.about-section p,.contact-section p,.partner p,.split-section p{color:#eef4f3;line-height:1.6;font-size:16px}
.panel-box{padding:22px;position:relative}.panel-box::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top right,rgba(0,213,191,.13),transparent 35%);pointer-events:none}
.brand-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.brand-strip strong{min-height:100px;border:1px solid rgba(0,213,191,.34);border-radius:12px;display:grid;place-items:center;text-align:center;padding:12px;background:rgba(0,0,0,.24);font-size:18px}
.about-section,.contact-section,.split-section{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center}.about-card,.contact-card,.highlight-card{padding:25px}.about-card li{margin:12px 0;color:#eef4f3}
.stat{padding:24px}.stat b{display:block;color:var(--teal);font-size:38px;margin-bottom:7px}.step{padding:22px}.step b{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--teal);border-radius:50%;color:var(--teal);margin-bottom:14px}
.project-img,.visual{height:230px;background-size:cover;background-position:center;filter:brightness(.78)}.project-card h3{margin:18px 18px 8px}.project-card p{margin:0 18px 22px}
.p1{background-image:url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=900&q=85')}.p2{background-image:url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=900&q=85')}.p3{background-image:url('https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?auto=format&fit=crop&w=900&q=85')}
.v1{background-image:url('https://images.unsplash.com/photo-1509391366360-2e959784a276?auto=format&fit=crop&w=900&q=85')}.v2{background-image:url('https://images.unsplash.com/photo-1558449028-b53a39d100fc?auto=format&fit=crop&w=900&q=85')}.v3{background-image:url('https://images.unsplash.com/photo-1621905252507-b35492cc74b4?auto=format&fit=crop&w=900&q=85')}
.contact-card{display:grid;gap:15px}.contact-card a,.contact-card span{color:#fff;text-decoration:none;font-size:19px;font-weight:800}.contact-card a:first-child{color:var(--teal);font-size:28px}
.form-grid{display:grid;gap:12px}.form-grid input,.form-grid textarea{width:100%;border:1px solid rgba(0,213,191,.35);border-radius:10px;background:rgba(0,0,0,.28);color:#fff;padding:15px;font:inherit}.form-grid textarea{min-height:130px;resize:vertical}
footer{height:70px;margin:24px -55px 0;display:flex;align-items:center;justify-content:center;gap:45px;background:linear-gradient(90deg,#020606,#061111,#020606);border-top:1px solid rgba(0,213,191,.13);color:#edf4f3;font-size:14px}
footer div{display:flex;align-items:center;gap:14px} footer b{color:var(--teal);font-size:25px;font-weight:400}
@media(max-width:1250px){.site{padding:25px}.hero-image{width:100%;opacity:.45}.hero{height:auto;min-height:520px}nav{display:none}.vline{display:none}.cards,.solution-grid,.project-grid,.brand-strip,.steps,.stats,.detail-grid{grid-template-columns:1fr 1fr}.partner,.about-section,.contact-section,.split-section{grid-template-columns:1fr}footer{height:auto;flex-wrap:wrap;margin-left:-25px;margin-right:-25px;padding:20px}}
@media(max-width:700px){.site{padding:20px}.cards,.solution-grid,.project-grid,.brand-strip,.steps,.stats,.detail-grid{grid-template-columns:1fr}h1{font-size:34px}h1 span{font-size:35px}.lead{width:auto}.btn{min-width:100%}.cta-row,.quick{flex-wrap:wrap}}


/* AI advies chatbot */
.ai-advice-section{margin-top:26px;border:1px solid rgba(0,213,191,.42);border-radius:16px;background:radial-gradient(circle at 80% 20%,rgba(0,213,191,.13),transparent 28%),linear-gradient(135deg,rgba(6,18,19,.96),rgba(4,13,14,.94));padding:34px 30px;display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;position:relative;z-index:4}
.ai-advice-card{border:1px solid rgba(0,213,191,.34);border-radius:14px;padding:24px;background:rgba(0,0,0,.24)}
.ai-advice-card ul{margin:16px 0 0;padding-left:20px;color:#eaf4f3;line-height:1.8}
.chat-launch{min-width:310px}
.chat-widget{position:fixed;right:24px;bottom:24px;width:min(460px,calc(100vw - 32px));max-height:78vh;border:1px solid rgba(0,213,191,.55);border-radius:18px;background:linear-gradient(135deg,rgba(7,19,20,.98),rgba(2,8,9,.98));box-shadow:0 32px 90px rgba(0,0,0,.65);display:none;flex-direction:column;overflow:hidden;z-index:120}
.chat-widget.open{display:flex}.chat-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid rgba(0,213,191,.22)}.chat-head strong{text-transform:uppercase;letter-spacing:.8px}
.chat-close{width:34px;height:34px;border:1px solid rgba(0,213,191,.45);border-radius:50%;background:rgba(0,0,0,.3);color:#fff;font-size:20px;cursor:pointer}
.chat-messages{padding:18px;display:grid;gap:12px;overflow:auto;max-height:440px}.msg{padding:12px 14px;border-radius:14px;line-height:1.5;font-size:14px;white-space:pre-wrap}.msg.bot{background:rgba(0,213,191,.10);border:1px solid rgba(0,213,191,.18)}.msg.user{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);margin-left:38px}
.chat-input{border-top:1px solid rgba(0,213,191,.22);padding:14px;display:grid;grid-template-columns:1fr auto;gap:10px}.chat-input textarea{min-height:46px;max-height:120px;resize:vertical;border:1px solid rgba(0,213,191,.35);border-radius:12px;background:rgba(0,0,0,.32);color:#fff;padding:12px;font:inherit}.chat-input button{border:0;border-radius:12px;padding:0 18px;background:linear-gradient(90deg,#08cab7,#10d5bf);color:#fff;font-weight:900;cursor:pointer}
.chat-actions{padding:0 14px 14px;display:flex;gap:10px;flex-wrap:wrap}.chat-actions button{border:1px solid rgba(0,213,191,.45);color:#00d5bf;background:rgba(0,0,0,.22);border-radius:12px;padding:10px 12px;cursor:pointer;font-weight:800}.chat-note{color:#cfdcdb;font-size:12px;line-height:1.4;padding:0 18px 12px}
@media(max-width:900px){.ai-advice-section{grid-template-columns:1fr}.chat-widget{right:16px;bottom:16px}}


/* Premium full-width footer */
footer{
  width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  margin-top:46px !important;
  border-radius:0 !important;
  background:
    radial-gradient(circle at 18% 20%,rgba(0,213,191,.09),transparent 30%),
    linear-gradient(135deg,#020808 0%,#061514 48%,#020707 100%) !important;
  border-top:1px solid rgba(0,213,191,.22) !important;
  height:auto !important;
  display:block !important;
  padding:0 !important;
}
.footer-top{
  max-width:1728px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.15fr .7fr 1fr;
  gap:52px;
  align-items:stretch;
  padding:48px 55px 40px;
}
.footer-map{
  min-height:260px;
  border:1px solid rgba(0,213,191,.32);
  border-radius:18px;
  overflow:hidden;
  background:rgba(0,0,0,.32);
  box-shadow:0 28px 70px rgba(0,0,0,.28);
}
.footer-map iframe{
  width:100%;
  height:100%;
  min-height:260px;
  border:0;
  filter:grayscale(.15) contrast(1.02) brightness(.9);
}
.footer-block{
  border-left:1px solid rgba(0,213,191,.16);
  padding-left:34px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.footer-block h3{
  margin:0 0 18px;
  color:#fff;
  font-size:19px;
  text-transform:uppercase;
  letter-spacing:1.8px;
}
.footer-block a,.footer-block li,.footer-block span{
  color:#e7f0ef;
  text-decoration:none;
  line-height:1.9;
  font-size:15px;
}
.footer-block ul{list-style:none;padding:0;margin:0}
.footer-block a:hover{color:var(--teal)}
.footer-contact{display:grid;gap:14px}
.footer-contact-row{display:grid;grid-template-columns:92px 1fr;gap:14px;align-items:start}
.footer-contact strong{color:var(--teal);font-size:14px}
.footer-bottom{
  max-width:1728px;
  margin:0 auto;
  border-top:1px solid rgba(0,213,191,.15);
  padding:22px 55px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#d7e1e0;
  font-size:14px;
}
.footer-brand{
  font-family:Orbitron,sans-serif;
  color:#fff;
  letter-spacing:1px;
  font-size:17px;
}
.footer-brand span{color:var(--teal);margin-left:8px}
@media(max-width:1000px){
  .footer-top{grid-template-columns:1fr;gap:26px;padding:34px 25px}
  .footer-block{border-left:0;border-top:1px solid rgba(0,213,191,.16);padding-left:0;padding-top:24px}
  .footer-bottom{flex-direction:column;gap:12px;padding:20px 25px;text-align:center}
}


/* Product/project popups */
.product-card,.project-card{cursor:pointer;transition:.2s ease}
.product-card:hover,.project-card:hover{transform:translateY(-4px);border-color:rgba(0,213,191,.75);box-shadow:0 20px 55px rgba(0,213,191,.12)}
.project-note{margin-top:-10px;margin-bottom:22px;color:#dbe5e4;font-size:14px;line-height:1.5}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.74);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;z-index:999;padding:24px}
.modal-backdrop.open{display:flex}
.product-modal{width:min(980px,100%);border:1px solid rgba(0,213,191,.55);border-radius:18px;background:linear-gradient(135deg,rgba(8,22,23,.98),rgba(2,9,10,.98));box-shadow:0 30px 90px rgba(0,0,0,.65);overflow:hidden;position:relative}
.modal-close{position:absolute;top:18px;right:18px;width:42px;height:42px;border:1px solid rgba(0,213,191,.5);border-radius:50%;background:rgba(0,0,0,.35);color:#fff;font-size:24px;cursor:pointer;z-index:2}
.modal-layout{display:grid;grid-template-columns:.95fr 1.05fr}
.modal-image{min-height:420px;background-size:cover;background-position:center;filter:brightness(.82)}
.modal-content{padding:42px}
.modal-content .mini-title{margin-bottom:10px}
.modal-content h2{font-size:34px;line-height:1.15;text-transform:uppercase;margin:0 0 14px}
.modal-content p{color:#eef4f3;line-height:1.65;font-size:16px;margin:0 0 18px}
.modal-content ul{margin:0 0 24px;padding-left:20px;color:#eef4f3;line-height:1.8}
.modal-actions{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:800px){.modal-layout{grid-template-columns:1fr}.modal-image{min-height:250px}.modal-content{padding:28px}.modal-content h2{font-size:27px}}


/* Extra mobiele optimalisatie */
button.btn{
  border:1.2px solid rgba(255,255,255,.88);
  cursor:pointer;
}
button.btn.primary{
  border:none;
}
@media(max-width:900px){
  body{
    background:#010404;
  }
  .site{
    padding:18px 18px 0;
  }
  header{
    height:auto;
    align-items:flex-start;
    gap:16px;
  }
  .brand-row{
    width:100%;
    justify-content:center;
  }
  .brand{
    width:auto;
    text-align:center;
  }
  .brand-main{
    font-size:29px;
  }
  .brand-main .leaf{
    font-size:29px;
  }
  .tagline{
    font-size:9px;
    letter-spacing:3px;
  }
  nav{
    display:flex !important;
    width:100%;
    overflow-x:auto;
    gap:18px;
    padding:14px 0 4px;
    scrollbar-width:none;
    font-size:12px;
  }
  nav::-webkit-scrollbar{
    display:none;
  }
  nav a{
    white-space:nowrap;
    opacity:.9;
  }
  nav a.active::after{
    bottom:-7px;
  }
  nav .quote{
    min-width:auto;
    padding:9px 14px;
    border-radius:14px;
  }
  header{
    flex-direction:column;
  }
  .hero-image{
    top:115px;
    right:-130px;
    width:900px;
    height:440px;
    opacity:.42;
  }
  .hero{
    min-height:auto;
    height:auto;
    padding-top:52px;
    padding-bottom:34px;
  }
  .hero-content{
    width:100%;
  }
  h1{
    font-size:31px;
    line-height:1.16;
    letter-spacing:1.4px;
  }
  h1 span{
    font-size:32px;
    letter-spacing:1.4px;
  }
  .lead{
    width:auto;
    font-size:16px;
  }
  .cta-row{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    margin:24px 0;
  }
  .btn{
    width:100%;
    min-width:0;
    height:auto;
    min-height:50px;
    padding:14px 18px;
    text-align:center;
  }
  .quick{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
  }
  .cards{
    grid-template-columns:1fr !important;
  }
  .card{
    height:auto;
    min-height:145px;
    grid-template-columns:86px 1fr;
  }
  .partner,
  .content-section,
  .about-section,
  .contact-section,
  .split-section,
  .ai-advice-section{
    padding:24px 18px;
    border-radius:13px;
  }
  .section-heading h2,
  .about-section h2,
  .contact-section h2,
  .partner h2,
  .split-section h2{
    font-size:25px;
  }
  .solution-grid,
  .project-grid,
  .detail-grid,
  .steps,
  .stats,
  .brand-strip{
    grid-template-columns:1fr !important;
  }
  .project-img,
  .visual{
    height:190px;
  }
  .form-row,
  .form-row.three,
  .check-grid{
    grid-template-columns:1fr !important;
  }
  .chat-widget{
    inset:auto 10px 10px 10px;
    width:auto;
    max-height:84vh;
    border-radius:16px;
  }
  .chat-messages{
    max-height:50vh;
  }
  .chat-actions{
    max-height:118px;
    overflow:auto;
  }
  .chat-input{
    grid-template-columns:1fr;
  }
}


/* Mobiele menu + chatbot fixes */
.mobile-toggle{
  display:none;
}
@media(max-width:900px){
  .mobile-toggle{
    display:flex;
    width:46px;
    height:46px;
    border:1px solid rgba(0,213,191,.45);
    border-radius:12px;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.35);
    color:#fff;
    font-size:22px;
    cursor:pointer;
    margin-left:auto;
  }

  nav{
    display:none !important;
    width:100%;
    flex-direction:column;
    background:rgba(2,10,11,.98);
    border:1px solid rgba(0,213,191,.25);
    border-radius:16px;
    padding:14px;
    margin-top:10px;
  }

  nav.open{
    display:flex !important;
  }

  nav a{
    padding:12px 6px;
    border-bottom:1px solid rgba(255,255,255,.06);
  }

  nav a:last-child{
    border-bottom:none;
  }

  .chat-widget{
    position:fixed;
    left:10px !important;
    right:10px !important;
    bottom:10px !important;
    top:10px !important;
    width:auto !important;
    max-height:none !important;
    height:auto !important;
    border-radius:18px;
  }

  .chat-head{
    position:sticky;
    top:0;
    z-index:5;
    background:#071516;
  }

  .chat-messages{
    max-height:none !important;
    height:100%;
    overflow:auto;
  }

  .chat-close{
    flex-shrink:0;
  }
}


/* Productplaatjes zoals in de conceptkaartjes */
.product-render{
  width:96px;
  height:126px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 18px 18px rgba(0,0,0,.65));
}
.card .product-render{
  justify-self:center;
}
@media(max-width:900px){
  .product-render{
    width:82px;
    height:112px;
  }
}


/* FIX productkaarten: juiste verhoudingen + tekst zichtbaar */
.cards{
  align-items:stretch;
}
.card{
  height:178px !important;
  min-height:178px !important;
  display:grid !important;
  grid-template-columns:96px minmax(0,1fr) !important;
  gap:18px !important;
  align-items:center !important;
  padding:18px 20px !important;
  overflow:hidden !important;
}
.card .product-render{
  width:90px !important;
  height:118px !important;
  max-width:90px !important;
  max-height:118px !important;
  object-fit:contain !important;
  display:block !important;
  justify-self:center !important;
  align-self:center !important;
  position:relative !important;
  z-index:1 !important;
}
.card > div:last-child{
  display:block !important;
  min-width:0 !important;
  position:relative !important;
  z-index:2 !important;
}
.card h3{
  display:block !important;
  color:#fff !important;
  margin:0 0 10px !important;
  font-size:15px !important;
  line-height:1.15 !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
}
.card p{
  display:block !important;
  color:#eef4f3 !important;
  margin:0 !important;
  font-size:12.5px !important;
  line-height:1.45 !important;
  max-width:150px !important;
}
@media(max-width:900px){
  .card{
    height:auto !important;
    min-height:145px !important;
    grid-template-columns:86px minmax(0,1fr) !important;
    padding:16px !important;
  }
  .card .product-render{
    width:78px !important;
    height:102px !important;
    max-width:78px !important;
    max-height:102px !important;
  }
}


/* FIX desktop/mobiel menu knop */
.mobile-toggle{
  display:none !important;
}

@media(max-width:900px){
  header{
    display:grid !important;
    grid-template-columns:1fr auto !important;
    align-items:center !important;
    gap:12px !important;
  }

  .brand-row{
    width:auto !important;
    justify-content:flex-start !important;
  }

  .mobile-toggle{
    display:flex !important;
    grid-column:2 !important;
    grid-row:1 !important;
    width:46px !important;
    height:46px !important;
    border:1px solid rgba(0,213,191,.45) !important;
    border-radius:12px !important;
    align-items:center !important;
    justify-content:center !important;
    background:rgba(0,0,0,.35) !important;
    color:#fff !important;
    font-size:24px !important;
    cursor:pointer !important;
    padding:0 !important;
    margin:0 !important;
  }

  header nav{
    grid-column:1 / -1 !important;
    display:none !important;
    width:100% !important;
    flex-direction:column !important;
    background:rgba(2,10,11,.98) !important;
    border:1px solid rgba(0,213,191,.25) !important;
    border-radius:16px !important;
    padding:14px !important;
    margin-top:8px !important;
    overflow:visible !important;
  }

  header nav.open{
    display:flex !important;
  }

  header nav a{
    padding:12px 6px !important;
    border-bottom:1px solid rgba(255,255,255,.07) !important;
  }

  header nav a:last-child{
    border-bottom:none !important;
  }
}


/* FINAL mobiel menu design + werking */
.mobile-toggle{
  display:none !important;
}

@media(max-width:900px){
  header{
    display:grid !important;
    grid-template-columns:1fr auto !important;
    align-items:center !important;
    gap:12px !important;
    position:relative !important;
    z-index:100 !important;
  }

  .brand-row{
    width:auto !important;
    justify-content:flex-start !important;
    gap:0 !important;
  }

  .brand{
    text-align:left !important;
  }

  .mobile-toggle{
    display:flex !important;
    width:48px !important;
    height:48px !important;
    align-items:center !important;
    justify-content:center !important;
    border:1px solid rgba(0,213,191,.55) !important;
    border-radius:16px !important;
    background:
      radial-gradient(circle at 50% 20%,rgba(0,213,191,.18),transparent 55%),
      rgba(0,0,0,.42) !important;
    box-shadow:
      inset 0 0 18px rgba(0,213,191,.08),
      0 10px 28px rgba(0,0,0,.35) !important;
    color:#00d5bf !important;
    cursor:pointer !important;
    padding:0 !important;
    margin:0 !important;
    position:relative !important;
    z-index:120 !important;
  }

  .mobile-toggle span,
  .mobile-toggle span::before,
  .mobile-toggle span::after{
    content:"" !important;
    display:block !important;
    width:22px !important;
    height:2px !important;
    border-radius:99px !important;
    background:#00d5bf !important;
    transition:.25s ease !important;
    position:absolute !important;
  }

  .mobile-toggle span::before{
    transform:translateY(-7px) !important;
  }

  .mobile-toggle span::after{
    transform:translateY(7px) !important;
  }

  .mobile-toggle.open span{
    background:transparent !important;
  }

  .mobile-toggle.open span::before{
    transform:rotate(45deg) !important;
  }

  .mobile-toggle.open span::after{
    transform:rotate(-45deg) !important;
  }

  header nav{
    grid-column:1 / -1 !important;
    display:none !important;
    width:100% !important;
    flex-direction:column !important;
    gap:0 !important;
    background:
      radial-gradient(circle at top right,rgba(0,213,191,.12),transparent 45%),
      rgba(2,10,11,.98) !important;
    border:1px solid rgba(0,213,191,.28) !important;
    border-radius:18px !important;
    padding:10px 14px !important;
    margin-top:10px !important;
    overflow:visible !important;
    box-shadow:0 22px 60px rgba(0,0,0,.45) !important;
    position:relative !important;
    z-index:110 !important;
  }

  header nav.open{
    display:flex !important;
  }

  header nav a{
    display:block !important;
    padding:14px 4px !important;
    border-bottom:1px solid rgba(255,255,255,.07) !important;
    color:#fff !important;
    font-size:13px !important;
  }

  header nav a.active{
    color:#00d5bf !important;
  }

  header nav a.active::after{
    display:none !important;
  }

  header nav a:last-child{
    border-bottom:none !important;
  }

  header nav .quote{
    margin-top:8px !important;
    text-align:center !important;
    border-radius:16px !important;
    color:#00d5bf !important;
    border-color:#00d5bf !important;
  }
}