/* =====================================================================
   2B Goods brand layer on Hummingbird (Bootstrap 5.3.3).
   Clean rebuild matching the live design.
   Tokens lifted from the live theme:
     accent gold  #DAA14C   dark band #30373E   font Plus Jakarta Sans
   ===================================================================== */
/* Font is loaded via a <link> in _partials/head.tpl (an @import here would be
   stripped once PrestaShop concatenates the CSS bundle). */

:root {
  --tb-gold: #DAA14C;
  --tb-dark: #30373E;
  --tb-ink: #222;
  --tb-muted: #6b6b6b;

  /* Brand the Bootstrap primary + link colours so the default blue is gone
     site-wide (buttons, links, focus, badges). brand.css loads after the parent
     theme.css, so these win. */
  --bs-primary: #DAA14C;
  --bs-primary-rgb: 218, 161, 76;
  --bs-link-color: #DAA14C;
  --bs-link-color-rgb: 218, 161, 76;
  --bs-link-hover-color: #c8893b;
  --bs-link-hover-color-rgb: 200, 137, 59;
}

/* Primary / outline-primary buttons -> brand gold. Bootstrap 5.3 bakes literal
   colours into the per-component --bs-btn-* vars, so overriding --bs-primary alone
   does NOT recolour buttons; we override the button vars here. The product page's
   dark add-to-cart pill sets its own `background`, so it stays dark. */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--tb-gold);
  --bs-btn-border-color: var(--tb-gold);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #c8893b;
  --bs-btn-hover-border-color: #c8893b;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #c8893b;
  --bs-btn-active-border-color: #c8893b;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--tb-gold);
  --bs-btn-disabled-border-color: var(--tb-gold);
}
.btn-outline-primary {
  --bs-btn-color: var(--tb-gold);
  --bs-btn-border-color: var(--tb-gold);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--tb-gold);
  --bs-btn-hover-border-color: var(--tb-gold);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--tb-gold);
  --bs-btn-active-border-color: var(--tb-gold);
  --bs-btn-disabled-color: var(--tb-gold);
  --bs-btn-disabled-border-color: var(--tb-gold);
}

body, .tb-home, h1, h2, h3, h4, h5, h6, .btn {
  font-family: "Plus Jakarta Sans", sans-serif; /* exact live stack — parity compares the string */
}
body { color: var(--tb-ink); }

/* ---- Content typography: live runs a 14px body; Hummingbird defaults to 16px, so all
   content text + headings render oversized vs live. Scope a 14px base to the content area
   (#wrapper) so the nav (#header) and footer (#footer) keep their own explicit sizes. ---- */
#wrapper { font-size: .875rem; }
#wrapper .page-title-section { font-size: 1.5rem; }

/* =====================================================================
   Header — single bar, transparent over the hero on home
   ===================================================================== */
/* z-index 1030 (Bootstrap fixed-nav level) so the header + cart-preview dropdown
   sit above the cart page's sticky order summary (.cart-grid__aside-wrapper, z-index 1020). */
.tb-header { background: var(--tb-dark); position: relative; z-index: 1030; }
.tb-header--overlay { background: transparent; position: absolute; top: 0; left: 0; right: 0; }
.tb-header__row { display: flex; align-items: center; gap: 1.5rem; min-height: 100px; }
/* Logo is the BO-configured logo (renderLogo → $shop.logo_details), rendered at its
   intrinsic size exactly like live (leo: .logo{max-width:100%;height:auto}). To resize it,
   replace the logo in BO (Design → Logo) — don't hard-cap it here. The header row's
   min-height keeps the bar balanced; the mobile cap below prevents overflow on phones. */
.tb-header__logo img,
.tb-header__logo .logo { max-width: 100%; height: auto; }
/* Live (leo) renders the header full-width: logo hugs the left edge, actions the right,
   menu centred between. Hummingbird's .container-xl caps the bar at 1320px and centres it,
   which on wide screens insets the logo far from the edge. Make ONLY the header full-bleed
   (page content below keeps its container). */
.tb-header > .container-xl { max-width: 100%; padding-left: 2rem; padding-right: 2rem; }
@media (max-width: 991.98px){ .tb-header > .container-xl { padding-left: 1rem; padding-right: 1rem; } }
/* Balanced 3-column header: equal side columns keep the menu truly centered */
.tb-header__logo { flex: 1 1 0; min-width: 0; }
.tb-header__nav { flex: 0 1 auto; display: flex; justify-content: center; }
.tb-header__actions { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; gap: 1rem; white-space: nowrap; }
/* Bel ons sits FIRST in the action cluster, so the icons fall between it and the flag */
.tb-header__phone { color: var(--tb-gold); text-decoration: none; font-weight: 600; order: -1; }
.tb-header__phone strong { color: var(--tb-gold); }
.tb-header__phone:hover { color: #fff; }
.tb-header__burger { background: none; border: 0; display: none; flex-direction: column; gap: 5px; cursor: pointer; order: 5; }
.tb-header__burger span { width: 26px; height: 2px; background: #fff; display: block; }
/* Below xl the desktop menu is hidden (ps_mainmenu is d-xl-block). Show OUR burger
   (opens the #mobileMenu offcanvas) and drop the long phone text + flag (the flag and
   contact live inside the offcanvas). The nav is NOT hidden, so the offcanvas works. */
@media (max-width: 1199.98px){
  /* Mobile/tablet header like live: a solid dark bar (NOT the desktop transparent
     overlay), with the logo centered on its own row and the burger (left) + action
     icons incl. the language flag (right) on the row below it. */
  .tb-header,
  .tb-header--overlay { position: relative; background: var(--tb-dark); }
  .tb-header__row { flex-wrap: wrap; align-items: center; gap: .5rem; min-height: 0; padding: .55rem 0; }
  .tb-header__logo { flex: 1 0 100%; display: flex; justify-content: center; order: 1; min-width: 0; }
  .tb-header__logo img { max-height: 60px; width: auto; }
  /* Keep the nav in the DOM — the #mobileMenu offcanvas lives inside it — but take it
     out of the flex row so it doesn't affect the header layout. The desktop menu inside
     is already hidden below xl; the offcanvas is position:fixed so it still opens. */
  .tb-header__nav { position: absolute; width: 0; height: 0; overflow: hidden; padding: 0; margin: 0; }
  .tb-header__burger { display: flex; order: 2; margin: 0 auto 0 0; }
  .tb-header__actions { order: 3; flex: 0 0 auto; margin-left: auto; gap: .9rem; }
  .tb-header__phone { display: none; }
  /* ps_mainmenu relocates the module's own selector into the offcanvas below xl, leaving
     #_desktop_ps_languageselector empty — hide it and show our own bar flag (like live). */
  .tb-header__actions #_desktop_ps_languageselector { display: none; }
  .tb-header__actions .tb-mlang { display: inline-flex; }
}

/* Header stays at the top (no sticky/follow) — matches live.
   Hummingbird's parent .header rule is position:sticky;top:0 — override it. */
#header.header { position: static !important; top: auto !important; z-index: 1030; }

/* White links on the dark/overlay header */
.tb-header a,
.tb-header .header-block__action-btn,
.tb-header .material-icons { color: #fff; }
.tb-header a:hover { color: var(--tb-gold); }

/* Search box: removed from the header (per design) */
.tb-header .ps-searchbar { display: none !important; }

/* Account & cart: icon-only like live — hide the "Inloggen"/"Winkelwagen" labels */
.tb-header .header-block__title { display: none !important; }
.tb-header .header-block__action-btn { padding: 0 !important; display: inline-flex; align-items: center; }
.tb-header .header-block__icon { font-size: 26px; }
.tb-header .ps-customersignin,
.tb-header .ps-shoppingcart { display: flex; align-items: center; }
/* Cart badge: small gold bubble; hide the empty white circle when the cart is empty */
.tb-header .blockcart.inactive .header-block__badge { display: none !important; }
.tb-header .header-block__badge {
  background: var(--tb-gold) !important; color: #fff !important;
  border-radius: 50%; min-width: 18px; height: 18px;
  font-size: .68rem; line-height: 18px; text-align: center;
  display: inline-block; margin-left: -8px; margin-top: -12px;
}

/* Flag selector last of all in the action cluster */
.tb-header__actions #_desktop_ps_languageselector { order: 100; }

/* Horizontal main menu */
.tb-header .ps-mainmenu__desktop { display: block; }
/* The parent ships .ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree (0,3,0) with
   align-items:stretch; flex-wrap:wrap; gap:.5rem — more specific than this (0,2,0) rule, so
   it overrode our gap (extra menu spacing) AND stretched the items full-height (which pushed
   the top:100% dropdown to the bottom of the bar = the hero gap). !important wins both. */
.tb-header .ps-mainmenu__tree {
  display: flex; flex-wrap: nowrap !important; align-items: center !important;
  gap: 0 !important; list-style: none; margin: 0; padding: 0;
}
.tb-header .ps-mainmenu__tree-item-wrapper { display: flex; align-items: center; }
.tb-header .ps-mainmenu__tree-link {
  color: #fff; text-transform: uppercase; font-weight: 700;
  letter-spacing: .015em; font-size: .8125rem; text-decoration: none; white-space: nowrap;
  /* Match live (leo) spacing: 16px each side, no inter-item gap → ~32px between labels.
     Vertical centring is handled by the nav's align-self:center; hover reliability by
     the li:hover rule below. */
  padding: .5rem 1rem !important;
}
.tb-header .ps-mainmenu__tree-link:hover { color: var(--tb-gold); }
/* Parent gives this toggle padding:1.25rem + align-self:stretch (0,4,1), which made the
   <li> ~44px tall and pushed the dropdown down. Force it compact so the <li> = label height. */
.tb-header .ps-mainmenu__tree-dropdown-toggle { background: none; border: 0; color: #fff; padding: 0 0 0 .25rem !important; align-self: center !important; }
/* Active/current menu item in gold (like live's HOME) */
.tb-header .ps-mainmenu__tree-item.current > .ps-mainmenu__tree-item-wrapper > .ps-mainmenu__tree-link,
.tb-header .ps-mainmenu__tree-link[aria-current],
.tb-header .ps-mainmenu__tree-link.active { color: var(--tb-gold); }

/* Centre the nav in the bar EXACTLY like the logo and "Bel ons" (they use the
   row's align-items:center). The old align-self:stretch made only the nav full
   height, which top-aligned the menu links — that was the whole problem. */
.tb-header__nav { align-self: center; }
/* ps_mainmenu ships with Bootstrap col-xl (flex-grow) which left-aligns the
   menu; shrink it so the nav's justify-content:center actually centers it.
   Scope desktop layout to xl+ only and to the DESKTOP wrapper, so the mobile
   offcanvas (.ps-mainmenu--mobile) is untouched and ps_mainmenu's responsive works. */
.tb-header .ps-mainmenu--desktop { flex: 0 0 auto !important; max-width: none !important; }
@media (min-width: 1200px) {
  /* .ps-mainmenu__desktop carries .d-xl-block (display:block); force flex so the <ul>
     centres as a block in the bar. */
  .tb-header .ps-mainmenu--desktop { display: flex !important; align-items: stretch; }
  .tb-header .ps-mainmenu__desktop { display: flex !important; align-items: center; }
  /* Keep items at label height (NOT full-header-height): a stretched item pushes the
     top:100% dropdown to the header's bottom edge, leaving a transparent gap (hero
     showing) between the centred label and the dropdown. Centring = label height = the
     dropdown opens flush under the label. */
  .tb-header .ps-mainmenu__tree { align-items: center; }
  .tb-header .ps-mainmenu__tree-item { display: flex; align-items: center; }
  .tb-header .ps-mainmenu__tree-item-wrapper { display: flex; align-items: center; }
}
/* We use our own burger (right side); hide ps_mainmenu's built-in one to avoid a duplicate */
.tb-header .ps-mainmenu__mobile-toggle { display: none !important; }

/* ---- Mobile offcanvas menu (#mobileMenu) — dark brand panel, readable links.
   (It sits inside .tb-header, where .tb-header a{color:#fff} would hide it on white.) ---- */
#mobileMenu.offcanvas { background: var(--tb-dark); color: #fff; max-width: 330px; }
#mobileMenu .offcanvas-header { border-bottom: 1px solid rgba(255,255,255,.12); }
#mobileMenu .btn-close { filter: invert(1) grayscale(1) brightness(2); opacity: .9; }
#mobileMenu a, #mobileMenu .menu__link, #mobileMenu .menu__title, #mobileMenu .btn { color: #fff !important; }
#mobileMenu .menu__list { list-style: none; padding: 0; margin: 0; }
#mobileMenu .menu__link { display: block; padding: .85rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.08); text-transform: uppercase; font-size: .9rem; letter-spacing: .02em; text-decoration: none; }
#mobileMenu .menu__link:hover { color: var(--tb-gold) !important; }
#mobileMenu .menu__title { padding: .85rem 1.25rem; font-weight: 700; color: var(--tb-gold) !important; }
#mobileMenu .ps-mainmenu__additionnals { border-top: 1px solid rgba(255,255,255,.12); padding: 1rem 1.25rem; }
/* Keep the language selector reachable: the menu scrolls, the language row stays pinned
   at the bottom (never cut off), and its flag dropdown opens UPWARD so it stays on screen. */
#mobileMenu.offcanvas { display: flex; flex-direction: column; }
#mobileMenu .ps-mainmenu__mobile { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* language lives in the navbar on mobile (like live), so drop it from the offcanvas */
#mobileMenu .ps-mainmenu__additionnals { display: none; }

/* Submenu: compact dark dropdown (override Hummingbird's full-width megamenu,
   whose selectors are (0,4,1) — must use !important to win) */
.tb-header .ps-mainmenu__tree > li { position: relative; }
.tb-header .submenu {
  background-color: rgba(48,55,62,.98) !important;
  border-top: 0 !important;
  left: 0 !important;
  right: auto !important;
  width: auto !important;
  min-width: 230px;
  border-radius: 0 0 6px 6px !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.32) !important;
  padding: 0 !important;
  /* ps_mainmenu's JS sets an inline `top:71px` on hover (the js-sub-menu script), which
     dropped the dropdown ~28px below the bar. Author !important beats the inline style, so
     force top back to the label bottom. This is why it looked fine when forced-open (no JS)
     but broke on real hover. */
  top: 100% !important;
  /* Pull the dropdown up to sit flush under the label (closes the link's bottom
     padding). li:hover keeps it open across the overlap, so no dead zone. */
  margin-top: -8px !important;
}
.tb-header .submenu .container { width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
.tb-header .submenu__row { margin: 0 !important; display: block !important; }
.tb-header .submenu__left {
  border-right: 0 !important; padding: 0 !important;
  flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important;
}
.tb-header .submenu__right { display: none !important; }
.tb-header .submenu__left-item {
  display: block !important; color: #fff !important; background: transparent !important;
  padding: .55rem 1.4rem !important; white-space: nowrap;
  text-decoration: none; font-size: .95rem;
}
.tb-header .submenu__left-item:hover { color: var(--tb-gold) !important; background: transparent !important; }
/* Parent CSS sets .submenu{display:none} and only JS toggles it, so a gap closes it.
   Force it open whenever the cursor is anywhere over the <li> (label + padding) or the
   submenu itself (a descendant, so li:hover stays true) — no dead zone, can't vanish. */
.tb-header .ps-mainmenu__tree > li:hover > .submenu,
.tb-header .ps-mainmenu__tree > li:focus-within > .submenu { display: block !important; }
/* (Removed the ::before hover-bridge — the dropdown now opens flush under the label, so it
   only added dead space above #submenu-* and was unnecessary.) */

/* Mobile-only navbar language flag (custom, native <details>; desktop uses the module's
   own #_desktop_ps_languageselector). Shown via the mobile media query above. */
.tb-mlang { display: none; position: relative; align-items: center; }
.tb-mlang__current { list-style: none; display: inline-flex; align-items: center; gap: .1rem; cursor: pointer; padding: 0; }
.tb-mlang__current::-webkit-details-marker { display: none; }
.tb-mlang__current::marker { content: ""; }
.tb-mlang__current img { display: block; border: 1px solid rgba(255,255,255,.4); border-radius: 2px; }
.tb-mlang__caret { font-size: 18px; color: #fff; transition: transform .2s ease; }
.tb-mlang[open] .tb-mlang__caret { transform: rotate(180deg); }
.tb-mlang__menu {
  list-style: none; margin: .55rem 0 0; padding: .35rem 0;
  position: absolute; top: 100%; right: 0; z-index: 1060; min-width: 165px;
  background: #fff; border-radius: 6px; box-shadow: 0 6px 22px rgba(0,0,0,.18);
}
.tb-header .tb-mlang__menu a { display: flex; align-items: center; gap: .55rem; padding: .5rem .9rem; color: var(--tb-ink) !important; text-decoration: none; font-size: .9rem; }
.tb-header .tb-mlang__menu a:hover,
.tb-header .tb-mlang__menu a.is-active { color: var(--tb-gold) !important; }
.tb-mlang__menu img { display: block; border: 1px solid #eee; border-radius: 2px; }

/* Flag language selector */
/* color:#fff so the Bootstrap caret (drawn with currentColor) is white, not black */
.tb-lang .tb-lang__current { background: none; border: 0; padding: 0; display: inline-flex; align-items: center; color: #fff; }
.tb-lang .tb-lang__current::after { border-top-color: #fff !important; margin-left: .35rem; }
.tb-lang__current img { width: 26px; height: auto; border-radius: 2px; display: block; }
.tb-lang__item { display: flex; align-items: center; gap: .5rem; }
.tb-lang__item img { width: 22px; height: auto; border-radius: 2px; }
/* Dropdown menu sits on white — force readable dark labels (header rule makes links white) */
.tb-lang__menu .dropdown-item,
.tb-lang__menu .dropdown-item span,
.tb-header .tb-lang__menu a { color: var(--tb-ink) !important; }
.tb-lang__menu .dropdown-item:hover,
.tb-lang__menu .dropdown-item:hover span { color: var(--tb-gold) !important; background: transparent; }

/* Breadcrumb links: brand colour instead of default bright blue */
.breadcrumb a, .page-header .breadcrumb a, nav.breadcrumb a { color: var(--tb-gold); }
.breadcrumb a:hover { color: var(--tb-ink); }

/* Pull the hero up under the transparent header on the homepage (match header height) */
.page-content--home .tb-hero { margin-top: -100px; }
/* Mobile: the header is a solid in-flow bar (above), so the hero sits below it — no pull-up. */
@media (max-width: 1199.98px){ .page-content--home .tb-hero { margin-top: 0; } }

/* ---- Inner-page hero banner (carries the breadcrumb). The transparent overlay header
   sits over this exactly like home over its hero. The banner is the first block inside
   <main class="wrapper">, which has padding-top:3rem — cancel it so the banner starts at
   the page top, under the absolute header; padding-top then clears the ~100px header. ---- */
.tb-page-banner {
  position: relative;
  margin-top: -3rem;            /* pull under the overlay header (cancel .wrapper padding-top:3rem) */
  margin-bottom: 40px;          /* live .breadcrumb-bg: margin-bottom:40px */
  background-color: var(--tb-dark);
  background-image: url('../img/page-banner.jpg');  /* live default banner (achtergrond.png); category cover overrides it via inline style */
  background-size: cover; background-position: center; background-repeat: no-repeat;
  display: flex; align-items: center; justify-content: center;  /* breadcrumb centred, like live .breadcrumb-bg */
  text-align: center;
  min-height: 300px;            /* live .breadcrumb-bg: 300px desktop (240/200/160 down) */
  padding: 96px 1rem 1.5rem;    /* top clears the ~100px transparent overlay header */
}
/* Mobile/tablet: header is a solid in-flow bar above the banner (no overlay), so the
   banner no longer needs a tall top padding to clear it. */
@media (max-width: 1199.98px){ .tb-page-banner { min-height: 240px; padding-top: 40px; } }
@media (max-width: 991px){ .tb-page-banner { min-height: 200px; padding-top: 36px; } }
@media (max-width: 767px){ .tb-page-banner { min-height: 160px; padding-top: 32px; } }
/* dark scrim so the white breadcrumb (and the overlaid header) read over any cover image */
.tb-page-banner::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(48,55,62,.55), rgba(48,55,62,.78));
}
.tb-page-banner__inner { position: relative; z-index: 1; }
/* Parent gives .breadcrumb__wrapper a light --bs-tertiary-bg (that was the white strip);
   kill it so the breadcrumb reads as white text on the banner. */
.tb-page-banner .breadcrumb__wrapper { margin: 0 !important; padding: 0 !important; background: transparent !important; }
.tb-page-banner .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.tb-page-banner .breadcrumb-item { color: #fff; font-size: .9rem; display: inline-flex; align-items: center; }
.tb-page-banner .breadcrumb-item + .breadcrumb-item::before { content: "/"; color: rgba(255,255,255,.55); padding-right: .5rem; }
.tb-page-banner a.breadcrumb-link { color: rgba(255,255,255,.85); text-decoration: none; }
.tb-page-banner a.breadcrumb-link:hover { color: var(--tb-gold); }

/* 404 / page-not-found content */
.tb-404 { padding: 64px 0 88px; text-align: center; }
.tb-404__code { font-size: clamp(4.5rem, 14vw, 8rem); font-weight: 800; line-height: 1; color: var(--tb-gold); margin: 0; }
.tb-404__title { font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 700; color: var(--tb-ink); margin: .25rem 0 1rem; }
.tb-404__msg { font-size: 1.1rem; color: var(--tb-muted); margin: 0 auto 2rem; max-width: 540px; }
.tb-404__btn { display: inline-flex; align-items: center; }
.tb-page-banner .breadcrumb-item span { color: #fff; }

/* ---- Hero slider caption (ps_imageslider) — large, centered, no box ---- */
.tb-hero { position: relative; }

/* Slider arrows like live: circular white buttons, revealed on hover. The theme renders
   ps_imageslider as a Bootstrap carousel (.carousel-control-prev/next + *-icon). */
.tb-hero .carousel-control-prev,
.tb-hero .carousel-control-next {
  width: 48px; height: 48px; top: 50%; bottom: auto; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92);
  opacity: 0; transition: opacity .25s ease, background-color .2s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
}
.tb-hero:hover .carousel-control-prev,
.tb-hero:hover .carousel-control-next,
.tb-hero:focus-within .carousel-control-prev,
.tb-hero:focus-within .carousel-control-next { opacity: 1; }
.tb-hero .carousel-control-prev:hover,
.tb-hero .carousel-control-next:hover { background: #fff; }
.tb-hero .carousel-control-prev { left: 24px; right: auto; }
.tb-hero .carousel-control-next { right: 24px; left: auto; }
/* swap Bootstrap's white SVG glyphs for dark Material chevrons on the white circle */
.tb-hero .carousel-control-prev-icon,
.tb-hero .carousel-control-next-icon { display: none; }
.tb-hero .carousel-control-prev::before,
.tb-hero .carousel-control-next::before {
  font-family: 'Material Icons'; font-size: 28px; line-height: 1; color: var(--tb-dark);
}
.tb-hero .carousel-control-prev::before { content: '\e5cb'; }  /* chevron_left */
.tb-hero .carousel-control-next::before { content: '\e5cc'; }  /* chevron_right */
@media (hover: none) {
  .tb-hero .carousel-control-prev,
  .tb-hero .carousel-control-next { opacity: .85; }
}
.ps-imageslider__figcaption.carousel-caption {
  top: 50%; bottom: auto; left: 50%; right: auto;
  transform: translate(-50%, -50%);
  width: min(92%, 820px);
  background: none !important; background-color: transparent !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border-radius: 0 !important;
  padding: 0; text-align: center; color: #fff !important;
}
.ps-imageslider__figcaption div { color: #fff; }
/* If a slide description holds a link, render it as the white pill CTA (CONTACT!) */
.ps-imageslider__figcaption a {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.2rem;
  background: #fff; color: var(--tb-ink); border-radius: 50px;
  padding: .8rem 1.9rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; font-size: .85rem; text-decoration: none;
}
.ps-imageslider__figcaption a::after { content: "\2192"; font-size: 1.05rem; line-height: 1; }
.ps-imageslider__figcaption a:hover { color: var(--tb-gold); }
.ps-imageslider__figcaption h2,
.ps-imageslider__figcaption .h1 {
  text-transform: none !important;
  font-weight: 800; color: #fff;
  font-size: clamp(2rem, 1rem + 4vw, 3.8rem);
  line-height: 1.1; margin-bottom: 1rem;
  text-shadow: 0 2px 16px rgba(0,0,0,.45);
}
.ps-imageslider__figcaption p {
  color: #fff; font-size: 1.1rem;
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
}

/* ---- shared building blocks ---- */
.tb-section { padding: 80px 0; }
@media (max-width: 991px){ .tb-section { padding: 48px 0; } }

.tb-kicker {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: .8rem;
  font-weight: 700;
  color: var(--tb-gold);
  margin-bottom: .9rem;
}

.tb-title {
  font-weight: 800;
  font-size: clamp(1.7rem, 1.1rem + 2vw, 2.7rem);
  line-height: 1.12;
  margin-bottom: 1.1rem;
  color: inherit;
}
.tb-lead { color: var(--tb-muted); line-height: 1.7; margin-bottom: 1.5rem; }

/* White pill button with arrow (CONTACT! / LEES VERDER / MEER OVER ONS) */
.tb-pill {
  display: inline-flex; align-items: center; gap: .6rem;
  background: #fff; color: var(--tb-ink);
  border: 0; border-radius: 50px;
  padding: .8rem 1.9rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  font-size: .85rem; text-decoration: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.10);
  transition: transform .2s ease, color .2s ease;
}
.tb-pill::after { content: "\2192"; font-size: 1.05rem; line-height: 1; }
.tb-pill:hover { color: var(--tb-gold); transform: translateY(-2px); }
.tb-section--dark .tb-pill { color: var(--tb-ink); }
/* Footer CTA button: solid gold like live */
.tb-footer__cta .tb-pill { background: var(--tb-gold); color: #fff; box-shadow: 0 6px 20px rgba(218,161,76,.35); font-size: 14px; padding: 13.8px 36px; }
/* live's afspraak button ends in a calendar icon, not the arrow */
.tb-footer__cta .tb-pill::after { content: "\e878"; font-family: "Material Icons"; font-size: 1.15rem; line-height: 1; }
.tb-footer__cta .tb-pill:hover { background: #c8893b; color: #fff; }

/* "Lees verder" (Over mij / about) — black base, turns gold on hover */
.tb-pill--dark,
.tb-section--dark .tb-pill--dark { background: var(--tb-ink); color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.tb-pill--dark:hover,
.tb-section--dark .tb-pill--dark:hover { background: var(--tb-gold); color: #fff; }

/* "Meer over ons" (services) — gold base + white text, inverts to white/gold on hover */
.tb-pill--gold,
.tb-section--dark .tb-pill--gold { background: var(--tb-gold); color: #fff; box-shadow: 0 6px 20px rgba(218,161,76,.3); }
.tb-pill--gold:hover,
.tb-section--dark .tb-pill--gold:hover { background: #fff; color: var(--tb-gold); }

/* "Waar we voor staan" contact button — matches live: solid dark #30373E pill,
   white uppercase 12px/800, letter-spacing 1.32px, radius 100px, no shadow, +arrow. */
.tb-quality .tb-pill {
  background: var(--tb-dark); color: #fff;
  border-radius: 100px; padding: 9px 40px;
  font-size: 12px; font-weight: 800; letter-spacing: 1.32px;
  box-shadow: none;
}
.tb-quality .tb-pill:hover { background: var(--tb-gold); color: #fff; transform: translateY(-2px); }

img.tb-shot { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }

/* ---- Image + text banner (Unieke… / Het gezicht…) ---- */
.tb-banner .tb-banner__media { min-height: 340px; }
.tb-banner__media img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; border-radius: 6px; }
/* "Over ons" (intro) & "Over mij" (about) — centered text content */
.tb-intro .col-lg-6:not(.tb-banner__media),
.tb-about .col-lg-6:not(.tb-banner__media) { text-align: center; }

/* ---- Video band ---- */
/* Contained video that overlaps down into the dark service band (like live) */
.tb-video { position: relative; z-index: 2; margin-bottom: -130px; padding-top: 10px; }
.tb-video__frame {
  position: relative; border-radius: 10px; overflow: hidden;
  box-shadow: 0 24px 55px rgba(0,0,0,.28);
}
.tb-video__img { display: block; width: 100%; height: clamp(260px, 34vw, 480px); object-fit: cover; }
.tb-video__play {
  position: absolute; inset: 0; margin: auto;
  width: 90px; height: 90px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.92);
  display: flex; align-items: center; justify-content: center;
  color: var(--tb-gold); font-size: 2rem; text-decoration: none; padding-left: 6px;
  box-shadow: 0 8px 30px rgba(0,0,0,.3); transition: transform .2s ease, background .2s ease;
}
.tb-video__play:hover { background: #fff; transform: scale(1.06); }
@media (max-width: 991px){ .tb-video { margin-bottom: 0; } }

/* Video lightbox (YouTube) */
.tb-video-modal .modal-dialog { max-width: 880px; }
.tb-video-modal__content { background: transparent; border: 0; }
.tb-video-modal__embed { position: relative; padding-bottom: 56.25%; height: 0; border-radius: 8px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.tb-video-modal__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tb-video-modal__close {
  position: absolute; top: -42px; right: 0; z-index: 2;
  background: none; border: 0; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer;
}
.tb-video-modal__close:hover { color: var(--tb-gold); }

/* ---- Services (dark band) ---- */
.tb-section--dark { background: var(--tb-dark); color: #fff; }
/* Extra top room so the overlapping video clears the heading */
.tb-services { padding-top: 170px; }
@media (max-width: 991px){ .tb-services { padding-top: 48px; } }
.tb-section--dark .tb-title { color: #fff; }
.tb-service { display: flex; gap: 1rem; }
.tb-service__icon { flex: 0 0 auto; width: 54px; height: 54px; object-fit: contain; }
.tb-service__title { font-size: 1.05rem; font-weight: 700; margin-bottom: .35rem; color: #fff; }
.tb-service__text { color: rgba(255,255,255,.72); font-size: .92rem; margin: 0; }

/* ---- How we work — 3 columns over one shared background image ---- */
.tb-link { font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .8rem; color: var(--tb-gold); text-decoration: none; }
.tb-link:hover { text-decoration: underline; }
.tb-link--light { color: #fff; }
.tb-link--light:hover { color: var(--tb-gold); }
/* Dark "more" link (e.g. Recepten →) — beats Hummingbird's default <a> colour */
.tb-recepten .tb-link--dark,
a.tb-link--dark { color: var(--tb-ink); }
.tb-recepten .tb-link--dark:hover,
a.tb-link--dark:hover { color: var(--tb-gold); text-decoration: none; }

/* Text fallback when no logo image is configured */
.tb-logo__text { font-weight: 800; font-size: 1.5rem; color: #fff; letter-spacing: .02em; }
.tb-header:not(.tb-header--overlay) .tb-logo__text { color: #fff; }

.tb-how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  overflow: hidden;
  margin-top: 2rem;
}
.tb-how-col {
  position: relative;
  min-height: 664px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem 1.8rem;
  text-decoration: none;
  color: #fff;
  border-right: 1px solid rgba(255,255,255,.18);
  transition: background .3s ease;
}
.tb-how-col:last-child { border-right: 0; }
.tb-how-col:hover { background: rgba(0,0,0,.25); }
.tb-how-col__num {
  position: absolute;
  top: 46%; left: 1.8rem; transform: translateY(-50%);
  font-size: clamp(4rem, 7vw, 7rem);
  font-weight: 800; line-height: 1;
  color: rgba(255,255,255,.32);
}
.tb-how-col__title { color: #fff; font-size: 1.5rem; font-weight: 800; line-height: 1.15; margin-bottom: .6rem; }
.tb-how-col__desc {
  color: rgba(255,255,255,.85); font-size: .92rem; margin-bottom: .8rem;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .35s ease, opacity .35s ease, margin .35s ease;
}
.tb-how-col:hover .tb-how-col__desc { max-height: 200px; opacity: 1; }
@media (max-width: 991px){
  .tb-how-grid { grid-template-columns: 1fr; }
  .tb-how-col { min-height: 300px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.18); }
  .tb-how-col:last-child { border-bottom: 0; }
  .tb-how-col__desc { max-height: 200px; opacity: 1; }
  .tb-how-col__num { top: 1.8rem; transform: none; }
}

/* ---- Recepten — full-width 4x2 image grid ---- */
.tb-recepten__sub { max-width: 900px; margin: 0 auto 2rem; }
.tb-recepten-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.tb-recept { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.tb-recept img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.tb-recept:hover img { transform: scale(1.06); }
.tb-recept__overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  padding: 1.4rem; gap: .3rem;
  background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0) 60%);
  opacity: 0; transition: opacity .3s ease;
}
.tb-recept:hover .tb-recept__overlay { opacity: 1; }
.tb-recept__name { color: #fff; font-weight: 700; font-size: 1.15rem; line-height: 1.15; }
.tb-recept__label { color: var(--tb-gold); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 700; }
.tb-recept--static { cursor: default; }
@media (max-width: 991px){ .tb-recepten-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- "De beste keuze" banner ---- */
.tb-bestekeuze {
  background-size: cover; background-position: center; background-attachment: fixed;
  color: #fff; text-align: center;
  padding: 130px 0;
}
@media (max-width: 991px){ .tb-bestekeuze { background-attachment: scroll; padding: 80px 0; } }

/* ---- Closing CTA ---- */
.tb-cta { background: var(--tb-dark); color: #fff; background-size: cover; background-position: center; }
.tb-cta .tb-title { color: #fff; }
.tb-cta__text { color: rgba(255,255,255,.8); max-width: 620px; margin: 0 auto 1.6rem; }
.tb-cta__contact { display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap; margin-top: 1.8rem; }
.tb-cta__contact a { color: #fff; text-decoration: none; }
.tb-cta__contact a:hover { color: var(--tb-gold); }

/* ---- Footer ---- */
/* Footer: ONE background image across the entire footer wrapper. Live uses
   img/cms/footer_bg.jpg (pre-darkened photo, NO gradient overlay on top) —
   the chains photo (achtergrond.png) was the wrong pick. Inner bands stay
   transparent so the image shows through. */
#footer.footer {
  margin: 0;
  background-image: url('../img/footer_bg.jpg');
  background-size: cover; background-position: 0 0; background-repeat: no-repeat;
  /* root scale matches live's measured footer: 14px/1.65, #535353 (borders follow currentColor) */
  font-size: .875rem; line-height: 1.65; color: #535353;
}
.tb-footer { background: transparent; }
.tb-footer__cta { background: transparent; color: #fff; text-align: center; padding: 99px 0 69px; }
/* Match live's footer scale: larger CTA heading that wraps to two lines (live ~48px) with
   generous spacing above the button, and a taller banner. */
.tb-footer__cta .tb-kicker { font-size: 14px; line-height: 20px; margin-bottom: 15px; letter-spacing: 2px; }
.tb-footer__cta .tb-title { font-size: 45px; line-height: 1.18; max-width: 720px; margin-left: auto; margin-right: auto; margin-bottom: 60px; }
.tb-footer__main { background: transparent; color: rgba(255,255,255,.8); padding: 101px 0 98px; }
/* live's grid is 3/2/2/2/3 (Leo cols) in a 1284px container; the tpl ships 4/2/2/2/2 in BS5's 1320px — correct both in CSS */
.tb-footer__cta .container, .tb-footer__main .container, .tb-footer__bottom .container { max-width: 1314px; } /* BS5 pad 12: content 1290 = live's BS4 1320/pad 15 */
.tb-footer__main .row { --bs-gutter-x: 1.875rem; margin-left: 0; margin-right: 0; } /* live: 15px col padding, row NOT overhanging the container (Leo grid) */
.tb-footer__contact-col { justify-content: center; } /* live centres the CONTACT pill in its column */
.tb-footer__contact-col .tb-pill { font-size: 14px; padding: 11.8px 36px; } /* 2px border ×2 + 22.4 line = 50px like live */
@media (min-width: 1200px){
  .tb-footer__main .row > .col-xl-4 { width: 25%; }
  .tb-footer__main .row > .tb-footer__contact-col { width: 25%; }
}
.tb-footer__logo { display: inline-block; margin-bottom: 0; }
.tb-footer__logo img { max-height: 105px; width: auto; }
.tb-footer__intro { color: rgba(255,255,255,.7); font-size: 15px; line-height: 23.1px; margin-top: 18px; margin-bottom: 34px; max-width: 320px; }
.tb-footer__contact { display: flex; align-items: center; gap: .875rem; margin-bottom: 0; }
.tb-footer__ico { color: var(--tb-gold); font-size: 26px; flex: 0 0 auto; line-height: 1; }
.tb-footer__contact a { color: var(--tb-gold); text-decoration: none; font-weight: 700; font-size: 1.5rem; }
.tb-footer__contact a:hover { color: #fff; }
.tb-footer__contact small { color: rgba(255,255,255,.55); display: block; font-size: 15px; line-height: 23.1px; }
.tb-footer__title { color: var(--tb-gold); font-size: 14px; line-height: 24px; font-weight: 700; letter-spacing: normal; text-transform: uppercase; margin-bottom: 20px; }
.tb-footer__links { list-style: none; padding: 0; margin: 0; }
.tb-footer__links li { margin-bottom: 0; } /* pitch comes from the 30px line-height, like live */
.tb-footer__links a { color: rgba(255,255,255,.72); text-decoration: none; line-height: 30px; }
.tb-footer__links a:hover { color: var(--tb-gold); }
.tb-pill--outline { background: transparent; border: 2px solid var(--tb-gold); color: #fff; box-shadow: none; }
.tb-pill--outline:hover { background: var(--tb-gold); color: #fff; }

/* =====================================================================
   Responsive hardening — Bootstrap grid handles the section columns; these
   cover the bespoke (non-grid) pieces and kill common mobile failure modes.
   ===================================================================== */
@media (max-width: 991.98px){
  /* no element may cause a horizontal scrollbar on phones/tablets */
  html, body { overflow-x: hidden; }
  /* logo fits the compact mobile bar */
  .tb-header__logo img { max-height: 46px; }
  /* the footer reads better centred once its columns stack */
  .tb-footer__main { text-align: center; }
  .tb-footer__logo { display: inline-block; }
  .tb-footer__intro { max-width: none; }
  .tb-footer__contact { justify-content: center; }
  .tb-footer__contact-col { justify-content: center; }
}
@media (max-width: 575.98px){
  /* one recipe tile per row on small phones so the images aren't tiny */
  .tb-recepten-grid { grid-template-columns: 1fr; }
  /* tighter hero/section rhythm on small screens */
  .tb-section { padding: 40px 0; }
}
.tb-footer__bottom { background: rgba(0,0,0,.3); color: rgba(255,255,255,.6); padding: 29px 0 30px; font-size: .9rem; }
.tb-footer__bottom a { color: var(--tb-gold); text-decoration: none; }

/* ---- News / blog cards ---- */
.tb-news { background: #f7f7f7; }
.tb-news-card { background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,.06); height:100%; display:flex; flex-direction:column; transition: transform .3s ease, box-shadow .3s ease; }
.tb-news-card:hover { transform: translateY(-8px); box-shadow: 0 12px 30px rgba(0,0,0,.14); }
.tb-news-card__media { display:block; aspect-ratio:3/2; overflow:hidden; }
.tb-news-card__media img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.tb-news-card:hover .tb-news-card__media img { transform:scale(1.04); }
.tb-news-card__body { padding:1.25rem; display:flex; flex-direction:column; gap:.5rem; }
.tb-news-card__title { font-size:1.1rem; font-weight:700; margin:0; }
.tb-news-card__title a { color:inherit; text-decoration:none; }
.tb-news-card__title a:hover { color: var(--tb-gold); }
.tb-news-card__summary { color: var(--tb-muted); font-size:.92rem; }
.tb-blog-post__content { line-height:1.7; }
.tb-blog-post__content img { max-width:100%; height:auto; }
.tb-blog-post__content ol li, .tb-blog-post__content ul li { margin-bottom: .4rem; }

/* Single-post share buttons */
.tb-share { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.tb-share__label { font-weight: 700; }
.tb-share__btn { color: #fff; text-decoration: none; font-size: .82rem; font-weight: 600; padding: .35rem .8rem; border-radius: 50px; }
.tb-share__fb { background: #1877f2; }
.tb-share__tw { background: #111; }
.tb-share__wa { background: #25d366; }
.tb-share__btn:hover { color: #fff; opacity: .9; }

/* Single-post sidebar + related */
.tb-blog-widget { margin-bottom: 2rem; }
.tb-blog-widget__title { font-size: 1.1rem; font-weight: 700; border-bottom: 2px solid var(--tb-gold); padding-bottom: .5rem; margin-bottom: 1rem; }
.tb-blog-widget__cats, .tb-blog-widget__recent { list-style: none; padding: 0; margin: 0; }
.tb-blog-widget__cats li { margin-bottom: .4rem; }
.tb-blog-widget__cats a, .tb-blog-related a { color: var(--tb-ink); text-decoration: none; }
.tb-blog-widget__cats a:hover, .tb-blog-related a:hover { color: var(--tb-gold); }
.tb-blog-widget__recent li { margin-bottom: 1rem; }
.tb-blog-recent { display: flex; gap: .75rem; align-items: center; text-decoration: none; color: var(--tb-ink); }
.tb-blog-recent__img { flex: 0 0 64px; }
.tb-blog-recent__img img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; }
.tb-blog-recent__title { font-size: .9rem; font-weight: 600; line-height: 1.2; }
.tb-blog-recent:hover .tb-blog-recent__title { color: var(--tb-gold); }
.tb-blog-related__title { font-size: 1.15rem; font-weight: 700; margin-bottom: .75rem; }
.tb-blog-related ul { list-style: none; padding: 0; margin: 0; }
.tb-blog-related li { border-bottom: 1px solid #eee; padding: .55rem 0; }

/* =====================================================================
   Category / product-listing page — rebuilt to match the live
   (leo_kitchor) design using Hummingbird's NATIVE modules & templates:
   category-header.tpl, ps_facetedsearch (left column), products-top +
   sort-orders, the product miniature, and pagination.tpl. Only restyled
   here; values lifted from the live theme.css (card radius 5px, hover
   shadow, gold price, and the second-image hover "flip":
   scale3d(0,1,0) -> scale3d(1,1,1) over 0.4s).
   ===================================================================== */

/* ---- (a) Category header (catalog/_partials/category-header.tpl) ---- */
.category__header { margin-bottom: 1.5rem; }
.category__header .page-title-section,
#js-product-list-header .page-title-section {
  font-weight: 800;
  font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.2rem);
  line-height: 1.15;
  color: var(--tb-ink);
  margin-bottom: 1rem;
}
.category__description.rich-text {
  color: var(--tb-muted);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}
.category__description.rich-text p { margin-bottom: 1rem; }
.category__description.rich-text p:last-child { margin-bottom: 0; }
.category__cover { text-align: center; margin-bottom: 1.5rem; }
.category__cover-image { max-width: 100%; height: auto; border-radius: 6px; }

/* ---- (b) Filters / faceted search ----
   Hummingbird renders ps_facetedsearch as a Bootstrap-5 accordion inside
   #search-filters (the facet title is an .accordion-button). Two things to fix
   vs. the defaults the user saw: Bootstrap colours the OPEN accordion title with
   the link-hover blue (--bs-accordion-active-color) and the noUi price slider with
   --bs-primary (blue). We force every group OPEN and make all text + slider black. */
#left-column { padding-top: .25rem; }

/* "Filter By" heading */
#search-filters .left-block__title {
  color: #000; font-weight: 700; font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: .02em; margin-bottom: 1rem;
}

/* facet group container + title (the accordion button) — all black */
#search-filters .accordion-item { background: transparent; border: 0; }
#search-filters .accordion-button {
  --bs-accordion-btn-color: #000;
  --bs-accordion-active-color: #000;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
  color: #000;
  background: transparent;
  font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  padding: .7rem 0; border-bottom: 1px solid #e1e1e1; border-radius: 0;
  cursor: default;
}
#search-filters .accordion-button:focus { box-shadow: none; }

/* everything open: show all group bodies and drop the collapse chevron */
#search-filters .accordion-button::after { display: none; }
#search-filters .accordion-collapse { display: block !important; }
#search-filters .accordion-body { padding: .85rem 0 .35rem; }

/* option rows + links — all black, gold only on hover / active */
#search-filters ul { list-style: none; padding: 0; margin: 0; }
#search-filters .facet-label { margin-bottom: .3rem; }
#search-filters .form-check-label,
#search-filters .search-filters__link,
#search-filters .search-link,
#search-filters .search-filters__color-label,
#search-filters .search-filters__magnitude { color: #000 !important; font-size: .9rem; text-decoration: none; }
#search-filters .search-link:hover,
#search-filters .search-filters__link:hover,
#search-filters .facet-label.active .search-filters__link,
#search-filters .facet-label.active .search-link { color: var(--tb-gold) !important; }
/* checkboxes black when ticked (instead of Bootstrap blue) */
#search-filters .form-check-input:checked { background-color: #000; border-color: #000; }
#search-filters .form-check-input:focus { box-shadow: none; border-color: #000; }

/* price slider (noUiSlider) — black like live (default fill is --bs-primary blue) */
#search-filters .noUi-connect { background: #000 !important; }
#search-filters .noUi-handle { border-color: #000; box-shadow: none; }
#search-filters .noUi-handle:hover,
#search-filters .noUi-handle:focus,
#search-filters .noUi-handle:focus-visible { border-color: #000; background: #000; outline: none; }
#search-filters .search-filters__slider-values { color: #000; font-size: .85rem; }

/* clear-all in brand gold */
#search-filters .search-filters__clear .btn,
#search-filters .js-search-filters-clear-all { color: var(--tb-gold); border-color: var(--tb-gold); }

/* ---- (d) Sort + count bar (products-top.tpl / sort-orders.tpl) ---- */
.products__selection {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem;
}
.products__count span { color: var(--tb-muted); font-size: .95rem; }
.products__sort { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.products__sort-label span { color: var(--tb-muted); font-size: .9rem; }
.products__sort-dropdown-button {
  background: #fff; border: 1px solid #e6e6e6; color: var(--tb-ink);
  border-radius: 4px; padding: .45rem .9rem; font-size: .9rem;
}
.products__sort-dropdown-button:hover,
.products__sort-dropdown-button:focus { border-color: var(--tb-gold); color: var(--tb-ink); }
.products__sort-dropdown .dropdown-menu {
  border: 0; border-radius: 4px; box-shadow: 0 6px 24px rgba(0,0,0,.12); padding: .3rem 0;
}
.products__sort-dropdown .dropdown-item { font-size: .9rem; padding: .5rem 1.1rem; }
.products__sort-dropdown .dropdown-item:hover,
.products__sort-dropdown .dropdown-item.current { background: var(--tb-gold); color: #fff; }
.products__filter-button { border-color: #e6e6e6; color: var(--tb-ink); }
.products__filter-button:hover { border-color: var(--tb-gold); color: var(--tb-gold); }

/* ---- (c) Product grid tiles (catalog/_partials/miniatures/product.tpl) ---- */
/* 2 products per row (match live): cap Hummingbird's native left-column grid,
   which goes 3-up at >=1200px, back down to 2. Same selector + media as the
   parent rule; brand.css loads after theme.css, so this wins. */
@media (min-width: 1200px) {
  .layout-left-column .products,
  .layout-right-column .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.product-miniature { display: flex; }
.product-miniature__inner {
  width: 100%;
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .3s ease;
}
.product-miniature:hover .product-miniature__inner { box-shadow: 0 5px 10px rgba(0,0,0,.1); }

.product-miniature__top { position: relative; }
.product-miniature__image-container { position: relative; overflow: hidden; }
.product-miniature__image-link { display: block; position: relative; }
.product-miniature__image { width: 100%; height: auto; display: block; }

/* The live "flip": the second image scales in horizontally over the cover. */
.product-miniature__image--hover {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0; visibility: hidden;
  transform: scale3d(0, 1, 0);
  transition: all .4s;
}
.product-miniature:hover .product-miniature__image--hover {
  opacity: 1; visibility: visible;
  transform: scale3d(1, 1, 1);
  z-index: 2;
}

/* ---- tile hover actions: wishlist + compare (like live's leofeature) ---- */
.product-miniature__actions {
  position: absolute; top: .75rem; right: .75rem; z-index: 3;
  display: flex; flex-direction: column; gap: .5rem;
  opacity: 0; transform: translateX(10px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.product-miniature:hover .product-miniature__actions,
.product-miniature__actions:focus-within { opacity: 1; transform: none; pointer-events: auto; }
.product-miniature__action,
.product-miniature__actions .wishlist-button-add {
  width: 42px; height: 42px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--tb-dark); border: 0; border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12); cursor: pointer; padding: 0;
  transition: background .2s ease, color .2s ease;
}
.product-miniature__action:hover,
.product-miniature__actions .wishlist-button-add:hover { background: var(--tb-gold); color: #fff; }
.product-miniature__action .material-icons,
.product-miniature__actions .wishlist-button-add .material-icons { font-size: 22px; line-height: 1; }
.product-miniature__action--compare.is-added { background: var(--tb-gold); color: #fff; }

/* blockwishlist pins its heart absolutely (top-right), which lands on top of the
   compare button. Pull it back into our action column so the two stack instead of
   overlapping — we keep the PrestaShop wishlist as-is, just drop its absolute pin. */
.product-miniature__actions .wishlist-button-add,
.product-miniature__actions .wishlist-button-product {
  position: static !important; inset: auto !important; margin: 0 !important;
}
@media (hover: none) {
  .product-miniature__actions { opacity: 1; transform: none; pointer-events: auto; }
}

/* flags / discount badge — gold, top-left like live */
.product-miniature .product-flags {
  position: absolute; top: 12px; left: 12px; z-index: 5;
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .35rem;
}
.product-miniature .product-flags .badge {
  background: var(--tb-gold); color: #fff;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  padding: .28rem .5rem; border-radius: 4px; text-transform: uppercase;
}
.product-miniature .product-flags .badge.new,
.product-miniature .product-flags .badge.online-only { background: var(--tb-dark); }

/* quick-view: round icon button centred on the image, appears on hover (like live) */
.product-miniature__quickview-button {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.9);
  z-index: 6;
  width: 46px; height: 46px; min-width: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--tb-ink);
  border: 0; border-radius: 50%;
  font-size: 0;                       /* hides the "Quick view" text node, keeps the icon */
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, transform .3s ease, background .2s ease, color .2s ease;
}
.product-miniature__quickview-button .material-icons { font-size: 22px; }
.product-miniature:hover .product-miniature__quickview-button {
  opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1);
}
.product-miniature__quickview-button:hover { background: var(--tb-gold); color: #fff; }
.product-miniature__quickview-touch { display: none; }

/* meta — centred like live */
.product-miniature__bottom { padding: 20px 10px; text-align: center; }
.product-miniature__title {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
  color: #000; font-size: 14px; font-weight: 500; line-height: 20px;
  text-transform: capitalize; text-decoration: none;
}
.product-miniature__title:hover { color: var(--tb-gold); }
.product-miniature__prices { margin-top: 10px; }
.product-miniature__price {
  color: var(--tb-gold); font-size: 16px; font-weight: 700;
  font-family: "Plus Jakarta Sans", sans-serif;
}
.product-miniature__discount-price { display: inline; }
.product-miniature__regular-price {
  color: #999; text-decoration: line-through; font-size: 13px; font-weight: 400; margin-left: 6px;
}
.product-miniature__variants { margin-top: .5rem; }

/* ---- (d) Pagination (templates/_partials/pagination.tpl) — brand colours ---- */
.products__pagination { margin-top: 2rem; }
.pagination__container {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
}
.pagination__number { color: var(--tb-muted); font-size: .9rem; }
.pagination {
  display: flex; gap: .25rem; list-style: none; padding: 0; margin: 0;
}
.pagination .page-link {
  border: 1px solid #e6e6e6; color: var(--tb-ink);
  border-radius: 4px; padding: .5rem .8rem; background: #fff; cursor: pointer;
  display: inline-flex; align-items: center; gap: .25rem;
}
.pagination .page-link:hover { border-color: var(--tb-gold); color: var(--tb-gold); }
.pagination .page-item.active .page-link {
  background: var(--tb-gold); border-color: var(--tb-gold); color: #fff;
}
.pagination .page-item.disabled .page-link { opacity: .5; pointer-events: none; }

/* ---- Responsive ---- */
@media (max-width: 991.98px){
  .products__selection { flex-direction: column; align-items: stretch; }
  .products__sort { margin-left: 0; justify-content: space-between; }
  .pagination__container { flex-direction: column; }
}

/* =====================================================================
   Product page — rebuilt to match the live (leo_kitchor) design using
   Hummingbird's native product template (restyled here). Values lifted
   from the live theme.css: title 30px/#000, price 24px gold, variant
   labels 13px/700/uppercase, dark pill cart (padding 11px 36px), wishlist
   grey -> gold, share = .ps-sharebuttons under the title.
   The only structural change is in templates/catalog/product.tpl (share
   moved under the title); everything else below is pure restyle.
   ===================================================================== */
.product__container { margin-bottom: 2.5rem; }

/* ---- Title ---- */
.product__name {
  font-size: 30px; line-height: 36px; color: #000; font-weight: 800;
  font-family: "Plus Jakarta Sans", sans-serif; margin-bottom: .5rem;
}
@media (max-width: 575.98px){ .product__name { font-size: 25px; line-height: 1.2; } }
.product__manufacturer { margin-bottom: .5rem; }
.product__manufacturer a { color: var(--tb-muted); text-decoration: none; }
.product__manufacturer a:hover { color: var(--tb-gold); }

/* ---- Share row ("Delen") under the title (ps_sharebuttons) ---- */
.product__right .product__additional-info { margin: .25rem 0 1rem; }
.ps-sharebuttons { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .5rem 0 1rem; }
.ps-sharebuttons__label { color: #111; font-weight: 600; }
.ps-sharebuttons__list { display: inline-flex; align-items: center; gap: .9rem; list-style: none; margin: 0; padding: 0; }
.ps-sharebuttons__list li { transition: transform .2s ease; }
.ps-sharebuttons__list li:hover { transform: scale(1.12); }
.ps-sharebuttons__link { color: var(--tb-ink); display: inline-flex; }
.ps-sharebuttons__list li.facebook .ps-sharebuttons__link { color: #3c5a98; }
.ps-sharebuttons__list li.twitter .ps-sharebuttons__link { color: #55acee; }
.ps-sharebuttons__list li.pinterest .ps-sharebuttons__link { color: #bd081c; }

/* ---- Price (gold) + tax label (grey), inline like live ---- */
.product__prices { display: flex; align-items: flex-end; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.75rem; }
.product__prices-block { display: flex; align-items: flex-end; flex-wrap: wrap; gap: .6rem; }
.product__price {
  color: var(--tb-gold); font-size: 26px; font-weight: 800; line-height: 1;
  font-family: "Plus Jakarta Sans", sans-serif;
}
.product__tax-infos, .product__tax-label, .product__taxless-price { color: #535353; font-size: .8125rem; }
.product__regular-price { color: #9B9B9B; font-size: 16px; font-weight: 700; text-decoration: line-through; margin-right: .35rem; }
.product__discount-percentage, .product__discount-amount { color: var(--tb-gold); font-weight: 700; }

/* ---- Short description ---- */
.product__description-short { color: var(--tb-ink); line-height: 1.7; margin-bottom: 1.5rem; }
.product__description-short strong, .product__description-short b { color: var(--tb-ink); }

/* ---- Variants / combinations: uppercase bold labels + thin white selects ---- */
.product__variants { padding: .25rem 0 1rem; }
.product-variant { margin-bottom: 1rem; border: 0; padding: 0; }
.product-variant__label { margin-bottom: .35rem; }
.product-variant__legend, .product-variant__label .form-label {
  font-size: 13px; font-weight: 700; color: #111; text-transform: uppercase;
  letter-spacing: .02em; margin-bottom: 0; font-family: "Plus Jakarta Sans", sans-serif;
}
.product-variant__legend::after { content: ":"; }
.product-variant__selected { display: none; }   /* live shows only label + select */
/* keep every variant stacked (label above, full-width select) — stops short groups
   like "Keuze kap" from sitting inline next to their label */
.product__variants .product-variant { display: block; width: 100%; }
.product__variants .form-select {
  display: block; width: 100%; max-width: 480px; clear: both;
  font-size: .9rem; border: 1px solid #dedede; background-color: #fff;
  height: 2.6rem; border-radius: 4px; color: var(--tb-ink);
}
.product__variants .form-select:focus { border-color: var(--tb-gold); box-shadow: none; }

/* ---- Add-to-cart row: qty + dark pill button + wishlist (like live) ---- */
.product__add-to-cart-container { border-bottom: 1px solid #dedede; padding-bottom: 1.25rem; margin-bottom: 1.25rem; }
.product__actions-qty-add { display: flex; align-items: center; flex-wrap: wrap; gap: 1.25rem; }
/* dark pill cart button (text only, like live) */
.product__add-to-cart-button,
.product__add-to-cart-button.btn-primary {
  background: var(--tb-dark); border: 0; color: #fff;
  border-radius: 50px; padding: 11px 36px; line-height: 24px;
  text-transform: uppercase; font-weight: 700; letter-spacing: .03em;
  transition: background .2s ease, color .2s ease;
}
.product__add-to-cart-button:hover,
.product__add-to-cart-button:focus { background: var(--tb-gold); color: #fff; }
.product__add-to-cart-button .material-icons { display: none; }
/* wishlist (blockwishlist, JS-injected into .wishlist-button) — grey -> gold */
.product__add-to-cart-container .wishlist-button { display: inline-flex; align-items: center; }
.wishlist-button button,
.wishlist-button .wishlist-button-add {
  background: transparent; border: 0; box-shadow: none; padding: 0;
  color: #9B9B9B; font-weight: 400; display: inline-flex; align-items: center; gap: .4rem;
}
.wishlist-button button:hover,
.wishlist-button .wishlist-button-add:hover { color: var(--tb-gold); background: transparent; }
.wishlist-button .material-icons { font-size: 22px; }

/* ---- Gallery (native carousel + thumbnail strip) — match live ---- */
.product__images { position: relative; }
.product__carousel { border-radius: 6px; overflow: hidden; }
.product__carousel .carousel-item img { width: 100%; height: auto; }
.product__thumbnails-list {
  display: flex; gap: .55rem; list-style: none; padding: 0; margin: .75rem 0 0;
  flex-wrap: nowrap; overflow-x: auto;
}
.product__thumbnail { flex: 0 0 auto; width: 84px; margin: 0; }
.product__thumbnail-image { border: 1px solid #e6e6e6; border-radius: 4px; cursor: pointer; width: 100%; }
.product__thumbnail.active .product__thumbnail-image,
.product__thumbnail-image.js-thumb-selected { border-color: var(--tb-gold); }
.product__zoom { color: var(--tb-ink); }
.carousel-control-prev, .carousel-control-next { width: auto; opacity: .85; }

/* ---- Bottom: description/details accordion + reassurance ---- */
.product__bottom { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 2rem; }
.product__bottom-left { flex: 1 1 60%; min-width: 0; }
.product__bottom-right { flex: 1 1 280px; }
/* bottom = horizontal tabs (Omschrijving / Productdetails) with gold active underline, like live */
.product__tabs-nav {
  display: flex; gap: 2rem; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 1.5rem;
  border-bottom: 1px solid #e1e1e1;
}
.product__tabs-nav .nav-item { margin: 0; }
.product__tab-link {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: .75rem 0; margin-bottom: -1px;
  font-weight: 700; font-size: 1.05rem; color: var(--tb-ink); cursor: pointer;
}
.product__tab-link:hover { color: var(--tb-gold); }
.product__tab-link.active { color: var(--tb-gold); border-bottom-color: var(--tb-gold); }
.product__tabs-content { line-height: 1.7; }
.product__description.rich-text { line-height: 1.7; }
.product__description.rich-text img { max-width: 100%; height: auto; }

/* flat data-sheet rows inside the Productdetails tab (no accordion) */
.product__details-subtitle { font-weight: 700; font-size: 1.05rem; margin: 1.5rem 0 .75rem; color: var(--tb-ink); }
.product__details .details__list { list-style: none; padding: 0; margin: 0; }
.product__details .details__item { display: flex; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid #f0f0f0; }
.product__details .details__left { flex: 0 0 40%; max-width: 40%; }
.product__details .details__title { font-weight: 600; color: var(--tb-ink); }
.product__details .details__right { color: var(--tb-muted); }

/* ---- "You might also like" accessories (uses .product-miniature tiles) ---- */
.product-accessories, .product__accessories { margin-top: 2.5rem; }
.products-section-title, .product-accessories__title {
  font-weight: 800; font-size: 1.5rem; color: var(--tb-ink);
  margin-bottom: 1.25rem; text-align: center;
}

@media (max-width: 767.98px){
  .product__actions-qty-add { gap: .85rem; }
  .product__bottom { flex-direction: column; }
}

/* =====================================================================
   Header cart-preview dropdown (ps_shoppingcart) — hover panel like live:
   line items + subtotal/shipping/total + View cart (dark) / Check out (gold).
   Desktop hover only; on touch/narrow headers the icon just links to the cart.
   ===================================================================== */
.tb-cart { position: relative; }
.tb-cart__dropdown {
  position: absolute; top: 100%; right: 0; z-index: 1000;
  width: 330px; max-width: calc(100vw - 24px);
  background: #fff; color: var(--tb-ink);
  border-radius: 8px; box-shadow: 0 16px 40px rgba(0,0,0,.18);
  padding: 1.35rem 1.4rem; margin-top: 10px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  text-align: left;
}
/* hover bridge across the gap between icon and panel */
.tb-cart__dropdown::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 14px; }
.tb-cart:hover .tb-cart__dropdown,
.tb-cart:focus-within .tb-cart__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
/* Like live: an empty cart shows NO hover dropdown (live renders nothing on hover when
   .blockcart is inactive). Only the cart preview with products opens. */
.tb-header .blockcart.inactive .tb-cart__dropdown { display: none !important; }

/* header forces links white; restore dark text inside the white panel */
.tb-header .tb-cart__dropdown a,
.tb-header .tb-cart__dropdown .material-icons { color: var(--tb-ink); }

.tb-cart__items { list-style: none; margin: 0 0 .25rem; padding: 0; max-height: 340px; overflow-y: auto; }
.tb-cart__item { display: flex; align-items: center; gap: .9rem; padding: .85rem 0; border-bottom: 1px solid #ededed; }
.tb-cart__item:first-child { padding-top: 0; }
.tb-cart__item-img { flex: 0 0 58px; width: 58px; height: 58px; border: 1px solid #eee; border-radius: 4px; overflow: hidden; display: block; }
.tb-cart__item-img img { width: 100%; height: 100%; object-fit: cover; }
.tb-cart__item-info { flex: 1 1 auto; min-width: 0; }
.tb-cart__item-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: .9rem; font-weight: 600; line-height: 1.25; text-decoration: none;
}
.tb-header .tb-cart__dropdown .tb-cart__item-name:hover { color: var(--tb-gold); }
.tb-cart__item-meta { font-size: .92rem; color: var(--tb-muted); margin-top: .3rem; }
.tb-cart__item-price { color: var(--tb-gold); font-weight: 700; font-size: 1rem; }
.tb-cart__item-remove { flex: 0 0 auto; display: inline-flex; color: var(--tb-muted) !important; }
.tb-header .tb-cart__dropdown .tb-cart__item-remove:hover { color: var(--tb-gold) !important; }
.tb-cart__item-remove .material-icons { font-size: 20px; }

.tb-cart__totals { border-top: 1px solid #ededed; padding-top: 1rem; margin-bottom: 1.15rem; }
.tb-cart__row { display: flex; justify-content: space-between; font-size: .92rem; margin-bottom: .6rem; color: var(--tb-muted); }
.tb-cart__row span:last-child { color: var(--tb-ink); font-weight: 600; }
.tb-cart__row--total { font-size: 1.12rem; margin-top: .65rem; padding-top: .7rem; border-top: 1px solid #ededed; }
.tb-cart__row--total span { color: var(--tb-ink); font-weight: 800; }
.tb-cart__row--total span:last-child { color: var(--tb-gold); }

.tb-cart__actions { display: flex; flex-direction: column; gap: .55rem; }
.tb-cart__btn {
  display: block; text-align: center; text-decoration: none;
  padding: .7rem 1rem; border-radius: 50px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; font-size: .82rem;
  transition: background .2s ease, color .2s ease;
}
.tb-cart__btn--dark { background: var(--tb-dark); color: #fff !important; }
.tb-cart__btn--dark:hover { background: #1f242a; color: #fff !important; }
.tb-cart__btn--gold { background: var(--tb-gold); color: #fff !important; }
.tb-cart__btn--gold:hover { background: #c8893b; color: #fff !important; }

.tb-cart__empty { margin: 0; color: var(--tb-muted); font-size: .9rem; text-align: center; padding: .5rem 0; }

/* No hover on touch / the narrow (burger) header — icon just links to the cart */
@media (max-width: 1199.98px){
  .tb-cart__dropdown { display: none !important; }
}

/* success toast shown after removing an item from the cart preview */
.tb-cart-toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 2000;
  display: flex; align-items: center; gap: .55rem;
  background: var(--tb-dark); color: #fff;
  padding: .85rem 1.25rem; border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
  font-size: .92rem; font-weight: 600;
  max-width: calc(100vw - 40px);
  opacity: 0; transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease;
}
.tb-cart-toast::before { content: "\2713"; color: var(--tb-gold); font-weight: 800; font-size: 1.05rem; }
.tb-cart-toast--show { opacity: 1; transform: translateY(0); }

/* =====================================================================
   Cart page — brand styling to match live (leo_kitchor). Native Hummingbird
   cart; reassurance removed in the cart.tpl override, blue handled by the
   global primary/link override above. Here: card summary, gold pill checkout,
   gold item price + dark title, centred recommended-products title.
   ===================================================================== */
.cart-grid { margin-bottom: 2.5rem; }
.cart-grid__content .page-title-section { font-weight: 800; }

/* order summary as a bordered card like live; sticky so it follows on scroll
   (the parent's top:var(--scroll-padding-top) can be unset -> give it a real gap) */
.cart-grid__aside-wrapper {
  background: #fff; border: 1px solid rgba(0,0,0,.125); border-radius: 4px; padding: 1.5rem;
  top: 1.5rem;
}
.cart-grid__aside-wrapper > h2 { font-size: 1.05rem; font-weight: 800; margin-bottom: 1rem; }

/* cart line: dark product title, gold price */
.product-line__title { color: var(--tb-ink); font-weight: 600; text-decoration: none; }
.product-line__title:hover { color: var(--tb-gold); }
.product-line__item-price { color: var(--tb-gold); font-weight: 700; }
.product-line__item-regular-price { color: #9B9B9B; text-decoration: line-through; }

/* totals stay neutral (only the line price is gold, like live) */
.cart-summary__label { color: var(--tb-muted); }
.cart-summary__value { color: var(--tb-ink); font-weight: 600; }

/* gold pill checkout button ("Doorgaan naar betalen") */
.cart-summary__actions .btn-primary,
.js-cart-detailed-actions .btn-primary {
  background: var(--tb-gold) !important; border-color: var(--tb-gold) !important; color: #fff !important;
  border-radius: 100px; text-transform: uppercase; font-weight: 800;
  font-size: .75rem !important; letter-spacing: .06em; padding: .7rem 2rem !important;
}
.cart-summary__actions .btn-primary:hover,
.js-cart-detailed-actions .btn-primary:hover { background: #c8893b !important; border-color: #c8893b !important; color: #fff !important; }
/* divider lines around the Totaal row like live ("line through verzending + after totaal");
   Hummingbird draws them with --bs-border-color, which is too faint here — make them visible. */
.cart-summary__total { border-block: 1px solid rgba(0,0,0,.14) !important; padding-block: .65rem !important; }
/* live's checkout button is auto-width (~278px), not full-width — the parent .d-grid
   stretches it, so centre it at content width instead. */
.cart-summary__actions .d-grid,
.js-cart-detailed-actions .d-grid { justify-items: center; }
/* continue shopping: brand outline pill */
/* live's "Ga door met winkelen" is a plain dark-grey text link, not a gold outline pill */
.cart__continue-shopping.btn-outline-primary {
  border: 0 !important; background: transparent !important; color: #414141 !important;
  border-radius: 0 !important; padding: 0 !important; text-transform: none; font-weight: 600; letter-spacing: 0;
}
.cart__continue-shopping.btn-outline-primary:hover { color: var(--tb-gold) !important; background: transparent !important; }

/* left block: title + items in a bordered card like live */
.tb-cart-card { background: #fff; border: 1px solid rgba(0,0,0,.125); border-radius: 4px; padding: 1.4rem 1.6rem; margin-bottom: 1.5rem; }
.tb-cart-card .page-title-section { font-size: 1.4rem; margin-bottom: 1rem; }
.cart__continue-shopping { margin-bottom: 1.5rem; }

/* recommended products ("Populaire producten") — centred title + dark "all products" pill like live */
.ps-crossselling .section-title,
.cart-grid__footer .section-title {
  text-align: center; font-weight: 800; font-size: 1.5rem;
  text-transform: uppercase; margin-bottom: 1.5rem;
}
.cart-grid__footer { margin-top: 1.5rem; }
/* parent is display:flex; justify-content:center -> override to right (text-align can't) */
.module-products__buttons { justify-content: flex-end; text-align: right; margin-top: 1.5rem; }
.module-products__buttons .btn,
.module-products__buttons a.btn {
  background: var(--tb-dark); border-color: var(--tb-dark); color: #fff;
  border-radius: 50px; text-transform: uppercase; font-weight: 700; letter-spacing: .03em;
}
.module-products__buttons .btn:hover {
  background: var(--tb-gold); border-color: var(--tb-gold); color: #fff;
}

/* =====================================================================
   Checkout flow — match the cart's brand styling. Reassurance removed in
   checkout.tpl; gold buttons/links come from the global overrides above.
   ===================================================================== */
/* order summary as a bordered card, sticky like the cart */
.checkout-grid__aside-wrapper {
  border: 1px solid #e6e6e6; border-radius: 8px; padding: 1.25rem 1.5rem; top: 1.5rem;
}
/* summary accordion header: dark, not the link-blue/gold accordion default */
.checkout__summary-accordion-header .accordion-button,
.checkout__summary-accordion-header .accordion-button:not(.collapsed) {
  --bs-accordion-active-color: var(--tb-ink);
  --bs-accordion-btn-color: var(--tb-ink);
  --bs-accordion-active-bg: transparent;
  color: var(--tb-ink); font-weight: 800; background: transparent; box-shadow: none;
}
.checkout__summary-accordion-header .accordion-button:focus { box-shadow: none; }
/* step navigation: dark titles, gold on the active/hover step */
.checkout-steps__btn.btn-link { color: var(--tb-ink); font-weight: 600; text-decoration: none; }
.checkout-steps__btn.btn-link:hover,
.checkout-steps__step.-current .checkout-steps__btn { color: var(--tb-gold); }
/* gold line price in the checkout summary, like the cart */
.checkout-grid__aside .product-line__item-price,
.cart-summary .product-line__item-price { color: var(--tb-gold); font-weight: 700; }

/* checkout step "back" button on the SAME row as the continue button, left side
   (footer.tpl moves .js-back into the continue's wrapper and tags it tb-checkout-actions) */
.page-order .tb-checkout-actions {
  display: flex !important; flex-wrap: wrap; align-items: center;
  justify-content: space-between !important; gap: .75rem;
}
.page-order .tb-checkout-actions .js-back { order: -1; margin: 0; }

/* ---------------------------------------------------------------------
   "Offerte aanvragen" quote modal (bw_nietbestelbaarofferte, #quoteModal,
   moved to <body>) — match live: filled-grey inputs + dark pill buttons.
   --------------------------------------------------------------------- */
#quoteModal .form-control,
#quoteModal input[type="text"],
#quoteModal input[type="email"],
#quoteModal input[type="tel"],
#quoteModal textarea {
  background-color: #ebebeb; border: 0; border-radius: 4px;
  padding: .5rem 1rem; font-size: .875rem; color: #414141; box-shadow: none;
}
#quoteModal .form-control::placeholder { color: #acaaa6; opacity: 1; }
#quoteModal .form-control:focus,
#quoteModal textarea:focus { background-color: #e4e4e4; box-shadow: none; }
#quoteModal label,
#quoteModal .col-form-label { font-weight: 400; color: #414141; }
#quoteModal #selected_options td { padding: .3rem .5rem; }
/* both footer buttons are dark pills like live (Annuleren + Aanvraag versturen) */
#quoteModal .modal-footer .btn {
  background: var(--tb-dark) !important; border-color: var(--tb-dark) !important; color: #fff !important;
  border-radius: 100px; text-transform: uppercase; font-weight: 800;
  font-size: .75rem; letter-spacing: .04em; padding: .6rem 2.2rem;
}
#quoteModal .modal-footer .btn:hover { background: #1f242a !important; border-color: #1f242a !important; }

/* ---------------------------------------------------------------------
   Account icon hover flyout (like live's leoquicklogin header dropdown):
   Taal · Valuta · account/checkout/wishlist/compare links. + login modal.
   --------------------------------------------------------------------- */
.tb-acc { position: relative; }
.tb-acc__dropdown {
  position: absolute; top: 100%; right: 0; z-index: 1000;
  min-width: 300px; max-width: calc(100vw - 24px);
  background: #fff; color: var(--tb-ink);
  border-radius: 8px; box-shadow: 0 16px 40px rgba(0,0,0,.18);
  padding: 1rem 1.25rem; margin-top: 10px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s; text-align: left;
}
.tb-acc__dropdown::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 14px; }
.tb-acc:hover .tb-acc__dropdown,
.tb-acc:focus-within .tb-acc__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.tb-header .tb-acc__dropdown a,
.tb-header .tb-acc__dropdown .tb-acc__cur { color: var(--tb-ink); }
.tb-acc__row { display: flex; align-items: center; gap: .6rem; padding: .4rem 0; border-bottom: 1px solid #ededed; }
.tb-acc__label { color: var(--tb-muted); font-size: .85rem; flex: 0 0 auto; }
.tb-acc__langs { display: flex; gap: .45rem; }
.tb-acc__lang img { display: block; border: 1px solid #eee; border-radius: 2px; }
.tb-acc__lang.is-active img { outline: 2px solid var(--tb-gold); outline-offset: 1px; }
.tb-acc__cur { font-weight: 700; }
.tb-acc__links { list-style: none; margin: .6rem 0 0; padding: 0; }
.tb-acc__links a { display: block; padding: .4rem 0; font-size: .92rem; text-decoration: none; }
.tb-header .tb-acc__dropdown .tb-acc__links a:hover { color: var(--tb-gold); }

/* login popup — Login | Register views toggle inside one modal, + social block (like live) */
.tb-login-modal { font-size: .875rem; }
.tb-login-modal .modal-dialog { max-width: 440px; }
.tb-login-modal .modal-header { padding-bottom: 0; }
.tb-login-modal .modal-body { padding: 0 1.5rem 1.75rem; }
.tb-acc-view { display: none; }
.tb-acc-view.is-active { display: block; }
.tb-login-modal__title { font-size: 1.3rem; font-weight: 800; color: var(--tb-ink); margin-bottom: 1.25rem; }
.tb-login-modal .form-control { background-color: #ebebeb; border: 0; border-radius: 4px; padding: .65rem 1rem; }
.tb-login-modal .form-control:focus { background-color: #e4e4e4; box-shadow: none; }
.tb-login-modal__pwd { position: relative; }
.tb-login-modal__pwd .form-control { padding-right: 2.4rem; }
.tb-login-modal__eye { position: absolute; top: 50%; right: .6rem; transform: translateY(-50%); border: 0; background: transparent; color: var(--tb-muted); padding: 0; line-height: 0; cursor: pointer; }
.tb-login-modal__eye .material-icons { font-size: 20px; }
.tb-login-modal__opts { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; }
.tb-login-modal__remember { display: flex; align-items: center; gap: .4rem; margin: 0; color: var(--tb-muted); }
.tb-login-modal__link { color: var(--tb-gold); text-decoration: none; font-size: .85rem; cursor: pointer; }
.tb-login-modal__btn {
  background: var(--tb-dark); border-color: var(--tb-dark); color: #fff;
  border-radius: 100px; text-transform: uppercase; font-weight: 800; font-size: .8rem;
  letter-spacing: .04em; padding: .75rem 2rem; margin-top: .25rem;
}
.tb-login-modal__btn:hover { background: #1f242a; border-color: #1f242a; color: #fff; }
.tb-login-modal__register { margin: 1rem 0 0; font-size: .9rem; }
.tb-login-modal__register a { color: var(--tb-gold); font-weight: 600; text-decoration: none; }
/* register view specifics */
.tb-register__gender { display: flex; gap: 2rem; }
.tb-register__gender .tb-radio,
.tb-register__check { display: flex; align-items: flex-start; gap: .5rem; margin: 0 0 .75rem; color: var(--tb-muted); font-size: .85rem; line-height: 1.35; cursor: pointer; }
.tb-register__gender .tb-radio { margin: 0; align-items: center; }
.tb-register__check input { margin-top: .15rem; flex: 0 0 auto; }
/* social block */
.tb-social { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px dashed #e0e0e0; }
.tb-social__title { font-size: 1.05rem; font-weight: 800; color: var(--tb-ink); margin: 0 0 1rem; }
.tb-social__btns { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.tb-social__btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: 0; cursor: pointer; color: #fff; }
.tb-social__btn--fb,
.tb-social__btn--tw { width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto; }
.tb-social__btn--fb { background: #4C68A2; }
.tb-social__btn--tw { background: #53d1f8; }
.tb-social__btn--google {
  height: 48px; padding: 0 1rem; border-radius: 6px; background: #fff; color: #3c4043;
  border: 1px solid #dadce0; font-weight: 600; font-size: .9rem;
}
.tb-social__btn--google:hover { background: #f8faff; border-color: #d2e3fc; }

/* ---------------------------------------------------------------------
   Checkout page (/bestelling, body.page-order) — match live LeoTheme:
   the visible step sits in a bordered white card; its title is an 18px
   uppercase heading; the "Doorgaan" button is a DARK pill (NOT gold —
   gold belongs to the cart's "Doorgaan naar betalen"). Hummingbird shows
   one step at a time (.step--current/.show), with the stepper on top.
   --------------------------------------------------------------------- */
.page-order .checkout-grid__content .step.step--current,
.page-order .checkout-grid__content .step.show {
  background: #fff; border: 1px solid #dedede; border-radius: 4px;
  padding: 1.25rem 1.5rem; margin-bottom: 1.5rem;
}
/* step heading: 18px uppercase like live (beats global #wrapper .page-title-section 1.5rem) */
.page-order .checkout-grid__content .step .page-title-section,
.page-order .checkout-grid__content .step__title.js-step-title {
  font-size: 1.125rem !important; font-weight: 700; text-transform: uppercase;
  color: #111; letter-spacing: .01em;
}
/* "Doorgaan" continue button -> dark pill (live = rgb(48,55,62) = --tb-dark) */
.page-order .checkout-grid__content button.btn-primary[name='continue'],
.page-order .checkout-grid__content button.continue,
.page-order .checkout-grid__content .continue.btn {
  background: var(--tb-dark) !important; border-color: var(--tb-dark) !important; color: #fff !important;
  border-radius: 100px; text-transform: uppercase; font-weight: 800;
  font-size: .75rem !important; letter-spacing: .04em; padding: .65rem 2.4rem !important;
}
.page-order .checkout-grid__content button.btn-primary[name='continue']:hover,
.page-order .checkout-grid__content button.continue:hover,
.page-order .checkout-grid__content .continue.btn:hover {
  background: #1f242a !important; border-color: #1f242a !important; color: #fff !important;
}
/* form fields like live: filled light-grey box, no border, subtle radius (LeoTheme look) */
.page-order .checkout-grid__content .form-control,
.page-order .checkout-grid__content input[type='text'],
.page-order .checkout-grid__content input[type='email'],
.page-order .checkout-grid__content input[type='tel'],
.page-order .checkout-grid__content input[type='password'],
.page-order .checkout-grid__content textarea,
.page-order .checkout-grid__content select {
  background-color: #ebebeb !important; border: 0 !important; border-radius: 4px;
  padding: .55rem 1rem; font-size: .875rem; color: #414141; box-shadow: none !important;
}
.page-order .checkout-grid__content .form-control::placeholder { color: #acaaa6; opacity: 1; }
.page-order .checkout-grid__content .form-control:focus,
.page-order .checkout-grid__content textarea:focus,
.page-order .checkout-grid__content select:focus { background-color: #e4e4e4 !important; }
/* labels: lighter like live (not bold) */
.page-order .checkout-grid__content .form-group label,
.page-order .checkout-grid__content .col-form-label,
.page-order .checkout-grid__content label { font-weight: 400; color: #414141; }
/* radios/checkboxes (Sociale titel + consent boxes): GOLD when active, not Bootstrap blue */
.page-order .checkout-grid__content .form-check-input:checked {
  background-color: var(--tb-gold) !important; border-color: var(--tb-gold) !important;
}
.page-order .checkout-grid__content .form-check-input:focus {
  border-color: var(--tb-gold) !important; box-shadow: 0 0 0 .2rem rgba(218,161,76,.25) !important;
}

/* ==========================================================================
   "Added to cart" modal (modules/ps_shoppingcart/modal.tpl override) — styled to
   the live (leo_kitchor) popup: dark header, white body, uppercase product name,
   prominent price, a divider before the summary, dark "continue" + gold "checkout".
   Scoped to .blockcart-modal so other modals are untouched.
   ========================================================================== */
.blockcart-modal .modal-content { border: 0; border-radius: 8px; overflow: hidden; color: #535353; }

/* Dark header with white title + gold check icon + white close */
.blockcart-modal .modal-header {
  background: var(--tb-dark); border-bottom: 0;
  padding: 1.1rem 1.5rem; align-items: center;
}
.blockcart-modal .blockcart-modal__title {
  color: #fff; font-size: 16px; font-weight: 600; margin: 0;
  display: flex; align-items: center; line-height: 1.3;
}
.blockcart-modal .blockcart-modal__title-icon { color: var(--tb-gold); margin-right: .75rem; font-size: 22px; }
.blockcart-modal .btn-close { opacity: 1; }
.blockcart-modal .btn-close:hover { opacity: .6; }

/* White body */
.blockcart-modal .modal-body { background: #fff; padding: 2.25rem 1.75rem; }

/* Product block */
.blockcart-modal__name {
  color: #222; font-size: 14px; line-height: 1.5; font-weight: 600;
  text-transform: uppercase; margin-bottom: .5rem;
}
.blockcart-modal__price { color: #222; font-size: 1.4rem; font-weight: 700; margin: .75rem 0 .25rem; }
.blockcart-modal__property,
.blockcart-modal__quantity { font-size: 13px; color: #666; margin-bottom: .25rem; }

/* Summary column — vertical divider like live's .divide-right */
.blockcart-modal__summary { border-left: 1px solid #e4e4e4; }
.blockcart-modal__nb-products { font-size: 1.05rem; margin-bottom: 1rem; color: #222; }
.blockcart-modal__total { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; }
.blockcart-modal__total--bold { font-weight: 700; color: #222; border-top: 1px solid #ededed; margin-top: .35rem; padding-top: .6rem; }

/* Footer buttons: "Continue shopping" = dark solid, "Proceed to checkout" = gold */
.blockcart-modal .modal-footer { border-top: 0; padding: 0 1.75rem 1.75rem; gap: .5rem; }
.blockcart-modal .modal-footer .btn { font-size: 14px; font-weight: 600; letter-spacing: .03em; padding: 11px 26px; border-radius: 50px; }
.blockcart-modal .modal-footer .btn-outline-primary { background: var(--tb-dark); border-color: var(--tb-dark); color: #fff; }
.blockcart-modal .modal-footer .btn-outline-primary:hover { background: var(--tb-gold); border-color: var(--tb-gold); color: #fff; }
.blockcart-modal .modal-footer .btn-primary { background: var(--tb-gold); border-color: var(--tb-gold); color: #fff; }
.blockcart-modal .modal-footer .btn-primary:hover { background: #c8893b; border-color: #c8893b; color: #fff; }