/*
Theme Name: WithdrawFlow Demo Store
Theme URI: https://demo.withdrawflow.com
Author: Vivix Design
Author URI: https://vivix.design
Description: Demo-winkelthema voor demo.withdrawflow.com: een echte WooCommerce-shop waarin bezoekers de WithdrawFlow-herroepingsflow live kunnen proberen.
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: withdrawflow-demo
*/

@font-face { font-family:'Exo'; font-style:normal; font-weight:100 900; font-display:swap; src:url(assets/exo.woff2) format('woff2'); }

:root {
  --ground:#f4f4f1; --panel:#fff; --ink:#17181a; --ink-soft:#6d6e75;
  --line:#e4e4df; --line-strong:#cccdc5;
  --good:#1e7f4c; --good-soft:#e4f1e9; --confirm:#b32d2e;
  --shadow:0 1px 2px rgba(20,20,22,.05),0 10px 30px -14px rgba(20,20,22,.14);
}

* { box-sizing:border-box; }
body {
  margin:0; font-family:'Exo',system-ui,sans-serif; background:var(--ground); color:var(--ink);
  font-size:15.5px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a { color:inherit; }
:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
img { max-width:100%; height:auto; }

.shell { max-width:1040px; margin:0 auto; padding:0 20px; }

/* promobalk + navigatie */
.promo { background:var(--ink); color:var(--ground); font-size:13.5px; text-align:center; padding:9px 16px; }
.promo a { color:var(--ground); font-weight:650; }
.site-nav { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:20px 0; flex-wrap:wrap; }
.wordmark { display:flex; align-items:center; gap:9px; font-size:17px; font-weight:700; text-decoration:none; }
.wordmark .demo-tag { font-size:10.5px; font-weight:700; letter-spacing:.14em; color:var(--ink-soft); }
.nav-links { display:flex; align-items:center; gap:18px; font-size:14.5px; }
.nav-links a { text-decoration:none; color:var(--ink-soft); }
.nav-links a:hover { color:var(--ink); }
.knop, .button, .wp-element-button, button[type=submit], .single_add_to_cart_button {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--ink) !important; color:var(--ground) !important;
  border:1px solid var(--ink) !important; border-radius:8px !important;
  padding:10px 18px !important; font-weight:650 !important; font-size:14.5px !important;
  text-decoration:none !important; cursor:pointer; line-height:1.3 !important;
}
.knop:hover, .button:hover { opacity:.85; }
.knop.stil { background:transparent !important; color:var(--ink) !important; border-color:var(--line-strong) !important; }

/* hero + stappen */
.demo-hero { padding:48px 0 10px; max-width:680px; }
.eyebrow { font-size:11.5px; font-weight:650; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-soft); }
.demo-hero h1 { font-size:clamp(28px,4.5vw,42px); font-weight:750; line-height:1.08; margin:12px 0 14px; }
.demo-hero p { color:var(--ink-soft); font-size:16.5px; margin:0 0 22px; }
.stappen { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; padding:26px 0 8px; }
.stap { background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); padding:20px; }
.stap .num { font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--ink-soft); display:block; margin-bottom:8px; }
.stap h3 { margin:0 0 6px; font-size:15px; font-weight:650; }
.stap p { margin:0; font-size:13.5px; color:var(--ink-soft); }

.sectiekop { padding:34px 0 6px; }
.sectiekop h2 { font-size:clamp(20px,3vw,26px); font-weight:720; margin:8px 0 4px; }
.sectiekop p { color:var(--ink-soft); margin:0; font-size:14.5px; }

/* WooCommerce: productgrid */
.woocommerce ul.products { display:grid !important; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; padding:20px 0 40px; margin:0; list-style:none; }
.woocommerce ul.products li.product {
  background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow);
  padding:18px; margin:0 !important; width:auto !important; float:none !important;
  display:flex; flex-direction:column; gap:8px; text-align:left !important;
}
.woocommerce ul.products li.product a img { border-radius:8px; margin-bottom:6px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size:15px !important; font-weight:650; padding:0 !important; }
.woocommerce ul.products li.product .price { color:var(--ink) !important; font-weight:700; font-size:15px !important; }
.woocommerce ul.products li.product .button { margin-top:auto; }
.woocommerce ul.products li.product .onsale { display:none; }

/* Woo: formulieren, tabellen, meldingen */
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select,
.woocommerce .quantity .qty {
  background:var(--panel); border:1px solid var(--line-strong); border-radius:7px; padding:9px 11px; font:inherit; color:var(--ink);
}
.woocommerce table.shop_table { border:1px solid var(--line) !important; border-radius:10px; border-collapse:separate !important; background:var(--panel); }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-color:var(--line) !important; }
.woocommerce-message, .woocommerce-info {
  background:var(--good-soft) !important; color:var(--good) !important;
  border-top-color:var(--good) !important; border-radius:8px;
}
.woocommerce-error { border-radius:8px; }
.woocommerce .woocommerce-breadcrumb { color:var(--ink-soft); font-size:13px; }
.woocommerce .woocommerce-breadcrumb a { color:var(--ink-soft); }
.woocommerce div.product p.price { color:var(--ink); font-weight:700; font-size:20px; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background:var(--panel); border-color:var(--line); }

/* WithdrawFlow-elementen krijgen extra nadruk in de demo */
.wf-thankyou {
  background:var(--good-soft); border:1px solid var(--good); border-radius:10px;
  padding:16px 18px; font-size:15px;
}
.wf-footerlink { border-top:1px solid var(--line); margin-top:40px; }

/* hoofdinhoud + footer */
.site-main { min-height:55vh; padding-bottom:40px; }
.site-footer { border-top:1px solid var(--line); padding:26px 0 60px; font-size:13px; color:var(--ink-soft); }
.site-footer .kolommen { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.site-footer a { color:var(--ink-soft); }

@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }

/* Gridfix: Woo's clearfix-pseudo-elementen worden anders grid-items
   en bezetten de eerste cel (de "lege kolom") */
.woocommerce ul.products::before, .woocommerce ul.products::after { content:none !important; display:none !important; }

/* Productafbeeldingen (svg-illustraties): vaste verhouding, zachte kaart */
.woocommerce ul.products li.product a img { width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; background:#f4f4f2; }
.woocommerce div.product div.images img { background:#f4f4f2; border-radius:10px; }

/* Taalkiezer */
select.wfdemo-taal { font:inherit; font-size:13px; color:var(--ink); background:transparent; border:1px solid var(--line-strong); border-radius:8px; padding:5px 8px; cursor:pointer; }

/* Mobiel: secundaire links verbergen, knop compact */
@media (max-width:760px) {
  .nav-links { gap:10px; }
  .nav-links .hide-m { display:none; }
  .nav-links .knop { padding:6px 10px !important; font-size:12.5px !important; }
  select.wfdemo-taal { max-width:104px; }
}