/*
Theme Name: CabinFly
Theme URI: https://handbagage.eu
Author: ESKA / handbagage.eu
Description: Premium block-thema voor handbagage.eu — reisgericht, helder en conversie-gedreven. Met ingebouwde ondersteuning voor de Handbagage Tools (bagage-checker).
Version: 0.23.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: cabinfly
*/

:root{
  --hb-navy:#0E2A47; --hb-sky:#1E88C7; --hb-ink:#16202A; --hb-cloud:#fff;
  --hb-haze:#EEF2F6; --hb-line:#E2E8EE; --hb-muted:#5B6B7B; --hb-free:#1C8A4D;
}

body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* ---------- HERO ---------- */
.hb-hero{
  position:relative; overflow:hidden;
  background:var(--hb-navy);
  background-image:linear-gradient(115deg,#0a2440 0%,#0E2A47 45%,#185a8f 100%);
  color:#eaf1f8;
}
.hb-hero > *{ position:relative; z-index:2; }
.hb-hero h1{ color:#fff !important; max-width:14ch; }
.hb-hero .hb-eyebrow{ color:#7ec2ec; }
.hb-hero p{ color:#c2d4e6; }
.hb-hero::after{
  content:""; position:absolute; right:-8%; top:-20%; width:46%; height:140%;
  background:radial-gradient(closest-side, rgba(30,136,199,.45), transparent 70%);
  z-index:1; pointer-events:none;
}
@media(min-width:900px){
  .hb-hero.has-figure{ display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:3rem; }
}
.hb-hero__figure img{ width:100%; height:auto; border-radius:18px; display:block;
  box-shadow:0 30px 70px rgba(0,0,0,.35); }

/* ---------- EYEBROW / SECTION HEADERS ---------- */
.hb-eyebrow{
  text-transform:uppercase; letter-spacing:.16em; font-size:.78rem;
  font-weight:600; color:var(--hb-sky); margin-bottom:.6rem;
}

/* ---------- USP STRIP ---------- */
.hb-usp{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem 1.5rem; }
@media(max-width:780px){ .hb-usp{ grid-template-columns:repeat(2,1fr); } }
.hb-usp__item{ display:flex; flex-direction:column; align-items:center; text-align:center;
  font-size:.95rem; color:var(--hb-ink); }
.hb-usp__ico{ width:54px; height:54px; display:block; margin-bottom:.9rem; transition:transform .2s ease; }
.hb-usp__item:hover .hb-usp__ico{ transform:translateY(-3px) scale(1.05); }
.hb-usp__item strong{ display:block; font-weight:600; color:var(--hb-navy); margin-bottom:.2rem; }
.hb-usp__item span{ color:var(--hb-muted); line-height:1.45; }

/* ---------- DECORATIEVE ORNAMENTEN ---------- */
.hb-orn{ margin:0 auto; line-height:0; }
.hb-orn img, .hb-orn__svg{ display:block; width:100%; height:auto; }
.hb-orn--clouds{ max-width:220px; margin:0 auto 1.3rem; }
.hb-orn--tag{ max-width:78px; margin:0 auto 1.1rem; }

/* ---------- SECTION RHYTHM ---------- */
.hb-band{ background:var(--hb-haze); }
.hb-section-head{ max-width:62ch; margin-left:auto !important; margin-right:auto !important; text-align:center; }
.hb-section-head p{ color:var(--hb-muted); }

/* =====================================================================
   WOOCOMMERCE — premium productgrid (loop)
   ===================================================================== */
.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.75rem; margin:0; padding:0; list-style:none;
}
/* WooCommerce clearfix-pseudo's worden anders grid-items en duwen de eerste kaart weg */
ul.products::before,
ul.products::after{ content:none !important; display:none !important; }
@media(max-width:1024px){ .woocommerce ul.products, ul.products{ grid-template-columns:repeat(3,1fr) !important; } }
@media(max-width:780px){ .woocommerce ul.products, ul.products{ grid-template-columns:repeat(2,1fr) !important; gap:1rem !important; } }
@media(max-width:440px){ .woocommerce ul.products, ul.products{ grid-template-columns:repeat(2,1fr) !important; gap:.75rem !important; } }
/* knoptekst niet afkappen op smal */
@media(max-width:480px){ ul.products li.product .button{ font-size:.82rem; padding:.6rem .5rem; margin:.7rem .6rem 1rem; } ul.products li.product .woocommerce-loop-product__title{ font-size:.9rem; padding:.7rem .7rem .2rem; } ul.products li.product .price{ padding:0 .7rem; } }

ul.products li.product{
  width:auto !important; margin:0 !important; float:none !important;
  background:var(--hb-cloud); border:1px solid var(--hb-line);
  border-radius:16px; overflow:hidden; display:flex; flex-direction:column;
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
ul.products li.product:hover{
  box-shadow:0 18px 40px rgba(14,42,71,.12); transform:translateY(-3px);
  border-color:#cfdbe6;
}
ul.products li.product a{ text-decoration:none; color:inherit; }
ul.products li.product .attachment-woocommerce_thumbnail,
ul.products li.product img{
  width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
  background:var(--hb-haze); margin:0; display:block;
}
ul.products li.product .woocommerce-loop-product__title{
  font-family:'Bricolage Grotesque',Inter,sans-serif;
  font-size:1rem; font-weight:500; color:var(--hb-navy);
  line-height:1.25; padding:1rem 1.1rem .25rem; letter-spacing:-.01em;
}
ul.products li.product .price{
  display:block; padding:0 1.1rem; color:var(--hb-ink); font-weight:600; font-size:1.05rem;
}
ul.products li.product .price del{ color:var(--hb-muted); font-weight:400; margin-right:.4rem; }
ul.products li.product .price ins{ text-decoration:none; }
/* Kleur-swatches op de kaart */
.hb-swatches{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:.2rem 1.1rem .1rem;
}
.hb-swatch{
  width:15px; height:15px; border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18), 0 0 0 2px #fff;
  display:inline-block; flex:0 0 auto;
}
.hb-swatches__label{
  font-size:.78rem; color:var(--hb-muted); font-weight:500; margin-left:2px;
}
ul.products li.product .button{
  margin:.9rem 1.1rem 1.2rem; padding:.7rem 1rem; border-radius:8px;
  background:var(--hb-navy); color:#fff; font-weight:500; font-size:.92rem;
  text-align:center; transition:background .15s ease; border:0;
}
ul.products li.product .button:hover{ background:var(--hb-sky); }
ul.products li.product .onsale{
  position:absolute; margin:.7rem; background:var(--hb-free); color:#fff;
  border-radius:999px; padding:.2rem .7rem; font-size:.72rem; font-weight:600; min-height:0; line-height:1.6;
}
ul.products li.product{ position:relative; }

/* shop header / breadcrumb / result count */
.woocommerce-products-header{ padding-top:1rem; }
.woocommerce-products-header__title{ font-family:'Bricolage Grotesque',Inter,sans-serif; color:var(--hb-navy); }
.woocommerce .woocommerce-result-count{ color:var(--hb-muted); }
.woocommerce .woocommerce-ordering select{
  border:1px solid var(--hb-line); border-radius:8px; padding:.5rem .7rem; background:#fff;
}

/* =====================================================================
   WOOCOMMERCE — single product
   ===================================================================== */
.single-product .product div.images img{ border-radius:16px; }
.single-product .product .product_title{
  font-family:'Bricolage Grotesque',Inter,sans-serif; color:var(--hb-navy); letter-spacing:-.02em;
}
.single-product .product p.price,
.single-product .product span.price{ color:var(--hb-ink); font-weight:600; }
.single-product .product .single_add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
  background:var(--hb-navy); color:#fff; border-radius:8px; font-weight:500;
  padding:.85rem 1.6rem; transition:background .15s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.single-product .product .single_add_to_cart_button:hover{ background:var(--hb-sky); }
.woocommerce table.shop_attributes th{ color:var(--hb-navy); }

/* form fields (cart/checkout/variations) */
.woocommerce form .form-row input.input-text,
.woocommerce select,
.woocommerce .quantity input{
  border:1px solid var(--hb-line); border-radius:8px; padding:.6rem .8rem; background:#fff;
}

/* ---------- FOOTER links ---------- */
.wp-block-group.has-navy-background-color a{ color:#bcd4ea; }

/* =====================================================================
   MOTION — vliegtuig, hero-entree, scroll-reveal, hovers
   ===================================================================== */
.hb-hero > .hb-flight{ z-index:3; }
.hb-flight{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.hb-flight svg{ width:100%; height:100%; display:block; }
.hb-flight .route{ stroke-dasharray:1; stroke-dashoffset:1; opacity:.5; }
.hb-flight .plane{ filter:drop-shadow(0 5px 10px rgba(0,0,0,.3)); opacity:0; }

/* scroll-reveal (alleen verbergen als JS aanwezig is) */
.hb-js .hb-reveal{ opacity:0; transform:translateY(26px); }
.hb-reveal{ transition:opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1); }
.hb-reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: no-preference){
  /* contrail tekent zich + vliegtuig vliegt langs het pad */
  .hb-flight .route{ animation:hbDraw 5.5s ease-in-out .4s forwards; }
  .hb-flight .plane{ animation:hbPlaneIn .5s ease .4s forwards; }
  @keyframes hbDraw{ to{ stroke-dashoffset:0 } }
  @keyframes hbPlaneIn{ to{ opacity:1 } }

  /* hero-entree gestaffeld */
  .hb-hero .wp-block-column > *{ opacity:0; animation:hbUp .8s cubic-bezier(.16,1,.3,1) forwards; }
  .hb-hero .wp-block-column:first-child > *:nth-child(1){ animation-delay:.2s }
  .hb-hero .wp-block-column:first-child > *:nth-child(2){ animation-delay:.34s }
  .hb-hero .wp-block-column:first-child > *:nth-child(3){ animation-delay:.48s }
  .hb-hero .wp-block-column:first-child > *:nth-child(4){ animation-delay:.62s }
  .hb-hero .wp-block-column:last-child > *{ animation-delay:.8s }
  @keyframes hbUp{ from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
}

/* veilig onder reduced-motion: alles direct zichtbaar */
@media (prefers-reduced-motion: reduce){
  .hb-reveal{ opacity:1 !important; transform:none !important; transition:none; }
  .hb-flight{ display:none; }
}

/* product-afbeelding zoomt subtiel op hover */
ul.products li.product a img{ transition:transform .55s cubic-bezier(.16,1,.3,1); }
ul.products li.product:hover a img{ transform:scale(1.06); }

/* knop-feedback */
.wp-element-button{ transition:background .15s ease, transform .12s ease; }
.wp-element-button:active{ transform:translateY(1px); }

/* product-tilt vloeiend */
ul.products li.product{ transform-style:preserve-3d; }

/* ---------- STATS BAND (tellers) ---------- */
.hb-band-dark{ background:var(--hb-navy); color:#dbe7f2; }
.hb-band-dark h2{ color:#fff; }
.hb-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center; }
@media(max-width:780px){ .hb-stats{ grid-template-columns:repeat(2,1fr); gap:2.2rem; } }
.hb-stat .hb-count{
  display:block; font-family:'Bricolage Grotesque',Inter,sans-serif;
  font-size:clamp(2.4rem,5vw,3.4rem); font-weight:600; color:#fff; line-height:1; letter-spacing:-.02em;
}
.hb-stat em{ display:block; margin-top:.5rem; font-style:normal; color:#9fb6cc; font-size:.95rem; }

/* ---------- HERO ACHTERGRONDFOTO + PARALLAX ---------- */
.hb-hero{ --hb-par:0px; }
.hb-hero.has-photo{ background-image:none; --hb-hero-img:url('assets/hero.jpg'); }
.hb-hero.has-photo::before{
  content:""; position:absolute; inset:-12% 0; z-index:0;
  background-image:var(--hb-hero-img); background-size:cover; background-position:center 35%;
  transform:translateY(var(--hb-par)); will-change:transform;
}
.hb-hero.has-photo::after{
  content:""; position:absolute; inset:0; left:0; top:0; right:auto; width:100%; height:100%; z-index:1;
  background:linear-gradient(90deg, rgba(7,18,33,.9) 0%, rgba(7,18,33,.62) 46%, rgba(7,18,33,.18) 100%);
  pointer-events:none;
}

/* ---------- INTRO (vliegtuig vliegt over, pagina verschijnt) ---------- */
.hb-intro{
  position:fixed; inset:0; z-index:99999; overflow:hidden;
  background:#0E2A47 url('assets/hero.jpg') center 35% / cover no-repeat;
  animation:hbIntroOut .7s cubic-bezier(.7,0,.25,1) 1.95s forwards;
}
.hb-intro::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,18,33,.32), rgba(7,18,33,.58)); }
.hb-intro__plane{
  position:absolute; top:42%; left:0; width:clamp(180px,34vw,380px); z-index:2; will-change:transform; line-height:0;
  animation:hbIntroFly 2.05s cubic-bezier(.5,0,.5,1) forwards;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.5));
}
.hb-intro__plane svg{ display:block; width:100%; height:auto; }
@keyframes hbIntroFly{
  0%{ transform:translate(-70vw,-8%) rotate(-2deg); opacity:0; }
  14%{ opacity:1; }
  100%{ transform:translate(132vw,-72%) rotate(-8deg); opacity:1; }
}
@keyframes hbIntroOut{ to{ transform:translateY(-100%); } }
@media (prefers-reduced-motion: reduce){ .hb-intro{ display:none !important; } }

/* ---------- VIERKANTE PRODUCTAFBEELDINGEN — heel beeld, niet bijgesneden ---------- */
ul.products li.product img,
ul.products li.product .attachment-woocommerce_thumbnail{
  aspect-ratio:1/1 !important; object-fit:contain !important; width:100% !important; height:auto !important;
  background:#fff;
}
.single-product div.images img,
.single-product .woocommerce-product-gallery__image img,
.single-product .wp-block-woocommerce-product-image-gallery img{
  aspect-ratio:1/1 !important; object-fit:contain !important; width:100% !important; height:auto !important;
  background:#fff; border-radius:14px;
}
.single-product .flex-control-thumbs img{
  aspect-ratio:1/1 !important; object-fit:contain !important; width:100% !important; height:auto !important;
  background:#fff; border-radius:8px;
}
/* variatie-galerij plugin (woo-variation-gallery) — ook heel beeld in vierkant */
.hb-sp-gallery img,
.woo-variation-gallery img,
.wvg-gallery-image img,
.wvg-gallery img{
  aspect-ratio:1/1 !important; object-fit:contain !important; width:100% !important; height:auto !important;
  background:#fff;
}
.hb-sp-gallery .wvg-gallery-image img{ border-radius:14px; }
.hb-sp-gallery .wvg-gallery-thumbnail img{ border-radius:8px; }
/* variatie-galerij vult de hele linkerkolom (foto gecentreerd, niet naar links) */
.hb-sp-gallery .woo-variation-product-gallery,
.hb-sp-gallery .woo-variation-gallery-wrapper,
.hb-sp-gallery .woo-variation-gallery-container,
.hb-sp-gallery .woo-variation-gallery-slider-wrapper,
.hb-sp-gallery .woo-variation-gallery-slider{
  width:100% !important; max-width:100% !important; float:none !important; margin-left:0 !important; margin-right:0 !important;
}
.hb-sp-gallery .woo-variation-gallery-image,
.hb-sp-gallery .woo-variation-gallery-image img{
  width:100% !important; max-width:100% !important; margin:0 auto !important; display:block; }

/* ====================================================================
   v0.19 — SCHONE, GECENTREERDE SUBPAGINA-LAYOUT
   Content gecentreerd op de contentSize van het template (page 820px,
   blog 800px). GEEN breedte-/uitlijn-hacks — de constrained layout van
   WordPress regelt het centreren. Zo blijft elke pagina consistent.
   ==================================================================== */
.hb-page > .wp-block-post-title{
  font-family:'Bricolage Grotesque',Inter,sans-serif !important; color:var(--hb-navy);
  font-size:clamp(1.9rem,3.6vw,2.5rem); letter-spacing:-.02em; line-height:1.12; margin:0 0 1.6rem;
}
.hb-page .wp-block-post-content > h2{
  font-family:'Bricolage Grotesque',Inter,sans-serif; color:var(--hb-navy);
  font-size:clamp(1.4rem,2.6vw,1.8rem); margin-top:2.2rem; letter-spacing:-.01em;
}
.hb-page .wp-block-post-content > h3{ color:var(--hb-navy); }
.hb-page .wp-block-post-content > p,
.hb-page .wp-block-post-content > ul,
.hb-page .wp-block-post-content > ol{ color:var(--hb-ink); line-height:1.75; font-size:1.05rem; }
.hb-single .hb-article img{ border-radius:14px; height:auto; }
/* checker- en landing-kaartjes ook vierkant en heel */
.hb-card img,
.hb-landing__card img{ aspect-ratio:1/1 !important; object-fit:contain !important; background:#fff; }

/* ---------- GEEN HORIZONTAAL SCROLLEN OP MOBIEL ---------- */
html, body{ overflow-x:clip; max-width:100%; }
.wp-site-blocks, .hb-single-product, main.wp-block-group{ overflow-x:clip; }
img{ max-width:100%; height:auto; }
.wp-block-columns{ margin-left:auto; margin-right:auto; }

/* ---------- MOBIEL: hero leesbaar EN kleurrijk houden ---------- */
@media(max-width:781px){
  .hb-hero{ padding-top:3rem !important; padding-bottom:3.5rem !important; }
  .hb-hero.has-photo::after{
    background:linear-gradient(180deg, rgba(7,18,33,.5) 0%, rgba(7,18,33,.4) 50%, rgba(7,18,33,.78) 100%);
  }
  .hb-hero h1{ max-width:none; }
  .hb-tool{ margin-top:1.5rem; }
}

/* ---------- HOE HET WERKT (stappen) ---------- */
.hb-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.25rem; }
@media(max-width:781px){ .hb-steps{ grid-template-columns:1fr; gap:1.75rem; } }
.hb-step__n{
  display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px;
  border-radius:50%; background:var(--hb-sky); color:#fff; font-weight:600;
  font-family:'Bricolage Grotesque',Inter,sans-serif; font-size:1.25rem; margin-bottom:1rem;
}
.hb-step__ico{ width:60px; height:60px; display:block; margin-bottom:.9rem; transition:transform .2s ease; }
.hb-step:hover .hb-step__ico{ transform:translateY(-3px) scale(1.05); }
.hb-step__num{ display:block; text-transform:uppercase; letter-spacing:.14em; font-size:.72rem;
  font-weight:600; color:var(--hb-sky); margin-bottom:.25rem; }
.hb-step h3{ margin:.1rem 0 .45rem; color:var(--hb-navy); font-size:1.2rem; }
.hb-step p{ color:var(--hb-muted); margin:0; }

/* ---------- BLOG-KAARTEN (query loop) ---------- */
.hb-bloglist{ display:grid !important; grid-template-columns:repeat(3,1fr); gap:1.75rem; list-style:none; margin:0; padding:0; }
@media(max-width:1024px){ .hb-bloglist{ grid-template-columns:repeat(2,1fr) !important; } }
@media(max-width:640px){ .hb-bloglist{ grid-template-columns:1fr !important; } }
.hb-bloglist > li{
  background:#fff; border:1px solid var(--hb-line); border-radius:16px; overflow:hidden;
  margin:0 !important; display:flex; flex-direction:column; transition:box-shadow .18s ease, transform .18s ease;
}
.hb-bloglist > li:hover{ box-shadow:0 18px 40px rgba(14,42,71,.12); transform:translateY(-3px); }
.hb-bloglist .wp-block-post-featured-image{ margin:0; }
.hb-bloglist .wp-block-post-featured-image img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:var(--hb-haze); }
.hb-bloglist .wp-block-post-title{
  font-family:'Bricolage Grotesque',Inter,sans-serif; color:var(--hb-navy);
  font-size:1.1rem; font-weight:500; line-height:1.28; padding:1.1rem 1.2rem .25rem; margin:0;
}
.hb-bloglist .wp-block-post-title a{ color:inherit; text-decoration:none; }
.hb-bloglist .wp-block-post-date{ color:var(--hb-muted); font-size:.78rem; padding:0 1.2rem; margin:0; }
.hb-bloglist .wp-block-post-excerpt{ color:var(--hb-muted); font-size:.93rem; line-height:1.55; padding:.5rem 1.2rem 1.3rem; margin:0; }
.hb-bloglist .wp-block-post-excerpt p{ margin:0; }
.hb-bloglist .wp-block-post-excerpt__more-text{ display:none; }

/* ---------- SINGLE POST (artikel) ---------- */
.hb-single .wp-block-post-title{ font-size:clamp(2rem,4.2vw,2.9rem); line-height:1.08; color:var(--hb-navy); letter-spacing:-.02em; }
.hb-single .hb-eyebrow{ margin-bottom:.4rem; }
.hb-single .wp-block-post-featured-image img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:18px; display:block; }
.hb-article{ font-size:1.08rem; line-height:1.78; color:var(--hb-ink); }
.hb-article h2{ font-family:'Bricolage Grotesque',Inter,sans-serif; font-size:clamp(1.4rem,2.6vw,1.7rem); margin:2.4rem 0 .6rem; color:var(--hb-navy); letter-spacing:-.01em; }
.hb-article h3{ font-family:'Bricolage Grotesque',Inter,sans-serif; font-size:1.25rem; margin:1.9rem 0 .4rem; color:var(--hb-navy); }
.hb-article p{ margin:1.1rem 0; }
.hb-article ul,.hb-article ol{ margin:1.1rem 0; padding-left:1.4rem; }
.hb-article li{ margin:.45rem 0; }
.hb-article a{ color:var(--hb-sky); text-decoration:underline; text-underline-offset:2px; }
.hb-article strong{ color:var(--hb-navy); }
.hb-article img{ border-radius:14px; height:auto; margin:1.6rem 0; }
.hb-postcta h2{ color:#fff; font-size:1.5rem; }
.hb-postcta p{ color:#cfe0ef; }

/* ====================================================================
   v0.6 — WINKEL, PRODUCT, SWATCHES, VERTROUWEN, FOOTER
   ==================================================================== */

/* ---------- WINKEL intro-header ---------- */
.hb-shop-intro{ max-width:760px; margin:0 auto 2.5rem; text-align:center; }
.hb-shop-intro h1{ font-family:'Bricolage Grotesque',Inter,sans-serif; color:var(--hb-navy);
  font-size:clamp(2rem,4.5vw,3rem); line-height:1.05; letter-spacing:-.02em; margin:.1rem 0 .7rem; }
.hb-shop-sub{ color:var(--hb-muted); font-size:1.08rem; line-height:1.6; max-width:62ch; }
.woocommerce .woocommerce-result-count{ color:var(--hb-muted); font-size:.9rem; }
.woocommerce .woocommerce-ordering select{ border:1px solid var(--hb-line); border-radius:10px;
  padding:.5rem 2rem .5rem .75rem; color:var(--hb-ink); background:#fff; font-size:.9rem; }

/* ---------- KLEUR-SWATCHES (woo-variation-swatches) ---------- */
.woo-variation-swatches .variable-items-wrapper{ gap:.5rem; margin:.35rem 0 .2rem; }
.woo-variation-swatches .variable-item:not(.radio-variable-item){
  width:34px; height:34px; border-radius:50%; box-shadow:none;
  border:2px solid var(--hb-line); padding:0; transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease; }
.woo-variation-swatches .variable-item:not(.radio-variable-item) .variable-item-span{
  border-radius:50%; width:100%; height:100%; }
.woo-variation-swatches .variable-item:not(.radio-variable-item):hover{ transform:translateY(-1px); border-color:var(--hb-sky); }
.woo-variation-swatches .variable-item.selected,
.woo-variation-swatches .variable-item[aria-checked="true"]{
  border-color:var(--hb-navy) !important; box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--hb-navy) !important; }
.hb-swatch-label{ display:block; font-size:.82rem; color:var(--hb-muted); margin:.1rem 0 .35rem; }
table.variations .label label{ color:var(--hb-navy); font-weight:600; }
.woocommerce-variation-add-to-cart .reset_variations{ color:var(--hb-muted); }

/* ---------- SINGLE PRODUCT layout ---------- */
.single-product div.product{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:3rem; align-items:start; }
@media(max-width:880px){ .single-product div.product{ grid-template-columns:1fr; gap:1.75rem; } }
.single-product .woocommerce-product-gallery{ margin:0 !important; position:sticky; top:1.5rem; }
.single-product .woocommerce-product-gallery img{ border-radius:16px; }
.single-product div.product .product_title{
  font-family:'Bricolage Grotesque',Inter,sans-serif; color:var(--hb-navy);
  font-size:clamp(1.6rem,3.2vw,2.2rem); line-height:1.12; letter-spacing:-.015em; margin:.2rem 0 .6rem; }
.single-product .price,
.single-product div.product p.price,
.single-product div.product span.price{ color:var(--hb-navy) !important; font-size:1.7rem !important; font-weight:600; }
.single-product .price del{ color:var(--hb-muted); font-weight:400; font-size:1.1rem; }
.single-product .price ins{ text-decoration:none; }
.single-product .woocommerce-product-details__short-description{ color:var(--hb-ink); line-height:1.65; font-size:1.02rem; }
.single-product div.product form.cart{ margin:1.5rem 0 1rem; }
.single-product .single_add_to_cart_button.button{
  background:var(--hb-sky) !important; color:#fff !important; border-radius:12px !important;
  font-weight:600 !important; padding:.95em 2em !important; font-size:1.02rem !important;
  box-shadow:0 10px 24px rgba(30,136,199,.28); transition:transform .14s ease, box-shadow .14s ease, background .14s ease; }
.single-product .single_add_to_cart_button.button:hover{ background:#1576ad !important; transform:translateY(-1px); box-shadow:0 14px 30px rgba(30,136,199,.34); }
.single-product .quantity input.qty{ border:1px solid var(--hb-line); border-radius:10px; padding:.6rem .4rem; }
.single-product .product_meta{ color:var(--hb-muted); font-size:.85rem; border-top:1px solid var(--hb-line); padding-top:1rem; margin-top:.5rem; }
.single-product .product_meta a{ color:var(--hb-sky); }

/* product tabs */
.woocommerce-tabs{ grid-column:1 / -1; margin-top:1rem; }
.woocommerce-tabs ul.tabs{ border-bottom:1px solid var(--hb-line); padding:0 0 .2rem; margin:0 0 1.5rem; }
.woocommerce-tabs ul.tabs li{ background:none; border:none; border-radius:0; margin:0 1.4rem 0 0; padding:.4rem 0; }
.woocommerce-tabs ul.tabs li.active{ border-bottom:2px solid var(--hb-navy); }
.woocommerce-tabs ul.tabs li a{ color:var(--hb-muted); font-weight:500; padding:0 !important; }
.woocommerce-tabs ul.tabs li.active a{ color:var(--hb-navy); }
.woocommerce-tabs ul.tabs::before{ display:none; }

/* ---------- VERTROUWENSSIGNALEN onder add-to-cart ---------- */
ul.hb-trust{ list-style:none; display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; margin:1.1rem 0 0; padding:1rem 0 0; border-top:1px solid var(--hb-line); }
ul.hb-trust li{ display:flex; flex-direction:column; font-size:.82rem; color:var(--hb-muted); line-height:1.25; padding-left:1.3rem; position:relative; }
ul.hb-trust li::before{ content:""; position:absolute; left:0; top:.15rem; width:15px; height:15px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C8A4D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
ul.hb-trust strong{ color:var(--hb-navy); font-weight:600; font-size:.88rem; }

/* ---------- PRODUCT-FIT (bij welke maatschappijen) ---------- */
.hb-prodfit{ grid-column:1 / -1; margin:2.5rem 0 0; padding:2rem; background:var(--hb-haze);
  border:1px solid var(--hb-line); border-radius:18px; }
.hb-prodfit__title{ font-family:'Bricolage Grotesque',Inter,sans-serif; color:var(--hb-navy);
  font-size:clamp(1.3rem,2.6vw,1.7rem); margin:0 0 .4rem; letter-spacing:-.01em; }
.hb-prodfit__sub{ color:var(--hb-muted); margin:0 0 1.3rem; max-width:70ch; line-height:1.6; }
.hb-prodfit__sub strong{ color:var(--hb-navy); }
.hb-prodfit__grid{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:.6rem; }
.hb-prodfit__item{ display:flex; flex-direction:column; align-items:flex-start; gap:.55rem;
  background:#fff; border:1px solid var(--hb-line); border-radius:12px; padding:.75rem .9rem; font-size:.9rem; }
.hb-prodfit__al{ color:var(--hb-navy); font-weight:600; display:flex; align-items:center; gap:9px; width:100%; }
.hb-prodfit__al > span{ line-height:1.25; }
.hb-prodfit__logo{ width:22px; height:22px; border-radius:5px; object-fit:contain; flex:0 0 auto; opacity:.95;
  background:#fff; box-shadow:inset 0 0 0 1px var(--hb-line); }
.hb-prodfit__st{ font-size:.76rem; font-weight:600; padding:.24rem .6rem; border-radius:999px; white-space:nowrap; }
.hb-prodfit__item.is-free{ border-color:rgba(28,138,77,.35); }
.hb-prodfit__item.is-free .hb-prodfit__st{ background:rgba(28,138,77,.12); color:var(--hb-free); }
.hb-prodfit__item.is-cabin .hb-prodfit__st{ background:rgba(30,136,199,.12); color:var(--hb-sky); }
.hb-prodfit__item.is-no{ opacity:.6; }
.hb-prodfit__item.is-no .hb-prodfit__st{ background:#f0e2e2; color:#a23b3b; }
.hb-prodfit__note{ margin:1.3rem 0 0; font-size:.86rem; color:var(--hb-muted); }
.hb-prodfit__note a{ color:var(--hb-sky); font-weight:600; text-decoration:none; }

/* ---------- FOOTER (4 koloms) ---------- */
.hb-footer__cols{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:2.5rem; }
@media(max-width:900px){ .hb-footer__cols{ grid-template-columns:1fr 1fr; gap:2rem; } }
@media(max-width:520px){ .hb-footer__cols{ grid-template-columns:1fr; } }
.hb-footer h4{ font-family:'Bricolage Grotesque',Inter,sans-serif; font-size:.95rem; color:#fff;
  margin:0 0 .9rem; letter-spacing:.01em; }
.hb-footer a{ color:#bcd0e4; text-decoration:none; }
.hb-footer a:hover{ color:#fff; }
.hb-footer ul.hb-fnav{ list-style:none; margin:0; padding:0; }
.hb-footer ul.hb-fnav li{ margin:.45rem 0; font-size:.92rem; }
.hb-footer__brandtxt{ color:#bcd0e4; font-size:.92rem; line-height:1.6; max-width:34ch; }
.hb-pay{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem; }
.hb-pay span{ font-size:.7rem; font-weight:600; letter-spacing:.03em; color:#0E2A47; background:#dce7f1;
  padding:.28rem .5rem; border-radius:6px; }
.hb-footer__bottom{ border-top:1px solid rgba(255,255,255,.14); margin-top:2.4rem; padding-top:1.3rem;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.8rem; align-items:center; }
.hb-footer__bottom p{ margin:0; font-size:.8rem; color:#9fb6cc; }
.hb-footer__legal{ display:flex; flex-wrap:wrap; gap:1.2rem; font-size:.8rem; }

/* ====================================================================
   v0.7 — WINKELWAGEN & AFREKENEN (WooCommerce blocks) + KLEUR ONDER PRIJS
   ==================================================================== */

/* Kleurkeuze (swatches) staat nu direct onder de prijs — wat lucht eromheen */
.single-product table.variations{ margin:.4rem 0 1rem; }
.single-product table.variations td.label{ padding-right:1rem; }
.single-product .woocommerce-variation-price .price{ font-size:1.5rem !important; }
.single-product .woocommerce-product-details__short-description{ margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--hb-line); }

/* ---- Page headers cart/checkout ---- */
.woocommerce-cart .wp-block-post-title,
.woocommerce-checkout .wp-block-post-title,
.woocommerce-cart h1.entry-title,
.woocommerce-checkout h1.entry-title{
  font-family:'Bricolage Grotesque',Inter,sans-serif; color:var(--hb-navy);
  font-size:clamp(1.8rem,3.5vw,2.4rem); letter-spacing:-.02em; margin-bottom:1.5rem; }

/* ---- WC Blocks: typografie + kleuren in lijn met merk ---- */
.wc-block-components-title,
.wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-item__label,
.wc-block-checkout__main h2,
.wc-block-components-checkout-step__title{
  font-family:'Bricolage Grotesque',Inter,sans-serif !important; color:var(--hb-navy) !important; }
.wc-block-components-product-name{ color:var(--hb-navy); font-weight:600; }
.wc-block-cart-items__row .wc-block-components-product-metadata{ color:var(--hb-muted); }
.wc-block-components-totals-item__value,
.wc-block-formatted-money-amount{ color:var(--hb-navy); }

/* ---- Knoppen (checkout, plaats bestelling, terug winkelen) ---- */
.wc-block-components-button.contained,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button{
  background:var(--hb-sky) !important; color:#fff !important; border-radius:12px !important;
  font-weight:600 !important; box-shadow:0 10px 24px rgba(30,136,199,.26);
  transition:background .15s, transform .14s, box-shadow .14s; }
.wc-block-components-button.contained:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover{
  background:#1576ad !important; transform:translateY(-1px); box-shadow:0 14px 30px rgba(30,136,199,.32); }
.wc-block-components-button.outlined{
  border-radius:12px !important; border-color:var(--hb-sky) !important; color:var(--hb-sky) !important; }

/* ---- Order summary / sidebar als nette kaart ---- */
.wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block{
  background:var(--hb-haze); border:1px solid var(--hb-line); border-radius:18px; padding:1.5rem 1.6rem; }
.wc-block-components-totals-item{ padding:.35rem 0; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{ font-size:1.35rem; font-weight:700; }

/* ---- Formuliervelden checkout ---- */
.wc-block-components-text-input input,
.wc-block-components-text-input input.is-active,
.wc-block-components-select .wc-block-components-select__container,
.wc-blocks-components-select .wc-blocks-components-select__container{
  border-radius:10px !important; }
.wc-block-components-text-input input:focus{ box-shadow:0 0 0 2px rgba(30,136,199,.25) !important; }

/* ---- Order-received / bedankt (classic fallback) ---- */
.woocommerce-order .woocommerce-thankyou-order-received{
  font-family:'Bricolage Grotesque',Inter,sans-serif; color:var(--hb-free);
  font-size:1.5rem; font-weight:600; }
.woocommerce-order .woocommerce-order-overview{
  border:1px solid var(--hb-line); border-radius:16px; padding:1.25rem 1.5rem; background:var(--hb-haze); list-style:none; }
.woocommerce-order .woocommerce-order-overview li{ border:0; color:var(--hb-muted); }
.woocommerce-order .woocommerce-order-overview li strong{ color:var(--hb-navy); display:block; }

/* ---- Order confirmation (WooCommerce block) ---- */
.wc-block-order-confirmation-status{
  font-family:'Bricolage Grotesque',Inter,sans-serif; color:var(--hb-navy);
  font-size:clamp(1.4rem,3vw,1.9rem); letter-spacing:-.01em; line-height:1.2; }
.wc-block-order-confirmation-status__description{ color:var(--hb-muted); }
.wc-block-order-confirmation-summary{
  background:var(--hb-haze); border:1px solid var(--hb-line); border-radius:16px; padding:1.2rem 1.4rem; }
.wc-block-order-confirmation-summary-list-item__key{ color:var(--hb-muted); }
.wc-block-order-confirmation-summary-list-item__value{ color:var(--hb-navy); font-weight:600; }
.wc-block-order-confirmation-address-wrapper h2,
.wc-block-order-confirmation-totals h2{
  font-family:'Bricolage Grotesque',Inter,sans-serif; color:var(--hb-navy); }
.wc-block-order-confirmation-totals__table{ width:100%; border-collapse:collapse; }
.wc-block-order-confirmation-totals__table th,
.wc-block-order-confirmation-totals__table td{ padding:.5rem 0; border-bottom:1px solid var(--hb-line); }
.wc-block-order-confirmation-totals__total td,
.wc-block-order-confirmation-totals__total th{ color:var(--hb-navy); font-weight:700; font-size:1.1rem; }
.wc-block-order-confirmation-billing-address,
.wc-block-order-confirmation-shipping-address{ color:#41525f; }

/* ====================================================================
   v0.9 — PRODUCTPAGINA HERINDELING
   Foto + thumbnails links · titel & omschrijving onder de foto ·
   koopblok (prijs/kleur/bestellen/verzending) rechts, sticky.
   ==================================================================== */
.single-product div.product{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,400px);
  gap:2.25rem 3rem; align-items:start;
}
@media(max-width:880px){ .single-product div.product{ grid-template-columns:1fr !important; gap:1.4rem; } }

.single-product .woocommerce-product-gallery{
  grid-column:1; grid-row:1; margin:0 !important; position:static; max-width:100%; float:none; width:auto; }
.single-product .hb-left-meta{ grid-column:1; grid-row:2; }
.single-product .summary.entry-summary{
  grid-column:2; grid-row:1 / span 2; width:auto; float:none; margin:0;
  position:sticky; top:1.5rem;
  background:#fff; border:1px solid var(--hb-line); border-radius:18px;
  padding:1.6rem 1.6rem 1.8rem; box-shadow:0 12px 30px rgba(14,42,71,.07); }
@media(max-width:880px){
  .single-product .woocommerce-product-gallery{ grid-row:auto; }
  .single-product .hb-left-meta{ grid-row:auto; }
  .single-product .summary.entry-summary{ grid-column:1; grid-row:auto; position:static; } }

.single-product .hb-prodfit,
.single-product .woocommerce-tabs,
.single-product .related,
.single-product .up-sells,
.single-product .upsells{ grid-column:1 / -1 !important; }

/* Titel onder de foto — nette grootte (override op grote theme-h1) */
body.single-product .hb-left-meta .product_title{
  font-family:'Bricolage Grotesque',Inter,sans-serif !important;
  font-size:clamp(1.5rem,2.2vw,2rem) !important; line-height:1.14 !important; font-weight:600 !important;
  color:var(--hb-navy) !important; letter-spacing:-.015em !important; margin:.1rem 0 .7rem !important; }
.single-product .hb-left-meta__desc{ color:var(--hb-ink); line-height:1.7; font-size:1.02rem; max-width:62ch; }
.single-product .hb-left-meta__desc p{ margin:.65rem 0; }
.single-product .hb-left-meta__desc .woocommerce-product-details__short-description{
  border-top:0 !important; margin-top:0 !important; padding-top:0 !important; }

/* Koopblok rechts */
.single-product .summary .product_title{ display:none; }
.single-product .summary .price,
.single-product .summary p.price,
.single-product .summary span.price{ margin:.1rem 0 1.1rem !important; }
.single-product .summary table.variations{ margin:.2rem 0 1rem; }
.single-product .summary .woocommerce-variation-add-to-cart{ margin-top:.4rem; }

/* Bezorginfo in het koopblok */
ul.hb-ship{ list-style:none; margin:1.1rem 0 0; padding:1rem 0 0; border-top:1px solid var(--hb-line); display:grid; gap:.45rem; }
ul.hb-ship li{ font-size:.85rem; color:var(--hb-muted); padding-left:1.5rem; position:relative; line-height:1.35; }
ul.hb-ship li::before{ content:""; position:absolute; left:0; top:.05rem; width:16px; height:16px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E88C7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 18H1V6a1 1 0 0 1 1-1h11v13'/%3E%3Cpath d='M14 9h4l3 3v6h-3'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E"); }
ul.hb-ship strong{ color:var(--hb-navy); font-weight:600; }

/* Galerij: hoofdfoto groot + thumbnails als carrousel eronder */
.single-product .woocommerce-product-gallery__wrapper{ margin:0; }
.single-product .woocommerce-product-gallery__image img{ border-radius:16px; }
.single-product ol.flex-control-thumbs{
  display:flex !important; gap:.55rem; margin:.85rem 0 0; padding:0; list-style:none; overflow-x:auto; width:100%; }
.single-product ol.flex-control-thumbs li{ flex:0 0 74px; margin:0; }
.single-product ol.flex-control-thumbs img{
  border-radius:10px; border:2px solid transparent; cursor:pointer; opacity:.65;
  transition:opacity .15s, border-color .15s; }
.single-product ol.flex-control-thumbs img.flex-active,
.single-product ol.flex-control-thumbs img:hover{ opacity:1; border-color:var(--hb-sky); }

/* ====================================================================
   v0.10 — PRODUCTPAGINA op BLOK-template (single-product.html)
   Neutraliseert oude classic-grid en stuurt het blok-thema aan.
   ==================================================================== */
/* oude classic grid mocht NIET op de blok-wrapper (.product) landen */
.single-product div.product{ display:block !important; }

.hb-single-product{ }
.hb-single-product .wc-block-breadcrumbs{ color:var(--hb-muted); font-size:.85rem; margin-bottom:1.5rem; }
.hb-single-product .wc-block-breadcrumbs a{ color:var(--hb-muted); }

/* layout: galerij (links-boven) + omschrijving (links-onder) + koopblok (rechts) */
.hb-sp{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,400px);
  grid-template-areas:"gallery buy" "meta buy";
  gap:0 3rem; align-items:start; margin-bottom:2.5rem;
}
.hb-sp-gallery{ grid-area:gallery; margin:0 auto 1.4rem; width:100%; max-width:540px; }
.hb-sp-gallery .woocommerce-product-gallery{ width:100% !important; margin:0 auto !important; }
.hb-sp-gallery .woocommerce-product-gallery__image img,
.hb-sp-gallery .wp-block-woocommerce-product-image-gallery img{ border-radius:14px; }
.hb-sp-meta{ grid-area:meta; }
.hb-sp-buy{ grid-area:buy; position:sticky; top:1.5rem; align-self:start; }

.single-product .hb-pt.wp-block-post-title{
  font-family:'Bricolage Grotesque',Inter,sans-serif !important;
  font-size:clamp(1.5rem,2.2vw,2rem) !important; line-height:1.14 !important; font-weight:600 !important;
  color:var(--hb-navy) !important; letter-spacing:-.015em !important; margin:.2rem 0 .7rem !important; }
.hb-pe{ color:var(--hb-ink); line-height:1.7; font-size:1.02rem; max-width:62ch; }
.hb-pe p{ margin:.55rem 0; }

/* koopblok kaart */
.hb-buybox{
  background:#fff; border:1px solid var(--hb-line); border-radius:18px;
  padding:1.6rem 1.6rem 1.8rem; box-shadow:0 12px 30px rgba(14,42,71,.07); }
.hb-buybox .hb-bp,
.hb-buybox .wp-block-woocommerce-product-price,
.hb-buybox .price{
  font-size:1.7rem !important; font-weight:700 !important; color:var(--hb-navy) !important;
  display:block; margin:0 0 1rem !important; }
.hb-buybox .price del{ color:var(--hb-muted); font-weight:400; font-size:1.05rem; }
.hb-buybox .price ins{ text-decoration:none; }
.hb-buybox table.variations{ margin:.2rem 0 1rem; }
.hb-buybox table.variations td,.hb-buybox table.variations th{ padding:.2rem 0; }
.hb-buybox .woocommerce-variation-price .price{ font-size:1.45rem !important; margin:.3rem 0 !important; }
.hb-buybox .quantity input.qty{ border:1px solid var(--hb-line); border-radius:10px; padding:.55rem .4rem; }

/* MOBIEL: eerst foto, dan koopblok (prijs+kleur), dan omschrijving */
@media(max-width:880px){
  .hb-sp{ display:flex; flex-direction:column; gap:0; }
  .hb-sp-gallery{ order:1; }
  .hb-sp-buy{ order:2; position:static; margin-bottom:1.6rem; }
  .hb-sp-meta{ order:3; }
}

/* onderdelen onder de kolommen full-width */
.hb-single-product .hb-prodfit{ margin-top:.5rem; }
.hb-single-product .wp-block-woocommerce-product-details{ margin-top:2.5rem; }
.hb-single-product .wc-tab h2,
.hb-single-product .woocommerce-Tabs-panel h2{ font-family:'Bricolage Grotesque',Inter,sans-serif; color:var(--hb-navy); }
.hb-single-product .wp-block-woocommerce-related-products{ margin-top:2.5rem; }
.hb-single-product .wp-block-woocommerce-related-products > h2{
  font-family:'Bricolage Grotesque',Inter,sans-serif; color:var(--hb-navy);
  font-size:1.6rem; margin-bottom:1.2rem; }

/* ---- Cross-sell / lege winkelwagen ---- */
.wc-block-cart__empty-cart__title{ color:var(--hb-navy); }
.cross-sells h2,.up-sells h2,.related h2{ font-family:'Bricolage Grotesque',Inter,sans-serif; color:var(--hb-navy); }