.elementor-kit-158{--e-global-color-primary:#0A0020;--e-global-color-secondary:#0F0030;--e-global-color-text:#020617;--e-global-color-accent:#7E22CE;--e-global-color-db5f1fa:#9333EA;--e-global-color-1b6a9ae:#4F46E5;--e-global-color-992b74b:#A855F7;--e-global-color-e451e4c:#60A5FA;--e-global-color-36e181d:#FFFFFF;--e-global-color-cabcb58:#9CA3AF;--e-global-color-b764749:#6B7280;--e-global-typography-primary-font-family:"Inter";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-weight:800;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:600;color:var( --e-global-color-36e181d );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );--e-page-transition-entrance-animation:e-page-transition-fade-out;--e-page-transition-exit-animation:e-page-transition-fade-in;--e-page-transition-animation-duration:300ms;}.elementor-kit-158 e-page-transition{background-color:var( --e-global-color-primary );}.elementor-kit-158 p{margin-block-end:18px;}.elementor-kit-158 a{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-kit-158 a:hover{color:var( --e-global-color-db5f1fa );font-family:"Inter", Sans-serif;font-weight:400;line-height:1.7px;letter-spacing:0.2px;word-spacing:0px;}.elementor-kit-158 h1{color:var( --e-global-color-36e181d );font-family:"Inter", Sans-serif;font-size:60px;font-weight:800;line-height:82px;letter-spacing:0.2px;word-spacing:0px;}.elementor-kit-158 h2{color:var( --e-global-color-36e181d );font-family:"Inter", Sans-serif;font-size:51px;font-weight:700;line-height:67px;letter-spacing:0.2px;word-spacing:0px;}.elementor-kit-158 h3{color:var( --e-global-color-36e181d );font-family:"Inter", Sans-serif;font-size:26px;font-weight:700;line-height:30px;letter-spacing:0.2px;word-spacing:0px;}.elementor-kit-158 h4{color:var( --e-global-color-36e181d );font-family:"Inter", Sans-serif;font-size:20px;font-weight:600;line-height:31px;letter-spacing:0.2px;word-spacing:0px;}.elementor-kit-158 h5{color:var( --e-global-color-36e181d );font-family:"Inter", Sans-serif;font-size:18px;font-weight:600;line-height:1.5px;letter-spacing:0.15px;word-spacing:0px;}.elementor-kit-158 h6{color:var( --e-global-color-36e181d );font-family:"Inter", Sans-serif;font-size:16px;font-weight:600;line-height:1.5px;letter-spacing:0.15px;word-spacing:0px;}.elementor-kit-158 button,.elementor-kit-158 input[type="button"],.elementor-kit-158 input[type="submit"],.elementor-kit-158 .elementor-button{font-family:"Inter", Sans-serif;font-size:16px;font-weight:600;letter-spacing:0.2px;padding:0px 0px 0px 0px;}.elementor-kit-158 label{font-family:"Inter", Sans-serif;font-weight:400;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-158 p{margin-block-end:17px;}.elementor-kit-158 a:hover{line-height:1.65em;letter-spacing:0.2px;word-spacing:0em;}.elementor-kit-158 h1{font-size:44px;line-height:1.12em;letter-spacing:0.2px;word-spacing:0em;}.elementor-kit-158 h2{letter-spacing:0.2px;word-spacing:0em;}.elementor-kit-158 h3{font-size:22px;line-height:1.3em;letter-spacing:0.2px;word-spacing:0em;}.elementor-kit-158 h4{font-size:18px;line-height:1.35em;letter-spacing:0.2px;word-spacing:0em;}.elementor-kit-158 h5{font-size:16px;line-height:1.5em;letter-spacing:0.15px;word-spacing:0em;}.elementor-kit-158 h6{font-size:15px;line-height:1.5em;letter-spacing:0.15px;word-spacing:0em;}.elementor-kit-158 button,.elementor-kit-158 input[type="button"],.elementor-kit-158 input[type="submit"],.elementor-kit-158 .elementor-button{font-size:15px;letter-spacing:0.2px;padding:12px 18px 12px 18px;}.elementor-kit-158 label{font-size:16px;letter-spacing:0.15px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-158 p{margin-block-end:16px;}.elementor-kit-158 a:hover{line-height:1.65em;letter-spacing:0.2px;word-spacing:0em;}.elementor-kit-158 h1{font-size:34px;line-height:1.15em;letter-spacing:0.2px;word-spacing:0em;}.elementor-kit-158 h2{font-size:44px;letter-spacing:0.2px;word-spacing:0em;}.elementor-kit-158 h3{font-size:20px;line-height:3.4em;letter-spacing:0.2px;word-spacing:0em;}.elementor-kit-158 h4{font-size:16px;line-height:1.35em;letter-spacing:0.2px;word-spacing:0em;}.elementor-kit-158 h5{font-size:15px;}.elementor-kit-158 h6{font-size:14px;line-height:1.5em;letter-spacing:0.15px;word-spacing:0em;}.elementor-kit-158 button,.elementor-kit-158 input[type="button"],.elementor-kit-158 input[type="submit"],.elementor-kit-158 .elementor-button{font-size:15px;letter-spacing:0.2px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* =======================================================================
   0) Design tokens
   ======================================================================= */
:root{
  --bg-1:#0A0020; --bg-2:#0F0030; --bg-3:#020617;
  --pa:#7E22CE;  --pb:#9333EA;   --indigo:#4F46E5;
  --hi-a:#A855F7; --hi-b:#60A5FA;
  --tx:#fff; --tx-light:#9CA3AF; --tx-soft:#CBD5E1;
  --btn-h:56px; --btn-r:28px;
}

/* =======================================================================
   1) Basis & achtergrond
   ======================================================================= */
html, body{ min-height:100%; }
body{
  background-color:var(--bg-1);
  background-image:
    radial-gradient(700px 420px at 50% 120px, rgba(147,51,234,.12), transparent 60%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 55%, var(--bg-3) 100%);
  background-attachment:fixed, fixed;
  color:var(--tx);
}
@media (max-width:767px){ body{ background-attachment:scroll, scroll; } }
/* geen witte wrappers */
.site,#page,.elementor,.elementor-section-wrap,.elementor-location-body{ background:transparent !important; }

/* =======================================================================
   2) Typografie utilities
   ======================================================================= */
.vt-gradient-text,
.vt-gradient-text .elementor-heading-title,
.vt-gradient-text .elementor-widget-container>*{
  background:linear-gradient(90deg,var(--hi-a),var(--hi-b));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.vt-sub,.vt-sub *{ color:var(--tx-light)!important; }

/* =======================================================================
   3) Buttons (primair & outline)
   ======================================================================= */
.vt-btn-primary .elementor-button,
.vt-btn-outline  .elementor-button{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--btn-h); line-height:1; padding:0 22px;
  border-radius:var(--btn-r)!important;
  transition:transform .38s cubic-bezier(.22,.61,.36,1),
             box-shadow .38s ease, filter .38s ease,
             background-color .38s ease, color .38s ease, border-color .38s ease;
}
.vt-btn-primary .elementor-button{
  background-image:linear-gradient(135deg,var(--pa),var(--pb))!important;
  background-color:transparent!important; color:#fff!important;
  border:1px solid rgba(147,51,234,.45);
  box-shadow:0 10px 30px rgba(109,40,217,.35);
}
.vt-btn-primary .elementor-button:hover{ transform:translateY(-1px); }
.vt-btn-outline .elementor-button{
  background:transparent!important; color:#C4B5FD!important;
  border:1.5px solid rgba(147,51,234,.55)!important;
}
.vt-btn-outline .elementor-button:hover{
  color:#fff!important; border-color:rgba(168,85,247,.85)!important;
  transform:translateY(-1px);
}

/* =======================================================================
   4) Cards (glass + glow)
   ======================================================================= */
.vt-card{
  position:relative; background:rgba(36,0,70,.55);
  border:1px solid rgba(168,85,247,.45); backdrop-filter:blur(12px);
  border-radius:18px; color:var(--tx);
  transition:transform .25s ease, box-shadow .25s ease;
  box-shadow:0 8px 24px rgba(109,40,217,.25);
}
.vt-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(240px 140px at 50% 0, rgba(168,85,247,.18), transparent 65%);
}
.vt-card .elementor-heading-title, .vt-card h3{ color:#fff!important; }
.vt-card .elementor-widget-text-editor, .vt-card p{ color:var(--tx-soft)!important; }
.vt-card .elementor-icon{ filter:drop-shadow(0 6px 16px rgba(109,40,217,.45)); }
.vt-card:hover{ transform:translateY(-4px); box-shadow:0 14px 40px rgba(109,40,217,.40); }

/* =======================================================================
   5) Navigatie & helpers
   ======================================================================= */
.vt-blur-nav{ background:rgba(0,0,0,.30); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(88,28,135,.40); }
.vt-test{ outline:2px solid lime!important; }

/* =======================================================================
   6) Footer
   ======================================================================= */
.vt-footer{ background:linear-gradient(180deg,transparent,rgba(0,0,0,.35));
  border-top:1px solid rgba(88,28,135,.40); }
.vt-footer h4{ color:#fff; margin-bottom:12px; }
.vt-footer p,.vt-footer li,.vt-footer a{ color:var(--tx-light); }
.vt-footer a:hover{ color:#fff; }
/* taal chip */
.vt-lang{ display:inline-flex; gap:2px; border:1px solid rgba(147,51,234,.40); border-radius:8px; overflow:hidden; }
.vt-lang a{ padding:6px 8px; display:block; color:#9CA3AF; }
.vt-lang a:hover{ background:rgba(76,29,149,.25); color:#fff; }
.vt-lang a.active{ background:rgba(76,29,149,.35); color:#fff; }

/* =======================================================================
   7) Anker-offset (sticky header)
   ======================================================================= */
.vt-anchor{ scroll-margin-top:90px; }

/* =======================================================================
   8) KPI metrics
   ======================================================================= */
.vt-metrics{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.vt-metric{ background:rgba(45,14,70,.4); border:1px solid #3b0c8a; border-radius:12px;
  padding:14px 16px; display:flex; justify-content:space-between; align-items:center; }
.vt-metric span{ font-weight:700; color:#a855f7; }
.vt-metric .elementor-heading-title{
  font-weight:800; font-size:38px; line-height:1.1;
  background:linear-gradient(90deg,var(--hi-a),var(--hi-b));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.vt-metric p{ color:var(--tx-light); margin-top:6px; }
@media (max-width:900px){ .vt-metrics{ grid-template-columns:repeat(2,1fr); } }

/* =======================================================================
   9) Timeline
   ======================================================================= */
.vt-step{ position:relative; }
.vt-step::after{
  content:""; position:absolute; top:16px; left:-8px; width:4px; height:calc(100% - 32px);
  background:linear-gradient(180deg, rgba(168,85,247,.6), rgba(96,165,250,0));
  border-radius:2px; display:none;
}
@media (min-width:1025px){ .vt-step::after{ display:block; } }

/* Links in cards als “text button” */
.vt-card a{ color:#C4B5FD; } .vt-card a:hover{ color:#fff; text-decoration:underline; }

/* =======================================================================
   10) VT Chat
   ======================================================================= */
.vt-chat{ height:400px; min-height:400px; display:flex; flex-direction:column; }
.vt-chat .vt-chat-messages{ flex:1; overflow:auto; padding:10px 0; margin-bottom:8px; }
.vt-chat .vt-chat-msg{ margin:6px 0; color:var(--tx-soft); }
.vt-chat .vt-chat-msg strong{ color:#fff; }
.vt-chat-window .vt-chip{ display:none!important; }
.vt-chat .vt-chat-input{
  display:flex; gap:12px; align-items:center;
  border-top:1px solid rgba(168,85,247,.25); padding-top:10px;
}
.vt-chat .vt-chat-input input{
  flex:1; height:56px; padding:0 16px; border-radius:16px;
  background:rgba(36,0,70,.45)!important;
  border:1px solid rgba(168,85,247,.45)!important;
  color:#fff!important; box-shadow:none!important;
}
.vt-chat .vt-chat-input input::placeholder{ color:var(--tx-soft); }
.vt-chat .vt-chat-input button,
.vt-chat .vt-chat-input .elementor-button{
  height:56px; padding:0 22px; border-radius:28px!important;
  background-image:linear-gradient(135deg,var(--pa),var(--pb))!important;
  color:#fff!important; border:1px solid rgba(147,51,234,.45)!important;
  box-shadow:0 10px 30px rgba(109,40,217,.35)!important;
}
@media (max-width:640px){
  .vt-chat .vt-chat-input{ flex-direction:column; }
  .vt-chat .vt-chat-input button,
  .vt-chat .vt-chat-input .elementor-button{ width:100%; }
}

/* =======================================================================
   11) VOIDTECH SHOP (alleen /winkel + categorieën)
   ======================================================================= */

/* 11.1 Layout-helpers (classes in je Archive template zetten) */
body.woocommerce-page.post-type-archive-product .vt-archive-wrap,
body.woocommerce-page.tax-product_cat .vt-archive-wrap{ display:flex; gap:24px; align-items:flex-start; }
body.woocommerce-page.post-type-archive-product .vt-archive-main,
body.woocommerce-page.tax-product_cat .vt-archive-main{ flex:1 1 auto; min-width:0; }
body.woocommerce-page.post-type-archive-product .vt-archive-side,
body.woocommerce-page.tax-product_cat .vt-archive-side{ flex:0 0 300px; max-width:300px; }

/* 11.2 Sidebar – categorie boom */
body.woocommerce-page .vt-archive-side .product-categories{ margin:0; padding:0; list-style:none; color:var(--tx-soft,#CBD5E1); }
body.woocommerce-page .vt-archive-side .product-categories li{ position:relative; margin:.25rem 0; }
body.woocommerce-page .vt-archive-side .product-categories a{ color:var(--tx-soft,#CBD5E1); text-decoration:none; }
body.woocommerce-page .vt-archive-side .product-categories a:hover{ color:#fff; }
body.woocommerce-page .vt-archive-side .product-categories .current-cat>a,
body.woocommerce-page .vt-archive-side .product-categories .current-cat-parent>a{ color:#fff; }
body.woocommerce-page .vt-archive-side .product-categories ul.children{
  margin:.25rem 0 .25rem 14px; padding-left:14px; border-left:1px solid rgba(168,85,247,.25);
}
body.woocommerce-page .vt-archive-side .vt-cat-toggle{
  position:absolute; left:2px; top:.34em; width:14px; height:14px; z-index:3;
  border:1px solid rgba(168,85,247,.55); border-radius:4px; background:transparent; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
body.woocommerce-page .vt-archive-side .vt-cat-toggle:after{
  content:""; width:0; height:0; border-style:solid; border-width:4px 3px 0 3px;
  border-color:#C4B5FD transparent transparent transparent;
  transform:rotate(0deg); transition:transform .15s ease;
}
body.woocommerce-page .vt-archive-side .vt-cat-toggle[aria-expanded="false"]:after{ transform:rotate(-90deg); }
body.woocommerce-page .vt-archive-side .product-categories li.cat-parent > a{ display:inline-block; padding-left:32px; }
body.woocommerce-page .vt-archive-side .product-categories li:not(.cat-parent) > a{ display:inline-block; padding-left:18px; }

/* 11.3 Grid cards */
.woocommerce ul.products,
.woocommerce-page ul.products{
  /* consistente 5px gap rondom items */
  --vt-gap: 5px;
  margin: calc(-1 * var(--vt-gap)) !important;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  /* card basis */
  position:relative; overflow:hidden;               /* → image volgt radius */
  background:rgba(36,0,70,.55);
  border:1px solid rgba(168,85,247,.45);
  border-radius:18px;
  /* interne padding + gap */
  padding: calc(16px + var(--vt-gap))  calc(16px + var(--vt-gap))  calc(14px + var(--vt-gap));
  margin:0 !important; box-sizing:border-box !important;
  /* geen hover-animaties */
  transition:none !important;
}
.woocommerce ul/products li.product a.woocommerce-LoopProduct-link img,
.woocommerce-page ul.products li.product a.woocommerce-LoopProduct-link img{
  border-radius:18px; transform:none !important; transition:none !important;
}
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover{
  transform:none !important;
  box-shadow:0 8px 24px rgba(109,40,217,.25) !important; /* exact als “normal” */
}
/* vaste tekstkleuren & geen hover-jitter */
body.woocommerce-page ul.products li.product .woocommerce-loop-product__title{
  color:#fff !important; font-weight:800; line-height:1.2; min-height:3.2em; text-decoration:none !important;
}
body.woocommerce-page ul.products li.product .price,
body.woocommerce-page ul.products li.product .price *{ color:var(--tx-soft,#CBD5E1) !important; }
body.woocommerce-page ul.products li.product .woocommerce-loop-product__title,
body.woocommerce-page ul.products li.product .price,
body.woocommerce-page ul.products li.product .vt-reco-meta,
body.woocommerce-page ul.products li.product .woocommerce-loop-product__title *,
body.woocommerce-page ul.products li.product .price *,
body.woocommerce-page ul.products li.product .vt-reco-meta *{ transition:none!important; }

/* klikbare kaart + geen hover styling op tekst */
body.woocommerce-page ul.products li.product a.woocommerce-LoopProduct-link{
  position:absolute; inset:0; z-index:1; border-radius:18px;
}
body.woocommerce-page ul.products li.product a:hover,
body.woocommerce-page ul.products li.product a.woocommerce-LoopProduct-link:hover,
body.woocommerce-page ul.products li.product a.woocommerce-LoopProduct-link:hover *{
  color:inherit !important; text-decoration:none !important; text-shadow:none !important;
}

/* Buttons in grid verbergen (we gebruiken klikbare kaart) */
body.woocommerce-page ul.products li.product a.button{ display:none !important; }

/* Result count + sortering */
body.woocommerce-page .woocommerce-result-count{ color:var(--tx-soft,#CBD5E1); }
body.woocommerce-page .woocommerce-ordering select{
  background:rgba(36,0,70,.45); color:#fff; border-radius:10px;
  border:1px solid rgba(168,85,247,.45); padding:8px 10px;
}

/* Loader state bij AJAX */
body.woocommerce-page .vt-shop-loading{ opacity:.5; pointer-events:none; filter:grayscale(25%); }

/* Mobiel: sidebar onder grid */
@media (max-width:640px){
  body.woocommerce-page .vt-archive-wrap{ flex-direction:column; }
  body.woocommerce-page .vt-archive-side{ max-width:100%; flex:1 1 auto; }
}

.vt-quick{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:8px;
}

.vt-quick-btn{
  background:linear-gradient(90deg,#7C3AED,#9F67F6);
  color:#fff;
  border:0;
  border-radius:16px;
  padding:.6rem 1.1rem;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(124,58,237,.35);
  font-size:.9rem;
}

.vt-quick-btn:hover{
  filter:brightness(1.08);
}

/* Meer ruimte rond de tekst in quick buttons + reset */
.vt-quick-btn,
.vt-btn-reset{
  padding: 0.2rem 0.5rem !important;   /* horizontaal + verticaal meer ruimte */
  border-radius: 999px !important;     /* mooi pill-vormig */
  font-size: 0.8rem;
}

/* Iets meer lucht rondom de hele knoppenrij */
.vt-quick{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}/* End custom CSS */