:root{
  --c-primary: #f97316;
  --c-secondary: #111827;
  --c-accent: #fb923c;
  --c-bg: #ffffff;
  --c-surface: #ffffff;
  --c-text: #111827;
  --c-muted: #6b7280;
  --c-border: #cfcfcf;
  --c-button-text: #ffffff;
  --c-dark-text: #ffffff;
  --c-dark-muted: #d1d5db;
  --font-body: Montserrat, Arial, sans-serif;
  --font-heading: Montserrat, Arial, sans-serif;
  --body-size: 16px;
  --h1-size: 42px;
  --h2-size: 34px;
  --h3-size: 24px;
  --radius: 0px;
  --button-radius: 14px;
  --container-width: 1880px;
  --section-padding: 50px;
  --card-shadow: 0 16px 50px rgba(17,24,39,.08);
  --hero-bg: linear-gradient(135deg, #ffffff 0%, #ffffff 58%, #fff 100%);
  --products-per-row: 4;
  --c-contact-icon: #f97316;
  --hero-min-height: 640px;
  --hero-content-width: 640px;
  --hero-align-h: flex-start;
  --hero-align-v: center;
  --hero-image-position: center center;
  --hero-overlay-a1: 0.92;
  --hero-image-opacity: 0.55;
  --hero-overlay-a2: 0.55;
  --hero-overlay-a3: 0.25;
  --hero-badge-font: Inter, Arial, sans-serif;
  --hero-title-font: Inter, Arial, sans-serif;
  --hero-text-font: Inter, Arial, sans-serif;
  --hero-button-font: Inter, Arial, sans-serif;
  --hero-title-size: 52px;
  --hero-overlay-rgb: 10,10,12;
  --hero-title-color: #ffffff;
  --hero-title-weight: 900;
  --hero-text-color: #d1d5db;
  --hero-text-size: 17px;
  --hero-badge-bg: #f97316;
  --hero-badge-text: #ffffff;
  --hero-badge-size: 12px;
  --hero-photo-width: 500px;
  --hero-photo-height: 350px;
  --hero-photo-radius: 20px;
}

html, body{font-family:var(--font-body);font-size:var(--body-size);color:var(--c-text);background:var(--c-bg);}
h1,.hero h1{font-family:var(--font-heading);font-size:clamp(34px,5vw,var(--h1-size));line-height:1.05;color:var(--c-text);}
h2{font-family:var(--font-heading);font-size:clamp(26px,3vw,var(--h2-size));color:var(--c-text);}
h3{font-family:var(--font-heading);font-size:var(--h3-size);color:var(--c-text);}
p{color:var(--c-muted);}
.wrap,.hero{max-width:var(--container-width);}
.wrap{padding-top:var(--section-padding);padding-bottom:var(--section-padding);}
.hero{background:var(--hero-bg);border-radius:calc(var(--radius) + 6px);}
.topbar{border-bottom:1px solid var(--c-border);background:rgba(255,255,255,.92);}
.logo,.logo span,.price,.badge{color:var(--c-primary);}
.badge{background:color-mix(in srgb, var(--c-primary) 13%, white);border-color:var(--c-border);}
.btn,button.btn,.button{background:var(--c-primary);color:var(--c-button-text);border-radius:var(--button-radius);border-color:var(--c-primary);}
.btn:hover,button.btn:hover,.button:hover{background:var(--c-accent);border-color:var(--c-accent);}
.btn.secondary{background:var(--c-surface);color:var(--c-primary);border-color:var(--c-primary);}
.card,.admin-form,.form,.table,.usp-card,.category-card,.product-card,.footer-card{background:var(--c-surface);border-color:var(--c-border);border-radius:var(--radius);box-shadow:var(--card-shadow);}
input,textarea,select{border-color:var(--c-border);border-radius:calc(var(--button-radius) - 3px);}
a{color:var(--c-primary);}
.topbar nav a{color:var(--c-secondary);}
.topbar nav a:hover{color:var(--c-primary);}
.placeholder,.device-art,.imagebox{background:linear-gradient(135deg,var(--c-primary),color-mix(in srgb,var(--c-primary) 35%,white));border-radius:var(--radius);}
.adminbar{background:var(--c-secondary);border-radius:var(--radius);}
.adminbar a{color:white;}
.adminbar a:hover{background:var(--c-primary);color:white;}
.site-footer{background:var(--c-secondary);color:white;}
.site-footer a{color:white;}
.site-footer p,.site-footer li{color:rgba(255,255,255,.72);}

/* Donkere secties (hero, categorie-banners, feature-cards) gebruiken altijd hun
   eigen onafhankelijke tekstkleur, ongeacht de algemene tekstkleur hierboven. */
.hero-dark h1,.hero-dark h2,.hero-dark h3,
.category-hero h1,.category-hero h2,.category-hero h3,
.feature-card h1,.feature-card h2,.feature-card h3{color:var(--c-dark-text);}
.hero-dark p,.hero-dark .hero-trust-row,
.category-hero p,
.feature-card p{color:var(--c-dark-muted);}
.hero-dark .hero-trust-row strong{color:var(--c-dark-text);}
.hero-dark .badge,.category-hero .badge{color:var(--c-button-text);}

/* Aantal producten per rij, instelbaar via de Customizer */
.product-grid{grid-template-columns:repeat(var(--products-per-row),minmax(0,1fr));}
@media(max-width:900px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){.product-grid{grid-template-columns:repeat(1,minmax(0,1fr));}}

/* Hero customizer: garandeer voorrang op de algemene h1-regel hierboven */
.hero-dark h1,.category-hero h1{font-size:clamp(28px,5vw,var(--hero-title-size));font-family:var(--hero-title-font);color:var(--hero-title-color);font-weight:var(--hero-title-weight);}
.hero-dark p,.category-hero p{color:var(--hero-text-color);font-size:var(--hero-text-size);}
.hero-dark .badge,.category-hero .badge{background:var(--hero-badge-bg);color:var(--hero-badge-text);font-size:var(--hero-badge-size);}

/* Hero stijl: licht (donkere tekst i.p.v. witte tekst, en een donkere in plaats van witte knoprand) */
.hero-dark.hero-theme-light h1,.hero-dark.hero-theme-light h2,.hero-dark.hero-theme-light h3,
.category-hero.hero-theme-light h1,.category-hero.hero-theme-light h2,.category-hero.hero-theme-light h3{color:var(--c-text);}
.hero-dark.hero-theme-light p,.hero-dark.hero-theme-light .hero-trust-row,
.category-hero.hero-theme-light p{color:var(--c-muted);}
.hero-dark.hero-theme-light .hero-trust-row strong{color:var(--c-text);}
.hero-dark.hero-theme-light .btn.on-dark,.category-hero.hero-theme-light .btn.on-dark{color:var(--c-text);border-color:var(--c-text);}
.hero-dark.hero-theme-light .btn.on-dark:hover,.category-hero.hero-theme-light .btn.on-dark:hover{background:rgba(0,0,0,.06);}

/* Voorkomt dat Chrome/Safari de systeem-donkere-modus gebruikt voor dropdowns (overschrijft anders onze kleuren) */
html{color-scheme:light}
select,option{color:#18181b !important;background:#fff !important;color-scheme:light}

/* ===== Custom CSS (Admin -> Customizer) ===== */
.shop-filter {
background-color: #fff6ed;
}
.hero-photo-frame {
    position: relative;
    flex: 0 0 auto;
    width: 400px;
    height: 400px;
    border-radius: var(--hero-photo-radius, 20px);
    overflow: hidden;
    background: #fff;
}
.feature-card {
    background: #939292;
    color: var(--c-dark-text, #fff);
    border-radius: 10px;
    padding: 26px;
}
.feature-card .fc-icon
 {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 14px;
}
h5 {
color:#f97316;
font-size: 42px 
}