/* JH Sio Agent: aanvullende blokstijlen. Uitsluitend themakleuren (#171717, #fff, #f6f6f6, #eee, #686868) en -fonts (Manrope, Abril Fatface). */

.jhs-sio{ position:relative; z-index:700; background:#fff; }
.jhs-sio-page{ padding-bottom: clamp(20px,4vw,40px); }
.jhs-sio-page.jhs-sio-front{ padding-bottom:0; }
.jhs-sio-titlewrap{ max-width:1200px; margin:0 auto; padding: clamp(24px,4vw,40px) 20px 0; text-align:center; }

/* Nieuwe bloktypes krijgen een begrensde contentbreedte; themablokken (categorieën, split, maatwerk) houden exact de themaopmaak. */
.jhs-sio .jhs-section.jhs-sio-own{ max-width:1200px; margin-left:auto; margin-right:auto; padding-left:20px; padding-right:20px; }
.jhs-sio .jhs-sio-own h2.jhs-sec-title{ text-align:center; }

/* Categorietegels met 2 of 3 items */
.jhs-sio .jhs-categories-grid.jhs-sio-count-2{ grid-template-columns: repeat(2, 1fr); }
.jhs-sio .jhs-categories-grid.jhs-sio-count-3{ grid-template-columns: repeat(3, 1fr); }
@media (max-width:768px){ .jhs-sio .jhs-categories-grid.jhs-sio-count-3{ grid-template-columns: repeat(2,1fr); } }

/* Beeld rechts in image_text */
.jhs-sio .jhs-maatwerk-main.jhs-sio-img-right .jhs-maatwerk-image{ order:2; }
@media (max-width:900px){ .jhs-sio .jhs-maatwerk-main.jhs-sio-img-right .jhs-maatwerk-image{ order:1; } }
.jhs-sio .jhs-maatwerk-content a:not(.jhs-cta){ color:#171717; }

/* Hero-afbeelding (FAQ-stijl) */
.jhs-sio-hero-image{ position:relative; width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; background-size:cover; background-position:center; background-repeat:no-repeat; min-height:300px; display:flex; align-items:flex-end; }
.jhs-sio-hero-image::before{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 100%); }
.jhs-sio-hero-image .inner{ width:100%; position:relative; z-index:1; }
.jhs-sio-hero-image .jhs-container{ padding-top:40px; padding-bottom:40px; }
.jhs-sio-hero-image h1{ margin:0; font-size:clamp(28px, 4vw, 44px); font-weight:300; text-transform:uppercase; letter-spacing:.04em; color:#fff; }
.jhs-sio-hero-image .jhs-breadcrumb{ color:rgba(255,255,255,.9); font-size:13px; margin:0 0 8px; }
.jhs-sio-hero-image .jhs-breadcrumb a{ color:rgba(255,255,255,.9); text-decoration:underline; }
.jhs-sio-hero-image .subtext{ color:#fff; opacity:.92; margin:6px 0 0; font-size:15px; max-width:640px; }
.jhs-sio-hero-cta{ margin:18px 0 0; }
@media(min-width:900px){ .jhs-sio-hero-image{ min-height:440px; } }

/* Tekst */
.jhs-sio-prose{ line-height:1.65; font-size:16px; }
.jhs-sio-prose p{ margin:0 0 1em; }
.jhs-sio-prose h2{ font-weight:300; text-transform:uppercase; letter-spacing:.02em; font-size:clamp(1.2rem,2.2vw,1.6rem); margin:1.6em 0 .6em; }
.jhs-sio-prose h3{ font-weight:700; font-size:1.05rem; margin:1.4em 0 .5em; }
.jhs-sio-prose a{ color:#171717; text-decoration:underline; }
.jhs-sio-prose ul, .jhs-sio-prose ol{ padding-left:1.2em; margin:0 0 1em; }
.jhs-sio-prose table{ border-collapse:collapse; width:100%; margin:0 0 1em; }
.jhs-sio-prose th, .jhs-sio-prose td{ border-bottom:1px solid #eee; padding:8px 10px; text-align:left; }
.jhs-sio-prose blockquote{ margin:1em 0; padding-left:16px; border-left:2px solid #171717; }
.jhs-sio-width-narrow{ max-width:760px !important; }
.jhs-sio-align-center{ text-align:center; }
.jhs-sio-align-center .jhs-sio-prose ul, .jhs-sio-align-center .jhs-sio-prose ol{ display:inline-block; text-align:left; }

/* Producten */
.jhs-sio-products .woocommerce{ margin-top:16px; }
.jhs-sio-center{ text-align:center; margin-top:28px; }

/* FAQ (uitklapbaar) */
.jhs-sio-faq{ max-width:900px !important; }
.jhs-sio-faq-item{ border-bottom:1px solid #ececec; }
.jhs-sio-faq-item summary{ list-style:none; cursor:pointer; padding:16px 44px 16px 0; font-size:1.12rem; position:relative; color:#232323; }
.jhs-sio-faq-item summary::-webkit-details-marker{ display:none; }
.jhs-sio-faq-item summary::after{ content:'+'; position:absolute; right:8px; top:50%; transform:translateY(-50%); font-size:2rem; line-height:1; font-weight:300; }
.jhs-sio-faq-item[open] summary::after{ content:'\2212'; }
.jhs-sio-faq-item summary:hover, .jhs-sio-faq-item summary:focus-visible{ background:#f8f8f8; outline:none; }
.jhs-sio-faq-item .jhs-sio-prose{ padding:0 0 18px; color:#444; font-size:1.03rem; }

/* USP's */
.jhs-sio-usps{ text-align:center; }
.jhs-sio-usps-list{ list-style:none; margin:20px 0 0; padding:0; display:grid; grid-template-columns: repeat(var(--jhs-sio-n,3), 1fr); gap:24px; }
.jhs-sio-usps-list.jhs-sio-count-2{ --jhs-sio-n:2; } .jhs-sio-usps-list.jhs-sio-count-3{ --jhs-sio-n:3; } .jhs-sio-usps-list.jhs-sio-count-4{ --jhs-sio-n:4; }
.jhs-sio-usps-list li{ background:#f6f6f6; padding:24px 20px; display:flex; flex-direction:column; gap:8px; }
.jhs-sio-usps-list strong{ text-transform:uppercase; letter-spacing:.04em; font-size:.95rem; }
.jhs-sio-usps-list span{ color:#686868; font-size:.95rem; line-height:1.5; }
@media (max-width:768px){ .jhs-sio-usps-list{ grid-template-columns:1fr; } }

/* Galerij */
.jhs-sio-gallery-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; margin-top:16px; }
.jhs-sio-gallery-grid.jhs-sio-count-2{ grid-template-columns: repeat(2,1fr); }
.jhs-sio-gallery-grid.jhs-sio-count-3{ grid-template-columns: repeat(3,1fr); }
.jhs-sio-gallery-grid figure{ margin:0; }
.jhs-sio-gallery-grid img{ width:100%; aspect-ratio:3/4; object-fit:cover; display:block; height:auto; }
.jhs-sio-gallery-grid figcaption{ font-size:13px; color:#686868; margin-top:8px; }
@media (max-width:768px){ .jhs-sio-gallery-grid, .jhs-sio-gallery-grid.jhs-sio-count-3{ grid-template-columns: repeat(2,1fr); } }

/* Citaat */
.jhs-sio-quote{ text-align:center; max-width:820px !important; }
.jhs-sio-quote blockquote{ margin:0; }
.jhs-sio-quote p{ font-size:clamp(1.15rem,2vw,1.5rem); font-weight:300; line-height:1.5; margin:0 0 12px; }
.jhs-sio-quote p::before{ content:'\201C'; } .jhs-sio-quote p::after{ content:'\201D'; }
.jhs-sio-quote cite{ font-style:normal; text-transform:uppercase; letter-spacing:.06em; font-size:.85rem; font-weight:700; }

/* CTA-banner */
.jhs-sio-cta-banner{ text-align:center; padding: clamp(40px,6vw,72px) 20px; margin: clamp(40px,6vw,80px) 0; }
.jhs-sio-cta-banner p{ max-width:640px; margin:0 auto 22px; line-height:1.6; }
.jhs-sio-tone-light{ background:#f6f6f6; color:#171717; }
.jhs-sio-tone-dark{ background:#171717; color:#fff; }
.jhs-sio-btn{ display:inline-block; text-decoration:none; text-transform:uppercase; font-weight:800; letter-spacing:.06em; padding:16px 30px; background:#171717; color:#fff; }
.jhs-sio-btn:hover{ background:#333; color:#fff; }
.jhs-sio-tone-dark .jhs-sio-btn{ background:#fff; color:#171717; }
.jhs-sio-tone-dark .jhs-sio-btn:hover{ background:#f2f2f2; }
@media (max-width:768px){ .jhs-sio-btn{ padding:12px 20px; font-size:13px; } }

/* Video */
.jhs-sio-video{ text-align:center; }
.jhs-sio-video video{ width:100%; max-width:1020px; height:auto; display:block; margin:16px auto 0; background:#000; }

/* Witruimte */
.jhs-sio-spacer-small{ height:24px; } .jhs-sio-spacer-medium{ height:56px; } .jhs-sio-spacer-large{ height:100px; }

/* Productpagina */
.jhs-sio-pdp{ margin-top: clamp(20px,4vw,48px); }
.jhs-sio-pdp-tabs{ margin-top:24px; }
.jhs-sio-pdp-tabs .jhs-section{ padding-left:0; padding-right:0; margin: 28px 0; }

/* Voorbeeldbalk */
.jhs-sio-preview-bar{ position:sticky; top:0; z-index:100000; background:#171717; color:#fff; text-align:center; font-size:13px; padding:8px 12px; letter-spacing:.03em; }