/*
Theme Name: Datafabrique
Theme URI: https://datafabrique.nl
Author: Datafabrique
Author URI: https://datafabrique.nl
Description: Themagericht op de verkoop van WordPress-plugins door Datafabrique. Vereist Elementor voor het samenstellen van pagina's en WooCommerce voor de shop. Lichte, moderne uitstraling met een fris indigo-accent en subtiele, niet-storende animaties.
Version: 1.1.0
Requires at least: 6.3
Requires PHP: 7.4
Tested up to: 6.6
Text Domain: datafabrique
Tags: e-commerce, one-column, custom-menu, translation-ready
*/

/* =========================================================
   DESIGN TOKENS — "Licht & modern" systeem
   Palet: witte/lichte vlakken, diep-slate tekst, fris indigo
   accent voor call-to-action, groen statuslampje, rood voor
   fouten. Ruime witruimte, zachte hoeken en subtiele schaduwen.
   Type: Space Grotesk (display), Inter (UI/body),
   IBM Plex Mono (versienummers, SKU's, spec-data).
   ========================================================= */

:root{
  /* Achtergronden & vlakken */
  --df-bg:        #FFFFFF;
  --df-bg-alt:    #F5F7FB;
  --df-bg-soft:   #EEF2F9;

  /* Tekst */
  --df-ink:       #0F172A;
  --df-ink-soft:  #55617A;
  --df-ink-mute:  #8A94A6;

  /* Diep-slate voor incidentele donkere blokken */
  --df-navy:      #0F172A;
  --df-navy-2:    #1E293B;

  /* Lijnen */
  --df-line:      #E6EBF3;
  --df-line-2:    #DCE3EE;
  --df-line-dark: rgba(255,255,255,.10);

  /* Fris accent (indigo) */
  --df-accent:      #4F46E5;
  --df-accent-dk:   #4338CA;
  --df-accent-soft: #EEF0FE;
  --df-accent-ink:  #312E81;

  /* Status */
  --df-green:     #10B981;
  --df-green-soft:#E7F8F1;
  --df-red:       #EF4444;
  --df-red-soft:  #FDECEC;
  --df-info-soft: #EAF1FE;

  /* Fonts */
  --df-font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --df-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --df-font-mono:    'IBM Plex Mono', 'SFMono-Regular', 'Courier New', monospace;

  /* Vorm & ruimte */
  --df-radius:    14px;
  --df-radius-sm: 10px;
  --df-radius-lg: 20px;
  --df-radius-pill: 999px;
  --df-container: 1180px;
  --df-gutter: clamp(20px, 4vw, 56px);

  /* Schaduwen */
  --df-shadow-xs: 0 1px 2px rgba(15,23,42,.06);
  --df-shadow-sm: 0 1px 2px rgba(15,23,42,.05), 0 4px 12px -6px rgba(15,23,42,.10);
  --df-shadow-md: 0 10px 30px -12px rgba(15,23,42,.18);
  --df-shadow-lg: 0 26px 50px -22px rgba(15,23,42,.30);
  --df-shadow-accent: 0 8px 20px -8px rgba(79,70,229,.5);

  /* Beweging */
  --df-ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--df-bg);
  color:var(--df-ink);
  font-family:var(--df-font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{
  font-family:var(--df-font-display);
  font-weight:600;
  line-height:1.14;
  letter-spacing:-.02em;
  margin:0 0 .5em;
  color:var(--df-ink);
}
h1{ font-size:clamp(2.2rem,4.6vw,3.6rem); }
h2{ font-size:clamp(1.7rem,3.2vw,2.5rem); }
h3{ font-size:1.28rem; }
p{ margin:0 0 1em; color:var(--df-ink-soft); }
a{ color:inherit; }
img{ max-width:100%; display:block; }

.df-container{ max-width:var(--df-container); margin:0 auto; padding:0 var(--df-gutter); }
.df-section{ padding:clamp(56px,8vw,110px) 0; }
.df-section--tight{ padding:clamp(32px,5vw,64px) 0; }
.df-section--alt{ background:var(--df-bg-alt); }
.df-section--soft{ background:var(--df-bg-soft); }
.df-section--navy{ background:var(--df-navy); color:#fff; }
.df-section--navy p{ color:#AEB9C7; }
.df-section--navy h1, .df-section--navy h2, .df-section--navy h3{ color:#fff; }
/* Lichte accent-band (CTA): indigo-tint i.p.v. donker navy */
.df-section--cta{ background:var(--df-accent-soft); }
.df-section--cta h1, .df-section--cta h2, .df-section--cta h3{ color:var(--df-ink); }
.df-section--cta p{ color:var(--df-ink-soft); }

.df-eyebrow{
  font-family:var(--df-font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--df-accent);
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
}
.df-section--navy .df-eyebrow{ color:#A5B4FC; }
.df-eyebrow::before{
  content:"";
  width:8px; height:8px;
  background:var(--df-accent);
  border-radius:50%;
  box-shadow:0 0 0 4px var(--df-accent-soft);
}

/* ---------- Buttons ---------- */
.df-btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--df-font-body);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:0;
  text-decoration:none;
  padding:13px 24px;
  border-radius:var(--df-radius-sm);
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .2s var(--df-ease), background .2s var(--df-ease), border-color .2s var(--df-ease), box-shadow .2s var(--df-ease);
}
.df-btn--primary{ background:var(--df-accent); color:#fff; box-shadow:var(--df-shadow-accent); }
.df-btn--primary:hover{ background:var(--df-accent-dk); transform:translateY(-2px); box-shadow:0 12px 26px -10px rgba(79,70,229,.6); }
.df-btn--ghost{ background:#fff; border-color:var(--df-line-2); color:var(--df-ink); }
.df-btn--ghost:hover{ border-color:var(--df-accent); color:var(--df-accent); transform:translateY(-2px); box-shadow:var(--df-shadow-sm); }
.df-section--navy .df-btn--ghost{ background:transparent; border-color:var(--df-line-dark); color:#fff; }
.df-section--navy .df-btn--ghost:hover{ border-color:#A5B4FC; color:#fff; }

/* ---------- Header ---------- */
.df-header{
  position:sticky; top:0; z-index:50;
  background:#fff;
  border-bottom:1px solid var(--df-line);
  transition:box-shadow .3s var(--df-ease);
}
.df-header.is-scrolled{ box-shadow:var(--df-shadow-sm); }
.df-header__row{ display:flex; align-items:center; justify-content:space-between; padding:16px var(--df-gutter); max-width:var(--df-container); margin:0 auto; }
.df-logo{ font-family:var(--df-font-display); font-weight:700; font-size:1.2rem; color:var(--df-ink); text-decoration:none; letter-spacing:-.02em; }
.df-logo span{ color:var(--df-accent); }
.df-nav{ display:flex; align-items:center; gap:28px; }
.df-nav ul{ list-style:none; display:flex; gap:26px; margin:0; padding:0; }
.df-nav a{ position:relative; color:var(--df-ink-soft); text-decoration:none; font-size:.94rem; font-weight:500; padding:4px 0; transition:color .2s var(--df-ease); }
.df-nav a::after{ content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--df-accent); border-radius:2px; transition:width .25s var(--df-ease); }
.df-nav a:hover{ color:var(--df-ink); }
.df-nav a:hover::after{ width:100%; }
.df-header__cart{
  color:var(--df-ink); text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  font-size:.9rem; font-weight:600;
  padding:8px 14px; border-radius:var(--df-radius-pill);
  border:1px solid var(--df-line-2); background:#fff;
  transition:border-color .2s var(--df-ease), box-shadow .2s var(--df-ease), transform .2s var(--df-ease);
}
.df-header__cart:hover{ border-color:var(--df-accent); box-shadow:var(--df-shadow-sm); transform:translateY(-1px); }
.df-header__cart svg{ width:18px; height:18px; }
.df-cart-label{ line-height:1; }
@media (max-width:560px){ .df-cart-label{ display:none; } }
.df-cart-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 6px;
  background:var(--df-accent); color:#fff;
  font-family:var(--df-font-mono); font-size:.72rem; font-weight:500;
  border-radius:var(--df-radius-pill); line-height:1;
}
.df-cart-count.is-bumped{ animation:df-bump .4s var(--df-ease); }
@keyframes df-bump{ 0%{transform:scale(1);} 40%{transform:scale(1.35);} 100%{transform:scale(1);} }
.df-menu-toggle{ display:none; background:#fff; border:1px solid var(--df-line-2); color:var(--df-ink); padding:9px 12px; border-radius:var(--df-radius-sm); font-weight:600; }

@media (max-width:860px){
  .df-nav ul{ display:none; }
  .df-menu-toggle{ display:inline-flex; }
  .df-nav.is-open ul{
    display:flex; flex-direction:column; position:absolute; top:66px; left:0; right:0;
    background:#fff; padding:20px var(--df-gutter); gap:16px; border-bottom:1px solid var(--df-line); box-shadow:var(--df-shadow-md);
  }
}

/* ---------- Hero ---------- */
.df-hero{ position:relative; overflow:hidden; background:linear-gradient(180deg,#FFFFFF 0%, var(--df-bg-alt) 100%); }
.df-hero__bg{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(79,70,229,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,70,229,.06) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse at 70% 10%, black 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse at 70% 10%, black 30%, transparent 78%);
  pointer-events:none;
}
.df-hero__inner{ position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
@media (max-width:900px){ .df-hero__inner{ grid-template-columns:1fr; } }
.df-hero p.lead{ font-size:1.15rem; color:var(--df-ink-soft); max-width:46ch; }
.df-hero__actions{ display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; }

/* schematic diagram: lichte modules */
.df-schematic{ position:relative; padding:20px; }
.df-schematic__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; position:relative; }
.df-module{
  background:#fff;
  border:1px solid var(--df-line);
  border-radius:var(--df-radius);
  padding:18px;
  font-family:var(--df-font-mono);
  font-size:.75rem;
  color:var(--df-ink-soft);
  box-shadow:var(--df-shadow-sm);
  transition:transform .3s var(--df-ease), box-shadow .3s var(--df-ease);
}
.df-module:hover{ transform:translateY(-4px); box-shadow:var(--df-shadow-md); }
.df-module strong{ display:block; color:var(--df-ink); font-family:var(--df-font-display); font-size:.95rem; margin-bottom:6px; }
.df-module .df-status{ display:inline-flex; align-items:center; gap:6px; margin-top:10px; color:var(--df-green); }
.df-module .df-status::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--df-green); box-shadow:0 0 0 4px var(--df-green-soft); }
.df-module:nth-child(2){ margin-top:28px; }
.df-module:nth-child(3){ margin-top:-28px; }

/* ---------- Spec-plate productkaart (signature element) — licht ---------- */
.df-plate{
  position:relative;
  background:#fff;
  border:1px solid var(--df-line);
  border-radius:16px;
  overflow:hidden;
  transition:border-color .25s var(--df-ease), transform .25s var(--df-ease), box-shadow .25s var(--df-ease);
  box-shadow:var(--df-shadow-sm);
}
.df-plate:hover{
  border-color:var(--df-line-2);
  transform:translateY(-6px);
  box-shadow:var(--df-shadow-md);
}
.df-plate a{ text-decoration:none; color:inherit; display:block; }

.df-plate__media{
  position:relative;
  height:200px;
  overflow:hidden;
  background:linear-gradient(135deg, var(--df-accent-soft) 0%, #F5F7FB 70%);
}
.df-plate__media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .5s var(--df-ease);
}
.df-plate:hover .df-plate__media img{ transform:scale(1.05); }
.df-plate__media-noimg{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--df-font-display); font-size:2.6rem; font-weight:700; color:var(--df-accent); opacity:.35; letter-spacing:-.02em;
}
.df-plate__badge{
  position:absolute; top:14px; left:14px; z-index:2;
  background:var(--df-accent); color:#fff;
  font-family:var(--df-font-mono); font-size:.66rem; letter-spacing:.04em; text-transform:uppercase;
  padding:5px 11px; border-radius:var(--df-radius-pill);
  box-shadow:var(--df-shadow-accent);
}

.df-plate__body{ padding:20px 22px 22px; }
.df-plate__name{ font-family:var(--df-font-display); font-size:1.18rem; margin:0 0 3px; color:var(--df-ink); }
.df-plate__sku{ font-family:var(--df-font-mono); font-size:.7rem; color:var(--df-ink-mute); letter-spacing:.05em; }
.df-plate__desc{ font-size:.92rem; margin:12px 0 16px; min-height:44px; color:var(--df-ink-soft); }
.df-plate__meta{ display:flex; flex-wrap:wrap; gap:8px; font-family:var(--df-font-mono); font-size:.7rem; color:var(--df-ink-soft); margin-bottom:16px; }
.df-plate__meta span{ display:inline-flex; align-items:center; gap:5px; background:var(--df-bg-alt); border:1px solid var(--df-line); padding:4px 9px; border-radius:var(--df-radius-pill); }
.df-plate__meta .dot{ width:6px; height:6px; border-radius:50%; background:var(--df-green); }
.df-plate__price{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding-top:16px; border-top:1px solid var(--df-line); }
.df-plate__price strong{ font-family:var(--df-font-display); font-size:1.4rem; color:var(--df-ink); }
.df-plate__price small{ font-family:var(--df-font-mono); font-size:.7rem; color:var(--df-ink-mute); }
.df-plate__cta{
  margin-top:14px; display:inline-flex; align-items:center; gap:8px;
  font-weight:600; font-size:.9rem; color:var(--df-accent);
}
.df-plate__cta .arrow{ transition:transform .2s var(--df-ease); }
.df-plate:hover .df-plate__cta .arrow{ transform:translateX(4px); }

/* ---------- Grid ---------- */
.df-grid{ display:grid; gap:24px; grid-template-columns:repeat(auto-fill, minmax(270px,1fr)); }

/* ---------- Billing toggle (maandelijks / jaarlijks) ---------- */
.df-billing-toggle{
  display:inline-flex; align-items:center; gap:0;
  border:1px solid var(--df-line-2); border-radius:var(--df-radius-pill); padding:4px;
  font-family:var(--df-font-body); font-size:.85rem; font-weight:600; background:#fff;
}
.df-section--navy .df-billing-toggle{ border-color:var(--df-line-dark); background:rgba(255,255,255,.05); }
.df-billing-toggle button{
  border:0; background:transparent; padding:8px 18px; border-radius:var(--df-radius-pill); cursor:pointer;
  color:var(--df-ink-soft); font-family:inherit; font-size:inherit; font-weight:inherit;
  transition:background .2s var(--df-ease), color .2s var(--df-ease);
}
.df-billing-toggle button.is-active{ background:var(--df-accent); color:#fff; box-shadow:var(--df-shadow-accent); }
.df-billing-toggle .df-save-badge{ font-size:.68rem; color:var(--df-green); margin-left:6px; }

/* ---------- Features ---------- */
.df-feature{ display:flex; gap:16px; }
.df-feature__index{ font-family:var(--df-font-mono); color:var(--df-accent); font-size:.8rem; padding-top:4px; }
.df-feature h3{ margin-bottom:6px; }

/* ---------- Testimonial ---------- */
.df-testimonial{ border-left:3px solid var(--df-accent); padding-left:20px; }
.df-testimonial p{ font-size:1.05rem; color:var(--df-ink); font-style:italic; }
.df-testimonial cite{ font-style:normal; font-family:var(--df-font-mono); font-size:.78rem; color:var(--df-ink-soft); }

/* ---------- Footer ---------- */
.df-footer{ background:var(--df-bg-alt); color:var(--df-ink-soft); padding:64px 0 28px; border-top:1px solid var(--df-line); }
.df-footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px; }
@media (max-width:760px){ .df-footer__grid{ grid-template-columns:1fr 1fr; } }
/* Tweekoloms-variant: tagline links, gegevens rechts */
.df-footer__grid--split{ grid-template-columns:1.6fr 1fr; align-items:start; }
.df-footer__grid--split .df-footer__col-right{ justify-self:end; text-align:left; }
@media (max-width:760px){ .df-footer__grid--split{ grid-template-columns:1fr; } .df-footer__grid--split .df-footer__col-right{ justify-self:start; } }
.df-footer__tagline{ margin-top:14px; max-width:36ch; font-size:1.02rem; color:var(--df-ink); }
.df-footer__address{ list-style:none; margin:0; padding:0; }
.df-footer__address li{ margin-bottom:6px; }
.df-footer .df-logo{ color:var(--df-ink); }
.df-footer h4{ color:var(--df-ink); font-size:.78rem; text-transform:uppercase; letter-spacing:.09em; font-family:var(--df-font-mono); margin-bottom:14px; }
.df-footer ul{ list-style:none; margin:0; padding:0; }
.df-footer li{ margin-bottom:8px; }
.df-footer a{ color:var(--df-ink-soft); text-decoration:none; font-size:.9rem; transition:color .2s var(--df-ease); }
.df-footer a:hover{ color:var(--df-accent); }
.df-footer__bottom{ border-top:1px solid var(--df-line); padding-top:22px; display:flex; justify-content:space-between; font-family:var(--df-font-mono); font-size:.75rem; color:var(--df-ink-mute); flex-wrap:wrap; gap:10px; }

/* =========================================================
   ANIMATIES — subtiel, niet storend
   ========================================================= */
.df-reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--df-ease), transform .7s var(--df-ease); will-change:opacity, transform; }
.df-reveal.is-visible{ opacity:1; transform:none; }
.df-reveal[data-reveal-delay="1"]{ transition-delay:.08s; }
.df-reveal[data-reveal-delay="2"]{ transition-delay:.16s; }
.df-reveal[data-reveal-delay="3"]{ transition-delay:.24s; }
.df-reveal[data-reveal-delay="4"]{ transition-delay:.32s; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .df-reveal{ opacity:1 !important; transform:none !important; }
}

/* =========================================================
   TOAST — "toegevoegd aan winkelmand"
   ========================================================= */
.df-toast-region{
  position:fixed; top:84px; right:20px; z-index:1000;
  display:flex; flex-direction:column; gap:12px;
  max-width:min(360px, calc(100vw - 40px));
  pointer-events:none;
}
.df-toast{
  pointer-events:auto;
  display:flex; align-items:flex-start; gap:12px;
  background:#fff; border:1px solid var(--df-line);
  border-left:4px solid var(--df-green);
  border-radius:var(--df-radius); padding:14px 16px;
  box-shadow:var(--df-shadow-lg);
  transform:translateX(120%); opacity:0;
  transition:transform .45s var(--df-ease), opacity .45s var(--df-ease);
}
.df-toast.is-visible{ transform:translateX(0); opacity:1; }
.df-toast.is-leaving{ transform:translateX(120%); opacity:0; }
.df-toast--error{ border-left-color:var(--df-red); }
.df-toast--info{ border-left-color:var(--df-accent); }
.df-toast__icon{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--df-green-soft); color:var(--df-green); font-size:.9rem; font-weight:700;
}
.df-toast--error .df-toast__icon{ background:var(--df-red-soft); color:var(--df-red); }
.df-toast--info .df-toast__icon{ background:var(--df-accent-soft); color:var(--df-accent); }
.df-toast__body{ flex:1 1 auto; }
.df-toast__title{ font-weight:600; font-size:.92rem; color:var(--df-ink); margin:0 0 2px; }
.df-toast__text{ font-size:.83rem; color:var(--df-ink-soft); margin:0; }
.df-toast__text a{ color:var(--df-accent); font-weight:600; text-decoration:none; }
.df-toast__text a:hover{ text-decoration:underline; }
.df-toast__close{ flex:0 0 auto; background:none; border:0; cursor:pointer; color:var(--df-ink-mute); font-size:1.1rem; line-height:1; padding:2px; }
.df-toast__close:hover{ color:var(--df-ink); }
@media (max-width:560px){ .df-toast-region{ left:16px; right:16px; top:74px; max-width:none; } }

/* =========================================================
   WOOCOMMERCE
   ========================================================= */

/* ---------- Meldingen (toegevoegd aan winkelmand, fouten, info) ---------- */
.woocommerce-notices-wrapper{ margin:0 0 8px; }

ul.woocommerce-message, ul.woocommerce-error, ul.woocommerce-info,
.woocommerce-message, .woocommerce-error, .woocommerce-info{
  list-style:none !important;
  position:relative;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
  margin:0 0 18px !important;
  padding:15px 18px 15px 46px !important;
  border-radius:var(--df-radius);
  border:1px solid transparent !important;
  border-top:1px solid transparent !important;
  font-family:var(--df-font-body);
  font-size:.92rem;
  box-shadow:var(--df-shadow-xs);
}
.woocommerce-message li, .woocommerce-error li, .woocommerce-info li{ list-style:none; margin:0; }
.woocommerce-message::before, .woocommerce-error::before, .woocommerce-info::before{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  font-family:var(--df-font-body); font-weight:700; font-size:.85rem;
  width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff;
}
.woocommerce-message{ background:var(--df-green-soft); border-color:rgba(16,185,129,.32) !important; color:#065F46; }
.woocommerce-message::before{ content:"\2713"; background:var(--df-green); }
.woocommerce-error{ background:var(--df-red-soft); border-color:rgba(239,68,68,.32) !important; color:#7F1D1D; }
.woocommerce-error::before{ content:"\0021"; background:var(--df-red); }
.woocommerce-info{ background:var(--df-info-soft); border-color:rgba(79,70,229,.28) !important; color:var(--df-accent-ink); }
.woocommerce-info::before{ content:"\0069"; background:var(--df-accent); font-style:normal; }

.woocommerce-message a.button, .woocommerce-error a.button, .woocommerce-info a.button{
  margin:0; white-space:nowrap;
}

/* ---------- Buttons (WooCommerce) ---------- */
.woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit,
.woocommerce input.button, .woocommerce input.button.alt, .woocommerce button.button.alt,
.wc-block-components-button, .wp-element-button{
  font-family:var(--df-font-body) !important;
  font-weight:600 !important;
  text-transform:none !important;
  font-size:.92rem !important;
  letter-spacing:0 !important;
  background:var(--df-accent) !important;
  color:#fff !important;
  border-radius:var(--df-radius-sm) !important;
  padding:12px 22px !important;
  border:0 !important;
  box-shadow:var(--df-shadow-accent);
  transition:transform .2s var(--df-ease), background .2s var(--df-ease), box-shadow .2s var(--df-ease) !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce #respond input#submit:hover,
.woocommerce input.button:hover, .woocommerce input.button.alt:hover, .woocommerce button.button.alt:hover,
.wc-block-components-button:hover, .wp-element-button:hover{
  background:var(--df-accent-dk) !important; transform:translateY(-2px); box-shadow:0 12px 26px -10px rgba(79,70,229,.6);
}
.woocommerce a.button.wc-forward:not(.checkout-button){
  background:#fff !important; color:var(--df-accent) !important; border:1px solid var(--df-line-2) !important; box-shadow:none;
}
.woocommerce a.button.wc-forward:not(.checkout-button):hover{ border-color:var(--df-accent) !important; background:var(--df-accent-soft) !important; }

/* ---------- Prijs & titels ---------- */
.woocommerce span.price, .woocommerce div.product p.price, .woocommerce div.product span.price{ font-family:var(--df-font-display); color:var(--df-ink); font-weight:600; }
.woocommerce div.product .product_title{ font-family:var(--df-font-display); }
.woocommerce-page .page-title{ font-family:var(--df-font-display); }
.woocommerce-result-count, .woocommerce-ordering{ font-family:var(--df-font-mono); font-size:.8rem; color:var(--df-ink-soft); }

/* ---------- Formuliervelden (checkout, account, coupons) ---------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce table.cart td.actions .coupon .input-text,
.woocommerce #customer_login input,
.woocommerce-account .woocommerce-EditAccountForm input,
.woocommerce div.product form.cart .variations select,
select, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], textarea{
  font-family:var(--df-font-body);
  font-size:.95rem;
  color:var(--df-ink);
  padding:12px 14px;
  border:1px solid var(--df-line-2);
  border-radius:var(--df-radius-sm);
  background:#fff;
  transition:border-color .2s var(--df-ease), box-shadow .2s var(--df-ease);
  line-height:1.4;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce #customer_login input:focus,
input:focus, textarea:focus, select:focus{
  outline:0;
  border-color:var(--df-accent);
  box-shadow:0 0 0 3px var(--df-accent-soft);
}
.woocommerce .select2-container--default .select2-selection--single{ height:46px; padding:6px 6px; border:1px solid var(--df-line-2); border-radius:var(--df-radius-sm); }
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered{ line-height:32px; color:var(--df-ink); }
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow{ height:44px; }
.woocommerce form .form-row label, .woocommerce-account label{ font-weight:500; color:var(--df-ink); font-size:.9rem; }
.required{ color:var(--df-red); border:0; }

/* ---------- Shop-lijst grid (overschrijft WooCommerce float) ----------
 * Vaste kolommen per breekpunt zodat een rij van 3 producten ook echt
 * op één rij staat (geen "wees"-kaart eronder). Elementor's kolom-instelling
 * en WooCommerce's float worden hier bewust overschreven. */
.woocommerce ul.products,
.woocommerce-page ul.products{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  gap:24px !important;
  list-style:none !important;
  padding:0 !important;
  margin:0 0 40px !important;
}
.woocommerce ul.products.columns-1,
.woocommerce-page ul.products.columns-1{ grid-template-columns:1fr !important; }
.woocommerce ul.products.columns-2,
.woocommerce-page ul.products.columns-2{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
.woocommerce ul.products.columns-4,
.woocommerce-page ul.products.columns-4{ grid-template-columns:repeat(4, minmax(0,1fr)) !important; }
@media (max-width:1024px){
  .woocommerce ul.products, .woocommerce-page ul.products,
  .woocommerce ul.products.columns-4, .woocommerce-page ul.products.columns-4{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width:560px){
  .woocommerce ul.products, .woocommerce-page ul.products,
  .woocommerce ul.products.columns-2, .woocommerce-page ul.products.columns-2,
  .woocommerce ul.products.columns-4, .woocommerce-page ul.products.columns-4{ grid-template-columns:1fr !important; }
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  float:none !important; width:auto !important; min-width:0 !important; clear:none !important; margin:0 !important; padding:0 !important;
}
/* WooCommerce zet een clearfix ::before/::after op ul.products. Bij display:grid
 * worden díé pseudo-elementen zélf gridcellen en duwen ze het eerste product een
 * cel naar rechts (lege cel linksboven). Uitschakelen zodat producten vanaf cel 1 vullen. */
.woocommerce ul.products::before, .woocommerce ul.products::after,
.woocommerce-page ul.products::before, .woocommerce-page ul.products::after{
  content:none !important; display:none !important;
}
/* Verberg eventuele niet-product-items (bv. stray list-items) uit de grid. */
.woocommerce ul.products > li:not(.product),
.woocommerce-page ul.products > li:not(.product){ display:none !important; }
.woocommerce ul.products li.product:not(.df-plate) img{ width:auto !important; height:auto !important; max-width:100% !important; }

/* ---------- Single productpagina ---------- */
body.single-product .content-area,
body.single-product #primary{ padding:48px 7% 80px; }
@media (max-width:760px){
  body.single-product .content-area,
  body.single-product #primary{ padding:32px 5% 56px; }
}
.woocommerce div.product{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; }
.woocommerce div.product .woocommerce-product-gallery{ float:none !important; width:auto !important; margin:0; }
.woocommerce div.product .summary{ float:none !important; width:auto !important; margin:0; }
.woocommerce div.product .woocommerce-product-gallery__image img{ border-radius:var(--df-radius); box-shadow:var(--df-shadow-sm); }
.woocommerce div.product .woocommerce-tabs{ grid-column:1 / -1; }
@media (max-width:860px){ .woocommerce div.product{ grid-template-columns:1fr; gap:28px; } }

.woocommerce div.product form.cart{ margin-top:8px; }
.woocommerce div.product form.cart .quantity input.qty{ width:70px; text-align:center; }
.woocommerce div.product .woocommerce-tabs ul.tabs{ list-style:none; padding:0; margin:0 0 20px; display:flex; flex-wrap:wrap; gap:8px; border-bottom:1px solid var(--df-line); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before{ display:none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li{ background:transparent; border:0; border-radius:0; padding:0; margin:0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after{ display:none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{ display:block; padding:10px 4px; font-family:var(--df-font-body); font-weight:600; color:var(--df-ink-soft); border-bottom:2px solid transparent; margin-bottom:-1px; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{ color:var(--df-accent); border-bottom-color:var(--df-accent); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a + a{ margin-left:14px; }

/* ---------- Winkelmand ---------- */
.woocommerce table.shop_table{ border:1px solid var(--df-line); border-radius:var(--df-radius); border-collapse:separate; border-spacing:0; overflow:hidden; }
.woocommerce table.shop_table th{ font-family:var(--df-font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--df-ink-soft); padding:16px; background:var(--df-bg-alt); }
.woocommerce table.shop_table td{ padding:16px; border-top:1px solid var(--df-line); }
.woocommerce table.cart img{ width:64px; border-radius:var(--df-radius-sm); }
.woocommerce a.remove{ color:var(--df-red) !important; border:1px solid var(--df-line-2); background:#fff; font-weight:400; }
.woocommerce a.remove:hover{ background:var(--df-red) !important; color:#fff !important; border-color:var(--df-red); }
.woocommerce table.cart td.actions .coupon{ display:flex; gap:8px; align-items:center; }
.woocommerce .cart_totals{ background:var(--df-bg-alt); border:1px solid var(--df-line); border-radius:var(--df-radius); padding:24px; }
.woocommerce .cart_totals h2{ font-size:1.25rem; margin-top:0; }
.woocommerce .cart-collaterals .cart_totals table.shop_table{ border:0; }
.woocommerce .cart-collaterals .cart_totals table.shop_table td, .woocommerce .cart-collaterals .cart_totals table.shop_table th{ background:transparent; border-top:1px solid var(--df-line); }

/* ---------- Marges voor winkelmand / checkout / account / bedankpagina ----------
 * Deze pagina's renderen via page.php zonder container, waardoor de inhoud tegen
 * de vensterranden plakt. Hier geven we ze dezelfde marges en maximale breedte. */
body.woocommerce-cart #main,
body.woocommerce-checkout #main,
body.woocommerce-account #main,
body.woocommerce-order-received #main{
  max-width:var(--df-container);
  margin-left:auto; margin-right:auto;
  padding:48px var(--df-gutter) 80px;
}
body.woocommerce-cart #main .alignfull,
body.woocommerce-checkout #main .alignfull,
body.woocommerce-cart #main .wp-block-woocommerce-cart,
body.woocommerce-checkout #main .wp-block-woocommerce-checkout{
  max-width:100%; margin-left:0; margin-right:0;
}

/* ---------- Checkout ---------- */
.woocommerce-checkout #payment{ background:var(--df-bg-alt); border:1px solid var(--df-line); border-radius:var(--df-radius); }
.woocommerce-checkout #payment ul.payment_methods{ border-bottom:1px solid var(--df-line); }
.woocommerce-checkout .woocommerce-checkout-review-order-table{ margin-bottom:20px; }
.woocommerce-checkout #payment div.payment_box{ background:#fff; border-radius:var(--df-radius-sm); }
.woocommerce-checkout #payment div.payment_box::before{ border-bottom-color:#fff; }
.woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce form.register{ border:1px solid var(--df-line) !important; border-radius:var(--df-radius); }
#add_payment_method #payment div.payment_box, .woocommerce-cart #payment div.payment_box, .woocommerce-checkout #payment div.payment_box{ color:var(--df-ink-soft); }

/* ---------- Mijn account ---------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; border:1px solid var(--df-line); border-radius:var(--df-radius); overflow:hidden; }
.woocommerce-account .woocommerce-MyAccount-navigation li{ border-bottom:1px solid var(--df-line); }
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child{ border-bottom:0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a{ display:block; padding:13px 18px; text-decoration:none; color:var(--df-ink-soft); font-weight:500; transition:background .2s var(--df-ease), color .2s var(--df-ease); }
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{ background:var(--df-bg-alt); color:var(--df-ink); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{ background:var(--df-accent); color:#fff; }
@media (min-width:769px){ .woocommerce-account .woocommerce-MyAccount-navigation{ width:26%; } .woocommerce-account .woocommerce-MyAccount-content{ width:70%; } }

/* ---------- Shop-header banner + zijbalk (licht) ---------- */
.df-shop-header{ background:linear-gradient(180deg, var(--df-accent-soft) 0%, var(--df-bg-alt) 100%); color:var(--df-ink); padding:56px 0 44px; border-bottom:1px solid var(--df-line); }
.df-shop-header__crumb{ font-family:var(--df-font-mono); font-size:.75rem; color:var(--df-ink-mute); margin-bottom:14px; }
.df-shop-header__crumb .woocommerce-breadcrumb a{ color:var(--df-accent); text-decoration:none; }
.df-shop-header__crumb .woocommerce-breadcrumb a:hover{ color:var(--df-accent-dk); }
.df-shop-header__title{ font-family:var(--df-font-display); font-size:clamp(2rem,4vw,2.8rem); color:var(--df-ink); margin:0 0 10px; }
.df-shop-header__desc{ color:var(--df-ink-soft); max-width:60ch; margin:0; }

.df-shop-wrap{ padding:48px 7% 80px; }
.df-shop-layout{ display:grid; grid-template-columns:240px 1fr; gap:40px; align-items:start; }
@media (max-width:860px){
  .df-shop-layout{ grid-template-columns:1fr; }
  .df-shop-sidebar{ order:2; }
  .df-shop-main{ order:1; }
}
.df-shop-sidebar{ position:sticky; top:96px; }
.df-cat-filter{ margin-bottom:32px; }
.df-cat-filter ul{ list-style:none; margin:0; padding:0; }
.df-cat-filter li{ margin-bottom:2px; }
.df-cat-filter a{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:10px 12px; border-radius:var(--df-radius-sm); text-decoration:none; color:var(--df-ink-soft); font-size:.9rem; font-weight:500; transition:background .2s var(--df-ease), color .2s var(--df-ease); }
.df-cat-filter a:hover{ background:var(--df-bg-alt); color:var(--df-ink); }
.df-cat-filter li.is-active a{ background:var(--df-accent); color:#fff; }
.df-cat-filter__count{ font-family:var(--df-font-mono); font-size:.72rem; opacity:.6; }
.df-cat-filter li.is-active .df-cat-filter__count{ opacity:.85; }

.df-shop-toolbar{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:24px; }
.df-shop-toolbar .woocommerce-result-count{ margin:0; }
.df-shop-toolbar .woocommerce-ordering{ margin:0; }
.df-shop-toolbar select{ font-family:var(--df-font-mono); font-size:.8rem; padding:9px 12px; border:1px solid var(--df-line-2); border-radius:var(--df-radius-sm); }

/* ---------- Widgets (defensieve baseline) ---------- */
.widget{ margin-bottom:32px; font-size:.92rem; }
.widget h4, .widget .widgettitle, .widget-title{
  font-family:var(--df-font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--df-ink-soft); margin-bottom:12px;
}
.widget ul{ list-style:none; margin:0; padding:0; }
.widget li{ margin-bottom:8px; border-bottom:1px solid var(--df-line); padding-bottom:8px; }
.widget a{ color:var(--df-ink); text-decoration:none; }
.widget a:hover{ color:var(--df-accent); }
.widget input[type="submit"], .widget button{
  font-family:var(--df-font-body); font-weight:600; text-transform:none; font-size:.85rem;
  background:var(--df-accent); color:#fff; border:0; border-radius:var(--df-radius-sm); padding:10px 16px; cursor:pointer;
}

/* Requirement notice when Elementor is missing */
.df-elementor-required{ background:var(--df-red-soft); color:#7F1D1D; padding:14px 20px; font-family:var(--df-font-mono); font-size:.85rem; border-bottom:1px solid rgba(239,68,68,.3); }