/* Poppins, zelf gehost (latin subset). font-display: swap = tekst is direct leesbaar in het systeemfont. */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/poppins/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/poppins/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/poppins/poppins-600.woff2") format("woff2"); }

/* ==========================================================================
   modern.css  -  visual refresh layer (2026)
   --------------------------------------------------------------------------
   Layout language: light "Vegist"-style shop (announcement bar, white header
   with pill search, light nav row, flat grey product tiles, centered section
   titles, lots of whitespace) in our own house style: red logo mark, green
   accent for prices/CTAs, dark slate for announcement bar + footer.

   Loaded LAST (see resources/views/app.blade.php) so it overrides
   stylesheet3x.css / main2.css / stylesheet4x.css and the inline <style> blocks.
   Purely additive: remove the two <link> tags to modern.css to get the old look back.

   Rules of this file:
   - generic: shared by every shop that runs on this codebase (APP_SETUP)
   - never styles the quote form / configurator (#formx, .cfg-*), apart from the
     site-wide font-family
   - lots of !important: the legacy CSS and inline styles use it everywhere
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* --- palette: the ONLY place colours are defined. The dark scheme further down re-defines these and nothing else.
         (the quote configurator reads --c-surface, --c-tile, --c-text, --c-muted, --c-line too) --- */
  --c-bg: #ffffff;                 /* page */
  --c-surface: #ffffff;            /* header, dropdowns, pills, off-canvas menu */
  --c-tile: #f7f7f7;               /* soft panels: category row, notice strip, seo band, pagination */
  --c-photo: #f7f7f7;              /* tile behind product photos (stays light in dark mode: the photos are JPGs on white) */
  --c-photo-radius: 0px;
  --c-text: #333333;
  --c-copy: #555555;               /* long-form body copy */
  --c-heading: #222222;
  --c-muted: #777777;
  --c-disabled: #bbbbbb;
  --c-line: #e6e6e6;
  --c-line-soft: #f0f0f0;
  --c-line-strong: #dddddd;
  --c-photo-on-tile: #ffffff;      /* round photo chips that sit ON a soft panel */
  --c-promo-1: #eaf4ec;            /* promo cards: soft tints of our green / copper */
  --c-promo-2: #f9efe5;
  --c-panel-line: transparent;     /* outline of soft panels; dark scheme: visible hairline */
  --c-accent: #15803d;             /* brand green: prices, CTAs, active states */
  --c-accent-hover: #166534;
  --c-accent-contrast: #ffffff;
  --c-accent-soft: #f0fdf4;
  --c-ink: #222222;                /* dark round buttons (search, scroll-up, category toggle) */
  --c-ink-contrast: #ffffff;
  --c-bar: #2b3338;                /* announcement bar + footer (house slate) */
  --c-bar-text: rgba(255, 255, 255, .78);
  --c-bar-heading: #ffffff;
  --c-bar-line: rgba(255, 255, 255, .1);
  --c-footer: #2b3338;
  --c-raised: #f0f0f0;             /* cards-on-cards, table headers */
  --c-highlight: #15803d;          /* links, hover + active states, small icons (dark scheme: copper) */
  --c-highlight-hover: #166534;
  --c-tab-active-bg: transparent;
  --c-danger: #dc3e33;
  --c-red: #dc3e33;                /* logo red */
  --c-shadow: 0 12px 30px rgba(0, 0, 0, .10);
  --c-icon-filter: none;           /* applied to small black PNG icons */
  --c-logo-filter: grayscale(1);   /* customer logo strip */
  --c-logo-chip: transparent;      /* backing for a dark logo that has no white variant */
  --c-show-on-light: block;        /* dark logo variant / moon icon */
  --c-show-on-dark: none;          /* white logo variant / sun icon */

  /* --- aliases used throughout this file --- */
  --m-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --m-green: var(--c-accent);
  --m-green-dark: var(--c-accent-hover);
  --m-green-soft: var(--c-accent-soft);
  --m-red: var(--c-red);
  --m-dark-2: var(--c-bar);
  --m-head: var(--c-heading);
  --m-text: var(--c-text);
  --m-muted: var(--c-muted);
  --m-line: var(--c-line);
  --m-tile: var(--c-tile);
  --m-radius: 12px;
  --m-pill: 999px;
  --m-shadow-lg: var(--c-shadow);
  --m-gap-section: 64px;
}

/* dark scheme. Contract shared with the configurator CSS:
   - no data-theme attribute on <html>  -> follow the device (prefers-color-scheme)
   - data-theme="dark" | "light"      -> visitor's own choice (toggle button, localStorage key "theme")
   ONLY variables change here, the two blocks must stay identical. Everything else in this file is
   written against the variables, so there are no other dark-specific selectors. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --c-bg: #333333;
    --c-surface: #3a3a3a;
    --c-tile: #3a3a3a;
    --c-photo: #f3f3f3;
    --c-photo-radius: 10px;
    --c-text: #cfcfcf;
    --c-copy: #c4c4c4;
    --c-heading: #ffffff;
    --c-muted: #9f9f9f;
    --c-disabled: #6a6a6a;
    --c-line: #505050;
    --c-line-soft: rgba(255, 255, 255, .08);
    --c-line-strong: #666666;
    --c-panel-line: #505050;
    --c-photo-on-tile: #f3f3f3;
    --c-promo-1: #3d4437;
    --c-promo-2: #473f37;
    --c-accent: #8cb74e;
    --c-accent-hover: #7aa23f;
    --c-accent-contrast: #ffffff;
    --c-accent-soft: #3b4a2a;
    --c-ink: #444444;
    --c-ink-contrast: #ffffff;
    --c-bar: #2b2b2b;
    --c-bar-text: rgba(255, 255, 255, .72);
    --c-bar-line: rgba(255, 255, 255, .08);
    --c-red: #d84a4a;
    --c-shadow: 0 14px 34px rgba(0, 0, 0, .55);
    --c-icon-filter: invert(1) brightness(1.6);
    --c-logo-filter: grayscale(1) invert(1) brightness(1.6);
    --c-logo-chip: #ffffff;
    --c-show-on-light: none;       /* dark logo variant / moon icon */
    --c-show-on-dark: block;       /* white logo variant / sun icon */
    --c-footer: #222222;
    --c-raised: #454545;
    --c-highlight: #d89a63;         /* copper */
    --c-highlight-hover: #c9854e;
    --c-tab-active-bg: #454545;
    --c-danger: #d84a4a;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --c-bg: #333333;
  --c-surface: #3a3a3a;
  --c-tile: #3a3a3a;
  --c-photo: #f3f3f3;
  --c-photo-radius: 10px;
  --c-text: #cfcfcf;
  --c-copy: #c4c4c4;
  --c-heading: #ffffff;
  --c-muted: #9f9f9f;
  --c-disabled: #6a6a6a;
  --c-line: #505050;
  --c-line-soft: rgba(255, 255, 255, .08);
  --c-line-strong: #666666;
  --c-panel-line: #505050;
  --c-photo-on-tile: #f3f3f3;
  --c-promo-1: #3d4437;
  --c-promo-2: #473f37;
  --c-accent: #8cb74e;
  --c-accent-hover: #7aa23f;
  --c-accent-contrast: #ffffff;
  --c-accent-soft: #3b4a2a;
  --c-ink: #444444;
  --c-ink-contrast: #ffffff;
  --c-bar: #2b2b2b;
  --c-bar-text: rgba(255, 255, 255, .72);
  --c-bar-line: rgba(255, 255, 255, .08);
  --c-red: #d84a4a;
  --c-shadow: 0 14px 34px rgba(0, 0, 0, .55);
  --c-icon-filter: invert(1) brightness(1.6);
  --c-logo-filter: grayscale(1) invert(1) brightness(1.6);
  --c-logo-chip: #ffffff;
  --c-show-on-light: none;       /* dark logo variant / moon icon */
  --c-show-on-dark: block;       /* white logo variant / sun icon */
  --c-footer: #222222;
  --c-raised: #454545;
  --c-highlight: #d89a63;         /* copper */
  --c-highlight-hover: #c9854e;
  --c-tab-active-bg: #454545;
  --c-danger: #d84a4a;
}
:root[data-theme="light"] { color-scheme: light; }

/* --------------------------------------------------------------------------
   1. Base / typography
   -------------------------------------------------------------------------- */

/* the legacy layout forces Montserrat on "*" with !important; "body *" wins on specificity.
   Icon fonts keep working: their rules are re-asserted below or live on ::before. */
body,
body * {
  font-family: var(--m-font) !important;
}
body .fa,
body .fas,
body .far,
body .fa-solid,
body .fa-regular { font-family: "Font Awesome 6 Free" !important; }
body .fab,
body .fa-brands { font-family: "Font Awesome 6 Brands" !important; }
body .glyphicon { font-family: "Glyphicons Halflings" !important; }
body [class^="fi-rs-"],
body [class*=" fi-rs-"] { font-family: "uicons-regular-straight" !important; }
body [class^="material-design-"],
body [class*=" material-design-"] { font-family: "material-design" !important; }
body .mdi,
body .mdi-set { font-family: "Material Design Icons" !important; }

html { -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }

body {
  background-color: var(--c-bg) !important;
  color: var(--m-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}

#page,
.header { background-color: var(--c-bg) !important; }

/* wrappers that used to paint the page grey */
#wrapper > div[style*="background-color"],
.m-page { background-color: var(--c-bg) !important; }

img { max-width: 100%; }

a { transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }

::selection { background: var(--m-green); color: var(--c-accent-contrast); }

:focus-visible {
  outline: 2px solid var(--m-green);
  outline-offset: 2px;
}

.m-section-title {
  margin: 0 0 28px !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-align: center;
  text-transform: none !important;
  color: var(--m-head) !important;
}

/* --------------------------------------------------------------------------
   2. Header
   -------------------------------------------------------------------------- */

.header-area { background: var(--c-surface); }

/* one page width everywhere (header, content, footer), same steps as the legacy #website-size */
.header-area .container,
.geenfooter > .container,
footer > .container,
footer .copyright > .container {
  width: 80% !important;
  max-width: 1650px !important;
}
@media (max-width: 1530px) {
  .header-area .container,
  .geenfooter > .container,
  footer > .container,
  footer .copyright > .container { width: 90% !important; max-width: 90% !important; }
}
@media (max-width: 800px) {
  .header-area .container,
  .geenfooter > .container,
  footer > .container,
  footer .copyright > .container { width: 100% !important; max-width: 100% !important; padding-left: 16px; padding-right: 16px; }
}

/* 2a. announcement bar */
.m-topbar {
  background: var(--m-dark-2);
  color: var(--c-bar-text);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  padding: 10px 0;
}
.m-topbar strong { color: var(--c-bar-heading); font-weight: 600; }
.m-topbar a { color: #fff !important; font-weight: 500; white-space: nowrap; }
.m-topbar a:hover { text-decoration: underline; text-underline-offset: 3px; }
.m-topbar-sep { margin: 0 12px; opacity: .35; }

/* 2b. white row: logo | pill search | icons */
.header-middle.header-middle-ptb-1 {
  background: var(--c-surface) !important;
  padding: 22px 0 !important;
  border: 0 !important;
}
.header-middle .header-wrap { align-items: center; gap: 24px; }

.header-middle .logo.logo-width-1 { margin-right: 0 !important; flex: 0 1 270px; }
.header-middle .logo.logo-width-1 a img {
  width: 100% !important;
  max-width: 270px;
  height: auto;
  display: block;
}

.header-middle .header-right {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
}
.header-middle .header-right .hotline { flex: 0 0 auto; padding: 0 !important; }

.search-style-2 {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 460px;
  margin: 0 auto;
}
.search-style-2 form {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--c-line-strong) !important;
  border-radius: var(--m-pill) !important;
  background: var(--c-surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.search-style-2 form:focus-within {
  border-color: var(--m-head) !important;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .05);
}
/* the category <select> is not used by the search: keep it in the DOM, hide it visually */
.search-style-2 form select,
.search-style-2 form .select2,
.search-style-2 form .select2-container { display: none !important; }
.search-style-2 form input,
.search-style-2 form input[type="text"] {
  flex: 1 1 auto;
  width: 100% !important;
  max-width: none !important;
  min-height: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 54px 0 20px !important;
  border: 0 !important;
  border-radius: var(--m-pill) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--m-text) !important;
}
.search-style-2 form input::placeholder { color: var(--c-muted); opacity: 1; font-style: normal; }
.search-style-2 form input { font-style: normal !important; }
.search-style-2 form .m-search-btn {
  position: absolute;
  top: -1px !important;
  right: -1px !important;
  transform: none !important;
  width: 44px;
  height: 44px !important;
  padding: 0 !important;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--c-ink) !important;
  color: var(--c-ink-contrast) !important;
  cursor: pointer;
  transition: background-color .15s ease;
}
.search-style-2 form .m-search-btn:hover { background: var(--m-green) !important; }
.search-style-2 form .m-search-btn svg { display: block; }

.header-middle .hotline p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--m-head) !important;
  white-space: nowrap;
}
.header-middle .hotline p svg { width: 24px; height: 24px; }
.header-middle .hotline p svg.svg-icon { width: 24px !important; height: 24px !important; color: var(--m-head) !important; }
.header-middle .hotline p svg.svg-icon path { fill: var(--m-head); }
.header-middle .hotline a:hover p { color: var(--c-highlight) !important; }

/* theme toggle (sun / moon) */
.m-theme-toggle {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  padding: 0 !important;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-line-strong) !important;
  border-radius: 50% !important;
  background: var(--c-surface) !important;
  color: var(--c-heading) !important;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.m-theme-toggle:hover { border-color: var(--c-highlight) !important; color: var(--c-highlight) !important; }
.m-theme-toggle svg { width: 18px; height: 18px; }
.m-theme-toggle .m-icon-moon { display: var(--c-show-on-light); }
.m-theme-toggle .m-icon-sun { display: var(--c-show-on-dark); }
.header-action-2 .m-theme-toggle { width: 34px; height: 34px; border: 0 !important; background: transparent !important; }

/* 2c. light nav row */
.header-bottom.header-bottom-bg-color {
  background-color: var(--c-surface) !important;
  border: 0 !important;
}
.header-style-3 .main-nav { border: 0 !important; }
.header-bottom .header-wrap.main-nav {
  padding: 0 !important;
  min-height: 52px;
  border-top: 1px solid var(--m-line) !important;
  align-items: center;
}
.header-bottom { border-bottom: 1px solid var(--m-line) !important; }
.sticky-bar.stick {
  border-bottom: 1px solid var(--m-line) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .06) !important;
  background: var(--c-surface) !important;
}
.sticky-bar.stick .header-wrap.main-nav { border-top-color: transparent !important; }

.header-bottom .header-nav { align-items: center; }

.main-categori-wrap { position: relative; margin-right: 0 !important; }
.header-style-3 .main-categori-wrap > a,
.main-categori-wrap > a {
  display: flex !important;
  align-items: center;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 52px;
  color: var(--m-head) !important;
  white-space: nowrap;
  padding-right: 22px;
}
.main-categori-wrap > a span { font-size: 15px !important; margin-right: 10px; color: var(--c-highlight) !important; }
.main-categori-wrap > a:hover,
.main-categori-wrap > a.open { color: var(--c-highlight) !important; }

.main-menu > nav > ul { display: flex; align-items: center; margin: 0 !important; padding: 0 !important; }
.main-menu.main-menu-lh-2 > nav > ul > li,
.main-menu.main-menu-padding-1 > nav > ul > li {
  display: flex;
  align-items: center;
  height: 52px;
  line-height: 52px !important;
  padding: 0 !important;
}
.main-menu.main-menu-padding-1 > nav > ul > li:first-child { padding-left: 0 !important; }
.main-menu > nav > ul > li > a {
  display: block;
  padding: 0 22px;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 20px;
  color: var(--m-head) !important;
  border-left: 1px solid var(--m-line);
  text-decoration: none !important;
}
.main-menu > nav > ul > li:hover > a,
.main-menu > nav > ul > li > a:hover {
  color: var(--c-highlight) !important;
  background: transparent;
  text-decoration: none !important;
}

/* "hotline" block on the right of the nav row */
.header-bottom .hotline { flex: 0 0 auto; white-space: nowrap; }
.header-bottom .hotline p {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  color: var(--m-text) !important;
}
.header-bottom .hotline p i {
  font-size: 26px;
  margin: 0;
  color: var(--m-head) !important;
  font-weight: 400;
}
.header-bottom .hotline p span.m-hotline-text {
  display: block;
  margin: 0 !important;
  text-align: left;
  letter-spacing: .02em;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--m-text) !important;
}
.header-bottom .hotline p span.m-hotline-label {
  display: block;
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--m-head) !important;
}

/* "Alle categorieen" dropdown */
/* closed from the first paint (main2.css loads late, the list used to flash open on load) */
.categori-dropdown-active-large:not(.open) { opacity: 0; visibility: hidden; }
.categori-dropdown-wrap.categori-dropdown-active-large { top: 100% !important; min-width: 250px; }
.categori-dropdown-wrap {
  border: 1px solid var(--m-line) !important;
  border-radius: 0 0 var(--m-radius) var(--m-radius) !important;
  box-shadow: var(--m-shadow-lg) !important;
  padding: 8px !important;
  overflow: hidden;
}
.categori-dropdown-wrap ul li { border: 0 !important; }
.categori-dropdown-wrap ul li a {
  border: 0 !important;
  border-radius: 8px;
  padding: 0 14px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--m-text) !important;
  line-height: 40px !important;
}
.categori-dropdown-wrap ul li a:hover {
  background: var(--m-tile) !important;
  color: var(--c-highlight) !important;
}
.categori-dropdown-wrap .more_categories {
  border-top: 1px solid var(--m-line) !important;
  margin-top: 8px;
  padding: 12px 14px 6px !important;
  font-weight: 500;
  font-size: 14px;
}
.categori-dropdown-wrap .more_categories a { color: var(--c-highlight) !important; }

/* 2d. rail with the owner's other shops (fixed, left edge): lighter, smaller */
.connection {
  width: auto !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%);
  margin: 0;
  padding: 8px 6px !important;
  background: var(--c-surface) !important;
  border: 1px solid var(--m-line);
  border-left: 0;
  border-radius: 0 var(--m-radius) var(--m-radius) 0 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.connection .site { display: block; }
.connection .site img {
  display: block;
  width: 38px !important;
  padding: 4px !important;
  transition: transform .15s ease;
}
.connection .site img:hover { transform: scale(1.1); }
@media (max-width: 1399px) { .connection { display: none !important; } }

/* 2e. mobile bar + off-canvas menu */
/* hidden from the very first paint (main2.css loads late, which made the panel flash/fade on load) */
.mobile-header-wrapper-style:not(.sidebar-visible) { visibility: hidden; opacity: 0; pointer-events: none; }
.mobile-header-wrapper-style { box-shadow: var(--m-shadow-lg) !important; max-width: 88vw; }
.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-top {
  border-bottom: 1px solid var(--m-line);
  background: var(--c-surface);
}
.mobile-header-content-area { padding: 20px !important; }
.mobile-header-content-area h3 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--m-head) !important;
  margin: 20px 0 6px;
}
.mobile-header-content-area ul li { padding: 0 !important; border-bottom: 1px solid var(--c-line-soft); }
.mobile-header-content-area ul li a {
  display: block;
  padding: 12px 2px !important;
  font-size: 15px !important;
  font-weight: 400;
  color: var(--m-text) !important;
}
.mobile-header-content-area ul li a:hover { color: var(--c-highlight) !important; }
/* the panel lists the categories twice; keep the first list */
.mobile-header-content-area nav > ul.mobile-menu { display: none !important; }
.mobile-search.search-style-3 form input {
  border: 1px solid var(--c-line-strong) !important;
  border-radius: var(--m-pill) !important;
  background-color: var(--c-surface) !important;
  height: 44px !important;
  font-size: 14px !important;
  padding-left: 18px !important;
}
.mobile-search.search-style-3 form input:focus { border-color: var(--m-head) !important; }
.single-mobile-header-info a { font-size: 14px !important; color: var(--m-text) !important; }

/* --------------------------------------------------------------------------
   3. Page layout + sidebar (clean list, no cards)
   -------------------------------------------------------------------------- */

.row.mobiheight { margin-top: 40px !important; }

.box {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.box .box-heading {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}
.mslider,
.mslider.box .box-heading,
.box-category { background-color: transparent !important; }

#column-leftx,
#column-left { padding-right: 36px; }
#column-leftx > .box,
#column-left > .box {
  margin: 0 0 34px !important;
  padding: 0 0 30px !important;
  border-bottom: 1px solid var(--m-line) !important;
}
#column-leftx > .box:last-child,
#column-left > .box:last-child { border-bottom: 0 !important; }

#column-leftx .box-heading h3,
#column-left .box-heading h3,
#column-leftx .box-heading h3[style] {
  margin: 0 0 18px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  color: var(--m-head) !important;
}
#column-leftx .box-heading h3::first-letter,
#column-left .box-heading h3::first-letter { text-transform: uppercase; }
#column-leftx .box.category .box-heading h3,
#column-left .box.category .box-heading h3 { text-transform: lowercase !important; }

/* category list */
.box.category > a { text-decoration: none !important; display: block; }
.box.category .box-content,
.box.category .box-category { background: transparent !important; padding: 0 !important; }
.box.category ul.menu { margin: 0 !important; padding: 0 !important; background: transparent; }
.box.category ul.menu li {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
.box.category ul.menu li a {
  display: block !important;
  padding: 8px 0 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  color: var(--m-text) !important;
  text-decoration: none !important;
  background: transparent !important;
}
.box.category ul.menu li a:hover { color: var(--c-highlight) !important; padding-left: 4px !important; }
.box.category ul.menu li a.text-red {
  color: var(--c-highlight) !important;
  font-weight: 500 !important;
}

/* "meest gekozen" rotating product */
.box.bestsellers { padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; }
.box.bestsellers .product-thumb {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  text-align: left !important;
}
.box.bestsellers .product-thumb .image {
  order: -1;
  padding: 14px !important;
  background: var(--c-photo) !important;
  border-radius: var(--c-photo-radius);
  margin-bottom: 12px;
  isolation: isolate;
}
.box.bestsellers .product-thumb .image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform .4s ease;
}
.box.bestsellers .product-thumb:hover .image img { transform: scale(1.05); }
.box.bestsellers .product-thumb #product { text-align: left !important; }
.box.bestsellers .product-thumb #product a,
.box.bestsellers .product-thumb .text_space {
  display: block;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--m-head) !important;
  text-transform: none !important;
}
.box.bestsellers .product-thumb:hover .text_space { color: var(--c-highlight) !important; }
.box.bestsellers .product-thumb .caption { text-align: left; padding: 0 !important; }
.box.bestsellers .price { margin: 4px 0 0 !important; text-align: left; }
.box.bestsellers .price .price-new {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--m-green) !important;
}
/* the rotating-product box is rendered empty on some pages: hide it then */
.box.bestsellers:has(.bestsellers-scroll):not(:has(.mySlides)) { display: none !important; }

/* promises, payment logos, contact */
.box.bestsellers ul { padding: 0 !important; margin: 0 !important; }
.box.bestsellers ul > br { display: none; }
.box.bestsellers li.listx {
  padding: 6px 0 !important;
  font-size: 14px !important;
  color: var(--m-text) !important;
  line-height: 1.4;
}
.box.bestsellers li.listx img { width: 18px !important; margin-right: 10px !important; flex: 0 0 18px; }

/* the promises box and the payment-logo box read as one block */
#column-leftx > .box.bestsellers[style*="margin-bottom"] {
  margin-bottom: 0 !important;
  padding-bottom: 14px !important;
  border-bottom: 0 !important;
}
#column-leftx > .box.bestsellers[style*="margin-top"] .row {
  margin: 0 !important;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
}
#column-leftx > .box.bestsellers[style*="margin-top"] .row > div {
  width: auto !important;
  flex: 0 0 auto;
  padding: 0 !important;
}
#column-leftx > .box.bestsellers[style*="margin-top"] img { max-height: 26px; width: auto; }

#column-leftx > .box.bestsellers.col-md-12 { float: none !important; width: 100% !important; }
#column-leftx > .box.bestsellers.col-md-12 .col-md-12 {
  float: none !important;
  width: 100% !important;
  padding: 4px 0 !important;
  font-size: 14px;
  line-height: 1.5;
}
#column-leftx > .box.bestsellers.col-md-12 .col-md-12 img { width: 18px !important; filter: var(--c-icon-filter); }
#column-leftx > .box.bestsellers.col-md-12 .col-md-12 i.glyphicon { font-size: 15px !important; width: 18px !important; margin-right: 0 !important; }
#column-leftx > .box.bestsellers.col-md-12 a { color: var(--m-text) !important; }
#column-leftx > .box.bestsellers.col-md-12 a:hover { color: var(--c-highlight) !important; }
#column-leftx > .box.bestsellers.col-md-12 b { font-weight: 500 !important; color: var(--m-head) !important; }
#column-leftx > .box.bestsellers.col-md-12 p { margin: 0 0 0 28px !important; font-size: 14px !important; line-height: 1.6 !important; color: var(--m-muted) !important; }

/* --------------------------------------------------------------------------
   4. Content column: notice strip, hero banner, category row, section heading
   -------------------------------------------------------------------------- */

#content .mobilehide { margin-bottom: 0; }
#content .mobilehide > .col-sm-12[style] {
  border: 1px solid var(--c-panel-line) !important;
  float: none !important;
  width: 100% !important;
  background: var(--m-tile) !important;
  border-radius: var(--m-pill) !important;
  padding: 9px 22px !important;
  margin-bottom: 14px;
  text-align: center;
}
#content .mobilehide > .col-sm-12[style] p {
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: .02em;
  line-height: 1.5 !important;
  text-transform: none !important;
  color: var(--m-text) !important;
}
#content .mobilehide > .col-sm-12[style] p::first-letter { text-transform: uppercase; }
#content .mobilehide > .col-sm-12[style] p span { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
#content .mobilehide > a { display: block; }
#content .mobilehide > a picture img,
#content .mobilehide > a > img {
  display: block;
  width: 100%;
  border-radius: var(--m-radius);
}

/* category pills on the home page */
.m-catrow {
  border: 1px solid var(--c-panel-line);
  margin: var(--m-gap-section) 0 0;
  padding: 44px 24px 48px;
  background: var(--m-tile);
  border-radius: var(--m-radius);
  text-align: center;
}
.m-catrow-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.m-catrow-list li { margin: 0; padding: 0; }
.m-catrow-list li a {
  display: block;
  padding: 11px 26px;
  border-radius: var(--m-pill);
  background: var(--c-surface);
  border: 1px solid var(--m-line);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--m-head) !important;
  text-decoration: none !important;
}
.m-catrow-list li a:hover {
  background: var(--m-green);
  border-color: var(--m-green);
  color: var(--c-accent-contrast) !important;
}

/* heading + grid wrapper: flat, no panel */
#content > .box.image_category,
#content .box.image_category > .box-content,
#content .box.image_category .box-category,
#content .box.latest {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
#content .box.latest > .box-heading { background: transparent !important; padding: 0 !important; }
#content .box.latest > .box-heading h3,
#content .box.latest h3#assortiment_xxlgifts,
#content .box.latest > h3 {
  margin: var(--m-gap-section) 0 30px !important;
  padding: 0 !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
  text-align: center !important;
  text-transform: none !important;
  color: var(--m-head) !important;
}
.m-inner #content .box.latest > .box-heading h3,
.m-inner #content .box.latest h3#assortiment_xxlgifts,
.m-inner #content .box.latest > h3 { margin-top: 44px !important; }
#content .box.latest .text-center,
.text-center { background: transparent !important; }

/* --------------------------------------------------------------------------
   5. Product grid + cards  (home, category, search)
   -------------------------------------------------------------------------- */

#Index-Main-Container { padding: 0 !important; }
/* product grid = <ul class="m-grid"> with <li class="m-card"> children (partials/product-card.blade.php).
   Used by the category/search grid (#product-grid, also for the pages infinite scroll appends) and by the
   home page sections (#m-home). Anything else inside the list (<style>, <script>, spacer divs) is hidden. */
:is(#Index-Main-Container, #m-home) ul.m-grid {
  display: grid !important;
  /* foto's maximaal 200x200: een breder scherm krijgt MEER kolommen, geen grotere kaarten */
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 38px 30px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
:is(#Index-Main-Container, #m-home) ul.m-grid > :not(li) { display: none !important; }

:is(#Index-Main-Container, #m-home) ul.m-grid > li.m-card {
  container-type: inline-size;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
:is(#Index-Main-Container, #m-home) ul.m-grid > li.m-card > a ~ div { display: none !important; }

:is(#Index-Main-Container, #m-home) li.m-card > a.preload-link {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  padding: 0;
  color: var(--m-text) !important;
  text-decoration: none !important;
}
:is(#Index-Main-Container, #m-home) li.m-card > a.preload-link > br,
:is(#Index-Main-Container, #m-home) li.m-card > a.preload-link > .col-md-12[style*="height:6px"] { display: none !important; }

/* image tile: flat light grey, square, product photo blended onto it */
:is(#Index-Main-Container, #m-home) li.m-card > a.preload-link > .image {
  order: -3;
  position: relative;
  float: none !important;
  width: 100% !important;
  padding: 0 !important;
  background: var(--c-photo) !important;
  border-radius: var(--c-photo-radius);
  overflow: hidden;
  isolation: isolate;
}
:is(#Index-Main-Container, #m-home) li.m-card > a.preload-link > .image picture { display: block; }
:is(#Index-Main-Container, #m-home) li.m-card > a.preload-link > .image picture img {
  display: block;
  width: 100% !important;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 9%;
  mix-blend-mode: multiply;
  transition: transform .45s ease;
}
:is(#Index-Main-Container, #m-home) li.m-card:hover > a.preload-link > .image picture img { transform: scale(1.06); }

/* colour dots */
:is(#Index-Main-Container, #m-home) li.m-card .image > div[style*="position: absolute"] {
  top: 12px;
  right: 12px !important;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 62%;
  overflow: hidden;
}
:is(#Index-Main-Container, #m-home) li.m-card .color-box {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(0, 0, 0, .14) !important;
  box-shadow: 0 0 0 1.5px #fff;
}

/* variant thumbnails: a quiet row under the tile (hovering one swaps the main photo) */
:is(#Index-Main-Container, #m-home) li.m-card > a.preload-link > div[style*="height:60px"] {
  order: -2;
  height: 46px !important;
  padding: 8px 0 0;
  overflow: hidden;
}
:is(#Index-Main-Container, #m-home) li.m-card .productxxx {
  visibility: visible !important;
  display: flex !important;
  flex-wrap: nowrap;
  gap: 6px;
  float: none !important;
  width: 100% !important;
  height: 38px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none;                 /* swipe/scroll without a visible bar (it covered half of the thumbnails) */
  -ms-overflow-style: none;
  opacity: .75;
  transition: opacity .2s ease;
}
:is(#Index-Main-Container, #m-home) li.m-card .productxxx::-webkit-scrollbar { display: none; }
:is(#Index-Main-Container, #m-home) li.m-card:hover .productxxx { opacity: 1; }
:is(#Index-Main-Container, #m-home) li.m-card .productxxx img {
  flex: 0 0 36px;
  width: 36px !important;
  height: 36px;
  float: none !important;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--m-line);
  border-radius: 6px;
  padding: 2px;
  transition: border-color .15s ease;
}
:is(#Index-Main-Container, #m-home) li.m-card .productxxx img:hover { border-color: var(--m-head); }
:is(#Index-Main-Container, #m-home) li.m-card .productxxx .m-card-more {
  flex: 0 0 auto;
  align-self: center;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--c-muted);
  white-space: nowrap;
}

/* name */
:is(#Index-Main-Container, #m-home) li.m-card > a.preload-link > span:not(.label) {
  order: -1;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 10px 0 0 !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  letter-spacing: .01em;
  color: var(--m-head) !important;
  text-align: left;
}
:is(#Index-Main-Container, #m-home) li.m-card:hover > a.preload-link > span:not(.label) { color: var(--c-highlight) !important; }
:is(#Index-Main-Container, #m-home) li.m-card > a.preload-link > span.label {
  order: -1;
  align-self: flex-start;
  margin: 6px 0 0;
  padding: 3px 10px;
  border-radius: var(--m-pill);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  background: var(--m-red);
  color: #fff;
}

/* price */
:is(#Index-Main-Container, #m-home) li.m-card > a.preload-link > .col-sm-12 {
  float: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin-top: 4px;
}
:is(#Index-Main-Container, #m-home) li.m-card .name,
:is(#Index-Main-Container, #m-home) li.m-card .name[style] {
  float: none !important;
  height: auto !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  color: var(--m-green) !important;
  text-transform: none !important;
}
:is(#Index-Main-Container, #m-home) li.m-card .name .boldx {
  display: inline-block;
  font-weight: 600 !important;
  text-transform: lowercase;
}
:is(#Index-Main-Container, #m-home) li.m-card .name .boldx::first-letter { text-transform: uppercase; }

/* min. quantity + delivery */
:is(#Index-Main-Container, #m-home) li.m-card > a.preload-link > .col-12 {
  float: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin-top: 4px;
  color: var(--m-muted) !important;
}
:is(#Index-Main-Container, #m-home) li.m-card > a.preload-link > .col-12 > .col-11 {
  float: none !important;
  width: 100% !important;
  padding: 0 !important;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--m-muted);
}
:is(#Index-Main-Container, #m-home) li.m-card > a.preload-link > .col-12 > .col-11 > br:first-child { display: none; }
:is(#Index-Main-Container, #m-home) li.m-card > a.preload-link > .col-12 img {
  filter: var(--c-icon-filter);
  width: 15px !important;
  margin-right: 6px;
  opacity: .55;
  vertical-align: -3px;
}

/* CTA: pill. Default = in flow under the card text ... */
:is(#Index-Main-Container, #m-home) li.m-card > a.preload-link > .col-md-12:last-child,
:is(#Index-Main-Container, #m-home) li.m-card > a.preload-link > .col-md-12:not([style]) {
  float: none !important;
  width: 100% !important;
  height: auto !important;
  padding: 12px 0 0 !important;
  margin-top: auto;
}
:is(#Index-Main-Container, #m-home) li.m-card > a.preload-link > .col-md-12 > .col-lg-4 {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
}
:is(#Index-Main-Container, #m-home) li.m-card .btn,
:is(#Index-Main-Container, #m-home) li.m-card .btn.btn-default {
  /* "Bekijk": 3D-knop - lichte bovenkant, donkere onderrand; drukt in bij klikken */
  --btn-edge: color-mix(in srgb, var(--m-green) 68%, #000);
  display: block !important;
  width: fit-content !important;        /* compacte knop, gecentreerd - niet over de hele kaart */
  min-width: 120px;
  max-width: 70%;
  margin: 0 auto 4px !important;
  padding: 9px 26px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  letter-spacing: .02em !important;
  border-radius: 8px !important;
  border: 0 !important;
  background-color: var(--m-green) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .10) 100%) !important;
  color: var(--c-accent-contrast) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 0 var(--btn-edge), 0 8px 14px rgba(0, 0, 0, .22) !important;
  transform: translateY(0);
  transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease !important;
}
:is(#Index-Main-Container, #m-home) li.m-card .btn:hover {
  background-color: var(--m-green-dark) !important;
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 5px 0 var(--btn-edge), 0 12px 18px rgba(0, 0, 0, .26) !important;
}
:is(#Index-Main-Container, #m-home) li.m-card .btn:active,
:is(#Index-Main-Container, #m-home) li.m-card a:active .btn {
  transform: translateY(3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 0 var(--btn-edge), 0 3px 6px rgba(0, 0, 0, .2) !important;
}

/* ... on devices with a mouse it becomes a quick CTA that slides up over the tile on hover
   (100cqw = card width = tile height, because the tile is square) */
@supports (top: 1cqw) {
  @media (hover: hover) and (min-width: 768px) {
    :is(#Index-Main-Container, #m-home) li.m-card > a.preload-link > .col-md-12:last-child,
    :is(#Index-Main-Container, #m-home) li.m-card > a.preload-link > .col-md-12:not([style]) {
      position: absolute;
      left: 0;
      top: calc(100cqw - 62px);
      z-index: 3;
      padding: 0 14px !important;
      margin: 0;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity .25s ease, transform .25s ease;
      pointer-events: none;
    }
    :is(#Index-Main-Container, #m-home) li.m-card:hover > a.preload-link > .col-md-12:last-child,
    :is(#Index-Main-Container, #m-home) li.m-card:hover > a.preload-link > .col-md-12:not([style]),
    :is(#Index-Main-Container, #m-home) li.m-card:focus-within > a.preload-link > .col-md-12:last-child {
      opacity: 1;
      transform: none;
    }
  }
}

/* pagination */
.pagination {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 48px 0 0 !important;
  padding: 0;
  border-radius: 0;
  float: none !important;
}
.pagination li,
.pagination > li {
  width: auto !important;
  float: none !important;
  display: block;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}
.pagination li > a,
.pagination li > span {
  display: block;
  float: none !important;
  min-width: 42px;
  padding: 10px 14px !important;
  margin: 0 !important;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--m-head) !important;
  background: var(--m-tile) !important;
  border: 1px solid var(--c-panel-line) !important;
  border-radius: var(--m-pill) !important;
}
.pagination li > a:hover { background: var(--c-ink) !important; color: var(--c-ink-contrast) !important; }
.pagination li.active > span,
.pagination li.active > a,
.pagination li.active span {
  background: var(--m-green) !important;
  color: var(--c-accent-contrast) !important;
}
.pagination li.disabled > span { color: var(--c-disabled) !important; }

/* customer logo strip */
.gifsicons { background: transparent !important; margin: var(--m-gap-section) 0 8px !important; }
.gifsicons img { filter: var(--c-logo-filter); opacity: .7; transition: opacity .2s ease; }
.gifsicons img:hover { opacity: 1; }
.gifsicons ~ h5 {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: var(--m-muted) !important;
  max-width: 720px;
  margin: 0 auto !important;
  padding: 0 16px 8px !important;
}
.gifsicons ~ h5 strong { font-weight: 400 !important; }

/* --------------------------------------------------------------------------
   6. Generic buttons  (never inside the quote form)
   -------------------------------------------------------------------------- */

.btn:not(#formx *):not([class*="cfg-"]) {
  border-radius: var(--m-pill) !important;
  font-weight: 500 !important;
  letter-spacing: .02em !important;
  box-shadow: none !important;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease !important;
}
.btn.btn-default:not(#formx *):not([class*="cfg-"]) {
  border: 0 !important;
  background-color: var(--m-green) !important;
  color: var(--c-accent-contrast) !important;
  padding: 11px 26px;
}
.btn.btn-default:not(#formx *):not([class*="cfg-"]):hover {
  background-color: var(--m-green-dark) !important;
  color: var(--c-accent-contrast) !important;
  border-radius: var(--m-pill) !important;
}

.menu-toggle,
#sizebtn {
  background: var(--c-ink) !important;
  border-radius: var(--m-pill) !important;
  font-weight: 500;
  font-size: 14px !important;
  letter-spacing: .04em;
  padding: 13px 16px !important;
}
ul#showmenu.mobile-menu {
  background: var(--c-surface) !important;
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius);
  margin-top: 8px !important;
  overflow: hidden;
}
ul#showmenu.mobile-menu li { border-bottom: 1px solid var(--c-line-soft) !important; }
ul#showmenu.mobile-menu li:last-child { border-bottom: 0 !important; }
ul#showmenu.mobile-menu li a { color: var(--m-text) !important; padding: 13px 18px !important; font-weight: 400; font-size: 15px; }
ul#showmenu.mobile-menu li a:hover { background: var(--m-tile) !important; color: var(--c-highlight) !important; }

#scrollUp {
  background-color: var(--c-ink) !important;
  border-radius: 50% !important;
  box-shadow: var(--m-shadow-lg);
}
#scrollUp:hover { background-color: var(--m-green) !important; }

/* --------------------------------------------------------------------------
   7. Product page (everything except the quote form / configurator)
   -------------------------------------------------------------------------- */

/* bootstrap .row without a container: its negative margins caused a horizontal scroll on phones */
#wrapper > .row { margin-left: 0 !important; margin-right: 0 !important; }
#wrapper > .row > .col-sm-1 { display: none !important; }
#wrapper > .row > #content.col-sm-10 {
  float: none !important;
  flex: 0 0 auto;
  width: 80% !important;
  max-width: 1650px !important;
  background: transparent !important;
  margin: 36px auto 0 !important;
  padding-left: 12px;
  padding-right: 12px;
}
@media (max-width: 1530px) {
  #wrapper > .row > #content.col-sm-10 { width: 90% !important; max-width: 90% !important; }
}
@media (max-width: 800px) {
  #wrapper > .row > #content.col-sm-10 { width: 100% !important; max-width: 100% !important; padding-left: 16px; padding-right: 16px; }
}
#xheaderbox {
  background: transparent !important;
  padding: 0 0 22px !important;
}
#xheaderbox > div[style*="margin-bottom"] {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
  margin: 0 !important;
}
#xheaderbox > div[style*="margin-bottom"] > h3 { float: none !important; margin: 0 !important; }
#xheaderbox h3,
#xheaderbox h3 b {
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  color: var(--m-head) !important;
}
#xheaderbox #Product_Reduced-Price { margin: 0 !important; width: auto !important; }
#xheaderbox #Product_Reduced-Price h3 {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--m-green) !important;
}

.gallery { padding-left: 0 !important; }
.gallery > .col-sm-12[style] {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 12px;
  background: transparent;
  border: 0 !important;
  padding: 0 !important;
  float: none !important;
}
#content .box .gallery .gallery_image,
#content .box .gallery .gallery_image.text-center,
.gallery .gallery_image,
.gallery .gallery_image.text-center {
  isolation: isolate;
  float: none !important;
  margin: 0 !important;
  background: var(--c-photo) !important;
  border: 0 !important;
  border-radius: var(--c-photo-radius);
  overflow: hidden;
  transition: box-shadow .15s ease;
}
.gallery .gallery_image img { mix-blend-mode: multiply; }
.gallery .gallery_image:first-child {
  flex: 0 0 100%;
  width: 100% !important;
  padding: 24px !important;
  text-align: center;
}
.gallery .gallery_image:first-child img {
  width: 100%;
  max-width: 660px;
  max-height: 580px;
  object-fit: contain;
}
.gallery .gallery_image:not(:first-child) {
  flex: 0 0 calc((100% - 60px) / 6);
  width: calc((100% - 60px) / 6) !important;
  min-width: 0;
  padding: 6px !important;
}
.gallery .gallery_image:not(:first-child):hover { box-shadow: inset 0 0 0 2px var(--c-accent); }
.gallery .gallery_image:not(:first-child) img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
.gallery > .col-sm-12[style] > .col-sm-12 { flex: 0 0 100%; width: 100%; padding: 0 !important; float: none !important; margin-top: 28px; }
.gallery > .col-sm-12[style] > .col-sm-12 > br { display: none; }

/* underline tabs */
.gallery > .col-sm-12[style] > .col-sm-12 > .col-sm-12:first-of-type {
  float: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--m-line);
  display: flex;
  justify-content: center;
  gap: 40px;
}
.gallery .corxx {
  float: none !important;
  display: block;
  width: auto !important;
  flex: 0 0 auto;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  margin: 0 0 -1px;
  padding: 14px 16px !important;
  font-size: 16px;
  font-weight: 500;
  color: var(--m-muted) !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.gallery .corxx:hover { color: var(--m-head) !important; text-decoration: none !important; }
.gallery #h_des:not([style]),
.gallery .corxx[style*="underline"] {
  background: var(--c-tab-active-bg) !important;
  color: var(--m-head) !important;
  border-bottom-color: var(--c-highlight) !important;
}

#product_spec { float: none !important; width: 100% !important; padding: 0 !important; }
#product_spec .tabs,
#product_spec .tabs p,
#product_spec .tabs li,
#product_spec .tabs span {
  font-size: 14.5px !important;
  line-height: 1.85 !important;
  color: var(--c-copy) !important;
}
#product_spec .tabs p { margin-bottom: 14px !important; }
#product_spec .tabs b,
#product_spec .tabs strong { color: var(--m-head) !important; font-weight: 600 !important; }
#product_spec .tabs h1 {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--m-head) !important;
  margin: 0 0 14px !important;
}
#product_spec .tabs h2,
#product_spec .tabs h3,
#product_spec .tabs h4 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--m-head) !important;
  margin: 20px 0 8px !important;
  text-transform: none !important;
}
#product_spec .tabs li { border-bottom: 1px solid var(--c-line-soft) !important; }

#product_spec table,
#Product-Description-Container table {
  width: 100% !important;
  margin: 0 0 20px !important;
  border: 0 !important;
  border-collapse: collapse !important;
  background: transparent !important;
}
#product_spec table td,
#Product-Description-Container table td {
  padding: 12px 16px !important;
  font-size: 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--m-line) !important;
  color: var(--c-copy) !important;
}
#product_spec table tr:nth-child(odd) td { background: var(--c-tile); }
#product_spec table td:first-child { font-weight: 500; color: var(--m-head) !important; width: 38%; }

#Product-Description-Container .tabs { font-size: 14.5px; line-height: 1.85; color: var(--c-copy) !important; }

.pintrest { clear: both; padding-top: 32px; }
#Similar-Products-Container hr { border-color: var(--m-line); opacity: 1; }

/* quote basket (/offerte-aanvragen) and any other stray product photo inside the content area:
   the photo itself carries the light tile (its wrapper also holds form fields, so the wrapper cannot) */
#Index-Main-Container img[src*="/ProductPhotos/"]:not(#formx *):not(.image img):not(.productxxx img) {
  display: block;
  max-width: 100%;
  max-height: 340px;
  margin: 8px auto 14px;
  padding: 14px;
  object-fit: contain;
  background: var(--c-photo) !important;
  border-radius: var(--c-photo-radius);
}

/* enlarged photo (lity lightbox): always on white */
.lity-image img,
.lity-content img { background: #fff; border-radius: 6px; }

/* --------------------------------------------------------------------------
   8. Text pages (over ons, contact, faq, privacy ...)
   -------------------------------------------------------------------------- */

#Index-Main-Container h1 {
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--m-head) !important;
  margin-bottom: 12px;
}
#Index-Main-Container h2 {
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--m-head) !important;
}
#Index-Main-Container p:not(#formx *):not([class*="cfg-"]),
#Index-Main-Container .tekstmaker,
#Index-Main-Container .tekstmaker p {
  font-size: 14.5px !important;
  line-height: 1.85 !important;
  color: var(--c-copy) !important;
}
#Index-Main-Container .tekstmaker strong { font-size: 16px !important; font-weight: 600; color: var(--m-head) !important; }
#Index-Main-Container .tekstmaker a { color: var(--c-highlight) !important; font-weight: 500; }
#Index-Main-Container .tekstmaker a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* FAQ accordion */
#Index-Main-Container .accordion { border: 0 !important; }
#Index-Main-Container .accordion-item {
  border: 0 !important;
  border-bottom: 1px solid var(--m-line) !important;
  border-radius: 0 !important;
  margin: 0;
  background: transparent;
}
#Index-Main-Container .accordion-item > .col-sm-12,
#Index-Main-Container .accordion .col-sm-12 { border: 0 !important; }
#Index-Main-Container .accordion-button {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--m-head) !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 18px 4px !important;
}
#Index-Main-Container .accordion-button:not(.collapsed) { color: var(--c-highlight) !important; }
#Index-Main-Container .accordion-body {
  font-size: 14.5px !important;
  line-height: 1.85 !important;
  color: var(--c-copy) !important;
  padding: 0 4px 20px !important;
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */

.geenfooter {
  border-top: 1px solid var(--c-panel-line);
  background-color: var(--m-tile) !important;
  padding-top: 64px !important;
  margin-top: var(--m-gap-section) !important;
  font-size: 14px;
  line-height: 1.85;
  color: var(--c-copy);
}
.geenfooter h1,
.geenfooter h2,
.geenfooter h3,
.geenfooter h4 {
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: var(--m-head) !important;
  text-transform: none !important;
  margin: 0 0 12px !important;
}
.geenfooter p { font-size: 14px !important; line-height: 1.85 !important; color: var(--c-copy) !important; }
.geenfooter a { color: var(--c-highlight) !important; }
.geenfooter .box_html { padding-bottom: 96px; background: transparent !important; }

footer[style] {
  background-color: var(--c-footer) !important;
  padding: 0 0 4px;
}
footer[style] > .container > div > span[style] {
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: .06em;
}
footer .footer_box { margin-bottom: 30px; }
footer .footer_box h5,
footer .footer_box h5[style] {
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  text-transform: lowercase !important;
  text-decoration: none !important;
  color: #fff !important;
  margin: 0 0 18px !important;
}
footer .footer_box h5::first-letter { text-transform: uppercase; }
footer .footer_box ul { margin: 0; padding: 0; }
footer .footer_box ul li { padding: 0 !important; margin: 0 !important; }
footer .footer_box ul li a {
  display: inline-block;
  padding: 5px 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  color: var(--c-bar-text) !important;
}
footer .footer_box ul li a::first-letter { text-transform: uppercase; }
footer .footer_box ul li a:hover { color: #fff !important; padding-left: 4px !important; }
footer .copyright {
  background-color: transparent !important;
  border-top: 1px solid var(--c-bar-line);
  margin-top: 14px;
  padding: 20px 0 !important;
  text-align: center;
}
footer .copyright a,
footer .copyright span,
footer .copyright i {
  color: rgba(255, 255, 255, .6) !important;
  font-style: normal;
  font-size: 13px;
  letter-spacing: .04em;
}
footer .copyright br { display: none; }

/* --------------------------------------------------------------------------
   10. Responsive
   -------------------------------------------------------------------------- */

/* desktop home page: full-width content (hero, category row, 4-column grid);
   the sidebar blocks move below the products as an info band */
@media (min-width: 992px) {
  .m-home > .row.mobiheight { display: flex; flex-direction: column; margin-top: 28px !important; }
  .m-home #content {
    order: 1;
    flex: 0 0 auto;
    width: 100% !important;
    max-width: 100% !important;
  }
  .m-home #column-leftx {
    order: 2;
    flex: 0 0 auto;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: var(--m-gap-section);
    padding: 56px 12px 0 !important;
    border-top: 1px solid var(--m-line);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    gap: 0 64px;
    align-items: start;
  }
  .m-home #column-leftx > .box { border-bottom: 0 !important; margin-bottom: 0 !important; padding-bottom: 0 !important; }
  .m-home #column-leftx > .box.category { display: none !important; }          /* nav row + category row cover this */
  .m-home #column-leftx > .box:nth-child(2) { grid-column: 1; grid-row: 1 / span 2; max-width: 300px; }
  .m-home #column-leftx > .box:nth-child(3) { grid-column: 2; grid-row: 1; }
  .m-home #column-leftx > .box:nth-child(4) { grid-column: 2; grid-row: 2; padding-top: 6px !important; }
  .m-home #column-leftx > .box:nth-child(5) { grid-column: 3; grid-row: 1 / span 2; }

}

@media (max-width: 1199px) {
  .header-middle .logo.logo-width-1 { flex-basis: 210px; }
  .header-middle .header-wrap { gap: 16px; }
  .main-menu > nav > ul > li > a { padding: 0 14px; font-size: 14px !important; }
  .main-categori-wrap > a { padding-right: 14px; font-size: 14px !important; }
  :is(#Index-Main-Container, #m-home) ul.m-grid { gap: 30px 20px; }
  #column-leftx,
  #column-left { padding-right: 20px; }
}

/* below 992px: burger menu, no sidebar */
@media (max-width: 991px) {
  .m-topbar { font-size: 12px; padding: 8px 0; }
  .m-topbar-sep,
  .m-topbar-phone { display: none; }

  .header-bottom > .container { width: 100% !important; max-width: 100% !important; padding-left: 16px; padding-right: 16px; }
  .header-bottom .header-wrap.main-nav { padding: 10px 0 !important; min-height: 0; gap: 12px; border-top: 0 !important; }
  .header-bottom .logo.logo-width-1 { margin-right: 0 !important; }
  .header-bottom .logo.logo-width-1 a img { width: 190px !important; max-width: 48vw; }
  .burger-icon.burger-icon-white > span::before,
  .burger-icon.burger-icon-white > span::after,
  .burger-icon > span::before,
  .burger-icon > span::after { background-color: var(--c-heading) !important; }
  .burger-icon.burger-icon-white > span.burger-icon-mid,
  .burger-icon > span.burger-icon-mid { background-color: var(--c-heading) !important; }
  .header-action-2 .header-action-icon-2 > a { color: var(--m-head) !important; }
  .header-action-2 .header-action-icon-2 > a svg { stroke: var(--m-head); }

  #website-size { padding-left: 16px !important; padding-right: 16px !important; }
  #column-leftx,
  #column-left { display: none !important; }
  #content.col,
  #content.col-sm-9 { width: 100% !important; flex: 0 0 100%; max-width: 100%; }
  #mobilesx { display: block !important; float: none !important; width: 100% !important; padding: 0 0 8px !important; }
  .row.mobiheight { margin-top: 20px !important; }
}

@media (max-width: 767px) {
  :root { --m-gap-section: 44px; }

  #website-size { padding-left: 16px !important; padding-right: 16px !important; }
  .row.mobiheight { margin-left: 0 !important; margin-right: 0 !important; }
  #mobilesx > .col-md-12[style] {
    border: 1px solid var(--c-panel-line) !important;
    border-radius: var(--m-radius);
    background: var(--m-tile) !important;
    padding: 20px 20px 2px !important;
    margin-bottom: 14px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--c-copy);
  }
  #mobilesx h3#assortiment_xxlgifts {
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: var(--m-head) !important;
    text-transform: none !important;
    text-align: left !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
  }
  #content.col { padding-left: 0 !important; padding-right: 0 !important; }

  .m-catrow { display: none; }                      /* phones use the "zoek per categorie" toggle */

  #content .box.latest > .box-heading h3,
  #content .box.latest h3#assortiment_xxlgifts,
  #content .box.latest > h3,
  .m-section-title { font-size: 21px !important; margin: 30px 0 20px !important; }

  :is(#Index-Main-Container, #m-home) ul.m-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 26px 14px; }
  :is(#Index-Main-Container, #m-home) li.m-card > a.preload-link > div[style*="height:60px"] { height: 40px !important; padding-top: 6px; }
  :is(#Index-Main-Container, #m-home) li.m-card .productxxx { height: 34px !important; gap: 4px; opacity: 1; }
  :is(#Index-Main-Container, #m-home) li.m-card .productxxx img { flex-basis: 32px; width: 32px !important; height: 32px; }
  :is(#Index-Main-Container, #m-home) li.m-card > a.preload-link > span:not(.label) { font-size: 13.5px !important; margin-top: 8px !important; }
  :is(#Index-Main-Container, #m-home) li.m-card .name,
  :is(#Index-Main-Container, #m-home) li.m-card .name[style] { font-size: 14.5px !important; }
  :is(#Index-Main-Container, #m-home) li.m-card > a.preload-link > .col-12 > .col-11 { font-size: 11.5px; line-height: 1.7; }
  /* the whole card is the link on touch screens */
  :is(#Index-Main-Container, #m-home) li.m-card > a.preload-link > .col-md-12:last-child,
  :is(#Index-Main-Container, #m-home) li.m-card > a.preload-link > .col-md-12:not([style]) { display: none !important; }

  #xheaderbox h3,
  #xheaderbox h3 b { font-size: 22px !important; }
  #xheaderbox #Product_Reduced-Price h3 { font-size: 18px !important; }
  .gallery { padding-right: 0 !important; }
  .gallery .gallery_image:first-child { padding: 12px !important; }
  .gallery > .col-sm-12[style] { gap: 8px; }
  .gallery .gallery_image:not(:first-child) { flex-basis: calc((100% - 24px) / 4); width: calc((100% - 24px) / 4) !important; }
  .gallery > .col-sm-12[style] > .col-sm-12 > .col-sm-12:first-of-type { gap: 28px; }
  .gallery .corxx { font-size: 15px; }

  .geenfooter { padding-top: 44px !important; }
  .geenfooter .box_html { padding-bottom: 72px; }
  /* the legacy CSS hid the footer link columns on phones: show them, two per row */
  footer > .container { display: block !important; text-align: left; }
  footer > .container > .row { display: flex; flex-wrap: wrap; }
  footer > .container > div[style*="text-align"] ~ br { display: none; }
  footer > .container > div[style*="text-align"] { margin-bottom: 36px; }
  footer[style] > .container > div > span[style] { font-size: 18px !important; }
  footer .footer_box { margin-bottom: 26px; }
  footer > .container > .row > .col-sm-3 { width: 50%; flex: 0 0 50%; float: none; }
}

@media (max-width: 359px) {
  :is(#Index-Main-Container, #m-home) ul.m-grid { grid-template-columns: 1fr; }
  footer > .container > .row > .col-sm-3 { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  :is(#Index-Main-Container, #m-home) li.m-card .image picture img,
  :is(#Index-Main-Container, #m-home) li.m-card > a.preload-link > .col-md-12,
  .box.bestsellers .product-thumb .image img,
  .connection .site img { transition: none !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   11. Theme plumbing: legacy CSS / inline styles hardcode white boxes and
       black text. These rules re-point them at the variables, so they hold in
       BOTH schemes and need no dark-specific selectors.
       (#formx / .cfg-* are left to the configurator's own styles.)
   -------------------------------------------------------------------------- */

/* header logo: both variants are in the DOM (see partials/nav.blade.php), the variables pick one */
.m-logo-light { display: var(--c-show-on-light) !important; }
.m-logo-dark { display: var(--c-show-on-dark) !important; }
/* logo without a white variant: light chip in the dark scheme so dark lettering stays readable */
.m-logo-chip { display: inline-block; background: var(--c-logo-chip); border-radius: 10px; padding: 6px 10px; }

/* wins over the product page's own ".header-middle...{background:white!important}" */
html body .header-area .header-middle.header-middle-ptb-1.d-none.d-lg-block { background-color: var(--c-surface) !important; }
html body .header-area .header-bottom.header-bottom-bg-color,
html body .header-area .sticky-bar.stick { background-color: var(--c-surface) !important; }

body { color: var(--c-text) !important; }

/* generic text defaults that legacy rules paint dark */
h1:not(#formx *), h2:not(#formx *), h3:not(#formx *), h4:not(#formx *), h5:not(#formx *), h6:not(#formx *) { color: var(--c-heading); }
p:not(#formx *), li:not(#formx *), td:not(#formx *), th:not(#formx *), label:not(#formx *) { color: var(--c-copy); }
a:not(#formx *):not(.btn) { color: var(--c-text); }
a:not(#formx *):not(.btn):hover { color: var(--c-highlight-hover); }
.col-md-12:not(#formx *), .col-sm-12:not(#formx *), .col-xs-12:not(#formx *), .col-12:not(#formx *) { color: var(--c-text); }
hr { border-color: var(--c-line) !important; opacity: 1; }

/* inline style="color:black" / white backgrounds coming from Blade + CMS content */
body [style*="color:black"]:not(#formx *),
body [style*="color: black"]:not(#formx *),
body [style*="color:#000"]:not(#formx *),
body [style*="color: #000"]:not(#formx *),
body [style*="color:#374046"]:not(#formx *),
body [style*="color: #374046"]:not(#formx *),
body [style*="color: #465b52"]:not(#formx *) { color: var(--c-heading) !important; }
body [style*="background:white"]:not(#formx *):not(img),
body [style*="background: white"]:not(#formx *):not(img),
body [style*="background-color:white"]:not(#formx *):not(img),
body [style*="background-color: white"]:not(#formx *):not(img),
body [style*="background-color: #ffffff"]:not(#formx *):not(img),
body [style*="background-color:#ffffff"]:not(#formx *):not(img) { background-color: var(--c-surface) !important; }

/* header bits */
.header-middle .hotline p svg:not(.svg-icon) { color: var(--c-heading); }
.main-menu > nav > ul > li > a,
.main-categori-wrap > a { color: var(--c-heading) !important; }
.categori-dropdown-wrap { background: var(--c-surface) !important; }
.mobile-header-wrapper-style,
.mobile-header-wrapper-style .mobile-header-wrapper-inner { background-color: var(--c-surface) !important; }
.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-top { background: var(--c-surface) !important; }
.close-style > i { background-color: var(--c-heading) !important; }
.mobile-header-border { border-color: var(--c-line) !important; }
.single-mobile-header-info a svg { color: var(--c-text); }

/* form controls outside the quote form */
input:not(#formx *):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
select:not(#formx *),
textarea:not(#formx *) {
  background-color: var(--c-surface) !important;
  color: var(--c-text) !important;
  border-color: var(--c-line-strong) !important;
}
.search-style-2 form { background: var(--c-surface); }
.search-style-2 form input { background-color: transparent !important; }
input::placeholder, textarea::placeholder { color: var(--c-muted) !important; }
.select2-dropdown,
.select2-container--default .select2-selection--single { background: var(--c-surface) !important; color: var(--c-text) !important; border-color: var(--c-line) !important; }

/* cards: text under the light photo tile */
:is(#Index-Main-Container, #m-home) li.m-card > a.preload-link,
:is(#Index-Main-Container, #m-home) li.m-card > a.preload-link > .col-12 { color: var(--c-muted) !important; }
:is(#Index-Main-Container, #m-home) li.m-card .color-box { box-shadow: 0 0 0 1.5px #fff; }

/* sidebar / info band */
.box.bestsellers li.listx { color: var(--c-text) !important; }
#column-leftx > .box.bestsellers[style*="margin-top"] img:not(:hover) { filter: var(--c-icon-filter); }
#column-leftx .glyphicon { color: var(--c-heading) !important; }

/* customer logos: transparent PNGs -> light monochrome */
.gifsicons img,
.gifsicons img:hover { filter: var(--c-logo-filter); }

/* product page */
#wrapper > .row > #content.col-sm-10 { background: transparent !important; }
#product_spec table tr:nth-child(odd) td { background: var(--c-tile); }
#product_spec table td,
#Product-Description-Container table td { color: var(--c-copy) !important; border-color: var(--c-line) !important; }
#Product-Description-Container table,
#Product-Description-Container table[style] { background: var(--c-surface) !important; }
.korting { color: var(--c-accent) !important; }
.buttoni { background-color: var(--c-surface) !important; color: var(--c-text) !important; }

/* text pages + faq (mdb/bootstrap accordion) */
#Index-Main-Container .accordion,
#Index-Main-Container .accordion-item,
#Index-Main-Container .accordion-collapse,
#Index-Main-Container .accordion-body { background-color: transparent !important; }
#Index-Main-Container .accordion-button::after { filter: var(--c-icon-filter); }
#Index-Main-Container .details,
#Index-Main-Container .details .col-sm-12 { border-color: var(--c-line) !important; }

/* seo band above the footer (CMS html) */
.geenfooter,
.geenfooter .box_html { color: var(--c-copy) !important; }
.geenfooter span:not([class]),
.geenfooter li,
.geenfooter div:not([class]) { color: var(--c-copy) !important; }
.geenfooter strong,
.geenfooter b { color: var(--c-heading) !important; }

/* misc legacy widgets */
.row_steps,
.text_steps { background-color: var(--c-surface) !important; border-color: var(--c-line) !important; color: var(--c-text); }
.label-warning { color: #fff !important; }
.swal-modal, .sweet-alert, .modal-content { background-color: var(--c-surface) !important; color: var(--c-text) !important; }
.lity-content { background: #fff; }                         /* enlarged product photo keeps its white backing */

/* --------------------------------------------------------------------------
   12. Home page sections (pages/partials/home-sections.blade.php) - mobile first
   -------------------------------------------------------------------------- */

.m-home-page { background: var(--c-bg); }
.m-home-page > .container { float: none; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; }
.m-sec { margin-top: var(--m-gap-section); clear: both; }

/* pill button (links) */
.m-btn {
  display: inline-block;
  padding: 13px 32px;
  border: 0;
  border-radius: var(--m-pill);
  background: var(--c-accent);
  color: var(--c-accent-contrast) !important;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none !important;
  transition: background-color .15s ease, transform .15s ease;
}
.m-btn:hover,
a:hover > .m-promo-body > .m-btn { background: var(--c-accent-hover); color: var(--c-accent-contrast) !important; }
.m-btn--sm { padding: 10px 22px; font-size: 13.5px; }

/* 12.1 hero */
.m-hero { margin-top: 20px; }
.m-hero-notice {
  display: block;
  margin: 0 0 14px;
  padding: 9px 20px;
  border: 1px solid var(--c-panel-line);
  border-radius: var(--m-pill);
  background: var(--c-tile);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--c-text) !important;
}
.m-hero-notice span { color: var(--c-red); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.m-hero-media {
  display: block;
  aspect-ratio: 1200 / 305;
  border-radius: var(--m-radius);
  overflow: hidden;
  background: var(--c-tile);
}
.m-hero-media picture,
.m-hero-media img { display: block; width: 100%; height: 100%; }
.m-hero-media img { object-fit: cover; transition: transform .6s ease; }
.m-hero-media:hover img { transform: scale(1.015); }
.m-hero-body { max-width: 860px; margin: 26px auto 0; text-align: center; }
.m-hero-text { font-size: 14.5px; line-height: 1.8; color: var(--c-copy); }
.m-hero-text h3,
.m-hero-text h3#assortiment_xxlgifts {
  margin: 0 0 10px !important;
  padding: 0 !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  color: var(--c-heading) !important;
}
.m-hero-body .m-btn { margin-top: 20px; }

/* 12.2 usp strip */
.m-usps { margin-top: 36px; }
.m-usps ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  margin: 0 !important;
  padding: 18px 18px !important;
  list-style: none;
  border: 1px solid var(--c-panel-line);
  border-radius: var(--m-radius);
  background: var(--c-tile);
}
.m-usps li.listx {
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 500;
  line-height: 1.35;
  color: var(--c-heading) !important;
}
.m-usps li.listx:last-child { grid-column: 1 / -1; }
.m-usps li.listx img { width: 20px !important; height: 20px; flex: 0 0 20px; margin-right: 10px !important; }

@media (max-width: 479px) {
  .m-usps ul { grid-template-columns: 1fr; gap: 10px; }
}

/* 12.3 categories: round photo chips on a soft band, swipeable on phones */
.m-cats {
  padding: 36px 0 30px;
  border: 1px solid var(--c-panel-line);
  border-radius: var(--m-radius);
  background: var(--c-tile);
}
.m-cats-list {
  display: flex;
  gap: 18px;
  margin: 0 !important;
  padding: 4px 20px 10px !important;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 20px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.m-cats-list::-webkit-scrollbar { display: none; }
.m-cats-list li { flex: 0 0 112px; margin: 0; padding: 0; text-align: center; scroll-snap-align: start; }
.m-cats-list a { display: block; text-decoration: none !important; }
.m-cats-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: var(--c-photo-on-tile);
  overflow: hidden;
  isolation: isolate;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.m-cats-photo img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 17%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform .4s ease;
}
.m-cats-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 26px;
  font-weight: 600;
  color: #555;
}
.m-cats-list a:hover .m-cats-photo { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); }
.m-cats-list a:hover .m-cats-photo img { transform: scale(1.1); }
.m-cats-name { display: block; margin-top: 12px; font-size: 14.5px; font-weight: 500; line-height: 1.3; color: var(--c-heading); }
.m-cats-list a:hover .m-cats-name { color: var(--c-highlight); }
.m-cats-count { display: block; margin-top: 2px; font-size: 12.5px; color: var(--c-muted); }

/* 12.4 promo cards */
.m-promos { display: grid; grid-template-columns: 1fr; gap: 16px; }
.m-promo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 170px;
  padding: 24px 22px;
  border: 1px solid var(--c-panel-line);
  border-radius: var(--m-radius);
  background: var(--c-promo-1);
  overflow: hidden;
  text-decoration: none !important;
}
.m-promo--2 { background: var(--c-promo-2); }
.m-promo-body { display: block; min-width: 0; }
.m-promo-title { display: block; font-size: 21px; font-weight: 600; line-height: 1.25; color: var(--c-heading); }
.m-promo-line { display: block; margin: 8px 0 18px; font-size: 13.5px; line-height: 1.5; color: var(--c-copy); }
.m-promo-photo {
  flex: 0 0 36%;
  max-width: 190px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--c-photo-on-tile);
  overflow: hidden;
  isolation: isolate;
}
.m-promo-photo img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 15%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform .45s ease;
}
.m-promo:hover .m-promo-photo img { transform: scale(1.08); }

/* 12.5 short product rows (popular + tab panels): swipe row on phones, 4 columns from tablets up */
:is(#Index-Main-Container, #m-home) ul.m-grid.m-grid--row {
  display: flex !important;
  gap: 14px;
  margin: 0 -16px !important;
  padding: 0 16px 8px !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 16px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
:is(#Index-Main-Container, #m-home) ul.m-grid.m-grid--row::-webkit-scrollbar { display: none; }
:is(#Index-Main-Container, #m-home) ul.m-grid.m-grid--row > li.m-card { flex: 0 0 46%; scroll-snap-align: start; }

/* 12.6 steps */
.m-steps-list { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0 !important; padding: 0 !important; list-style: none; }
.m-steps-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--c-panel-line);
  border-radius: var(--m-radius);
  background: var(--c-tile);
}
.m-steps-nr {
  flex: 0 0 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-accent-contrast);
  font-size: 17px;
  font-weight: 600;
}
.m-steps-text { font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--c-heading); }

/* 12.7 tabs */
.m-tabs-list {
  display: flex;
  gap: 8px;
  margin: 0 -16px 24px;
  padding: 2px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.m-tabs-list::-webkit-scrollbar { display: none; }
.m-tab {
  flex: 0 0 auto;
  appearance: none;
  margin: 0;
  padding: 9px 20px !important;
  border: 1px solid transparent !important;
  border-radius: var(--m-pill) !important;
  background: transparent !important;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-heading) !important;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.m-tab:hover { color: var(--c-highlight) !important; }
.m-tab[aria-selected="true"] {
  border-color: var(--c-heading) !important;
  background: var(--c-tab-active-bg) !important;
  color: var(--c-heading) !important;
}
.m-tabs-panel[hidden] { display: none !important; }
.m-tabs-panel:focus-visible { outline-offset: 6px; }
.m-tabs-more { margin: 30px 0 0 !important; text-align: center; }

/* 12.8 customer logos keep their own block */
.m-logos .gifsicons { margin-top: 0 !important; }
@media (max-width: 767px) {
  /* the rotating logo row stacked five big logos under each other on phones */
  .gifsicons[style*="block"] { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px; }
  .gifsicons img,
  .gifsicons img.imagelogoxxx { flex: 0 0 auto; width: 26% !important; max-width: 110px; margin: 6px 0 !important; }
}

@media (min-width: 768px) {
  .m-hero { margin-top: 28px; }
  .m-hero-notice { font-size: 13px; }
  .m-hero-body { margin-top: 34px; }
  .m-hero-text { font-size: 15px; }
  .m-hero-text h3,
  .m-hero-text h3#assortiment_xxlgifts { font-size: 28px !important; }
  .m-usps ul { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 20px 26px !important; }
  .m-usps li.listx:last-child { grid-column: auto; }
  .m-usps li.listx { font-size: 13.5px !important; }

  .m-cats { padding: 50px 24px 46px; }
  .m-cats-list { justify-content: center; flex-wrap: wrap; gap: 26px 34px; overflow: visible; padding: 0 !important; }
  .m-cats-list li { flex-basis: 150px; }

  .m-promos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
  .m-promo { min-height: 230px; padding: 34px 36px; }
  .m-promo-title { font-size: 26px; }
  .m-promo-line { font-size: 14.5px; margin-bottom: 22px; }

  :is(#Index-Main-Container, #m-home) ul.m-grid.m-grid--row {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 38px 24px;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible;
  }
  :is(#Index-Main-Container, #m-home) ul.m-grid.m-grid--row > li.m-card { flex: none; }

  .m-steps-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .m-steps-list li { padding: 24px 26px; }

  .m-tabs-list { justify-content: center; flex-wrap: wrap; margin: 0 0 34px; padding: 0; overflow: visible; }
}

@media (min-width: 1200px) {
  .m-usps ul { display: flex; justify-content: space-between; gap: 20px; padding: 22px 34px !important; }
  .m-cats-list li { flex-basis: 168px; }
  :is(#Index-Main-Container, #m-home) ul.m-grid.m-grid--row { gap: 44px 30px; }
}

/* smalle telefoons: altijd 2 kolommen (kaart blijft ruim onder de 200px) */
@media (min-width: 340px) and (max-width: 479px) {
  :is(#Index-Main-Container, #m-home) ul.m-grid:not(.m-grid--row) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* de kaart zelf wordt nooit breder dan 200px (foto max. 200x200) en staat gecentreerd in zijn kolom */
:is(#Index-Main-Container, #m-home) ul.m-grid > li.m-card {
  width: 100% !important;
  max-width: 200px !important;
  justify-self: center;
}

/* home-rijen (8 kaarten): alleen VOLLE rijen tonen - bij 5, 6 of 7 kolommen blijft er anders een losse kaart over.
   4 kolommen = 2 volle rijen, 8 kolommen = 1 volle rij. De container is het blok om de rij heen.
   "of li.m-card": in de eerste rij staat ook een <script> als kind van de <ul>, dat mag niet meetellen. */
@media (min-width: 768px) {
  :is(.m-popular, .m-tabs-panel) { container: mrow / inline-size; }
  :is(#Index-Main-Container, #m-home) ul.m-grid.m-grid--row { gap: 38px 30px !important; }
  @container mrow (min-width: 970px) and (max-width: 1169.98px) { ul.m-grid.m-grid--row > li.m-card:nth-child(n+6 of li.m-card) { display: none !important; } }
  @container mrow (min-width: 1170px) and (max-width: 1369.98px) { ul.m-grid.m-grid--row > li.m-card:nth-child(n+7 of li.m-card) { display: none !important; } }
  @container mrow (min-width: 1370px) and (max-width: 1569.98px) { ul.m-grid.m-grid--row > li.m-card:nth-child(n+8 of li.m-card) { display: none !important; } }
}

/* productpagina op telefoons: titel en vanaf-prijs allebei gecentreerd en compact (prijs stond los links) */
@media (max-width: 767px) {
  #Product_Reduced-Price { width: 100% !important; margin-top: 4px !important; }
  #Product_Reduced-Price h3 { text-align: center !important; margin: 0 !important; }
  #xheaderbox, #xheaderbox * { text-align: center !important; }
  #xheaderbox { height: auto !important; min-height: 0 !important; padding: 18px 0 14px !important; margin: 0 !important; }
  #xheaderbox > div[style*="margin-bottom"] { display: block !important; }
  #xheaderbox h3 { float: none !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 0 6px !important; padding: 0 !important; }
}