/* HK Sitebuilder Front CSS (v2.1.0) – professional, monochrome-first */

/* Global box sizing to prevent overflow and misalignment inside cards */
*,*::before,*::after{box-sizing:border-box;}
img{max-width:100%;height:auto;}

:root{
  --hk-bg:#f6f7f9;
  --hk-card:#ffffff;
  --hk-text:#0f172a;
  --hk-muted:#475569;
  --hk-border:rgba(15,23,42,.12);
  --hk-shadow:0 10px 30px rgba(2,6,23,.08);
  --hk-shadow2:0 18px 55px rgba(2,6,23,.10);
  --hk-radius:16px;
  --hk-radius-lg:22px;
  --hk-accent:#5f8f2b;
}

/* Base */
body.hk-sitebuilder, body{
  background: var(--hk-bg);
  color: var(--hk-text);
}
.hk-sb-shell{max-width:1120px;margin:0 auto;padding:18px 14px 44px;}
.hk-card{background:var(--hk-card);border:1px solid var(--hk-border);border-radius:var(--hk-radius-lg);box-shadow:var(--hk-shadow);}

/* Header */
.hk-header{margin:10px auto 14px;max-width:1120px;padding:0 14px;}
.hk-header-inner{
  background:var(--hk-card);
  border:1px solid var(--hk-border);
  border-radius:var(--hk-radius-lg);
  padding:14px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  box-shadow:var(--hk-shadow);
}
.hk-logo img{display:block;height:auto;}
.hk-logo-text{font-weight:900;font-size:22px;letter-spacing:.2px;color:var(--hk-text);}
.hk-nav{display:flex;gap:18px;align-items:center;}
.hk-nav a{color:var(--hk-text);font-weight:800;text-decoration:none;font-size:15px;opacity:.92;}
.hk-nav a:hover{opacity:1;text-decoration:underline;}
.hk-cart{
  color:var(--hk-text);text-decoration:none;
  background:rgba(15,23,42,.04);
  border:1px solid var(--hk-border);
  padding:10px 12px;border-radius:999px;
  display:flex;align-items:center;gap:8px;
}
.hk-cart-count{background:var(--hk-text);color:#fff;font-weight:900;min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-size:12px;}

.hk-burger{display:none;width:44px;height:44px;border-radius:999px;border:1px solid var(--hk-border);background:rgba(15,23,42,.04);cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none;}
.hk-burger .hk-burger-ic{width:24px;height:24px;display:block;}
.hk-burger .hk-burger-ic path{stroke:var(--hk-text);stroke-width:2.6;stroke-linecap:round;fill:none;}
.hk-mobile-drawer{margin-top:10px;background:var(--hk-card);border:1px solid var(--hk-border);border-radius:var(--hk-radius-lg);padding:10px;box-shadow:var(--hk-shadow);}
.hk-mobile-drawer a{display:block;padding:12px 10px;border-radius:12px;text-decoration:none;font-weight:900;color:var(--hk-text);}
.hk-mobile-drawer a:hover{background:rgba(15,23,42,.04);}

/* Hero */
.hk-hero{position:relative;overflow:hidden;border-radius:var(--hk-radius-lg);min-height:320px;background-size:cover;background-position:center;box-shadow:var(--hk-shadow2);border:1px solid var(--hk-border);background-color:var(--hk-text);}
.hk-hero-small{min-height:200px;}
.hk-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(2,6,23,.55), rgba(2,6,23,.25));}
.hk-hero-inner{position:relative;padding:46px 22px;text-align:center;color:#fff;}
.hk-hero h1{font-size:clamp(28px,4.4vw,46px);margin:0 0 10px;font-weight:950;letter-spacing:-.4px;}
.hk-hero-sub{opacity:.92;font-size:clamp(14px,2.1vw,18px);max-width:760px;margin:0 auto 14px;}

.hk-usp-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px;}
.hk-usp{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);padding:8px 12px;border-radius:999px;font-weight:800;font-size:13px;}

/* Buttons */
.hk-btn{display:inline-block;background:var(--hk-text);color:#fff;text-decoration:none;font-weight:900;padding:13px 18px;border-radius:999px;box-shadow:0 12px 28px rgba(2,6,23,.22);}
.hk-btn:hover{filter:brightness(1.03);}
.hk-btn-small{padding:10px 14px;font-size:14px;}
.hk-link{color:var(--hk-muted);text-decoration:none;font-weight:800;}
.hk-link:hover{text-decoration:underline;}

/* Sections */
.hk-section{margin:18px 0;}
.hk-section h2{margin:0 0 12px;font-size:24px;font-weight:950;color:var(--hk-text);letter-spacing:-.2px;}

/* Home cards */
.hk-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.hk-card-mini{padding:14px 14px;border-radius:var(--hk-radius);background:var(--hk-card);border:1px solid var(--hk-border);box-shadow:var(--hk-shadow);}
.hk-card-mini h3{margin:0 0 6px;font-size:15px;font-weight:950;}
.hk-card-mini p{margin:0;color:var(--hk-muted);line-height:1.5;}
.hk-review{font-weight:800;}
.hk-about{padding:14px 16px;}
.hk-about p{margin:0;line-height:1.6;color:var(--hk-muted);}

/* Category grid (home) */
.hk-cat-card{display:block;text-decoration:none;color:var(--hk-text);background:var(--hk-card);border:1px solid var(--hk-border);border-radius:var(--hk-radius);overflow:hidden;box-shadow:var(--hk-shadow);}
.hk-cat-card:hover{box-shadow:0 18px 55px rgba(2,6,23,.12);}
.hk-cat-img{height:116px;display:flex;align-items:center;justify-content:center;background:rgba(2,6,23,.02);}
.hk-cat-img img{max-height:100%;width:auto;}
.hk-cat-name{padding:10px 12px;font-weight:950;display:flex;align-items:center;gap:8px;}

/* Pictograms (screenshot style) */
.hk-filter-ic,.hk-cat-ic,.hk-cat-name-ic{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;background:transparent;border:none;
  color:var(--hk-text);line-height:1;
}
.hk-filter-ic{width:30px;height:30px;}
.hk-filter-ic svg{width:30px;height:30px;display:block;}
.hk-cat-ic{width:54px;height:54px;}
.hk-cat-ic svg{width:54px;height:54px;}
.hk-cat-name-ic{width:26px;height:26px;}
.hk-cat-name-ic svg{width:26px;height:26px;}
.hk-filter-item{gap:10px;}
.hk-filter-item.is-active .hk-filter-ic svg circle{stroke-width:2.4;}
.hk-filter-item.is-active{background:rgba(95,143,43,.07);border-color:rgba(95,143,43,.22);}

/* Shop layout */
.hk-shop-layout{display:grid;grid-template-columns:300px 1fr;gap:14px;align-items:start;}
.hk-shop-layout.no-filter{grid-template-columns:1fr;}

.hk-filter{padding:14px;position:sticky;top:14px;}
.hk-filter h3{margin:0 0 10px;font-weight:950;}
.hk-filter-form label{display:block;font-weight:900;margin:10px 0 6px;}
.hk-filter-form input,.hk-filter-form select{
  width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--hk-border);
  background:#fff;color:var(--hk-text);
}

.hk-filter-group{margin-top:10px;}
.hk-filter-group__toggle{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  padding:10px 12px;border-radius:12px;border:1px solid var(--hk-border);
  background:rgba(2,6,23,.02);font-weight:950;cursor:pointer;
}
.hk-filter-group__chev{opacity:.65;font-size:14px;}
.hk-filter-group__body{padding-top:8px;}

.hk-filter-list{display:flex;flex-direction:column;gap:6px;}
.hk-filter-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 10px;border-radius:12px;
  border:1px solid transparent;
  text-decoration:none;color:var(--hk-text);
  background:rgba(2,6,23,.02);
}
.hk-filter-item:hover{background:rgba(2,6,23,.04);}
.hk-filter-item.is-active{background:#fff;border-color:rgba(15,23,42,.20);box-shadow:0 10px 22px rgba(2,6,23,.08);}
.hk-filter-txt{font-weight:900;}
.hk-price-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;}

/* Shop topbar */
.hk-products-wrap{padding:14px;}
.hk-shop-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
.hk-shop-count{font-weight:950;color:var(--hk-muted);}
.hk-shop-sort select{min-width:220px;}
.hk-sr-only{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}

/* Products grid */
.hk-products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.hk-product-card{position:relative;background:var(--hk-card);border:1px solid rgba(15,23,42,.14);border-radius:20px;overflow:hidden;box-shadow:0 10px 28px rgba(2,6,23,.06);transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;}
.hk-product-card:hover{transform:translateY(-2px);box-shadow:0 18px 46px rgba(2,6,23,.10);border-color:rgba(15,23,42,.20)}
.hk-product-thumb{display:block;padding:12px;background:rgba(2,6,23,.02);}
.hk-product-thumb img{width:100%;height:auto;border-radius:12px;}
.hk-product-body{padding:12px;}
.hk-product-title{margin:0 0 6px;font-size:15px;font-weight:950;line-height:1.25;}
.hk-product-title a{text-decoration:none;color:var(--hk-text);}
.hk-product-meta{display:flex;align-items:center;gap:10px;margin:0 0 8px;color:var(--hk-muted);font-weight:800;font-size:12.5px;}
.hk-product-meta-ic svg{width:22px;height:22px;display:block}
.hk-product-price{font-weight:950;margin-bottom:10px;}
.hk-product-badge{position:absolute;top:12px;left:12px;z-index:3;padding:6px 10px;border-radius:999px;font-weight:950;font-size:12px;letter-spacing:.2px;background:var(--hk-text);color:#fff;}
.hk-product-actions .button{border-radius:999px !important;font-weight:900 !important;background:var(--hk-text) !important;border-color:var(--hk-text) !important;}

/* WooCommerce product page (premium) */
.single-product .woocommerce div.product{
  max-width:1120px;
  margin:0 auto;
  padding:18px 14px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  align-items:start;
}
@media (max-width: 980px){
  .single-product .woocommerce div.product{grid-template-columns:1fr;
  }
}

/* Remove WooCommerce floats/widths so everything stays inside our boxes */
.single-product .woocommerce div.product div.images,
.single-product .woocommerce div.product div.summary{float:none;width:auto;}
.single-product .woocommerce div.product .woocommerce-product-gallery,
.single-product .woocommerce div.product .summary{width:100%;max-width:100%;}
.single-product .woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper{margin:0;}
.single-product .woocommerce div.product .woocommerce-product-gallery img{max-width:100%;height:auto;}
.single-product .woocommerce div.product .woocommerce-product-gallery{background:#fff;border:1px solid rgba(15,23,42,.12);border-radius:22px;padding:14px;box-shadow:0 10px 28px rgba(2,6,23,.06)}
.single-product .woocommerce div.product .summary{background:#fff;border:1px solid rgba(15,23,42,.12);border-radius:22px;padding:18px;box-shadow:0 10px 28px rgba(2,6,23,.06)}
.single-product .woocommerce div.product .product_title{font-weight:1000;letter-spacing:-.2px}
.single-product .woocommerce div.product .price{font-weight:1000}
.single-product .woocommerce div.product form.cart .single_add_to_cart_button{border-radius:999px;font-weight:950;background:var(--hk-text);border-color:var(--hk-text);padding:14px 18px}
.single-product .woocommerce div.product form.cart .quantity .qty{border-radius:14px;border:1px solid rgba(15,23,42,.18);padding:10px 12px}
.single-product .woocommerce div.product .woocommerce-tabs{margin-top:16px}
.single-product .woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin:0 0 10px;display:flex;gap:10px;flex-wrap:wrap}
.single-product .woocommerce div.product .woocommerce-tabs ul.tabs li{border:0;background:transparent;margin:0;padding:0}
.single-product .woocommerce div.product .woocommerce-tabs ul.tabs li a{display:inline-flex;padding:10px 14px;border-radius:999px;border:1px solid rgba(15,23,42,.14);font-weight:900;text-decoration:none;color:var(--hk-text);background:#fff}
.single-product .woocommerce div.product .woocommerce-tabs ul.tabs li.active a{background:rgba(2,6,23,.06)}

/* Tabs panel should also be a card (prevents content spilling outside) */
.single-product .woocommerce div.product .woocommerce-tabs .panel{
  background:#fff;
  border:1px solid rgba(15,23,42,.12);
  border-radius:22px;
  padding:18px;
  box-shadow:0 10px 28px rgba(2,6,23,.06);
  overflow:hidden;
}
.single-product .woocommerce div.product .woocommerce-tabs .panel > *:first-child{margin-top:0;}
.single-product .woocommerce div.product .woocommerce-tabs .panel > *:last-child{margin-bottom:0;}

/* Form elements on product page (variations etc.) should never overflow */
.single-product .woocommerce div.product form.cart{margin-top:14px;}
.single-product .woocommerce div.product form.cart table.variations{width:100%;}
.single-product .woocommerce div.product form.cart table.variations td{padding:8px 0;}
.single-product .woocommerce div.product form.cart table.variations select{
  width:100%;
  max-width:100%;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.18);
  padding:10px 12px;
}
.single-product .woocommerce div.product form.cart .reset_variations{display:inline-block;margin-top:6px;}
.single-product .woocommerce div.product form.cart .quantity{margin-right:10px;}
.single-product .woocommerce div.product form.cart .single_add_to_cart_button{max-width:100%;}
.hk-product-trust{max-width:1120px;margin:14px auto 0;padding:0 14px}
.hk-product-trust-card{padding:18px;border-radius:22px}
.hk-product-trust-title{margin:0 0 10px;font-size:18px;font-weight:1000}
.hk-product-trust-list{margin:0;padding-left:18px;color:var(--hk-muted);font-weight:800}
.hk-product-trust-list li{margin:6px 0}

/* Sticky add-to-cart */
.hk-sticky-atc{position:fixed;left:0;right:0;bottom:0;z-index:99998;padding:10px 12px;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(10px);border-top:1px solid rgba(15,23,42,.14);transform:translateY(110%);transition:transform .18s ease}
.hk-sticky-atc.is-visible{transform:translateY(0)}
.hk-sticky-atc__inner{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.hk-sticky-atc__price{font-weight:1000}
.hk-sticky-atc__btn{border:0;border-radius:999px;padding:12px 16px;font-weight:950;background:var(--hk-text);color:#fff}
@media (min-width: 980px){
  .hk-sticky-atc{display:none}
}

/* Pagination */
.hk-pagination{margin-top:14px;}
.hk-pagination ul{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap;}
.hk-pagination li{margin:0;}
.hk-pagination a,.hk-pagination span{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 12px;border-radius:999px;
  border:1px solid var(--hk-border);
  background:#fff;text-decoration:none;color:var(--hk-text);
  font-weight:900;
}
.hk-pagination .current{background:rgba(2,6,23,.06);}

/* Footer */
.hk-footer{margin-top:22px;}
.hk-footer-inner{padding:18px 16px;}

.hk-footer-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
@media (max-width:900px){.hk-footer-cols{grid-template-columns:1fr;}}

.hk-footer-bottom{margin-top:18px;padding-top:14px;border-top:1px solid rgba(0,0,0,.08);font-size:13px;color:rgba(0,0,0,.65);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.hk-footer-bottom-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.hk-footer-terms{font-size:13px;text-decoration:none;}
.hk-footer-terms:hover{text-decoration:underline;}
.hk-footer-socials{display:flex;align-items:center;gap:10px;}
.hk-footer-social{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:999px;border:1px solid rgba(0,0,0,.12);color:rgba(0,0,0,.75);text-decoration:none;transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;}
.hk-footer-social:hover{transform:translateY(-1px);border-color:rgba(0,0,0,.22);box-shadow:0 6px 16px rgba(0,0,0,.08);}
.hk-footer-social svg{display:block;}

/* Responsive */
@media (max-width: 980px){
  .hk-products-grid{grid-template-columns:repeat(2,1fr);}
  .hk-shop-layout{grid-template-columns:1fr;}
  .hk-filter{position:relative;top:auto;}
}
@media (max-width: 720px){
  .hk-nav{display:none;}
  .hk-burger{display:inline-flex;align-items:center;justify-content:center;}
  .hk-grid-3{grid-template-columns:1fr;}
  .hk-products-grid{grid-template-columns:1fr;}
  .hk-shop-topbar{flex-direction:column;align-items:stretch;}
  .hk-shop-sort select{width:100%;}
}

/* Floating WhatsApp button (premium, monochrome) */
.hk-wa{
  position:fixed;right:18px;bottom:18px;z-index:99999;
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 14px;border-radius:999px;
  background:#fff;color:var(--hk-text);
  border:1px solid rgba(15,23,42,.22);
  box-shadow:0 18px 55px rgba(2,6,23,.18);
  text-decoration:none;font-weight:950;
}
.hk-wa:hover{transform:translateY(-1px);box-shadow:0 26px 70px rgba(2,6,23,.22);}
.hk-wa svg{display:block;}
@media (max-width: 720px){
  .hk-wa span{display:none;}
  .hk-wa{padding:12px;border-radius:999px;}
}


/* Contact support (premium, no duplicate footer look) */
.hk-contact-support__items{display:grid;gap:10px;margin-top:10px}
.hk-support-item{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid rgba(15,23,42,.14);border-radius:16px;background:#fff;text-decoration:none;color:var(--hk-text);transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
.hk-support-item:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(2,6,23,.08);border-color:rgba(15,23,42,.22)}
.hk-support-ic{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:#fff;border:1px solid rgba(15,23,42,.22);flex:0 0 auto}
.hk-support-ic svg{width:22px;height:22px;display:block}
.hk-support-txt{display:flex;flex-direction:column;gap:2px}
.hk-contact-support__meta{margin-top:10px}


.hk-shop-topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.hk-shop-sort select,.hk-shop-perpage select{padding:10px 12px;border:1px solid var(--hk-border);border-radius:12px;background:#fff;}


/* Contact (premium) */
.hk-container{max-width:1120px;margin:0 auto;padding:0 14px;}
.hk-contact-header{padding:22px 22px 18px;margin-bottom:16px;}
.hk-lead{color:var(--hk-muted);font-size:16px;line-height:1.55;margin:10px 0 0;}
.hk-contact-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
.hk-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;border:1px solid var(--hk-border);background:rgba(255,255,255,.7);color:var(--hk-text);text-decoration:none;font-weight:600;font-size:14px;}
.hk-chip:hover{box-shadow:0 8px 22px rgba(2,6,23,.08);}
.hk-contact-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:16px;align-items:start;}
.hk-contact-grid--single{grid-template-columns:1fr;}
@media (max-width:900px){.hk-contact-grid{grid-template-columns:1fr;}}
.hk-contact-form{padding:22px;}
.hk-contact-info{padding:22px;}
.hk-form{display:grid;gap:12px;margin-top:12px;}
.hk-field label{display:block;font-weight:700;margin-bottom:6px;}
.hk-field input,.hk-field textarea{
  width:100%;padding:12px 12px;border-radius:12px;border:1px solid var(--hk-border);
  background:#fff;color:var(--hk-text);font-size:15px;
}
.hk-field input:focus,.hk-field textarea:focus{outline:2px solid rgba(95,143,43,.25);border-color:rgba(95,143,43,.45);}
.hk-actions{margin-top:6px;}
.hk-alert{border-radius:14px;padding:12px 14px;border:1px solid var(--hk-border);margin:10px 0;}
.hk-alert-success{background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.25);}
.hk-alert-error{background:rgba(239,68,68,.06);border-color:rgba(239,68,68,.2);}
.hk-info-block{white-space:normal;color:var(--hk-text);line-height:1.6;}
.hk-info-row{margin-top:10px;color:var(--hk-text);}
.hk-muted{margin-top:10px;color:var(--hk-muted);font-size:14px;}
.hk-btn-full{width:100%;justify-content:center;margin-top:14px;}

@media (min-width: 721px){
  .hk-burger{display:none !important;}
  .hk-mobile-drawer{display:none !important;}
  .hk-nav{display:flex !important;}
}

/* Product extras (bewaaradvies/samenstelling/analyse) */
.hk-product-extras{margin:14px auto 0;max-width:1120px;padding:0 14px;}
.hk-product-extras__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.hk-product-extra{padding:16px 16px;}
.hk-product-extra__title{margin:0 0 8px;font-size:16px;font-weight:950;letter-spacing:-.1px;}
.hk-product-extra__intro{margin:0 0 10px;color:var(--hk-muted);font-weight:700;}
.hk-product-extra__list{margin:0;padding-left:18px;color:var(--hk-muted);line-height:1.6;font-weight:700;}
.hk-product-extra__text{color:var(--hk-muted);line-height:1.7;font-weight:700;}
.hk-product-extra__note{margin:0 0 10px;color:var(--hk-text);font-weight:800;}
@media (max-width: 980px){.hk-product-extras__grid{grid-template-columns:1fr;}}


/* Extras inside Description tab */
.hk-desc-extras{margin-top:18px;}
.hk-desc-extras__block{padding-top:16px;margin-top:16px;border-top:1px solid rgba(0,0,0,.08);} 
.hk-desc-extras__title{margin:0 0 8px;font-size:18px;line-height:1.2;}
.hk-desc-extras__intro{margin:0 0 10px;opacity:.85;}
.hk-desc-extras__note{margin:0 0 10px;}
.hk-desc-extras__list{margin:0;padding-left:18px;}
.hk-desc-extras__list li{margin:6px 0;}


/* === Home categorie grid: instelbare kolommen === */
.hk-cat-grid{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(var(--hk-cat-cols-desktop,4),1fr) !important;
}
@media (max-width: 980px){
  .hk-cat-grid{
    grid-template-columns:repeat(var(--hk-cat-cols-mobile,2),1fr) !important;
  }
}