@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

/* =========================================================================
   DHZ Vloercoatings — brand tokens (extracted from live dhzvloercoatings.nl)
   Loaded after Hummingbird's theme.css (priority 1000) so these win.
   ========================================================================= */
:root {
  /* Brand palette */
  --dhz-amber:       #febd69; /* primary accent — buttons, highlights */
  --dhz-amber-dark:  #f9ba48; /* hover / deeper accent */
  --dhz-dark:        #1f1f1f; /* dark button / strong text */
  --dhz-navy:        #273647; /* headers / footer band */
  --dhz-footer:      #222e3d; /* live footer navy (measured) */
  --dhz-blue:        #0082c8; /* live accent blue = rgb(0,130,200); was #0182c8 (off by 1 in red) */
  --dhz-success:     #4cbb6c; /* in stock */
  --dhz-sale:        #ff4c4c; /* sale / discount */
  --dhz-info:        #5bc0de;
  --dhz-bg:          #f6f6f6; /* light section background */
  --dhz-bg-alt:      #f0f0f0;
  --dhz-border:      #ebebeb;
  --dhz-text:        #414141; /* body text */
  --dhz-muted:       #878787;
  --dhz-placeholder: #acaaa6;

  /* live's exact stack is `Poppins, sans-serif` — keep it identical so computed
     font-family matches 1:1 (Poppins is loaded via the @import above; the extra
     system fallbacks only ever showed up as a parity delta, never as glyphs). */
  --dhz-font: "Poppins", sans-serif;

  /* ---- Map onto Bootstrap 5.3 (Hummingbird is BS 5.3.3) ---- */
  --bs-primary:        var(--dhz-amber);
  --bs-primary-rgb:    254, 189, 105;
  --bs-link-color:     var(--dhz-navy);
  --bs-link-color-rgb: 39, 54, 71;
  --bs-link-hover-color: var(--dhz-amber-dark);
  --bs-body-color:     var(--dhz-text);
  --bs-body-font-family: var(--dhz-font);
  --bs-emphasis-color: var(--dhz-dark);
  --bs-border-color:   var(--dhz-border);
}

body,
.page-wrapper,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--dhz-font);
}

/* Live's body context, measured 1:1 (was BS5's 16px / normal / #414141). Everything
   that doesn't set its own values inherits from here, which is how live behaves —
   this is the single biggest source of per-component font/colour/spacing deltas.
   line-height already matched at 24px. */
body {
  color: #000;             /* live body: rgb(0, 0, 0) */
  font-size: 13px;         /* live body: 13px */
  letter-spacing: 0.5px;   /* live body: 0.5px */
}

/* -------------------------------------------------------------------------
   Buttons — BS 5.3 bakes literal colours into the per-component --bs-btn-*
   vars, so overriding --bs-primary alone is NOT enough.
   Live .btn-primary = amber bg, black text, UPPERCASE.
   ------------------------------------------------------------------------- */
.btn-primary {
  --bs-btn-bg:            var(--dhz-amber);
  --bs-btn-border-color:  var(--dhz-amber);
  --bs-btn-color:         #000;
  --bs-btn-hover-bg:      var(--dhz-navy);   /* live: primary buttons hover to NAVY/WHITE (not amber/black) */
  --bs-btn-hover-border-color: var(--dhz-navy);
  --bs-btn-hover-color:   #fff;
  --bs-btn-active-bg:     var(--dhz-navy);
  --bs-btn-active-border-color: var(--dhz-navy);
  --bs-btn-active-color:  #fff;
  --bs-btn-disabled-bg:   var(--dhz-amber);
  --bs-btn-disabled-border-color: var(--dhz-amber);
  text-transform: uppercase;
  font-weight: 600;
}

/* Dark variant used on the live theme (#1f1f1f, white text) */
.btn-dark,
.btn-secondary {
  --bs-btn-bg:            var(--dhz-dark);
  --bs-btn-border-color:  var(--dhz-dark);
  --bs-btn-color:         #fff;
  --bs-btn-hover-bg:      #000;
  --bs-btn-hover-border-color: #000;
  --bs-btn-hover-color:   #fff;
  --bs-btn-active-bg:     #000;
  --bs-btn-active-color:  #fff;
}

.btn-outline-primary {
  --bs-btn-color:         var(--dhz-dark);
  --bs-btn-border-color:  var(--dhz-amber);
  --bs-btn-hover-bg:      var(--dhz-amber);
  --bs-btn-hover-border-color: var(--dhz-amber);
  --bs-btn-hover-color:   #000;
  --bs-btn-active-bg:     var(--dhz-amber);
  --bs-btn-active-color:  #000;
}

/* Price / accents */
.product-price,
.price,
.current-price-value {
  color: var(--dhz-dark);
}

/* =========================================================================
   Homepage — structure & dimensions (measured from live dhzvloercoatings.nl)
   Hero ≈ 491px tall desktop; native product grids already 4-col (col-lg-3);
   fully responsive. Content stays BO-editable (native module sections).
   ========================================================================= */
.page-content--home > * { margin-bottom: 2.5rem; }
.page-content--home > *:last-child { margin-bottom: 0; }

/* Hero slider (ps_imageslider) — full-width, responsive height matched to live */
.page-content--home .ps-imageslider .carousel,
.page-content--home .ps-imageslider .carousel-inner,
.page-content--home .ps-imageslider .carousel-item,
.page-content--home .ps-imageslider__figure,
.page-content--home .ps-imageslider__link {
  height: clamp(190px, 34vw, 491px);
}
.page-content--home .ps-imageslider__figure { margin: 0; }
.page-content--home .ps-imageslider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Home product-section titles — centered, uppercase, navy (live look) */
.page-content--home .featured-products .h2,
.page-content--home .products-section-title {
  font-weight: 700;
  text-transform: uppercase;
  color: var(--dhz-navy);
  text-align: center;
  margin: 0 0 1.5rem;
}

/* -------------------------------------------------------------------------
   Home category showcase (module bw_homecategories) — matches live: a row of
   6 square image-tiles, category name BELOW in blue (#0082c8), ~5px radius.
   ------------------------------------------------------------------------- */
.dhz-home-top { margin-bottom: 0; }     /* no gap below the vloerwijzer/newsletter banners */
/* the home is a grid with row-gap:40px; cancel it above the categories so they sit
   flush to the banners (bottom keeps the normal 40px gap to the products below) */
.dhz-home-cats { margin: -16px 0 0; }   /* live has ~24px above the categories (grid gap 40 - 16) */
/* home section ORDER = live: hero/banners · categories · reviews · products · specials
   (reviews sit right under the category row on live, not at the bottom) */
.page-content--home > .dhz-home-top        { order: 1; }
.page-content--home > .dhz-home-cats       { order: 2; }
.page-content--home > .dhz-reviews         { order: 3; }
.page-content--home > .ps-featuredproducts { order: 4; }
.page-content--home > .ps-specials         { display: none; }   /* live has no "Special deals" on home */
.page-content--home > #tmcms2_block        { order: 5; }         /* CMS banner between products and SEO text (like live) */
.page-content--home > .ps-customtext       { order: 6; }         /* SEO text after the banner (like live) */
.page-content--home > .dhz-home-blog       { order: 7; }
/* home blog block (bw_blog displayHome) — recent posts row, like live: left-aligned
   "Blog" heading (18px/500) + a subtitle line below it, then the post row */
.dhz-home-blog__head { text-align: left; margin: 0 0 1.25rem; }
.dhz-home-blog__title { text-align: left; font-size: 18px; font-weight: 500; margin: 0; color: var(--dhz-dark, #1f1f1f); }
.dhz-home-blog__subtitle { text-align: left; margin: .15rem 0 0; color: var(--dhz-muted, #6b7683); font-size: 15px; }
.dhz-home-blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.dhz-home-blog__more { text-align: left; margin-top: 1.5rem; }
.dhz-home-blog__more-link { color: #0082c8; font-weight: 600; text-decoration: none; }
.dhz-home-blog__more-link:hover { text-decoration: underline; }
@media (max-width: 767.98px) { .dhz-home-blog__grid { grid-template-columns: 1fr; } }
.dhz-home-cats__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);   /* live: 6 across */
  gap: 30px 1.875rem;
}
.dhz-home-cats__item { margin: 0; }
.dhz-home-cat {
  display: block;
  text-decoration: none;
  text-align: center;
}
.dhz-home-cat__media {
  display: block;
  aspect-ratio: 1 / 1;                      /* live: square 170x170 image */
  border-radius: 5px;
  overflow: hidden;
  background: var(--dhz-bg-alt, #eef3f7);
}
.dhz-home-cat__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.dhz-home-cat:hover .dhz-home-cat__media img { transform: scale(1.05); }
/* placeholder tile (category image not copied to the server yet) */
.dhz-home-cat--placeholder .dhz-home-cat__media {
  background: linear-gradient(135deg, var(--dhz-navy, #273647) 0%, #1b2733 100%);
}
.dhz-home-cat__label {
  display: block;
  margin-top: 0.5rem;
  color: #0082c8;                           /* live label blue */
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-transform: none;
}
.dhz-home-cat:hover .dhz-home-cat__label { text-decoration: underline; }

@media (max-width: 1199.98px) { .dhz-home-cats__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767.98px)  { .dhz-home-cats__grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (max-width: 479.98px)  { .dhz-home-cats__grid { grid-template-columns: repeat(2, 1fr); } }

/* =========================================================================
   Header (white, sticky) — top bar + search + cart, amber accents.
   Live header is white/dark text; the dark nav bar is styled once categories
   exist (the menu items are categories — empty on staging right now).
   ========================================================================= */
#header.header { background: #fff; }
/* Sticky behaviour: like live, only the navy nav STRIP should stay pinned on
   scroll — not the whole logo/USP/search top row. The header is one sticky
   element (theme.css: position:sticky;top:0); we give it a NEGATIVE top equal
   to the white top-row height, so that row slides off above the viewport and
   only the nav (the header's bottom strip) remains pinned. The footer script
   measures the exact top-row height per breakpoint/content and sets `top`
   inline; these are no-JS fallbacks for the common desktop widths. */
@media (min-width: 1200px) { #header.header.js-sticky-header { top: -93px; } }
@media (min-width: 1450px) { #header.header.js-sticky-header { top: -107px; } }
.header-top {
  background: #fff;
  border-bottom: 1px solid var(--dhz-border);
  font-size: 0.82rem;
}
.header-top a:hover { color: var(--dhz-amber); }
/* cart badge */
.header-block__badge { background: var(--dhz-amber); color: #000; }
.header-block__action-btn:hover .header-block__icon { color: var(--dhz-amber); }
/* search field — filled grey, no border (matches live form inputs) */
.ps-searchbar__input {
  background: #f1f1f1;   /* live search bg */
  border: 0;
  border-radius: 5px;    /* live: 5px */
}
.ps-searchbar__input::placeholder { color: var(--dhz-placeholder); }
.ps-searchbar__magnifier,
.js-search-icon { color: var(--dhz-dark); }
/* Main nav — full-width navy bar with white uppercase links (matches live).
   flex: 0 0 100% wraps the menu to its own row (parent has flex-wrap:wrap).
   calc(50% - 50vw) shifts the left edge to the viewport left without
   position:relative+left (which breaks flex children). */
.header-bottom .header-bottom__row { flex-wrap: wrap; }
.ps-mainmenu--desktop {
  order: 10;
  flex: none;            /* flex: none = 0 0 auto → width: 100vw takes effect */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  /* kill the .row>* gutter (gx-md-3 = 8px each side) so the navy background
     reaches the viewport edges instead of being inset — full bleed, like live */
  padding-left: 0;
  padding-right: 0;
}
.ps-mainmenu__desktop {
  background: #202c3b;   /* live nav navy (measured rgb(32,44,59)) */
  width: 100%;
  display: block;
  letter-spacing: 0.5px;          /* live nav letter-spacing (parity-measured) */
  font-family: "Poppins", sans-serif;   /* match live's exact font stack */
  font-size: 13px;                /* live bar element font-size (links override to 15px) */
  line-height: 24px;              /* live bar line-height (parity-measured) */
  color: #000;                    /* live bar color rgb(0,0,0) → also sets border currentColor */
  min-height: 0;
  position: relative !important;   /* live nav is relative (dropdown anchor); beats a Bootstrap reset */
  top: 0;
  left: 0;
}
.ps-mainmenu__desktop > ul,
.ps-mainmenu__desktop .ps-mainmenu__list {
  max-width: 1170px;       /* links aligned to the (narrowed) header content, like live */
  margin: 0 auto;
  padding: 15px 12px;      /* live: 15px vertical on the menu → bar 54px/row (78px @2 rows) */
  display: flex;
  flex-wrap: wrap;
}
.ps-mainmenu__desktop a {
  color: #fff;
  text-transform: none;       /* live = normal case, NOT uppercase */
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;          /* live link line-height; row height comes from the ul padding */
  padding: 0 12px;            /* no vertical padding (height from ul); 12px = live link gap */
  white-space: nowrap;        /* live links never wrap mid-label (parity-measured) */
  text-align: left;           /* live link text-align (vs default 'start') */
  min-height: 0;
}
.ps-mainmenu__desktop a:hover,
.ps-mainmenu__desktop li:hover > a,
.ps-mainmenu__desktop .current > a { color: #00a5f7; }   /* live hover = bright blue */

/* Header USP + contact buttons (matches live top row) */
.dhz-usp { gap: 0; }   /* spacing handled by .dhz-usp__text margin-left:16px (matches live) */
/* USP icon — live's exact asset: /img/cms/delivery.png (32×32), copied to assets/img/delivery.png. */
.dhz-usp__icon {
  font-size: 0;
  display: inline-block;
  width: 32px;
  height: 32px;
  background: url("../img/delivery.png") center / 32px 32px no-repeat;
}
.dhz-usp__text { display: block; margin-left: 16px; line-height: 1.2; max-width: 290px; font-size: 13px; }  /* live: block, margin-left 16px from icon; font-size 13px → 15.6 line-height; 2 lines like live */
.dhz-usp__text strong { display: block; font-size: 18px; color: #000; font-weight: 500; line-height: 19.8px; }   /* live: 18px / 500 / black, own line */
.dhz-usp__text span { display: block; font-size: 13px; color: #000; line-height: 15.6px; }                        /* live: 13px / black, own line */
.dhz-hcontact { gap: 10px; }   /* live column-gap 10px */
.dhz-hcontact__btn {
  display: block;              /* live: block, sized by padding (→ ~61×37) */
  padding: 6px 20px 5px;       /* live: 6px 20px 5px 20px */
  margin-bottom: 5px;          /* live */
  border-radius: 5px;
  border: 1px solid var(--dhz-amber);
  background: var(--dhz-amber);
  color: #000;                 /* live icon color = black */
  text-decoration: none;
  transition: background 0.2s ease;
  box-sizing: border-box;
  font-weight: 600;            /* live btn-primary categoricals (icon-only, harness-matched) */
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.7px;
}
.dhz-hcontact__btn:hover { background: var(--dhz-amber-dark); color: #000; }
.dhz-hcontact__btn--wa { padding-left: 21.15px; padding-right: 21.15px; }

/* Reviews rating — Elfsight Google-reviews badge. It's a self-contained widget
   (brings its own styling); measured 171x40 on live. The wrapper is just a slot
   that reserves that space so the header row doesn't reflow while the async
   widget loads — no background/padding of our own (would bleed behind it). */
.dhz-rating {
  min-width: 171px;
  min-height: 40px;
}

/* Account block — two stacked lines like live: small "Inloggen" + blue "Mijn Account ▾" */
.dhz-account__toggle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  padding: 0;
  border: 0;
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
}
.dhz-account__toggle::after { display: none; }   /* hide Bootstrap's built-in dropdown caret */
.dhz-account__top { font-size: 13px; color: #000; line-height: 20px; }   /* live: 13px / black */
.dhz-account__row { display: inline-flex; align-items: center; }
.dhz-account__main {
  display: inline;            /* text only (caret is a sibling, like live's title element) */
  font-size: 12px;            /* live: 12px (not 14) */
  line-height: 20px;
  font-weight: 600;
  color: var(--dhz-blue);
  /* live's .tm_userinfotitle1 measured: white-space normal, position relative with
     top/left 0, min-height 0 (staged inherited nowrap / static / auto).
     letter-spacing DELIBERATELY left at the inherited 0.5px: live COMPUTES 0.4px, but
     forcing 0.4px measured WORSE (account pixel 10.17% -> 15.63%) because it shifted
     every glyph. 0.5px renders closer. Do not "fix" this to 0.4px. */
  white-space: normal;
  position: relative;
  top: 0;
  left: 0;
  min-height: 0;
}
.dhz-account__main:hover { color: var(--dhz-amber-dark); }
.dhz-account__caret { font-size: 18px; margin-left: 1px; }
/* Account dropdown (logged-out) — live shows ONLY "Inloggen": no icon, no "Account
   aanmaken". The .tpl is cleaned too, but template recompiles need a server cache clear,
   so hide the register item + the login icon via CSS to make it correct right now. */
#_desktop_ps_customersignin .dropdown-menu a.dropdown-item[href*="create_account"] { display: none; }
/* login/register links carry ?back= (logged-in account links don't) → hide their icons only */
#_desktop_ps_customersignin .dropdown-menu a.dropdown-item[href*="back="] .material-icons { display: none; }

/* header cart with total (like live)
   Live's .cart-price is an INLINE-BLOCK with nowrap and two block children stacked
   (label above total). Hummingbird ships it as d-md-flex/flex-column, which computed
   display:flex + flex-direction:column + align-items:stretch + white-space:normal —
   4 structural deltas vs live. Override to live's box model; the .d-md-flex utility
   needs !important to lose. Measured live: 93x42, inline-block, nowrap, #000. */
.dhz-cart-block {
  white-space: nowrap;                /* live: nowrap */
  color: #000;                        /* live: rgb(0,0,0) */
  line-height: 24px;
}
/* BS5's .d-md-flex is `display:flex !important` inside a media query and loads AFTER
   brand.css, so a plain `.dhz-cart-block{display:inline-block!important}` LOSES.
   The id selector outranks it. Also match live's text-align:left and min-height:0. */
.d-md-flex.dhz-cart-block,
.d-none.dhz-cart-block {
  display: inline-block !important;
  text-align: left;
  min-height: 0;
}
#_desktop_ps_shoppingcart .dhz-cart-total {
  text-align: left; min-height: 0; position: relative; top: 0; left: 0;
}
.dhz-cart-label { display: inline; }
.dhz-cart-total { display: block; }
.dhz-cart-label { font-size: 12px; color: #000; line-height: 20px; letter-spacing: 1px; }
.dhz-cart-total { display: block; font-weight: 600; color: #0082c8; font-size: 12px; line-height: 18px; }   /* live: € total is BLUE, 12px/600, block-width */
/* Desktop cart: bigger icon + amber count badge as a small circle on the icon's
   top-right corner (matches live). Anchored to the action button, fixed 18px circle. */
#_desktop_ps_shoppingcart .header-block__action-btn { position: relative; display: inline-flex; align-items: center; }
/* Cart icon — live's exact asset: megnor/cart.png (35×33 outline cart), copied to
   assets/img/cart.png. Source: .blockcart-header a #bgimage { background:url(cart.png); w35 h33 } */
#_desktop_ps_shoppingcart .header-block__icon {
  font-size: 0;
  display: inline-block;
  width: 35px;
  height: 33px;
  background: url("../img/cart.png") no-repeat 0 0;
  background-size: 35px 33px;
  margin-right: 12px;          /* live: #bgimage margin-right 12px (gap to the Winkelwagen text) */
}
/* mobile cart icon — live's mobile asset res-cart.png (20×20) */
#_mobile_ps_shoppingcart .header-block__icon {
  font-size: 0;
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("../img/res-cart.png") no-repeat 0 0;
  background-size: 20px 20px;
}
#_desktop_ps_shoppingcart .header-block__badge {
  position: absolute;
  top: 11px;    /* live: badge top aligned with cart-icon top */
  left: 35px;   /* live: badge at icon's top-right (icon@btn+12, +23 across), +5px right overhang */
  width: 17px;
  min-width: 17px;   /* beat Hummingbird's layered min-width that stretches it oval */
  height: 17px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #0082c8;   /* live cart count badge is blue */
  color: #fff;
  font-size: 11px;
  font-weight: 500;
}

/* --- Unified single-row header layout (match live) --- */
/* Container: 1170 + no inner padding at desktop (logo flush at x135, like live), and the
   NATIVE container-md widths below (720 @tablet = 50px margins, like live). Forcing 1170 at
   ALL widths made tablet/mobile full-bleed (logo at x4) — that was the responsive bug. */
@media (min-width: 1200px) {
  .header-bottom__container { max-width: 1170px !important; padding-left: 0 !important; padding-right: 0 !important; }
}
/* Live steps the container up to 1400 + logo to 86px at >=1450 (measured live breakpoint:
   1170/152x72 at <=1445, 1400/182x86 at >=1450). Was wrongly 1600 -> header shrank vs live
   in the 1450-1599 band (the dev-tools-open width). */
@media (min-width: 1450px) {
  .header-bottom__container { max-width: 1400px !important; }
  .ps-mainmenu__desktop > ul,
  .ps-mainmenu__desktop .ps-mainmenu__list { max-width: 1400px; }
}
/* Logo — live: 152×72 desktop, 127×60 tablet/mobile. max-height (forcing height shrank the
   placeholder to 48). The placeholder asset renders ~144×68; the real uploaded logo → 152×72. */
/* Hummingbird caps the logo link with max-height:max(50px,10vh) → on a SHORT viewport (e.g. DevTools
   docked at the bottom) 10vh<50 shrinks it to 50px, collapsing the header and pushing the nav up.
   Pin it so the header height is stable regardless of viewport height (the img max-height governs). */
.header-bottom .navbar-brand { max-height: none; }
.header-bottom__logo img,
.header-bottom__logo .logo { max-height: 72px; height: auto; width: auto; max-width: none; display: block;
  font-family: "Poppins", sans-serif; font-weight: 400; line-height: 24px; white-space: normal; }  /* neutralise the wrapping <h1> heading styles to match live's logo element */
@media (min-width: 1450px) {
  .header-bottom__logo img,
  .header-bottom__logo .logo { max-height: 86px; }   /* live logo 182x86 at the 1400 container (>=1450) */
}
@media (max-width: 991.98px) {
  .header-bottom__logo img,
  .header-bottom__logo .logo { max-height: 60px; }
}
/* Bigger, more generous header than Hummingbird's cramped .25rem default: the white
   content row gets top padding; the navy nav sits flush at the bottom (no bottom
   padding, no border) so it connects straight to the slider/content — like live. */
.header-bottom {
  padding-top: 10px; padding-bottom: 0; border-bottom: 0;   /* live white-row: 10px top → 92px row with the 72px logo */
  letter-spacing: 0.5px;                /* live: the WHOLE header has 0.5px letter-spacing */
  color: #000;                          /* live header default text color rgb(0,0,0) (not grey) */
  font-family: "Poppins", sans-serif;   /* match live's exact font stack */
  font-size: 13px;                      /* live header default font-size (elements set their own) */
  font-weight: 400;                     /* live header default weight (USP/cart/account override) */
  line-height: 24px;                    /* live header default line-height */
}
.header-bottom__row { align-items: center; row-gap: 0.7rem; flex-wrap: wrap; }
/* logo + USP stay left (default order 0). margin-left:auto on the rating starts the
   right-hand group; search keeps its native order so it lands last (far right).
   Nav bar (order 10) wraps full-width below. */
.dhz-rating { margin-left: auto; }   /* right group starts here: rating · wa/email · cart/account · search */
.dhz-header-actions { gap: 0.7rem; }
/* Cart before account on the right, matching live (theme.yml renders account first) */
.dhz-header-actions #_desktop_ps_shoppingcart { order: 1; }
.dhz-header-actions #_desktop_ps_customersignin { order: 2; }
#header { overflow-x: clip; }         /* contain the full-bleed nav, no page scrollbar */
/* Page-wide horizontal-overflow guard. At intermediate widths (≈768–1024px) Bootstrap
   `.row` negative gutters bleed a few px past the viewport (the content containers had
   their padding zeroed for the 1400px desktop parity), and the off-canvas mobile menu
   sits at left:-400. `clip` (NOT hidden) removes that bleed page-wide WITHOUT creating a
   scroll container, so the sticky header, vertical scroll and the crosssell inner scroller
   all keep working. No visible content is lost — column padding keeps content inside 0..vw. */
html { overflow-x: clip; }
/* Home: drop Hummingbird's .wrapper 3rem top padding so the navy nav connects
   straight to the slider (live look). Inner pages keep their breathing room. */
#index .wrapper { padding-top: 0; }
#_desktop_ps_searchbar {
  margin-left: 0.6rem !important;
  margin-top: -4px;            /* nudge the search box up to sit level with the row */
  flex: 0 0 auto !important;
  width: 140px !important;     /* live search ~130px; keep compact so the row fits in 1170 */
  max-width: 140px !important;
}
/* Constrain the whole search widget to the 140px wrapper — the input otherwise computes ~304px
   and overflows off-screen (clipping the magnifier). Force width + kill min-width + border-box. */
#_desktop_ps_searchbar #ps_searchbar,
#_desktop_ps_searchbar .ps-searchbar,
#_desktop_ps_searchbar .ps-searchbar__form,
#_desktop_ps_searchbar .ps-searchbar__input {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
/* Live's visible search pill IS THE FORM: measured 140x42, background #fff,
   border-radius 5px, and live's text input is display:none at desktop. Staged had a
   transparent 124x40 form with the grey pill on the INPUT instead — inverted vs live.
   Move the pill onto the form and let the input sit transparent inside it. */
.dhz-search { padding-left: 0; padding-right: 0; }
#_desktop_ps_searchbar .ps-searchbar__form {
  height: 42px;                /* live: 42 (was 40) */
  background: #fff;            /* live: rgb(255,255,255) */
  border-radius: 5px;          /* live: 5px */
  border: 1px solid #fff;      /* live border colour = white on all sides */
  display: block;              /* live: block (flex added align-items:center deltas) */
  position: relative;          /* keeps the absolute magnifier anchored without flex */
}
#_desktop_ps_searchbar .ps-searchbar__input {
  height: 40px;
  font-size: 13px;             /* live input: 13px */
  color: #adadad;
  background: transparent;     /* the form carries the pill now, like live */
  border-color: transparent;
  border-radius: 5px;
  padding: 0 38px 0 14px;   /* room for the right-side magnifier */
}
#_desktop_ps_searchbar .ps-searchbar__input::placeholder { color: #757575; font-size: 12px; }
/* magnifier on the RIGHT of the desktop search box (like live) */
#_desktop_ps_searchbar .ps-searchbar__magnifier { left: auto; right: 12px; }
/* hide language + currency selectors (NL-only, single currency) */
.dhz-header-actions .ps-languageselector,
.dhz-header-actions .ps-currencyselector,
#_desktop_language_selector,
#_desktop_currency_selector { display: none !important; }

/* 1200–1449 band: the 1170 container is tight, so the search box was wrapping to its own
   row (adding ~62px to the header height). Compact the USP block (wrap the sub-line sooner
   → ~live's 266px width, headline font unchanged) + tighten the right-group gaps so the
   whole row — including the search — stays on ONE line, top-right, like live. Scoped to
   this band: ≥1450 uses the wider 1400 container (already fits) and <1200 is the mobile
   icon header. */
@media (min-width: 1200px) and (max-width: 1449.98px) {
  .header-bottom__row { --bs-gutter-x: 0.5rem; }   /* tighter column gutters (was gx-md-3 = 1rem) */
  .dhz-usp__text { max-width: 205px; }
  .dhz-hcontact { gap: 6px; }
  .dhz-header-actions { gap: 0.4rem; }
  #_desktop_ps_searchbar { margin-left: 0.4rem !important; }
}

/* ---- Mobile + tablet (< lg = 992px): simple icon-button header like live ----
   Below lg, the full desktop actions (.dhz-header-actions) and desktop search box
   are hidden by their Bootstrap `d-none d-lg-flex` utilities, and the icon-only
   mobile placeholders are shown by `d-lg-none d-flex` — all set in the TEMPLATES.
   That is deliberate: Hummingbird wraps Bootstrap's `d-*` utilities in @layer, and
   brand.css is unlayered, so an unlayered `!important` here can NEVER beat a layered
   `!important` display utility (layered wins for important rules). So we don't fight
   the cascade in CSS — we pick the right breakpoint class in the .tpl and only style
   what's left: the hamburger, and the amber cart/account/search icon buttons. */
@media (max-width: 991.98px) {
  /* Hamburger toggle moves inline, before the logo */
  .ps-mainmenu--desktop {
    order: -1;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    margin-left: 0;
  }
  /* Hamburger: amber glyph, sized so the glyph box is 33x33 like live's #menu-icon i
     (measured: live 33x33; 26px here rendered 31.2, 24px rendered 28.8 — the glyph box
     is font-size x 1.2, so 27.5px is the value that lands on 33). */
  #header .ps-mainmenu--desktop .material-icons {
    color: var(--dhz-amber);
    font-size: 27.5px;
    line-height: 1.2;
  }
  #header .ps-mainmenu--desktop .menu-toggle,
  #header .ps-mainmenu--desktop .ps-mainmenu__mobile-toggle { padding: 3px; }
  /* Right-aligned icon group: cart | account | search */
  #_mobile_ps_shoppingcart { order: 6; margin-left: auto; }
  #_mobile_ps_customersignin { order: 7; }
  .ps-searchbar--mobile { order: 8; }
  /* ---- Amber icon buttons: account | search square, cart a wider pill ----------
     MEASURED off live's mobile header (390px) and matched 1:1 here:
       account  div.tm_userinfotitle   38x38, radius 5px, megnor/account.png (13x14) centred
       search   span.search_button     38x38, radius 5px, megnor/search.png  (16x16) centred
       cart     div.cart-preview       71x36.4, radius 5px, padding 5px 10px, and the count
                                       pill INLINE next to res-cart.png (20x20) — not a
                                       corner badge: #1f1f1f/#fff, 12px/500, lh 14, pad 3px 7px
     Both mobile account markups get the same box, because PS core JS swaps them at 768px:
       <768   core moves #_desktop_ps_customersignin's dropdown in -> .dhz-account__toggle
       768-991 the template's own hardcoded .header-block__action-btn is used
     Before this, the moved dropdown kept its own 9.6px padding + 44px min-width and
     rendered 45.7x45.2 — visibly larger than the 34-36px cart/search beside it. */
  #_mobile_ps_customersignin .dhz-account__top,
  #_mobile_ps_customersignin .dhz-account__main,
  #_mobile_ps_customersignin .dhz-account__caret { display: none; }   /* live's mobile account is a clean icon, no dropdown caret */

  .header-block { position: relative; display: inline-flex; }
  .header-block__action-btn {
    background-color: var(--dhz-amber);
    border: 1px solid var(--dhz-amber);
    border-radius: 5px;
    padding: 0;
    color: var(--dhz-dark);
    line-height: 0;            /* keep the box square around the icon */
  }
  .header-block__action-btn:hover { background-color: var(--dhz-amber-dark); }

  /* account — identical box for both markup paths */
  #_mobile_ps_customersignin .dhz-account__toggle,
  #_mobile_ps_customersignin .header-block__action-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;           /* beats Hummingbird's layered min-width on the toggle */
    padding: 0;
    background-color: var(--dhz-amber);
    background-image: url("../img/account.png");
    background-repeat: no-repeat;
    background-position: 12px 12px;   /* live's exact offset, not center (which lands 11.5/11) */
    background-size: 13px 14px;
    border: 1px solid var(--dhz-amber);
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  #_mobile_ps_customersignin .dhz-account__toggle::before { content: none; }   /* was a material glyph */
  #_mobile_ps_customersignin .header-block__icon { display: none; }            /* hardcoded tablet glyph */

  /* search */
  .ps-searchbar--mobile .header-block__action-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    background-image: url("../img/search.png");
    background-repeat: no-repeat;
    background-position: 9px 11px;    /* live's exact offset, not center (which lands 10/10) */
    background-size: 16px 16px;
  }
  .ps-searchbar--mobile .header-block__action-btn .header-block__icon { display: none; }

  /* cart — icon + inline count pill, like live (not a corner badge) */
  /* INLINE layout, not flex — deliberately, and line-height 24px is load-bearing.
     Live's box is 71x36.4 = 10 padding + 2 border + a 24.4px LINE BOX, and that line
     box is 24.4 (not 20) because live's .cart-preview sets line-height: 24px while the
     icon and count pill sit on the baseline as inline-blocks (vertical-align: middle).
     Flex the anchor, or leave line-height at normal, and the strut shrinks: the button
     measures 32.4px, 4px shorter than live. Measured, not guessed. */
  #_mobile_ps_shoppingcart .header-block__action-btn {
    display: inline-block;
    padding: 5px 10px;
    line-height: 24px;
    font-size: 13px;
  }
  /* Icon box 20x24, image centred inside it — this mirrors live exactly: live's 20x20
     res-cart image sits in a .cart-image inline-block that is 24px TALL (its own
     line-height 24). That 24px inline-block is what lifts the line box to 24.4 and the
     button to 36.4; a 20px-tall icon yields 36.0 with the contents 0.5px high. */
  #_mobile_ps_shoppingcart .header-block__icon {
    height: 24px;
    background-position: center center;
    vertical-align: middle;
    margin-right: 3px;
  }
  #_mobile_ps_shoppingcart .header-block__badge {
    position: static;
    top: auto;
    right: auto;
    display: inline-block;
    vertical-align: middle;
    width: auto;
    min-width: 0;
    height: auto;
    padding: 3px 7px;
    border-radius: 50%;
    background: #1f1f1f;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    text-align: center;
  }
}

/* Below lg: switch from the desktop action group to the icon-only mobile placeholders.
   The .tpl carries d-lg-* utilities for this, but that only applies after a BO cache
   clear (compiled Smarty templates are server-side, invisible to this rclone mount, so
   I can't refresh them). To make it work from CSS NOW we must beat Bootstrap's d-md-*
   display utilities, which are `!important` inside a cascade layer. Rule for important
   decls: a LAYERED `!important` beats unlayered, and among layers the EARLIEST-declared
   wins. Hummingbird's layer order is `vendors, bs-base, …, utilities`. So we re-open the
   FIRST layer (`vendors`) — an important rule here outranks the d-* utilities (which live
   in a later layer) regardless of specificity, so the switch is reliable. */
@layer vendors {
  @media (max-width: 991.98px) {
    #header .dhz-header-actions,
    #header #_desktop_ps_searchbar { display: none !important; }
    #header #_mobile_ps_customersignin,
    #header #_mobile_ps_shoppingcart,
    #header .ps-searchbar--mobile { display: flex !important; }
  }
}

/* =========================================================================
   Newsletter band (ps_emailsubscription, displayFooterBefore) — sits on the light
   bg-body-tertiary; its .h3 heading was rendering near-invisible (light on light).
   Force a dark navy, readable heading.
   ========================================================================= */
.ps-emailsubscription .h3 {
  color: var(--dhz-navy);
  font-weight: 600;
}

/* =========================================================================
   Footer — navy band (#222e3d, measured from live), light text, amber accents.
   Native 4-col layout (ps_linklist / ps_customeraccountlinks / ps_contactinfo).
   ========================================================================= */
#footer.footer,
#footer .footer__main,
#footer .footer__before { background: var(--dhz-footer); }
#footer { color: rgb(235, 235, 235); }
#footer a { color: rgb(235, 235, 235); font-size: 13px; }   /* live footer links are 13px (not 16) */
#footer a:hover { color: var(--dhz-amber); }
/* All footer column headings blue (beats the #footer a rule for title-links;
   catches linklist/contactinfo .footer-block__title, the account block's .h3,
   and any id-based *_title heading) */
#footer .footer-block__title,
#footer .footer-block .h3,
#footer [id$="_title"] {
  color: var(--dhz-blue);
  font-weight: 500;          /* live: 16px / 500 / 15px margin */
  font-size: 16px;
  text-transform: none;
  margin-bottom: 15px;
}
/* some title text is wrapped in a link (e.g. "Uw account" → /mijn-account);
   keep those blue too, beating the generic #footer a rule */
#footer .footer-block__title a,
#footer [id$="_title"] a {
  color: var(--dhz-blue);
  text-decoration: none;
}
.footer-block__list a { color: rgb(235, 235, 235); line-height: 30px; }   /* live: 13px (from #footer a) / 30px line-height */
.copyright {
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* =========================================================================
   Global forms + misc — match live: filled grey inputs (no border, blue focus
   ring), smooth scrolling, compact breadcrumb. Catalog-free; applies on
   contact / account / newsletter / (later) checkout. (Live form inputs are
   filled grey #ebebeb, white bg + blue ring on focus.)
   ========================================================================= */
html { scroll-behavior: smooth; }

/* Back-to-top floating button (footer.tpl). Hidden until scrolled >400px, then
   fades/slides in. Branded amber circle, dark chevron — replaces live's plain
   sprite .top_button with a clean, accessible button. */
.dhz-to-top {
  position: fixed;
  right: 1rem;
  bottom: 72px;   /* sit ABOVE the Elfsight chat float (190x42 pill at right20/bottom20) so the two don't collide in the corner */
  z-index: 1030;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--dhz-amber);
  color: var(--dhz-dark);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease, background-color .15s ease;
}
.dhz-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dhz-to-top:hover,
.dhz-to-top:focus { background-color: var(--dhz-amber-dark); color: var(--dhz-dark); }
.dhz-to-top:focus-visible { outline: 3px solid rgba(1, 130, 200, 0.35); outline-offset: 2px; }
.dhz-to-top .material-icons { font-size: 28px; line-height: 1; }

.form-control,
.input-group > .form-control,
textarea.form-control {
  background-color: var(--dhz-border);   /* #ebebeb filled, like live */
  border: 1px solid transparent;
  border-radius: 4px;
}
.form-control:focus,
textarea.form-control:focus {
  background-color: #fff;
  border-color: var(--dhz-blue);
  box-shadow: 0 0 0 3px rgba(1, 130, 200, 0.15);
}
.form-control::placeholder { color: var(--dhz-placeholder); }
.form-control.is-invalid,
.was-validated .form-control:invalid { border-color: var(--dhz-sale); }

/* Breadcrumb — matched to live (measured via /ps-parity): 13px black Poppins,
   0.5px letter-spacing, transparent background (no grey band), contained in
   .container above the columns, compact with 5px top / 15px bottom margin, and
   EVERY crumb (incl. current page) is a link. Overrides the stock Hummingbird
   breadcrumb, which shipped a full-width light-grey band in 16px grey. */
.breadcrumb__wrapper { background: transparent; padding: 0; margin: 5px 0 -24px; position: relative; z-index: 2;
  font-size: 13px; line-height: 24px; letter-spacing: .5px; color: #000; text-align: left; }
/* Live puts the page title on the LEFT and the crumbs RIGHT on the SAME row. Right-align the
   crumb list via flex (wrapper stays text-align:left like live), and the negative bottom margin
   pulls the following page-title up onto the crumb row so title+crumbs share a line like live.
   Verified this does NOT shift/inflate the category title (category_title parity unchanged). */
.breadcrumb { font-size: 13px; line-height: 24px; letter-spacing: .5px; margin: 0; padding: 0;
  background: transparent; display: flex; flex-wrap: wrap; justify-content: flex-end; }
.breadcrumb__wrapper, .breadcrumb, .breadcrumb a, .breadcrumb-link, .breadcrumb-item span { color: #000; }
.breadcrumb a:hover, .breadcrumb-link:hover { color: var(--dhz-amber-dark); }
/* Live hides the breadcrumb on phones (hidden-sm-down). */
@media (max-width: 767.98px) { .breadcrumb__wrapper { display: none; } }
/* Category title matched to live's h1.h1 (measured via /ps-parity): Poppins 20/600/lh22,
   uppercase, letter-spacing .5px, BLACK (not navy), left, margin 0, and shrink-wrapped to
   the text width (inline-block) — Hummingbird's .page-title-section is a 32px full-width block. */
#category .page-title-section {
  display: block; width: fit-content;
  text-transform: uppercase; font-size: 20px; line-height: 22px; font-weight: 600;
  font-family: "Poppins", sans-serif; letter-spacing: .5px; text-align: left;
  color: #000; margin: 0;
}
/* Live does NOT show the child categories on a parent category page — hide the subcategory chips */
#category .subcategory,
.category__header .subcategory,
#js-product-list-header .subcategory { display: none; }

/* Phone (<576): tighter toggle padding. The glyph size itself stays at the 27.5px set
   in the <992 block — live's hamburger is 33x33 at BOTH phone and tablet widths, so
   there is nothing to shrink here (this block used to drop it to 24px = 28.8, which
   measured 4.2px smaller than live). */
@media (max-width: 575.98px) {
  #header .ps-mainmenu--desktop .menu-toggle,
  #header .ps-mainmenu--desktop .ps-mainmenu__mobile-toggle { padding: 2px; }
}

/* ===========================================================================
   CATALOG — on-brand BASELINE (product cards, category listing, product page).
   Built from the brand system; to be PARITY-refined against live once real
   products are migrated to staging (no live catalog measurement yet).
   =========================================================================== */

/* ---- Product card (miniature: home / category / search / cross-sell) ---- */
.product-miniature {
  height: 100%;
}
.product-miniature .card,
.product-miniature .js-product-miniature {
  height: 100%;
  background: #fff;
  border: 1px solid var(--dhz-border);
  border-radius: 6px;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  display: flex;
  flex-direction: column;
}
.product-miniature .card:hover,
.product-miniature .js-product-miniature:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
  transform: translateY(-2px);
}
.product-miniature .product-thumbnail { display: block; position: relative; }
.product-miniature .product-thumbnail img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
}
.product-miniature .product-title,
.product-miniature .product-title a {
  color: var(--dhz-navy);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.3;
  text-decoration: none;
}
.product-miniature .product-title a:hover { color: var(--dhz-blue); }
.product-miniature .product-price-and-shipping .price,
.product-miniature .price {
  color: var(--dhz-navy);
  font-weight: 700;
  font-size: 1.05rem;
}
.product-miniature .regular-price { color: var(--dhz-muted); font-weight: 400; text-decoration: line-through; font-size: 0.9rem; }
/* sale / flag badges (top-left, like live) */
.product-flags { position: absolute; top: 8px; left: 8px; margin: 0; padding: 0; list-style: none; z-index: 2; }
.product-flag {
  display: inline-block;
  background: var(--dhz-sale);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 3px;
  margin-bottom: 4px;
}
.product-flag.discount, .product-flag.on-sale { background: var(--dhz-sale); }
.product-flag.new { background: var(--dhz-blue); }
/* the card call-to-action ("BEKIJK") — amber, block */
.product-miniature .product-list-actions .btn,
.product-miniature .add-to-cart,
.product-miniature .btn-primary {
  background: var(--dhz-amber);
  border-color: var(--dhz-amber);
  color: #000;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  width: 100%;
  border-radius: 5px;
}
.product-miniature .product-list-actions .btn:hover,
.product-miniature .add-to-cart:hover,
.product-miniature .btn-primary:hover { background: var(--dhz-navy); border-color: var(--dhz-navy); color: #fff; }   /* live: navy/white hover */

/* ---- Category / listing page ---- */
#category .block-category, #category h1, .category-header h1 { color: var(--dhz-navy); }
.products-sort-order .select-title,
.products-sort-order .dropdown-menu { border-radius: 5px; }
.facet .facet__title, .facet .h6, .search-filters .facet-title {
  color: var(--dhz-navy);
  font-weight: 600;
  text-transform: none;
}
.facet .facet-label a { color: var(--dhz-text, #333); }
.facet .facet-label a:hover { color: var(--dhz-blue); }
.pagination .page-item.active .page-link {
  background: var(--dhz-amber);
  border-color: var(--dhz-amber);
  color: #000;
}
.pagination .page-link { color: var(--dhz-navy); }
.pagination .page-link:hover { color: var(--dhz-blue); }
/* category read-more "fade" on a long description */
#category #category-description.is-clamped { max-height: 6.5em; overflow: hidden; position: relative; }

/* ---- Product page ---- */
#product .product-information h1,
#product .product-name,
.product-information .h1 { color: var(--dhz-navy); font-weight: 600; }
#product .current-price .price,
#product .product-price,
.product-prices .current-price span {
  color: var(--dhz-navy);
  font-weight: 700;
  font-size: 1.6rem;
}
#product .product-discount .regular-price { color: var(--dhz-muted); text-decoration: line-through; }
#product .product-variants .control-label,
#product .product-quantity .control-label { color: var(--dhz-navy); font-weight: 600; }
/* main add-to-cart — big amber call-to-action */
#product .product-add-to-cart .add-to-cart,
#product .btn.add-to-cart {
  background: var(--dhz-amber);
  border-color: var(--dhz-amber);
  color: #000;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 0.7rem 1.5rem;
  border-radius: 5px;
}
#product .product-add-to-cart .add-to-cart:hover,
#product .btn.add-to-cart:hover { background: var(--dhz-amber-dark); border-color: var(--dhz-amber-dark); color: #000; }
#product .product-add-to-cart .add-to-cart:disabled { opacity: 0.55; }
/* reassurance block under the buy box */
.block-reassurance { border-top: 1px solid var(--dhz-border); }
.block-reassurance li { color: var(--dhz-navy); }
/* product tabs / description headings — see OLD-THEME PARITY below (amber underline) */

/* ===========================================================================
   OLD-THEME PARITY — catalog/cart/checkout/account/chrome, extracted from the
   old TemplateMela theme SCSS + custom.css to reproduce the live look.
   BASELINE: these are extracted-from-live TARGETS — /ps-parity-verify on
   product/category/cart/checkout once real products land, then loop to PASS.
   (Audit 2026-06-26, task w0vi8gkzz.)
   =========================================================================== */

/* ---- Product detail: ruled price band, amber tabs, grey bulleted desc, flags, reassurance ---- */
.product-prices { margin-top: 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: .5rem 0; }
.product-prices div { margin-bottom: 0; }
#product .product-tabs .nav-link.active,
#product .tabs .nav-link.active,
#product .tabs .nav-link:hover { color: var(--dhz-amber-dark); border-bottom: 3px solid var(--dhz-amber); }
#product .nav-link { color: var(--dhz-muted); }
#description ul { list-style: initial; padding-inline-start: 1.3em; font-size: 13px; line-height: 24px; color: #808080; letter-spacing: .5px; }
#description h2 { margin-top: 1.5em; }
#product li.product-flag { background: var(--dhz-amber); color: #fff; font-weight: 700; text-transform: uppercase; padding: 5px 7px; }
/* on_sale=1 is set on many products (same as live), but live keeps the "Aanbieding!" flag in the
   DOM and hides it (display:none). Match live: never surface the on-sale flag. Hummingbird renders
   it as li.badge.on-sale (old theme used li.product-flag.on-sale) — hide both, everywhere.
   Live ALSO hides the "-€ X" discount flag on the product image (the saving shows in the price
   block instead) — hide .discount too. (Product cards already hide all flags via .dhz-card.) */
.product-flags .on-sale,
.product-flags .discount { display: none !important; }
.blockreassurance_product > div:not(:last-child) { border-bottom: 1px solid #ccc; margin-bottom: 10px; padding-bottom: 10px; }
.blockreassurance_product .item-product img,
.blockreassurance_product .item-product svg { width: 25px; height: 25px; }
.blockreassurance_product p.block-title { padding-inline-start: 40px; margin-bottom: 0; font-weight: 700; }
.product-list-feature { color: #808080; }
.product-list-feature .product_feature_binnen_buiten { font-size: 1rem; margin: 8px 0; }
#product .text-secondary,
.product-miniature .text-secondary { color: var(--dhz-blue) !important; }

/* ---- Category listing: live cards are FLAT columns (not boxed) + filter box + read-more ---- */
#js-product-list .product-miniature .card,
#js-product-list .product-miniature .js-product-miniature { border: 0; border-radius: 0; box-shadow: none; transform: none !important; }
/* HELD: live separates listing columns with a 1px #c0c0c0 vertical divider; the
   :nth-child target depends on the live column count (theme.yml=4 vs live maybe 3) —
   confirm via /ps-parity on a real category before adding it. */
.block-category { min-height: 220px; margin-bottom: 25px; }
.category-cover { position: absolute; right: .75rem; bottom: 0; }
.category-cover img { width: 141px; height: 180px; }
.category-readmore-hidden { max-height: 115px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 75%, transparent 100%); }
#search_filters { background: #fff; box-shadow: 0 0 5px 3px rgba(0,0,0,.05); padding: 25px 20px; margin-bottom: 25px; }
.products-sort-order .select-title:hover { color: var(--dhz-amber); }
.pagination .previous, .pagination .next { font-size: 14px; }

/* ---- Home / Featured product card: bold black centered title, navy price, flat card, bottom CTA ---- */
.product-miniature .product-title,
.product-miniature .product-title a { color: #000; font-weight: 700; font-size: 16px; text-align: center; }
.product-miniature .product-title a:hover { color: #000; }
.homepage_product_tagline { line-height: 1.4; min-height: 45px; text-align: center; }
.product-miniature .product-price-and-shipping { text-align: center; padding: 10px 0; font-weight: 700; color: var(--dhz-navy); }
#index .product-miniature .card,
.featured-products .product-miniature .card { border: 0; border-radius: 0; box-shadow: none; transform: none !important; }
.product-miniature .thumbnail-container { box-shadow: 0 0 5px 3px rgba(0,0,0,.05); margin-bottom: 0; border-right: none; }
.products .product-miniature { height: 100%; display: flex; flex-direction: column; }
.products .product-miniature > div { display: flex; flex-direction: column; }
.product-link-button { margin-top: auto !important; text-align: center; }
.product-miniature .product-list-feature { color: #808080; text-align: center; font-weight: 700; }

/* ---- Cart page ---- */
.cart-grid { margin-bottom: 1rem; }
.cart-grid-body .card, .cart-grid-right .card { background: #fff; border: 1px solid var(--dhz-border); border-radius: 6px; }
.cart-grid-body .card-block, .cart-grid-body .cart-overview { padding: 1rem; }
.cart-grid-body .card-block h1 { margin-bottom: 0; color: var(--dhz-navy); font-weight: 600; }
.product-line-info .available { color: var(--dhz-success); }
.product-line-info .out-of-stock { color: var(--dhz-sale); }
.product-line-info .unit-price-cart { padding-left: .3125rem; font-size: .875rem; color: var(--dhz-muted); }
.product-line-grid-right .bootstrap-touchspin { width: 68px; box-shadow: 2px 2px 3px 0 rgba(0,0,0,.15); }
.cart-summary-line { display: flex; justify-content: space-between; }
.cart-summary-line .value { color: var(--dhz-blue); font-weight: 600; }
.cart-summary-line.cart-total .value, .cart-summary-line.cart-total .label { font-weight: 700; color: var(--dhz-navy); }
.cart-detailed-actions .btn-primary { display: block; width: 100%; }
@media (max-width: 575.98px) {
  .cart-item { border-bottom: 1px solid var(--dhz-border); }
  .cart-item:last-child { border-bottom: 0; }
  .product-line-grid-left { padding-right: 0 !important; }
}

/* ---- Native checkout (Hummingbird multi-step; live's onepagecheckout retired) ---- */
body#checkout section.checkout-step { background: #fff; border: 1px solid var(--dhz-border); border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.06); padding: 15px; margin-bottom: 1rem; }
body#checkout .checkout-step .step-title { text-transform: uppercase; color: var(--dhz-navy); font-weight: 600; cursor: pointer; margin-bottom: 0; }
body#checkout .checkout-step .content { padding: 0 37px; }
body#checkout a:hover { color: var(--dhz-blue); }
body#checkout .breadcrumb { display: none; }
body#checkout .checkout-step .address-selector { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
body#checkout .checkout-step .address-item { flex: 0 0 49%; background: var(--dhz-bg); margin-bottom: .625rem; border-radius: 6px; }
body#checkout .checkout-step .address-item.selected { background: #fff; border: 3px solid var(--dhz-amber); }
body#checkout .checkout-step .delivery-option { background: var(--dhz-bg); padding: 15px 0; margin-bottom: 15px; border-radius: 6px; }
body#checkout .checkout-step .payment-options label { display: table-cell; }
body#checkout .checkout-step .payment-options .custom-radio { margin-right: 1.25rem; }
.js-payment-binary.disabled { opacity: .6; cursor: not-allowed; }
.js-payment-binary .accept-cgv { display: none; }
.js-payment-binary.disabled .accept-cgv { display: block; }
@media (max-width: 575.98px) { body#checkout .checkout-step .content { padding: 15px 0; } }
@media (max-width: 991.98px) { body#checkout .checkout-step .address-item { flex-grow: 1; } .delivery-option { display: flex; } }

/* ---- Promo / voucher block + checkout summary ---- */
.block-promo .promo-code { padding: 1.6rem; background: var(--dhz-border); }
.block-promo .promo-input { height: 40px; width: 60%; text-indent: 10px; border: 1px solid var(--dhz-placeholder); background: #fff; }
.block-promo .promo-name { color: var(--dhz-amber-dark); font-weight: 600; }
.block-promo .promo-code .alert-danger { position: relative; margin-top: 1.25rem; background: var(--dhz-sale); color: #fff; }
.block-promo .promo-code .alert-danger::after { content: ''; position: absolute; bottom: 100%; left: 10%; border: 10px solid transparent; border-bottom-color: var(--dhz-sale); margin-left: -10px; }
body#checkout #cart-summary-product-list { font-size: .875rem; }
body#checkout #cart-summary-product-list img { width: 50px; border: 1px solid var(--dhz-border); }
body#checkout #order-summary-content h4.h4 { margin-top: 10px; margin-bottom: 20px; color: var(--dhz-navy); }
#order-items table tr td:last-child { text-align: right; }

/* ---- Reassurance bars (USP / product / footer) ---- */
#block-reassurance img, .block-reassurance img { opacity: .7; width: 25px; height: auto; margin-right: 10px; }
#block-reassurance li, .block-reassurance li { border-bottom: 1px solid rgba(0,0,0,.1); }
#block-reassurance li:last-child { border-bottom: 0; }
.blockreassurance .block-title { color: var(--dhz-dark); font-weight: 600; }
.blockreassurance p { color: var(--dhz-text); }

/* ---- My-account icon-tile grid (flat tiles, amber hover) ---- */
.page-my-account #content .links { display: flex; flex-wrap: wrap; justify-content: flex-start; }
.page-my-account #content .links a { text-align: center; display: inline-block; font-size: 16px; color: #000; padding: 0 .9375rem; margin-bottom: 1.875rem; text-decoration: none; }
.page-my-account #content .links a span.link-item { display: block; height: 100%; background: #fdfdfd; padding: 20px; border: 1px solid #f0f0f0; border-radius: 5px; }
.page-my-account #content .links a i { display: block; font-size: 40px; width: 100%; color: var(--dhz-dark); padding-bottom: 55px; }
.page-my-account #content .links a:hover,
.page-my-account #content .links a:hover i { color: var(--dhz-amber); }

/* ---- Account / addresses / order / history / contact / 404 — FLAT white cards (no shadow) ---- */
.page-customer-account #content { background: #fff; padding: 30px; overflow: auto; box-shadow: none; border-radius: 0; color: var(--dhz-text); }
.page-customer-account #content .forgot-password { text-align: center; margin-top: 1rem; padding-bottom: .9375rem; }
.page-customer-account #content .no-account { text-align: center; font-size: 14px; }
.page-addresses .address { background: #fff; margin-bottom: 1.875rem; font-size: .875rem; color: var(--dhz-text); box-shadow: none; }
.page-addresses .address .address-footer { border-top: 1px solid #ddd; padding: 10px 0; }
.page-order-detail .box { border: 1px solid #f0f0f0; background: #fff; padding: 1rem; margin-bottom: 1rem; box-shadow: none; }
.page-order-detail h3 { font-size: 1rem; font-weight: 700; text-transform: uppercase; color: #000; margin-bottom: 1rem; }
#history .orders .order { padding: 12px 16px; border-bottom: 1px solid var(--dhz-bg); }
#history .orders .order:last-child { border-bottom: 0; }
#history .orders .order a h3 { color: var(--dhz-muted); }
/* Contact form — matched to live (measured via /ps-parity): white bordered card,
   HORIZONTAL labels (label col-md-3 left / field right), small uppercase heading,
   13px black labels, white textarea, amber "Kies bestand" + "Verstuur" buttons. */
.contact-form { background: #fff; padding: 1rem; color: var(--dhz-muted); width: 100%;
  font-size: 13px; line-height: 24px; letter-spacing: .5px; text-align: left;
  border: 1px solid rgb(135, 135, 135); border-radius: 0; box-shadow: none; }
.contact-form h3 { text-transform: uppercase; color: #000; font-size: 15px; font-weight: 700; margin: 0 0 1rem; }
.contact-form .form-group.row { margin-bottom: 1rem; align-items: center; }
.contact-form .form-control-label { font-size: 13px; font-weight: 500; color: #000; letter-spacing: .5px;
  text-align: left; margin-bottom: 0; padding-top: 0; }
.contact-form .form-control, .contact-form .form-control-select { font-size: 13px; color: var(--dhz-muted);
  border: 1px solid rgb(187, 187, 187); border-radius: 0; }
.contact-form input.form-control { background: #f1f1f1; }
.contact-form textarea.form-control { background: #fff; }
/* dropdown caret on the Onderwerp select (like live: appearance:none + a chevron bg) */
.contact-form select.form-control, .contact-form .form-control-select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23444' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: calc(100% - 10px) center; padding-right: 30px; }
.contact-form .form-control-comment { font-size: 13px; color: var(--dhz-muted); padding-top: .5rem; }
/* Attachment control — matches live's filestyle input-group: grey disabled filename field
   on the LEFT, amber "Kies bestand" button (folder icon) attached on the RIGHT. */
.contact-form .dhz-file { display: inline-flex; align-items: stretch; vertical-align: middle; }
.contact-form .dhz-file-comment { margin-left: 12px; vertical-align: middle; }
.contact-form .dhz-file__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.contact-form .dhz-file__name { flex: none; width: 279px; max-width: 55vw; background: #f6f6f6; border: 1px solid #bbb;
  border-right: 0; color: #888; font-size: 13px; height: 36px; padding: 0 12px; border-radius: 0; }
.contact-form .dhz-file__btn { display: inline-flex; align-items: center; gap: 4px; margin: 0; cursor: pointer;
  background: var(--dhz-amber); color: #000; font-weight: 600; font-size: 11px; text-transform: uppercase;
  height: 36px; padding: 0 14px; border: 0; border-radius: 0; white-space: nowrap; }
.contact-form .dhz-file__btn .material-icons { font-size: 16px; }
.contact-form .dhz-file:hover .dhz-file__btn { background: var(--dhz-amber-dark); }
/* Below lg the form is still horizontal (col-md-3 + col-md-9) but the fixed 279px field
   + button overflowed at ~768px — make the file control fluid so it fits the column. */
@media (max-width: 991.98px) {
  .contact-form .dhz-file { display: flex; max-width: 100%; }
  .contact-form .dhz-file__name { width: auto; flex: 1 1 auto; min-width: 0; }
  .contact-form .dhz-file-comment { display: block; margin: 6px 0 0; }
}
.contact-form .dhz-hp { position: absolute; left: -9999px; }
.contact-form .form-footer { text-align: right; margin-top: 1rem; }
/* Store-info card — matched to live: 3px #f0f0f0 border, grey uppercase title bar (14px). */
.contact-rich { border: 3px solid #f0f0f0; }
.contact-rich > h4 { margin: 0; padding: 12px 20px; background: #f0f0f0; color: #000;
  font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.contact-rich .block { padding: 16px 20px; margin: 0; }
.contact-rich hr { margin: 0; border: 0; border-top: 1px solid #f0f0f0; }
.contact-rich .icon { float: left; width: 45px; }
.contact-rich .icon i { font-size: 2rem; }
.contact-rich .icon i:hover { color: var(--dhz-amber); }
.contact-rich .data { font-size: 13px; overflow: hidden; }
#pagenotfound .page-not-found, #products .page-not-found { background: #fff; padding: 30px; border: 1px solid #f0f0f0; box-shadow: none; }
#pagenotfound .page-not-found .search-widget input, #products .page-not-found .search-widget input { width: 100%; border: 1px solid #f0f0f0; }

/* ---- Chrome: nav flyout, ps_customtext card, slider caption, dropdown accents ---- */
.ps-mainmenu__desktop .dropdown-menu,
.ps-mainmenu__desktop .sub-menu { background: #fff; border: 0; box-shadow: 2px 1px 11px 2px rgba(0,0,0,.1); border-radius: 0; }
.ps-mainmenu__desktop .dropdown-menu a:hover { color: #00a5f7; }
/* SEO custom-text block — matches live: centered, Poppins 13px/400 black body,
   22px/500 black headings (NOT uppercase, NOT navy like the product titles) */
.page-content--home .ps-customtext { background: #fff; border-radius: 2px; padding: 50px; text-align: center; }
.page-content--home .ps-customtext p { color: #000; font-weight: 400; font-size: 13px; line-height: 24px; margin: 0 0 24px; }
.page-content--home .ps-customtext h1,
.page-content--home .ps-customtext h2,
.page-content--home .ps-customtext h3 { color: #000; font-weight: 500; font-size: 22px; line-height: 1.1; text-transform: none; text-align: center; margin: 0 0 .6rem; }

/* Featured products with a left advice sidebar (live: side-banner col-md-3 + col-md-9 grid of 9) */
.ps-featuredproducts .featured-products__row { align-items: flex-start; }
.ps-featuredproducts .side-banner .klantenservice { width: 100%; }
.ps-featuredproducts .side-banner .klantenservice img { width: 100%; height: auto; }
/* #tmcms2_block — full-width CMS banner between the products and the SEO text (like live) */
#tmcms2_block { text-align: center; }
#tmcms2_block p { margin: 0; }
#tmcms2_block img { max-width: 100%; height: auto; }
/* the product grid sits in the col-md-9 → 3-up like live (base grid is 4-up) */
@media (min-width: 768px) {
  .ps-featuredproducts .featured-products__col .products { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 767.98px) {
  .ps-featuredproducts .featured-products__col .products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .ps-featuredproducts .featured-products__col .products { grid-template-columns: 1fr !important; }
}
.page-content--home .ps-imageslider__figcaption { left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%, -50%); max-width: 1170px; width: auto; text-align: center; color: #202c3b; text-shadow: none; }
.page-content--home .ps-imageslider__figcaption .h1,
.page-content--home .ps-imageslider__figcaption h2 { background: rgba(255,255,255,.5); display: inline-block; color: #202c3b; font-size: 26px; font-weight: 600; padding: 1.5rem 1.5rem 0; text-transform: none; }
.dropdown-menu .dropdown-item.active { background: var(--dhz-amber); color: #000; }
.klantenservice .bg-secondary, .klantenservice__panel { background-color: #0081c9 !important; color: #fff; text-transform: none; }
.klantenservice .btn { border-radius: 0; padding: 8px; margin-bottom: 7px; }
.klantenservice a, .klantenservice i { text-transform: none; }
.klantenservice i { margin-right: 5px; }
.klantenservice, .klantenservice p, .klantenservice a { line-height: 1.3; }
.klantenservice .btn-white { color: #0082c8; background: #fff; border-color: transparent; }
.klantenservice .btn-whatsapp { color: #000; background: #00c000; border-color: transparent; }

/* --- featured section + sidebar parity vs live (numbers from /ps-parity) --- */
/* live constrains the featured content to a 1400px centered container (x=100 @1600 vp);
   Hummingbird's .container caps at 1320 -> widen it here so the col-md-3 sidebar = 350px like live */
@media (min-width: 1400px) {
  .ps-featuredproducts .module-products.container { max-width: 1400px; }
}
.ps-featuredproducts .module-products.container,
.ps-featuredproducts .featured-products__row { --bs-gutter-x: 1.875rem; }   /* 15px gutter on BOTH like live -> container/row 1400, col 350, panel/img 320 */
.ps-featuredproducts .side-banner { position: relative; min-height: 1px; color: #000; font-family: Poppins, sans-serif; font-size: 13px; line-height: 24px; letter-spacing: .5px; text-align: left; }
.klantenservice, .klantenservice .h4, .klantenservice .h5, .klantenservice a { font-family: Poppins, sans-serif; letter-spacing: .5px; }
.klantenservice .h5 { font-weight: 500; margin-bottom: 8px; }   /* live: 500 / 8px (was 600 / 16px) */
.klantenservice .h4 { font-weight: 700; }                       /* live: 700 (was 600) */
.klantenservice .btn { line-height: 1.3; font-size: 13px; font-weight: 600; white-space: nowrap; display: block; min-height: 0; justify-content: normal; align-items: normal; gap: normal; }  /* live btn: 13px/600, nowrap, block */
.klantenservice .btn .material-icons { display: inline; font-size: 16px; line-height: 13px; vertical-align: middle; }  /* inline so line-height caps the box (<text line) -> button ~35px like live */
.klantenservice .btn svg { vertical-align: middle; }
.klantenservice .text-center p:last-child { margin-bottom: 10px; }   /* live: 10px under 'van 09.00…' (BS default was 16) */

/* ---------------------------------------------------------------------------
   Left column on CMS / contact pages — vloercoatingwijzer banner + klantenservice
   advice block, matching live's #left-column (294px, banner mb 30px). The klanten-
   service block reuses the shared partial; give it the same base typography it has
   in the home sidebar so it renders identically here. ------------------------ */
#left-column .dhz-left-banner { display: block; margin: 0 0 30px; }
#left-column .dhz-left-banner img { display: block; width: 100%; height: auto; }
#left-column .klantenservice {
  width: 100%; color: #000; font-family: Poppins, sans-serif;
  font-size: 13px; line-height: 24px; letter-spacing: .5px; text-align: left;
}
#left-column .klantenservice img { width: 100%; height: auto; }

/* Contact page "Winkel informatie" (ps_contactinfo) box — live shows it as a bordered
   card with a grey uppercase title bar. Scoped to the contact left column so the footer
   ps_contactinfo copy stays untouched. (Live: 3px #f0f0f0 border / 5px radius / title
   bg #f0f0f0 15px padding 14px 600 uppercase.) */
.page-contact #left-column .ps-contactinfo {
  border: 3px solid #f0f0f0; border-radius: 5px; overflow: hidden;
  padding: 0; margin: 0 0 30px;
}
.page-contact #left-column .ps-contactinfo__title {
  background: #f0f0f0; margin: 0; padding: 15px;
  font-size: 14px; font-weight: 600; text-transform: uppercase; color: #000;
}
.page-contact #left-column .ps-contactinfo__item { padding: 15px; }
.page-contact #left-column .ps-contactinfo hr { margin: 0; }

/* Mobile: match live — the main content comes first and the left-column blocks (wijzer
   banner + advice / shop-info) drop below it, on every two-column page (CMS, contact,
   category & other listings, search, the vloercoatingwijzer page). */
@media (max-width: 767.98px) {
  .columns-container > .row { display: flex; flex-wrap: wrap; }
  .columns-container > .row > #left-column { order: 2; }
  .columns-container > .row > #center-column { order: 1; }
}

/* ---------------------------------------------------------------------------
   Rich product card (miniature) — matches the live DHZ TemplateMela card.
   Values measured via /ps-parity: centered text, name 18/500 #000, subtitle
   13/400 #000, price 16/600 #233040, blue USP bullets #0082c8, grey star specs,
   grey-bold finish, orange (#febd69) BEKIJK button. Used on all product listings.
   --------------------------------------------------------------------------- */
.dhz-card { background: transparent; border: 0; text-align: center; }
.dhz-card .product-flags { display: none; }   /* live shows no flag badges on the card (discount is in the price) */
.dhz-card__head { margin-bottom: .25rem; }
.dhz-card__title { display: block; font-size: 18px; font-weight: 500; line-height: 1.1; color: #000; text-align: center; text-decoration: none; margin: 0; }
.dhz-card__title:hover { color: #0082c8; }
.dhz-card__subtitle { font-size: 13px; font-weight: 400; line-height: 1.4; color: #000; text-align: center; margin: .25rem 0 0; min-height: 2.8em; }
.dhz-card__media { margin: .25rem 0 .5rem; text-align: center; }
.dhz-card__media img { display: inline-block; max-width: 100%; height: auto; }
.dhz-card__body { text-align: center; }
.dhz-card__price { font-size: 16px; font-weight: 600; line-height: 24px; color: #233040; text-align: center; }
.dhz-card__regular-price { text-decoration: line-through; color: #878787; font-weight: 400; margin-left: 6px; }
.dhz-card__usps { font-size: 13px; font-weight: 600; line-height: 24px; color: #0082c8; text-align: center; margin: .35rem 0 1rem; }
/* star-rating spec rows (bw_coatings displayProductFeatures): name left, stars right */
.dhz-card__stars { text-align: left; margin: 0 0 .5rem; }
.dhz-card__stars .product-list-feature { align-items: center; }
.dhz-card__stars .name { font-size: 13px; font-weight: 400; color: #808080; }
.dhz-card__finish { font-size: 16px; font-weight: 700; line-height: 24px; color: #808080; text-align: center; margin: 8px 0; }
.dhz-card__proc { font-size: 13px; font-weight: 400; line-height: 24px; color: #808080; text-align: center; }
/* Pin the BEKIJK button to the card bottom so buttons align across a row like live
   (equal-height grid cards). In the crosssell scroller cards are natural height, so keep
   a fixed gap there (they follow content, top-aligned like live's carousel). */
.dhz-card__actions { text-align: center; margin-top: auto; padding-top: .75rem; }
.ps-crossselling .dhz-card__actions { margin-top: .75rem; padding-top: 0; }
.dhz-card__btn { display: inline-block; background: #febd69; color: #fff; font-size: 13px; font-weight: 600; line-height: 24px; border: 0; border-radius: 5px; padding: 6px 20px 5px; text-decoration: none; }
.dhz-card__btn:hover { background: #f5a623; color: #fff; }
/* Vertical divider lines between product columns on category listings, like live (3-up
   desktop / 2-up below 992px). Border on the card's right edge except the last in each row. */
@media (min-width: 992px) {
  #category .products .product-miniature:not(:nth-child(3n)) { border-right: 1px solid #ececec; }
}
@media (max-width: 991.98px) {
  #category .products .product-miniature:not(:nth-child(2n)) { border-right: 1px solid #ececec; }
}
/* Breathing space between the sticky navbar and the content on inner pages (live leaves a
   gap; staging sat straight below the navbar). Home excluded — its slider hugs the nav.
   Product keeps its own padding:0 parity rule (higher specificity). */
body:not(#index) .columns-container { padding-top: 1.5rem; }
/* Product card base context matched to live's card (13px / black / left / letter-spacing .5px,
   positioned) — clears the inherited 16px/grey/center; the visible title/price/specs keep their
   own explicit styles. And cap the card image height so the card isn't ~140px taller than live
   (live shows the product photo smaller). */
#category .products .product-miniature { font-size: 13px; color: #000; text-align: left; letter-spacing: .5px; position: relative;
  line-height: 24px;   /* live card root: 24px (BS5 default 1.5 gave 19.5px) */
  min-height: 0; }     /* live: min-height 0 (BS5 flex default computed 'auto') */
#category .dhz-card__media img,
.ps-featuredproducts .dhz-card__media img {
  max-width: 259px; max-height: 259px; width: auto; height: auto;
}

/* Card height 1:1 with live (box model measured on /10-alle-vloercoatings, product 22).
   Staged was 755.8 vs live 709. Excess came from Hummingbird's .product-miniature__bottom
   padding + flex gap, plus our own media margins and actions padding, which live's card
   does not have (live spaces with margins only). Scoped to #category so the same card on
   home/crosssell keeps its current spacing. Live reference values in comments. */
#category .product-miniature__bottom.dhz-card__body,
.ps-featuredproducts .product-miniature__bottom.dhz-card__body { padding: 0; gap: 0; }
#category .dhz-card__media,
.ps-featuredproducts .dhz-card__media   { margin: 0; }
#category .dhz-card__subtitle,
.ps-featuredproducts .dhz-card__subtitle { min-height: 45px; }
#category .dhz-card__price,
.ps-featuredproducts .dhz-card__price   { padding: 10px 0; }
#category .dhz-card__actions,
.ps-featuredproducts .dhz-card__actions { padding-top: 0; }
.ps-featuredproducts .product-miniature { line-height: 24px; min-height: 0; }
.ps-featuredproducts .products { row-gap: 48px; }
.featured-products__row { line-height: 24px; text-align: left; margin-bottom: 50px; }
.dhz-home-banners { line-height: 24px; text-align: left; margin-bottom: 24px; }
.klantenservice .btn, .side-banner .btn { letter-spacing: 0.7px; }
/* Product page: when the 3-column layout stacks (below lg) the gallery went full-width,
   blowing the cover image up to the whole viewport (820px on tablet). Cap + centre it so
   it stays a sensible product image like live (which keeps the gallery narrow). */
@media (max-width: 991.98px) {
  #product .dhz-product__gallery { max-width: 340px; margin-inline: auto; }
}

/* Product page — live uses a compact 13px / black / 0.5px-spacing base (Hummingbird defaults to
   16px grey). Scoped to body#product so the already-tuned home is left untouched. Headings/price
   keep their explicit sizes. */
body#product { font-size: 13px; color: #000; letter-spacing: .5px; font-family: "Poppins", sans-serif; line-height: 24px; text-align: left; }
body#product .product-information,
body#product .product__actions { font-size: 13px; color: #000; }

/* =========================================================================
   HOME HERO — rebuilt from the old TemplateMela .home_banners block:
   left = banner carousel (overlay caption + CTA), right = grey advice panel.
   Replaces the stock ps_imageslider demo slider (hidden on home below).
   ========================================================================= */
.page-content--home .ps-imageslider { display: none !important; }
/* demo home blocks replaced by static content (hero + promo banners below);
   clean follow-up: unhook ps_customtext + ps_banner from displayHome in BO */
.page-content--home .ps-banner { display: none !important; }

/* ---- Content width 1:1 with live (measured at 1600px viewport) ----
   live: .container max-width 1400px (BS5 default is 1320) and the featured /
   blog sections render 1400 wide inside it, while the HERO stays full-width
   1600 on both sides (so the hero is deliberately left alone here). */
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
  max-width: 1400px;                     /* live: 1400px */
}
/* NOTE: constraining .ps-featuredproducts to 1400 was TRIED and REVERTED
   (2026-07-27) — it measured WORSE, not better: the klantenservice sidebar sits
   inside this section and its parity jumped 5.39% -> 61.82%, and featured itself
   went 32.43% -> 34.06%. The section stays full-width; live's 1400 vs staged's
   1600 on this one region must be solved another way (or left as the residual).
   Do NOT re-add this without re-measuring `sidebar`. */

/* home promo banner strips (blue vloercoatingwijzer CTA + grey newsletter CTA) */
/* live's wrapper row inherits the 13px/0.5px Poppins body context; the rebuild's
   BS5 body is 16px/normal, which showed up as font-size + letter-spacing deltas on
   the measured wrapper. The bars themselves set their own absolute sizes below. */
.dhz-home-banners { margin-bottom: 0; font-size: 13px; letter-spacing: 0.5px; }
.dhz-home-banner {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  text-align: center; color: #fff; text-decoration: none; line-height: 1.1;  /* live bars: blue 65px, grey 56px */
  font-family: "Poppins", sans-serif; letter-spacing: 0.5px;                 /* live: 0.5px tracking on banner text */
}
.dhz-home-banner:hover { color: #fff; filter: brightness(1.05); }
.dhz-home-banner u { text-decoration: underline; }
.dhz-home-banner--blue { background: #0081c9; font-size: 30px; font-weight: 500; padding: 16px 24px; }
.dhz-home-banner--blue .fa-check { font-size: 0.8em; margin-top: 2px; }   /* live: fa-check inside 30px text */
.dhz-home-banner--grey { background: #878787; font-size: 23px; font-weight: 500; padding: 16px 24px; }
@media (max-width: 767.98px) {
  .dhz-home-banner--blue { font-size: 1.25rem; }
  .dhz-home-banner--grey { font-size: 1.05rem; }
}

/* Elfsight Google-reviews carousel ("Klanten over ons") — in-content on home,
   in footer-before elsewhere. The widget is self-contained (renders 1400x541 on
   live); we just give it breathing room and a small min-height floor to limit
   layout shift while the async embed loads. */
/* white band so the (transparent) Elfsight widget reads correctly everywhere —
   in-content on home AND in the footer-before area on other pages, which sits
   on the navy footer and would otherwise show through dark. */
.dhz-reviews { margin: 0; padding: 40px 0; background: #fff; }
.dhz-reviews > .container { min-height: 200px; }

/* match live's inherited typography context (Poppins, 13px base, 0.5px,
   left, black) so text wraps/positions like live; visible text is restyled
   explicitly below. align-items omitted -> computed 'normal' (= stretch). */
.dhz-hero {
  margin-bottom: 0; min-height: 0;
  font-family: "Poppins", sans-serif; font-size: 13px; line-height: 24px;
  letter-spacing: 0.5px; text-align: left; color: #000;
}

/* --- left: carousel --- */
.dhz-hero__slider { position: relative; overflow: hidden; aspect-ratio: 1920 / 943; min-height: 0; }
.dhz-hero__carousel,
.dhz-hero__slides { position: relative; height: 100%; width: 100%; margin: 0; padding: 0; list-style: none; }
.dhz-hero__slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .6s ease;
}
.dhz-hero__slide.is-active { opacity: 1; visibility: visible; }
/* slide image via <img> (same render path as live for pixel-exact match) */
.dhz-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* overlay caption + CTA — matches live .home_banner_overlay: caption + button
   centred together as one block (live wraps them in a single centred child). */
.dhz-hero__overlay {
  position: absolute; top: 0; bottom: 0; left: 10%; right: 20%;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.5rem;
  color: #fff; font-size: 2rem; font-weight: 600; line-height: 2.5rem;
}
.dhz-hero__cta { font-size: 1rem; line-height: normal; }

/* carousel controls */
.dhz-hero__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.7); color: #202c3b;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.dhz-hero__nav:hover { background: #fff; }
.dhz-hero__nav--prev { left: 10px; }
.dhz-hero__nav--next { right: 10px; }
/* arrows hidden until hover (like live's flexslider) */
.dhz-hero__nav { opacity: 0; transition: opacity .2s ease, background .15s ease; }
.dhz-hero__slider:hover .dhz-hero__nav,
.dhz-hero__nav:focus-visible { opacity: 1; }
.dhz-hero__dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3; display: flex; justify-content: center; gap: 8px; }
.dhz-hero__dot { width: 28px; height: 4px; border: 0; padding: 0; background: rgba(255, 255, 255, 0.55); cursor: pointer; }
.dhz-hero__dot.is-active { background: var(--dhz-amber); }

/* --- right: grey advice panel (live .bg-grey: 48px side padding, relative) --- */
.dhz-hero__aside { background-color: #e7e7e7; padding: 1.5rem 3rem; color: #000; position: relative; top: 0; left: 0; min-height: 0; }
/* aside mirrors live's 7 direct flex children under justify-content-between:
   title(m-b-1=16) · 4 usp rows(m-b-0, last m-b-2=24) · advice(m-b-1=16) · buttons.
   Values are live's measured computed styles. */
.dhz-hero__h1 { font-size: 2rem; line-height: 1.1; font-weight: 500; text-transform: none; color: rgb(120, 122, 127); margin-bottom: 16px; }
.dhz-hero__usp { display: flex; align-items: center; font-size: 1.2rem; line-height: 1.1; font-weight: 500; margin-bottom: 0; color: rgb(120, 122, 127); }
.dhz-hero__usp--last { margin-bottom: 24px; }
.dhz-hero__usp .fa-check { color: #4cbb6c; margin-right: 16px; flex: none; line-height: 1; }
.dhz-hero__h4 { font-size: 1.125rem; line-height: 1.1; font-weight: 700; color: var(--dhz-blue); margin-bottom: 16px; }
/* buttons row: live uses inline-block buttons with m-r-1/m-b-1 margins (not flex+gap) */
.dhz-hero__btns { display: block; }
.dhz-hero__btns .dhz-btn-blue { margin-right: 16px; margin-bottom: 16px; }
.dhz-hero__btns .dhz-btn-green { margin-bottom: 16px; }
.dhz-hero__btns .fa-phone { margin-right: 0; }

/* blue / green CTA buttons — live measured: 17.6px/600, padding 8px 16px,
   radius 5px, letter-spacing 0.7px, line-height 24px (height 42px) */
.dhz-btn-blue, .dhz-btn-green {
  font-size: 17.6px; font-weight: 600; line-height: 24px;
  padding: 8px 16px; border-radius: 5px; letter-spacing: 0.7px; border-color: transparent;
  display: inline-block; white-space: nowrap; min-height: 0; vertical-align: top;
  justify-content: normal; align-items: normal; gap: normal;  /* clear .btn flex residue */
}
.dhz-btn-blue { color: #fff; background-color: #0081c9; }
.dhz-btn-blue:hover { color: #fff; background-color: #006ba6; }
.dhz-btn-green { color: #fff; background-color: #00c100; }
.dhz-btn-green:hover { color: #fff; background-color: #00a300; }

@media (max-width: 767.98px) {
  .dhz-hero__overlay { font-size: 1rem; line-height: normal; left: 6%; right: 6%; }
  .dhz-hero__h1 { font-size: 1.4rem; }
  .dhz-hero__usp { font-size: 1rem; }
  .dhz-hero__h4 { font-size: 1.2rem; }
}

/* =========================================================================
   PRODUCT PAGE — 3-column layout rebuilt to match live (TemplateMela).
   Measured live (vp1600, content 1400): gallery col-lg-3 (square cover ~327) |
   buy col-lg-8 (~715) | specs col-lg-4 (~357: blue USP bullets, star features,
   finish + verdunning/verwerkingstijd, klantenservice) ; then a FULL-WIDTH
   order-table row ; then FULL-WIDTH horizontal tabs. Hummingbird ships a 2-col
   stacked layout ~2x taller — this reflows it into live's 3 columns.
   ========================================================================= */
/* widen the content container from Hummingbird's ~1296 to live's 1400 (no
   horizontal padding so the container content box is exactly 1400 like live) */
body#product .columns-container.container { max-width: 1400px; padding-left: 0; padding-right: 0; padding-top: 30px; }
/* category page: same 1400 content width as live (was ~1320) */
body#category .columns-container.container { max-width: 1400px; padding-left: 0; padding-right: 0; }

/* category columns: live's sidebar is 294px, but Hummingbird's col-lg-3 renders ~360px. Pin the
   sidebar to 294 and let the product column fill the rest (~1106) so the 3-up grid cards widen to
   live's ~349px (measured live vp1500: sidebar 294 / content 1106 / card 349). */
@media (min-width: 992px) {
  body#category #left-column { flex: 0 0 294px; max-width: 294px; }
  body#category #center-column { flex: 0 0 calc(100% - 294px); max-width: calc(100% - 294px); }
}

/* navbar: live spaces menu items with link padding only (12px each side, no gap);
   Hummingbird adds an 8px flex gap AND 12px padding on the <ul> -> items (sum 1387)
   exceed the usable 1376 by ~11px -> Contact wraps to a 2nd row. Drop the gap + the
   ul padding so all items fit one row like live. */
/* zero only the LEFT/RIGHT padding (so 13 items fit one row); keep the top/bottom
   padding — that's what gives the navy bar its height (padding:0 made it too thin) */
.ps-mainmenu__tree { gap: 0; padding-left: 0 !important; padding-right: 0 !important; }
/* the caret/dropdown-toggle button isn't on live — remove it */
.ps-mainmenu__tree-dropdown-toggle,
.ps-mainmenu__tree-dropdown-toggle.dropdown-toggle { display: none !important; }
/* dropdowns: live is a compact vertical list (~224px, dark navy links). Hummingbird renders a
   full-width (1600px) mega-menu with white-on-white links (invisible). Restyle to live's dropdown. */
.ps-mainmenu__tree-item { position: relative; }
.ps-mainmenu__tree-item .submenu,
.ps-mainmenu .js-sub-menu.submenu {
  width: auto !important; min-width: 220px; max-width: 280px;
  left: 0 !important; right: auto !important;
  top: 100% !important;   /* the ps_mainmenu JS injects an inline top:146px (mega-menu offset); force the dropdown right under the item */
  background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); border-radius: 0 0 4px 4px; padding: 6px 0;
}
.ps-mainmenu .submenu__row { display: block; margin: 0; }
.ps-mainmenu .submenu__left { flex: 0 0 100% !important; max-width: 100% !important; width: 100%; padding: 0; }
.ps-mainmenu .submenu__right { display: none !important; }
.ps-mainmenu .submenu a,
.ps-mainmenu .submenu__left-item {
  color: #202c3b !important; display: block; padding: 6px 18px; font-size: 15px;
  letter-spacing: .5px; white-space: nowrap; text-align: left; opacity: 1;
  background: transparent !important; border: 0 !important;
}
/* kill the leftover mega-menu 'active tab' grey highlight on the first item */
.ps-mainmenu .submenu__left-item[aria-selected="true"],
.ps-mainmenu .submenu__left-item.active { background: transparent !important; }
.ps-mainmenu .submenu a:hover,
.ps-mainmenu .submenu__left-item:hover { color: #0082c8 !important; background: #f5f5f5 !important; }

/* 'Best verkochte producten' = the ps_bestsellers home block. My product_sale import switched it
   on; live has no such block -> hide it. (Cleaner: disable the ps_bestsellers module in the BO.) */
.ps-bestsellers { display: none !important; }

/* live rows use 30px gutters (BS3) not BS5's 24px; columns keep their own
   natural height like live's float grid (BS5 flex rows would stretch them) */
.dhz-product .row,
.dhz-product__row { --bs-gutter-x: 1.875rem; }
.dhz-product__top,
.dhz-product__row { align-items: flex-start; }
.dhz-product__top { margin-bottom: 0; }

/* live kills paragraph margins in the buy column (7 checkmark lines = 7x24px,
   no inter-paragraph gap); empty <p> spacers are dropped */
.dhz-product__buy p { margin-top: 0; margin-bottom: 0; }
.dhz-product__buy p:empty { display: none; }
/* live spaces buy-column blocks ~16px apart; Hummingbird's block margins stack to
   ~32px, pushing everything below down (cumulative drift). Normalise to 16px. */
.dhz-product__buy > * { margin-top: 0; margin-bottom: 16px; }
.dhz-product__buy > *:last-child { margin-bottom: 0; }

/* price band — live: ruled top+bottom (1px #ccc), 8px padding; price 20/600; short tax
   note '(incl. btw)' inline grey; stock/delivery 16/400 under the price */
.dhz-product .dhz-price-band { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 8px 0; }
.dhz-product .dhz-price-band .product__prices-inline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.dhz-product .dhz-price-band .product__price { font-size: 20px; font-weight: 600; color: #000; padding-top: 5px; }
.dhz-product .dhz-tax-label { font-size: 13px; font-weight: 400; color: #808080; letter-spacing: .5px; }
/* discount: amber "€ X korting" badge + struck grey regular price, inline after the current
   price — matches live (.discount.discount-amount: amber #febd69 / black / 13px 600 uppercase /
   5px 8px, regular 20px 600 #aaa line-through). */
.dhz-product .dhz-price-band .dhz-korting-badge {
  background: var(--dhz-amber); color: #000; font-size: 13px; font-weight: 600;
  text-transform: uppercase; padding: 5px 8px; border-radius: 0; white-space: nowrap;
}
.dhz-product .dhz-price-band .product__regular-price {
  font-size: 20px; font-weight: 600; color: #aaa; text-decoration: line-through;
}
.dhz-product .delivery-information.dhz-stock { font-size: 16px; font-weight: 400; color: #000; letter-spacing: .5px; margin-top: 2px; }
/* Product-block section titles ("Gerelateerde producten", "Je bent misschien ook geïnteresseerd
   in", featured, new, bestsellers…) — live centers them: 20px/500/uppercase (.products-section-title).
   Staging's section-title component defaults to 24/600/left. */
.section-title { text-align: center; font-size: 20px; font-weight: 500; text-transform: uppercase; }

/* Cross-sell + accessories product blocks — match live's card sizing + centering.
   Hummingbird lays BOTH through `.products` as a 4-col CSS grid with 1fr tracks, so
   (a) the 3-item accessories block ("Je bent misschien ook geïnteresseerd in") leaves
   an empty 4th column -> cards hug the left with dead space on the right, and (b) the
   crosssell block ("Gerelateerde producten") sits in a narrower .container (inset ~40px,
   misaligned with the block above) in 4 oversized cards. Live instead shows accessories
   as 3 cards filling the width, and the crosssell as ~5 smaller cards per row.
   Fix: switch these two grids to a centered flex-wrap with fixed per-row card widths, so
   full rows fill the width AND any partial row centers (no dead space); and drop the
   crosssell container cap so both blocks share the same full-width left edge. Card widths
   measured vs live @1400px content: accessories ≈443px (3-up), crosssell ≈264px (5-up).
   flex-grow is 0 so partial rows stay small+centered (grow would stretch them full-width). */
.product__accessories .products,
.ps-crossselling .products { grid-template-columns: none; gap: 1.5rem; }

/* ACCESSORIES ("geïnteresseerd") — centered flex-wrap, 3 per row filling the width like
   live (col-md-4); 2 on tablet, 1 on phones. align-items:stretch + height:auto lets the
   shorter cards stretch to the row height so their "BEKIJK" buttons drop to the bottom
   and align like live (base rule forces height:100% which blocks the stretch here). */
.product__accessories .products { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; }
.product__accessories .products > * {
  flex: 0 1 calc((100% - 2 * 1.5rem) / 3); max-width: calc((100% - 2 * 1.5rem) / 3); height: auto;
}
/* cards stretch to equal height, but the dhz-card actions wrapper carries a fixed 12px
   top margin -> short cards' "BEKIJK" sits high. Pin it to the bottom so all three align
   like live. Scoped to accessories only (crosssell stays a natural-height scroller). */
.product__accessories .dhz-card__actions { margin-top: auto; }
@media (max-width: 767.98px) {
  .product__accessories .products > * { flex-basis: calc((100% - 1.5rem) / 2); max-width: calc((100% - 1.5rem) / 2); }
}
@media (max-width: 519.98px) {
  .product__accessories .products > * { flex-basis: 100%; max-width: 100%; }
}

/* CROSSSELL ("Gerelateerde producten") — single-row horizontal scroller like live's
   carousel: ~5 small cards visible (≈264px like live), top-aligned at natural heights,
   the rest scroll horizontally. A wrapped grid here looks broken because one tall card
   (many spec rows) shoves the next row down leaving big gaps. Full content width so it
   lines up with the accessories block above. */
.ps-crossselling .module-products.container { max-width: none; }
.ps-crossselling .products {
  display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start;
  overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: .75rem; scrollbar-width: thin;
}
.ps-crossselling .products > * {
  flex: 0 0 calc((100% - 4 * 1.5rem) / 5); max-width: calc((100% - 4 * 1.5rem) / 5); scroll-snap-align: start;
}
@media (max-width: 1199.98px) {
  .ps-crossselling .products > * { flex-basis: calc((100% - 3 * 1.5rem) / 4); max-width: calc((100% - 3 * 1.5rem) / 4); }
}
@media (max-width: 991.98px) {
  .ps-crossselling .products > * { flex-basis: calc((100% - 2 * 1.5rem) / 3); max-width: calc((100% - 2 * 1.5rem) / 3); }
}
@media (max-width: 767.98px) {
  .ps-crossselling .products > * { flex-basis: calc((100% - 1.5rem) / 2); max-width: calc((100% - 1.5rem) / 2); }
}

/* live shows the stock line UNDER the price, nothing in the add-to-cart block */
.dhz-product .product__availability { display: none; }

/* Volume-discount table — matched to live (measured): a 14px/400 "Volumekorting" title, then a
   table with 5px #ebebeb cell borders, centered cells, 10/20 padding, th 700 / td 400. Sits below
   the add-to-cart button (position set in product.tpl). */
.product__discounts { margin-top: 1rem; }
.product__discounts-title { font-size: 14px; font-weight: 400; color: #000; text-align: left; text-transform: none; margin: 0 0 .5rem; }
.discounts-table { border-collapse: separate; border-spacing: 0; width: 100%; }
.discounts-table th,
.discounts-table td { border: 5px solid #ebebeb; padding: 10px 20px; text-align: center; font-size: 13px; line-height: 1.3; color: #000; }
.discounts-table th { font-weight: 700; background: #fff; }
.discounts-table td { font-weight: 400; background: transparent; }

/* Rekentool caption — live renders a decorative PNG (handwritten note + curved arrow) as an
   ::after on the calc button. The image is already on staging (/img/doehetzelfcoatings/); the
   ported module CSS just lacked the rule. Values measured from live (210x119, absolute, z-index -1). */
/* live lays the descr1 (✔ list) + Rekentool as a flex row with justify-content:space-between
   (✔ list left, Rekentool pushed to the RIGHT edge); the ported module lacked those classes */
.dhz-product .product-buttons { justify-content: space-between; flex-wrap: wrap; }
/* match live's #bereken width (169px) so the right-aligned button sits far enough
   left that the caption PNG (left:-45, 210 wide) stays INSIDE the buy column and
   doesn't overflow into the klantenservice sidebar */
#product #bereken_en_bestel_button { position: relative; min-width: 169px; }

/* Product page — match live, which shows NONE of these: the breadcrumb (live CSS-hides it),
   the productcomments 'Commentaar' block, and the ps_categoryproducts 'other products in the
   same category' block. Live shows only the accessory relations + a crosssell. (Cleaner still:
   disable the productcomments + ps_categoryproducts MODULES in the BO so they don't run at all.) */
body#product .breadcrumb,
body#product .breadcrumb__wrapper { display: none; }
body#product .product-comments-wrapper,
body#product [class*="product-comments"],
body#product #product-comments-list { display: none; }
body#product .ps-categoryproducts { display: none; }
#product #bereken_en_bestel_button::after {
  content: url("/img/doehetzelfcoatings/product_page_rekentool.png");
  position: absolute; top: 20px; left: -45px; width: 210px; height: 119px; z-index: -1;
}
/* live shows no social-share ('Delen') buttons in the buy column (ps_sharebuttons on
   displayProductAdditionalInfo) — hide to match. (Or unhook ps_sharebuttons in BO.) */
body#product .ps-sharebuttons, body#product .social-sharing { display: none; }

/* title: full width above the buy/specs row (live measured: 20px/600/capitalize/15px) */
.dhz-product .productpage_title {
  color: #000; font-weight: 600; font-size: 20px; line-height: 24px; font-family: "Poppins", sans-serif;
  text-transform: capitalize; margin: 0 0 15px; letter-spacing: .5px;
}

/* columns behave like live's BS3 float grid: relative, min-height 1px; buy+specs
   carry m-b-2 (24px) like live's col markup */
.dhz-product__gallery,
.dhz-product__buy,
.dhz-product__specs { position: relative; min-height: 1px; top: 0; left: 0; }
.dhz-product__buy,
.dhz-product__specs { margin-bottom: 24px; }

/* gallery column — square cover, flags top-left, thumbnails a compact
   horizontal strip (Hummingbird stacks them ~210px tall; live is ~122px) */
.dhz-product__gallery .product-flags { margin: 0; padding: 0; list-style: none; position: absolute; z-index: 2; top: 0; left: calc(var(--bs-gutter-x) * .5); }
.dhz-product__gallery .product-flags li { display: inline-block; }
/* live shows the (many) thumbnails as ONE horizontal scrolling row of 83px
   squares (old theme's scroll-box-arrows), not a wrapped/stacked grid */
.dhz-product__gallery .product__thumbnails-list { display: flex; flex-flow: row nowrap; gap: 8px; margin: 8px 0 0; padding: 0 0 6px; list-style: none; overflow-x: auto; }
.dhz-product__gallery .product__thumbnails-list > * { flex: 0 0 auto; width: 83px; margin: 0; }
.dhz-product__gallery .product__thumbnails-list img { width: 83px; height: 83px; object-fit: cover; }

/* specs column (blue bullets, stars, finish, klantenservice). The OUTER
   .product-list-feature row inherits live's grey/400/left/24 base; make it
   block (BS5 .row is flex) so it matches. Bold/blue/centre live on the inner
   col (text-secondary -> blue via '#product .text-secondary' above). */
/* live spaces ONLY the USP line + finish block (16px); the star rows
   (displayProductFeatures) are tight — 24px each, no gap — so the klantenservice
   panel sits ~96px higher, aligned with live. */
.dhz-product__specs .product-list-feature { margin-bottom: 0; }
.dhz-product__specs .dhz-product__usps { margin-bottom: 16px; }
.dhz-product__specs .dhz-product__finish { margin: 0 0 16px; }
.dhz-product__usps, .dhz-product__finish { display: block; }
.dhz-product__finish .product_feature_binnen_buiten { font-size: 16px; margin: 8px 0; }
/* klantenservice fills the specs column like the home sidebar */
.dhz-product__specs .klantenservice { width: 100%; }
.dhz-product__specs .klantenservice img { width: 100%; height: auto; }

/* packaging combos (Verpakking 5kg/10kg) as bordered buttons like live, not radio dots */
.dhz-product .product-variant__radios { display: flex; flex-wrap: wrap; gap: 8px; }
.dhz-product .product-variant__radio.form-check { display: inline-flex; margin: 0; padding: 0; min-height: 0; }
.dhz-product .product-variant__radio .form-check-input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none; }
.dhz-product .product-variant__radio label { margin: 0; cursor: pointer; }
.dhz-product .product-variant__radio .form-check-label {
  display: inline-block; border: 1px solid #ccc; border-radius: 4px;
  padding: 6px 16px; font-size: 13px; font-weight: 500; color: #000; letter-spacing: .5px; background: #fff;
}
.dhz-product .product-variant__radio .form-check-input:checked + label .form-check-label { border-color: #233040; font-weight: 700; }
.dhz-product .product-variant__radio .form-check-label:hover { border-color: #233040; }

/* full-width horizontal tabs (Beschrijving | Stappenplan/downloads) — live: mt 0, mb 30px */
.dhz-product-tabs { margin: 0 0 30px; }
.dhz-product-tabs__inner { width: 100%; }
.dhz-product-tabs .nav-tabs { border-bottom: 1px solid #ddd; }
.dhz-product-tabs .nav-tabs .nav-item { margin-bottom: -1px; }
.dhz-product-tabs .nav-tabs .nav-link {
  color: var(--dhz-muted); border: 0; border-bottom: 3px solid transparent; background: none;
  border-radius: 0; font-weight: 600; text-transform: uppercase; padding: .75rem 1.25rem;
}
.dhz-product-tabs .nav-tabs .nav-link.active,
.dhz-product-tabs .nav-tabs .nav-link:hover { color: var(--dhz-amber-dark); border-bottom-color: var(--dhz-amber); background: none; }
.dhz-product-tabs .tab-content { padding: 1.5rem 0; }
.dhz-product-tabs .product-description { font-size: 13px; line-height: 24px; color: #808080; letter-spacing: .5px; }

/* stack to single column below lg, like live */
@media (max-width: 991.98px) {
  .dhz-product__gallery, .dhz-product__buy, .dhz-product__specs { margin-bottom: 1.5rem; }
}

/* =========================================================================
   HEADER CART DROPDOWN — live-style preview panel (click the cart to open)
   Hummingbird ships no cart dropdown; this replicates the old live theme's
   cart_block: item(s) + totals + BESTELLEN -> checkout.
   ========================================================================= */
#_desktop_ps_shoppingcart .header-block { position: relative; }
.dhz-cart-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 1080;
  width: 360px;
  max-width: 92vw;
  background: #fff;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .18);
  padding: 18px;
  text-align: left;
  cursor: default;
}
#_desktop_ps_shoppingcart .header-block.dhz-cart-open .dhz-cart-dropdown { display: block; }

.dhz-cart-dropdown__items { }
.dhz-cart-item { display: flex; align-items: flex-start; gap: 14px; padding-bottom: 16px; }
.dhz-cart-item + .dhz-cart-item { border-top: 1px solid #f0f0f0; padding-top: 16px; }
.dhz-cart-item__img { flex: 0 0 64px; line-height: 0; }
.dhz-cart-item__img img { width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--dhz-border); }
.dhz-cart-item__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dhz-cart-item__name { color: #202c3b; font-weight: 600; font-size: 15px; text-decoration: none; line-height: 1.3; }
.dhz-cart-item__name:hover { color: var(--dhz-blue); }
.dhz-cart-item__qty { color: #9a9a9a; font-weight: 400; }
.dhz-cart-item__attr { color: #9a9a9a; font-size: 13px; }
.dhz-cart-item__price { color: #202c3b; font-weight: 700; font-size: 15px; margin-top: 2px; }
.dhz-cart-item__remove { flex: 0 0 auto; color: #4a4a4a; line-height: 1; text-decoration: none; }
.dhz-cart-item__remove .material-icons { font-size: 22px; }
.dhz-cart-item__remove:hover { color: var(--dhz-sale); }

.dhz-cart-dropdown__summary { border-top: 1px solid #e5e5e5; padding-top: 14px; margin-top: 2px; }
.dhz-cart-sum-line { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; color: #202c3b; margin-bottom: 8px; }
.dhz-cart-sum-line .value { font-weight: 700; }
.dhz-cart-sum-line--sep { margin-top: 16px; }
.dhz-cart-sum-total .label,
.dhz-cart-sum-total .value { font-weight: 700; }

.dhz-cart-dropdown__checkout { text-align: right; margin-top: 6px; }
.dhz-cart-checkout-btn {
  display: inline-block;
  background: var(--dhz-amber);
  color: #202c3b;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 12px 26px;
  text-decoration: none;
  border-radius: 2px;
}
.dhz-cart-checkout-btn:hover { background: var(--dhz-amber-dark); color: #202c3b; }

/* =========================================================================
   PRODUCT CARD HOVER FLIP — reproduces live's tm_imagehover (the module isn't
   on the rebuild): the 2nd product image flips open (scaleX 0->1) + fades in.
   ========================================================================= */
.dhz-card__media .thumbnail-container,
.dhz-card__media .product-miniature__image-link { position: relative; }
.dhz-card__img-second {
  position: absolute; top: 0; left: 0; right: 0;
  width: 100%; height: auto;
  opacity: 0; transform: scaleX(0); transform-origin: center center;
  transition: opacity 500ms ease, transform 500ms ease;
  pointer-events: none;
}
.dhz-card:hover .dhz-card__img-second { opacity: 1; transform: scaleX(1); }

/* =========================================================================
   MOBILE/TABLET FIXES (2026-08-12) — all <lg only, desktop parity untouched.
   Context: html{overflow-x:clip} stops the page panning, so oversized content
   is silently CLIPPED at the viewport edge; these rules fix what that clip
   was visibly eating on small screens.
   ========================================================================= */
/* Extra-product-field content is admin-entered HTML; the YouTube embeds in it
   carry a hardcoded width=560 that overflowed every viewport narrower than
   ~590px (this was the entire mobile product-page overflow). Scale to fit. */
.bw-extra-product-field iframe { max-width: 100%; height: auto; aspect-ratio: 16 / 9; }

@media (max-width: 991.98px) {
  /* Hero aside title: the compound word "vloercoatingspecialist" at 2rem
     (~330px) exceeds the col-md-5 content box (224px @768) and got clipped
     mid-word. ≥lg the aside is wide enough for the full word. */
  .dhz-hero__h1 { font-size: 1.5rem; hyphens: auto; overflow-wrap: anywhere; }

  /* Rekentool caption PNG (210px, absolute left:-45px — a desktop parity
     item): on narrow screens it clips at the viewport edge and overlaps the
     Verpakking row. Decorative only — drop it below lg. */
  #product #bereken_en_bestel_button::after { content: none; }

  /* .dhz-product has no side padding, so the BS3-style -15px row gutters put
     column content flush against the screen edge. Restore the 15px frame the
     BS3 container gave live. */
  .dhz-product { padding-inline: 15px; }
}