/* ============================================================
   ROOTED GOODS - CUSTOM STYLESHEET
   rootedgoods.eu | Shopware 6.5 / Promidata thema
   ============================================================ */


/* ------------------------------------------------------------
   1. GLOBAL — typografie
   Headings: Libre Baskerville (klassiek serif, weights 400 en 700).
   Body: Montserrat.
   Groene kleur #2d4528 alleen op headings. Body paragraphs blijven
   op de thema-default (zwart). Op donkere overlays (image-cards,
   text-on-image) wordt tekst expliciet wit via hun eigen sectie.
   ------------------------------------------------------------ */
body {
  font-family: 'Montserrat', sans-serif !important;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif !important;
  color: #2d4528 !important;
  line-height: 1.2;
}

/* Type scale — desktop (modular scale 1.25 / major third).
   Dubbele selector (generiek + .cms-element-text scope) om Promidata
   thema-overrides te verslaan die op class-level staan.
   Headings op weight 500 (medium) — ideaal voor Playfair Display.
   h4 is uitzondering: Montserrat subtitle-stijl voor top-title / eyebrow. */
h1, .cms-element-text h1 { font-size: 4rem !important;    font-weight: 500 !important; }
h2, .cms-element-text h2 { font-size: 3rem !important;    font-weight: 500 !important; }
h3, .cms-element-text h3 { font-size: 2.25rem !important; font-weight: 500 !important; }
h4, .cms-element-text h4 {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
}
h5, .cms-element-text h5 { font-size: 1.25rem !important; font-weight: 500 !important; }
h6, .cms-element-text h6 { font-size: 1rem !important;    font-weight: 500 !important; }

/* Type scale — tablet (<992px). h4 blijft vast op 0.875rem als subtitle. */
@media (max-width: 991px) {
  h1, .cms-element-text h1 { font-size: 3rem !important; }
  h2, .cms-element-text h2 { font-size: 2.5rem !important; }
  h3, .cms-element-text h3 { font-size: 1.875rem !important; }
  h5, .cms-element-text h5 { font-size: 1.125rem !important; }
}

/* Type scale — mobile (<577px). h4 blijft vast op 0.875rem als subtitle. */
@media (max-width: 576px) {
  h1, .cms-element-text h1 { font-size: 2.5rem !important; }
  h2, .cms-element-text h2 { font-size: 2rem !important; }
  h3, .cms-element-text h3 { font-size: 1.625rem !important; }
  h5, .cms-element-text h5 { font-size: 1.0625rem !important; }
}


/* ------------------------------------------------------------
   2. LAYOUT & CONTAINER
   ------------------------------------------------------------ */
.container,
.cms-section .boxed {
  max-width: 100% !important;
  --bs-gutter-x: 80px;
}
.content-main {
  padding: 0 !important;
  padding-top: 170px !important;
}


/* ------------------------------------------------------------
   3. HEADER
   ------------------------------------------------------------ */
.header-main {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 500;
  transition: transform 0.3s ease;
}
.header-main .container {
  max-width: 100% !important;
  --bs-gutter-x: 0px;
}
.header-main .header-row {
  background-color: #ffffff;
  position: relative;
  z-index: 500;
}
.header-row {
  padding: 0.5rem 2rem;
  padding-bottom: 0 !important;
}
.header-main.header-hidden {
  transform: translateY(-100%);
}

/* Header — logo */
.header-logo-main-link img,
.header-logo img {
  max-width: 250px;
}

/* Header — actie knoppen (iconen) */
.header-actions-col {
  position: relative;
  z-index: 501;
  overflow: visible;
}
.header-actions-btn {
  border-radius: 0 !important;
  padding: 0 12px !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: 34px !important;
  background: none !important;
  border: none !important;
  overflow: visible !important;
}
.header-actions-btn .icon svg {
  width: 20px !important;
  height: 20px !important;
}
.header-cart-total {
  font-size: 0.8rem !important;
}

/* Header — wishlist badge */
.header-wishlist,
.header-wishlist-btn,
.header-actions-col,
.header-actions-col .row {
  overflow: visible !important;
}
.header-wishlist {
  position: relative;
  display: inline-block;
}
.header-wishlist-btn {
  position: relative !important;
}
.header-wishlist-badge {
  position: absolute !important;
  top: 2px !important;
  right: -2px !important;
  transform: translateY(-30%) !important;
  min-width: 10px;
  height: 18px !important;
  padding: 0 4px !important;
  font-size: 0.65rem !important;
  line-height: 18px !important;
  border-radius: 50px !important;
}


/* ------------------------------------------------------------
   4. NAVIGATIE
   ------------------------------------------------------------ */
.nav-main {
  position: fixed;
  top: 97px;
  left: 0;
  width: 100%;
  z-index: 499;
  background-color: #ffffff;
  border-bottom-left-radius: 32px;
  border-bottom-right-radius: 32px;
  transition: transform 0.3s ease;
}
.nav-main.header-hidden {
  transform: translateY(-170px);
}
.nav-main .nav {
  justify-content: center;
}
.nav-main .main-navigation-link {
  font-size: 14px !important;
  padding-top: 0.6rem !important;
  padding-bottom: 0.6rem !important;
}
.main-navigation-link .main-navigation-link-text {
  font-weight: 500;
}
.main-navigation-link.home-link {
  display: none;
}
.main-navigation-link:hover,
.main-navigation-link:hover .main-navigation-link-text,
.main-navigation-link:hover .main-navigation-link-text span,
.main-navigation-link:hover [itemprop="name"] {
  color: #CA853F !important;
}

/* Navigatie — "Alle categorieën" icoon */
.main-navigation-link.all-categories .icon-stack {
  display: none;
}
.main-navigation-link.all-categories .main-navigation-link-text::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f5fd";
  margin-right: 0.4rem;
  color: #2d4528;
}

/* Header iconen — wishlist, account, cart op donkergroen */
.header-actions-btn .icon svg use,
.header-actions-btn .icon svg path,
.header-actions-btn .icon svg {
  fill: #2d4528 !important;
}

/* Offerte-link in nav-main — accent-CTA in bruine kleur met separator */
.offerte-link .main-navigation-link-text,
.offerte-link .main-navigation-link-text span,
.offerte-link [itemprop="name"] {
  color: #CA853F !important;
}
.offerte-link:hover .main-navigation-link-text,
.offerte-link:hover .main-navigation-link-text span {
  color: #b57a3d !important;
}
.offerte-link .offerte-separator {
  color: #000 !important;
  margin-right: 0.5rem;
  font-weight: 300;
  opacity: 0.4;
}


/* ------------------------------------------------------------
   5. TOP BAR — alle tekst en iconen in donkergroen
   ------------------------------------------------------------ */
.top-bar-nav {
  background-color: #ede9e2;
  color: #2d4528;
}
.top-bar-nav,
.top-bar-nav *,
.top-bar-nav a,
.top-bar-nav i,
.top-bar-nav .fas,
.top-bar-nav .fa-solid,
.top-bar-nav span {
  color: #2d4528 !important;
}
.top-bar-nav a {
  text-decoration: none;
}
.top-bar-nav a:hover {
  text-decoration: underline;
}
.top-bar-container {
  margin-top: 5px;
  margin-bottom: 5px;
}
.header-main .top-bar .top-bar-nav .top-bar-nav-extension {
  padding: 0rem 2rem;
}
.header-main .top-bar .top-bar-nav .top-bar-nav-extension .top-bar-container {
  padding: 3px 10px;
}

/* Container 5 (Over ons / Cases / Contact links) rechts uitlijnen
   binnen de cel zodat "Contact" visueel op één lijn staat met
   het cart-icoon en "€ 0,00" in de header daaronder. */
.top-bar-nav .top-bar-container.container--5 {
  text-align: right !important;
}


/* ------------------------------------------------------------
   6. ZOEKBALK
   Op desktop: position absolute zodat zoekbalk optisch gecentreerd
   staat op viewport (boven de nav-links), niet binnen de search-col
   (die tussen logo en icons hangt en niet symmetrisch is).
   Op tablet/mobile: normaal in-flow (logo/actions stacken daar).
   ------------------------------------------------------------ */
.header-search {
  max-width: 700px;
  margin: auto;
}

@media (min-width: 992px) {
  .header-row {
    position: relative;
  }
  /* Col position naar static zodat .header-search refereert naar .header-row */
  .header-search-col {
    position: static !important;
  }
  .header-search {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    max-width: 700px;
    z-index: 620;  /* verplaatst van header-search-col */
  }
}
.header-search-col {
  position: relative;
  z-index: 620;
}
.header-search-form {
  position: relative;
  z-index: 700;
}
.input-group:has(.header-search-input) {
  position: relative;
  z-index: 701;
  border-radius: 32px;
  background-color: #ede9e2;
}
.header-search-input {
  padding: 0.6rem 1rem !important;
  background-color: #ede9e2;
  border: none;
  border-top-left-radius: 32px !important;
  border-bottom-left-radius: 32px !important;
}
.header-search-input:focus {
  padding: 0.6rem 1rem !important;
  background-color: #ede9e2;
  border: none;
  box-shadow: none;
}
.header-search-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 1rem !important;
  line-height: 1 !important;
  background: #ede9e2 !important;
  border: none !important;
  border-top-right-radius: 32px !important;
  border-bottom-right-radius: 32px !important;
}
.header-search-btn .header-search-icon,
.header-search-btn .icon {
  display: flex !important;
  align-items: center !important;
  line-height: 1 !important;
}
.header-search-btn .icon > svg {
  top: 0px !important;
}
.header-main .header-search .header-search-btn {
  line-height: 1.5 !important;
  padding: 0.6rem 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.header-search-input:focus ~ .header-search-btn {
  border-color: none !important;
}

/* Zoekbalk — suggesties dropdown */
.search-suggest.js-search-result {
  position: relative;
  z-index: 600;
}
.header-main .search-suggest-container {
  max-height: 550px;
  border: none;
  background-color: #fff;
  border-radius: 32px;
  top: 0 !important;
  z-index: 699;
  padding-top: 3.5rem;
  margin-top: -2.5rem;
  box-shadow: 0 10px 25px -15px #000;
}

/* Zoekbalk — overlay bij focus */
#searchOverlay {
  display: none;
  position: fixed;
  top: 110px;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 300;
  cursor: pointer;
}
#searchOverlay.active {
  display: block;
}

@media (min-width: 768px) {
  .search-suggest-container {
    width: 700px;
  }
  .search-suggest-container::after {
    display: none;
  }
}

/* Desktop — zoekbalk en results altijd minimaal 700px, matchend */
@media (min-width: 992px) {
  .header-main .search-suggest-container {
    width: 700px !important;
    min-width: 700px !important;
  }
}


/* ------------------------------------------------------------
   7. CATEGORY FLYOUT
   ------------------------------------------------------------ */
.navigation-flyout {
  width: 95%;
  margin: 0 auto;
  border-bottom-left-radius: 32px;
  border-bottom-right-radius: 32px;
}
.navigation-flyout.cio-all-categories-navigation {
  max-width: 95%;
  margin: 0 auto;
  left: 2.5%;
  right: 2.5%;
}

/* Flyout — categorie afbeeldingen met overlay */
.navigation-flyout-category .navigation-item {
  position: relative;
}
.navigation-flyout-category .navigation-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.35);
  border-radius: inherit;
}
.navigation-flyout-category .flyout-text {
  position: relative;
  z-index: 1;
  color: #fff;
  font-weight: 600;
}
.navigation-flyout-category .icon {
  position: relative;
  z-index: 1;
}
.navigation-flyout-content::after {
  content: '';
  display: block;
  flex: 0 0 25%;
  max-width: 25%;
}
.navigation-flyout .row.navigation-flyout-content {
  position: relative;
}

/* Flyout — "Bekijk alle producten" CTA cel, button onderin uitgelijnd
   met onderkant van de afbeeldingen, links uitgelijnd horizontaal.
   Button krijgt natuurlijke grootte (niet stretched naar cel-breedte). */
.flyout-cta-col {
  display: flex !important;
  align-items: flex-end;
  justify-content: flex-start;
}
.flyout-cta-col a.btn {
  width: auto !important;
  max-width: max-content !important;
  height: auto !important;
  flex: 0 0 auto !important;
  display: inline-block !important;
  box-shadow: none !important;
}


/* ------------------------------------------------------------
   8. BUTTONS
   ------------------------------------------------------------ */
.btn:not(.header-actions-btn) {
  border-radius: 50px !important;
  padding: 0.9rem 2rem !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}
.btn-primary {
  background-color: #CA853F !important;
  border-color: #CA853F !important;
  color: #fff !important;
}
.btn-primary:hover {
  background-color: #b57a3d !important;
  border-color: #b57a3d !important;
}
.btn-outline-primary {
  background-color: transparent !important;
  border-color: #CA853F !important;
  color: #CA853F !important;
}
.btn-outline-primary:hover {
  background-color: #CA853F !important;
  color: #fff !important;
}


/* ------------------------------------------------------------
   9. PRODUCT BOX (algemeen)
   ------------------------------------------------------------ */
.product-box {
  border-color: transparent;
  background-color: #fff;
  border-radius: 10px !important;
}


/* ------------------------------------------------------------
   10. HOMEPAGE PRODUCT SLIDER
   ------------------------------------------------------------ */

/* Slider — verberg overbodige elementen */
.badge-new {
  display: none !important;
}
.home-productslider hr {
  display: none !important;
}
.home-productslider .product-box .product-action {
  display: none !important;
}

/* Slider — tekst styling, consistent met PLP. Selector op .box-image
   omdat slider tiles die specific class hebben (PLP heeft .box-standard). */
.home-productslider .product-box,
.home-productslider .product-box.box-image,
.home-productslider .product-slider-item .product-box {
  border: 1px solid #ede9e2 !important;
  border-radius: 12px !important;
  background-color: #ffffff !important;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  position: relative;
}

/* Hele tile klikbaar via ::after op de product-name link.
   Wishlist en variant-thumbs krijgen hogere z-index zodat ze
   eigen click-target houden. */
.home-productslider .product-name {
  position: static;
}
.home-productslider .product-name::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.home-productslider .product-wishlist,
.home-productslider .variant-thumbnail,
.home-productslider .product-image-link {
  position: relative;
  z-index: 2;
}
.home-productslider .product-box:hover,
.home-productslider .product-box.box-image:hover {
  box-shadow: 0 6px 20px rgba(45, 69, 40, 0.08);
  transform: translateY(-2px);
}
.home-productslider .product-box .card-body {
  --bs-card-spacer-y: 2.5rem;
  --bs-card-spacer-x: 1.5rem;
  padding: 2.5rem 1.5rem !important;
  display: flex;
  flex-direction: column;
}

/* Image-wrapper iets portrait — padding-bottom 110% (5:5.5).
   Werkt betrouwbaar, niet door Promidata te overschrijven. */
.home-productslider .product-image-wrapper,
.home-productslider .product-box .product-image-wrapper {
  position: relative !important;
  margin-bottom: 1rem !important;
  background-color: #ffffff !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  width: 100% !important;
  height: 0 !important;
  padding-bottom: 110% !important;
}
.home-productslider .product-image-link,
.home-productslider .product-box .product-image-link {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}
.home-productslider .product-image,
.home-productslider .product-box .product-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 8px !important;
}

/* Wishlist button — Promidata default position (onder image, rechts).
   We laten flow positioning intact, alleen icon-kleur op-brand. */
.home-productslider .product-wishlist svg use,
.home-productslider .product-wishlist svg path {
  fill: #2d4528 !important;
}

/* Variant thumbnails — ronde swatches, consistent met PLP */
.home-productslider .variant-thumbnail.slider {
  margin: 0.25rem 0 0.75rem 0;
  display: flex;
  gap: 0.35rem;
  overflow: hidden;
}
.home-productslider .variant-thumbnail .slides {
  display: flex;
  gap: 0.35rem;
}
.home-productslider .variant-thumbnail-img {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 1px solid #ede9e2 !important;
  object-fit: cover !important;
}
.home-productslider .variant-thumbnail .prev,
.home-productslider .variant-thumbnail .next {
  display: none;
}
.home-productslider .variant-thumbnail.active .prev,
.home-productslider .variant-thumbnail.active .next {
  display: inline-flex;
}

/* Product info — naam donkergroen, regular weight, hover bruin */
.home-productslider .product-info {
  margin-top: auto;
}
.home-productslider .product-name,
.home-productslider .product-box .product-info .product-name {
  display: block;
  font-weight: 400 !important;
  color: #2d4528 !important;
  text-decoration: none !important;
  font-size: 1rem;
  line-height: 1.3;
  margin: 0.25rem 0 0.5rem 0;
}
.home-productslider .product-name:hover {
  color: #ac723e !important;
}

/* Description: subtiel, max 2 regels */
.home-productslider .product-description {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.825rem;
  color: #888;
  line-height: 1.4;
  margin: 0.25rem 0 0.5rem 0;
}

/* Prijs — bold donkergroen met "Van" subtieler label */
.home-productslider .product-price-wrapper {
  font-size: 0.95rem;
  color: #888;
}
.home-productslider .product-price {
  font-weight: 700 !important;
  color: #2d4528 !important;
  font-size: 1.15rem;
  margin-left: 0.25rem;
}

/* Slider — reset alle interne spacing */
.home-productslider .tns-outer,
.home-productslider .tns-ovh,
.home-productslider .tns-inner,
.home-productslider .cms-block-container,
.home-productslider .cms-block-container[style],
.home-productslider .cms-block-container-row,
.home-productslider .col-12,
.home-productslider .cms-element-product-slider,
.home-productslider .base-slider {
  margin: 0 !important;
  padding: 0 !important;
}

/* Slider — dubbele clip-strategie:
   1. .home-productslider: padding-left duwt content 100px naar rechts,
      margin-right -60 laat sectie tot +60 buiten viewport doorlopen.
   2. .cms-block-container: overflow hidden kapt exact op de padding-grens,
      waardoor gekloonde TinySlider-tegels die links "uitsteken" verborgen
      worden zonder curtain. */
/* padding-left schaalt mee met viewport via clamp():
   - Min 15px op smalle schermen
   - 1.5vw tussenin
   - Max 40px op grote schermen (bv. 27" monitor)
   Zorgt dat de slider op elke laptop/desktop met de juiste offset laadt
   zonder manual media queries per breakpoint. */
.home-productslider {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  padding-left: clamp(15px, 1.5vw, 40px) !important;
  padding-bottom: 24px !important;
  margin-right: -45px !important;
  box-sizing: border-box !important;
  position: relative;
}
.home-productslider .cms-block-container,
.home-productslider .cms-block-container[style] {
  overflow: visible !important;
}

/* TinySlider's clip-containers: horizontaal clippen (clones links/rechts
   blijven verborgen) maar verticaal toelaten zodat hover-shadow van tiles
   niet wordt afgesneden. Zonder padding-bottom zou de shadow strak op de
   bottom-edge geclipt worden. */
.home-productslider .tns-outer,
.home-productslider .tns-ovh {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  padding-bottom: 24px !important;
}



/* Slider — item-breedte: default Tiny Slider berekening (productboxMinWidth 300).
   Geen width overrides — dat gaf ongewenste clone-zichtbaarheid links. */
.home-productslider .product-slider-item {
  padding-right: 30px !important;
}
/* (verplaatst naar de productslider-styling sectie hierboven; deze
   regel was redundant en versnipperde de aspect-ratio rules) */

/* ------------------------------------------------------------
   11. HOMEPAGE IMAGE ROW SPOTLIGHT
   ------------------------------------------------------------ */

/* Spotlight — ronde hoeken */
.image-row-spotlight .cms-block-element {
  overflow: hidden;
}
.image-row-spotlight .cms-image-container {
  border-radius: 16px !important;
  overflow: hidden !important;
}
.image-row-spotlight .cms-image {
  border-radius: 16px !important;
}

/* Spotlight — verticale offset per afbeelding voor dynamisch effect */
.image-row-spotlight {
  margin-top: -80px;
}
.image-row-spotlight .cms-block-element:nth-child(2) { padding-top: 40px; }
.image-row-spotlight .cms-block-element:nth-child(3) { padding-top: 20px; }
.image-row-spotlight .cms-block-element:nth-child(4) { padding-top: 60px; }
.image-row-spotlight .cms-block-element:nth-child(5) { padding-top: 20px; }
.image-row-spotlight .cms-block-element:nth-child(6) { padding-top: 40px; }

/* Spotlight — responsive hoogtes per afbeelding */
.image-row-spotlight .cms-image-container         { min-height: 13vw !important; }
.image-row-spotlight .cms-block-element:nth-child(1) .cms-image-container { min-height: 17vw !important; }
.image-row-spotlight .cms-block-element:nth-child(2) .cms-image-container { min-height: 12vw !important; }
.image-row-spotlight .cms-block-element:nth-child(3) .cms-image-container { min-height: 15vw !important; }
.image-row-spotlight .cms-block-element:nth-child(4) .cms-image-container { min-height: 19vw !important; }
.image-row-spotlight .cms-block-element:nth-child(5) .cms-image-container { min-height: 16vw !important; }
.image-row-spotlight .cms-block-element:nth-child(6) .cms-image-container { min-height: 13vw !important; }

/* Spotlight — desktop (alle 6 afbeeldingen passen precies) */
.image-row-spotlight .cms-block-container-row {
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}
.image-row-spotlight .cms-block-element {
  min-width: calc(100% / 6) !important;
  flex: 0 0 calc(100% / 6) !important;
}

/* Spotlight — tablet groot */
@media (max-width: 1200px) {
  .image-row-spotlight .cms-block-element {
    min-width: 20% !important;
    flex: 0 0 20% !important;
  }
}

/* Spotlight — tablet klein */
@media (max-width: 991px) {
  .image-row-spotlight .cms-block-element {
    min-width: 25% !important;
    flex: 0 0 25% !important;
  }
  .image-row-spotlight .cms-image-container {
    min-height: 20vw !important;
  }
}

/* Spotlight — mobiel (3-koloms grid) */
@media (max-width: 576px) {
  .image-row-spotlight .cms-block-container-row {
    flex-wrap: wrap !important;
  }
  .image-row-spotlight .cms-block-element {
    min-width: 33.333% !important;
    flex: 0 0 33.333% !important;
    padding-top: 0 !important;
  }
  .image-row-spotlight .cms-image-container {
    min-height: 28vw !important;
  }
  .image-row-spotlight {
    margin-top: 0 !important;
  }
}


/* ------------------------------------------------------------
   12. LOGO SLIDER
   ------------------------------------------------------------ */

/* Sectie achtergrond — overschrijft Shopware inline style="background-color: #fff" */
.cms-section.home.productslider,
.home.productslider {
  background-color: #F7F5F2 !important;
}

.home.productslider .carousel-control-prev,
.home.productslider .carousel-control-next {
  display: none !important;
}
.home.productslider .carousel-inner {
  overflow: visible;
}

/* Logo slider — continue scroll animatie */
.home.productslider .carousel-item.active {
  display: flex !important;
  gap: 4rem;
  align-items: center;
  animation: logoScroll 20s linear infinite;
}
@keyframes logoScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.home.productslider .card {
  border: none !important;
  background: transparent !important;
  flex-shrink: 0;
}

/* Logo slider — grayscale met hover effect */
.home.productslider .card-img img {
  filter: grayscale(100%);
  opacity: 0.6;
  transition: opacity 0.3s ease;
}
.home.productslider .card-img img:hover {
  opacity: 1;
  filter: grayscale(0%);
}


/* ------------------------------------------------------------
   13. CMS IMAGE-TEXT ROW (Specialiteiten blok)
   3 kolommen met afbeelding + titel + beschrijving erop,
   donkere overlay voor contrast, zoom-in op hover.
   Stijl geïnspireerd op Sugarcoat solutions.
   ------------------------------------------------------------ */

/* Blok zelf — 40px margin aan zijkanten, geen bottom-margin (dichter op volgend blok) */
.cms-block-image-text-row {
  margin-top: 2rem !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.cms-block-image-text-row .cms-block-container {
  padding: 0 40px !important;
}

/* Row — 40px gutter tussen kolommen (2.5rem = 40px, verdeeld over beide cols) */
.cms-block-image-text-row .cms-block-container-row {
  --bs-gutter-x: 2.5rem !important;
}

/* Col = anker voor absolute tekst-overlay.
   Geen margin-bottom op desktop (voorkomt dubbele ruimte na laatste rij),
   alleen op mobile waar cols stacken. */
.cms-block-image-text-row .col-md-4 {
  position: relative;
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .cms-block-image-text-row .col-md-4 {
    margin-bottom: 2.5rem;
  }
  .cms-block-image-text-row .col-md-4:last-child {
    margin-bottom: 0;
  }
}

/* Afbeelding vult volledige col-breedte */
.cms-block-image-text-row .cms-element-image,
.cms-block-image-text-row .cms-image-link {
  max-width: 100%;
  margin: 0 auto;
  display: block;
}
.cms-block-image-text-row .cms-image-container {
  border-radius: 16px !important;
  overflow: hidden !important;
  position: relative;
  min-height: 520px !important;   /* overschrijft Shopware inline style van 340px */
}

/* Zoom-in op hover — alleen de img schaalt, container blijft gelijk */
.cms-block-image-text-row .cms-image {
  transition: transform 0.5s ease !important;
  will-change: transform;
}
.cms-block-image-text-row .col-md-4:hover .cms-image {
  transform: scale(1.05);
}

/* Donkere overlay via pseudo-element op de image-container */
.cms-block-image-text-row .cms-image-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.35);
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

/* Tekst-wrapper (tweede data-cms-element-id in col) absoluut over image.
   Volledige col-breedte want image vult nu 100% van de col.
   Ruimere padding zodat subtekst ademruimte heeft. */
.cms-block-image-text-row .col-md-4 > div:last-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
  padding: 2rem 2.5rem;
}

.cms-block-image-text-row .cms-element-text {
  width: 100%;
  color: #fff;
}
/* Wit voor alle heading-levels zodat sectie robuust is bij wisseling h3/h4 */
.image-cards .cms-element-text h1,
.image-cards .cms-element-text h2,
.image-cards .cms-element-text h3,
.image-cards .cms-element-text h4,
.image-cards .cms-element-text h5,
.image-cards .cms-element-text h6 {
  color: #fff !important;
  text-align: center !important;
  margin: 0 !important;
  line-height: 1.2;
}
.image-cards .cms-element-text p {
  color: #fff !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  text-align: center !important;
  margin: 0.5rem 0 0 0 !important;
  line-height: 1.4;
}

/* Responsive — kleinere afbeelding + tekst op tablet/mobile */
@media (max-width: 991px) {
  .cms-block-image-text-row .cms-image-container {
    min-height: 420px !important;
  }
  .image-cards .cms-element-text p {
    font-size: 0.85rem !important;
  }
}
@media (max-width: 576px) {
  .cms-block-image-text-row .cms-image-container {
    min-height: 360px !important;
  }
  .image-cards .cms-element-text p {
    font-size: 0.95rem !important;
  }
}


/* ------------------------------------------------------------
   14. HERO IMAGE-TEXT (CTA banner met achtergrondafbeelding)
   Specifiek voor blokken met class .hero-image-text — NIET voor alle
   cms-block-text-on-image varianten, zodat andere text-on-image blokken
   hun eigen styling kunnen hebben.
   ------------------------------------------------------------ */

/* Block zelf — 40px inset aan zijkanten, 75vh hoogte, rounded corners.
   Flex-center zodat content verticaal gecentreerd wordt binnen 75vh. */
.hero-image-text {
  margin: 2rem 40px !important;
  min-height: 75vh;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Donkere overlay over de background-image */
.hero-image-text::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 1;
}

/* Container en content boven de overlay */
.hero-image-text .cms-block-container {
  position: relative;
  z-index: 2;
  padding: 6rem 2rem !important;
}

/* Alle tekst wit (overschrijft globale #2d4528) */
.hero-image-text .cms-element-text,
.hero-image-text .cms-element-text *,
.hero-image-text h1,
.hero-image-text h2,
.hero-image-text h3,
.hero-image-text h4,
.hero-image-text h5,
.hero-image-text h6,
.hero-image-text p,
.hero-image-text div {
  color: #fff !important;
}

/* Ruimte tussen heading en subtekst */
.hero-image-text .cms-element-text > h1,
.hero-image-text .cms-element-text > h2,
.hero-image-text .cms-element-text > h3 {
  margin-bottom: 1rem !important;
}

/* Buttons in hero-image-text: margin boven voor ademruimte */
.hero-image-text .cms-element-text .btn {
  margin-top: 1.5rem;
}

/* Responsive — kleinere margins en iets lagere vh op tablet/mobile */
@media (max-width: 991px) {
  .hero-image-text {
    margin: 1.5rem 20px !important;
    min-height: 60vh;
  }
  .hero-image-text .cms-block-container {
    padding: 4rem 1.5rem !important;
  }
}
@media (max-width: 576px) {
  .hero-image-text {
    margin: 1rem 10px !important;
    min-height: 50vh;
    border-radius: 12px;
  }
  .hero-image-text .cms-block-container {
    padding: 3rem 1rem !important;
  }
}


/* ------------------------------------------------------------
   15. PDP — PRODUCT DETAIL HEADLINE
   Productnaam wordt op desktop via JS verplaatst naar de top van
   de buy-col (col-lg-5) zodat hij naast de gallery staat
   (Sugarcoat-style). Op mobiel blijft de naam in z'n eigen rij
   bovenaan (boven de gallery), dat leest beter op kleine schermen.
   ------------------------------------------------------------ */

/* Desktop — originele headline-row verbergen (h1 wordt verplaatst). */
@media (min-width: 992px) {
  .product-detail-headline {
    display: none !important;
  }
}

/* Naam in nieuwe locatie (bovenaan buy-col) styling.
   Negative margin-top trekt 'm iets boven de natuurlijke top van
   de buy-col uit, zodat 'ie wat hoger op de pagina zit. */
.product-detail-buy .product-detail-name {
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  text-align: left !important;
  margin: -1rem 0 1.25rem 0 !important;
  line-height: 1.1;
}

/* Mobile — h1 blijft in originele positie boven gallery, kleinere font */
@media (max-width: 991px) {
  .product-detail-name {
    font-size: 2rem !important;
    font-weight: 700 !important;
    text-align: left !important;
    margin-bottom: 1rem !important;
  }
}
@media (max-width: 576px) {
  .product-detail-name {
    font-size: 1.75rem !important;
  }
}


/* ------------------------------------------------------------
   16. PDP — GALLERY LAYOUT
   Thumbnails links (default Promidata gedrag, geen reorder).
   Hoofdafbeelding groter laten ogen + arrows als minimal overlay
   (geen witte knop achtergrond, alleen icoon).
   ------------------------------------------------------------ */

/* Main slider col — anker voor absolute arrows + zoom-button.
   Geen padding-bottom: dots staan in normal flow eronder. */
.product-detail-media .gallery-slider-col {
  position: relative !important;
}

/* Hoofdafbeelding container groter (was 430px) — laat de afbeelding
   meer ruimte vullen. Niet te hoog zodat de dots eronder net boven
   de fold zichtbaar blijven op standaard laptop schermen. */
.product-detail-media .gallery-slider-item {
  min-height: 580px !important;
}

/* Arrows als minimal overlay — geen knop, alleen icoon */
.product-detail-media .gallery-slider-controls {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}
.product-detail-media .gallery-slider-controls-prev,
.product-detail-media .gallery-slider-controls-next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: auto;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 6;
  box-shadow: none !important;
}
.product-detail-media .gallery-slider-controls-prev {
  left: 0.5rem !important;
}
.product-detail-media .gallery-slider-controls-next {
  right: 0.5rem !important;
}

/* Arrow icon — donkergroen ipv default lichtgrijs voor zichtbaarheid */
.product-detail-media .gallery-slider-controls svg use {
  fill: #2d4528 !important;
}

/* Zoom-on-hover magnifier uitschakelen — geen lens-overlay op image,
   geen aparte zoomed-image container, normale cursor terug. */
.product-detail-media .magnifier-overlay,
.product-detail-media .js-magnifier-overlay,
.magnifier-zoom-image,
.js-magnifier-zoom-image {
  display: none !important;
}
.product-detail-media .gallery-slider-image,
.product-detail-media .js-magnifier-image {
  cursor: default !important;
}

/* Responsive: kleinere image-height op tablet/mobile */
@media (max-width: 991px) {
  .product-detail-media .gallery-slider-item {
    min-height: 500px !important;
  }
}
@media (max-width: 576px) {
  .product-detail-media .gallery-slider-item {
    min-height: 380px !important;
  }
}


/* ------------------------------------------------------------
   17. PDP — BUY COL: prijs-info en quantity defaults
   - total-price-top-container verbergen (sticky prijs-tabel boven)
   - product-price-info links uitlijnen ipv rechts (Promidata default)
   - Aantal-accordion standaard open (zie ook JS)
   ------------------------------------------------------------ */

/* Sticky prijs-tabel bovenaan buy-col verbergen.
   Onderaan blijft de tabel staan via #total-price-bottom-container. */
#total-price-top-container {
  display: none !important;
}

/* Product price info links uitlijnen — overschrijft .text-end */
.product-detail-buy .product-price-info,
.product-detail-buy .product-price-info .product-cheapest-price-wrapper.text-end {
  text-align: left !important;
}

/* Buy col: extra ademruimte aan de linker kant op desktop */
@media (min-width: 992px) {
  body.is-ctl-product .product-detail-buy {
    padding-left: 3rem !important;
  }
}

/* "Van € X Zonder opdruk" blok bovenaan verbergen — onderaan staat
   al een complete totaal-tabel met dezelfde info. */
.product-detail-buy .product-price-info {
  display: none !important;
}

/* Configurator group titels (Kleur / Aantal / Opdruk / etc.) donkergroen */
.product-detail-buy .collapse-title,
.product-detail-buy .product-detail-configurator-group-title,
.product-detail-buy .collapse-title > span,
.product-detail-buy .product-detail-configurator-group-title > span {
  color: #2d4528 !important;
}

/* Cijferbolletjes (1, 2, 3, 4, 5) voor de titels in donkergroen */
.product-detail-buy .collapse-title::before,
.product-detail-buy .product-detail-configurator-group-title::before {
  background-color: #2d4528 !important;
  border-color: #2d4528 !important;
}

/* Kleurkeuze: toon de naam (uit title-attribuut) onder elke swatch.
   Pure CSS via attr() — geen JS nodig. Promidata zet `title="bamboe"`
   etc. op elke kleur-label. Geselecteerde kleur krijgt donkergroen +
   bold; niet-geselecteerd is dimmer. */
.product-detail-buy .product-detail-configurator-options {
  padding-bottom: 2rem;
}
.product-detail-buy .product-detail-configurator-option {
  position: relative;
}
.product-detail-buy .product-detail-configurator-option-label::after {
  content: attr(title);
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.85rem;
  color: #888;
  font-weight: 400;
  white-space: nowrap;
  text-transform: capitalize;
}
.product-detail-buy .product-detail-configurator-option-input:checked + .product-detail-configurator-option-label::after {
  color: #2d4528;
  font-weight: 600;
}

/* Tabellen in buy-col: dark headers worden donkergroen, tekst wit.
   Body text (tbody) blijft zwart. Geldt voor staffelprijzen-tabel
   en het price-overzicht onderaan (custom-configurator-table). */
.product-detail-buy .table thead.table-dark,
.product-detail-buy .table thead.table-dark th,
.product-detail-buy .table thead.table-dark td,
.product-detail-buy .table-dark {
  --bs-table-bg: #2d4528 !important;
  background-color: #2d4528 !important;
  color: #ffffff !important;
  border-color: #2d4528 !important;
}
.product-detail-buy .table tbody,
.product-detail-buy .table tbody th,
.product-detail-buy .table tbody td {
  color: #000000;
}

/* Tabel striped accent in buy-col: zelfde topbar-kleur (#ede9e2) als
   in de properties tabel, ipv default Bootstrap lichtgrijs.
   Geldt voor de staffel-prijzen tabel én het price-overzicht onderaan. */
.product-detail-buy .table.table-striped {
  --bs-table-striped-bg: #ede9e2 !important;
  --bs-table-striped-color: #000000 !important;
}
.product-detail-buy .table.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: #ede9e2 !important;
  color: #000000 !important;
}

/* Staffel-prijzen tabel (product-block-prices-grid)
   - Alle rijen wit, ruime padding, subtiele rij-separator
   - Wrapper met border + rounded corners zodat tabel als kaart oogt
   - Aantallen dikgedrukt, prijs groter, besparing als groene pill
   - Highlight-row (actieve tier) accent-border licht-bruin met radius
   - Hele rij klikbaar (cursor + JS handler) */
.product-detail-buy .product-block-prices-grid {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* Wrapper rond de tabel met afgeronde hoeken */
.product-detail-buy .product-block-prices {
  border: 1px solid #ede9e2;
  border-radius: 8px;
  overflow: hidden;
}

/* Tbody-cellen: wit, ruime cel-padding voor lucht in de rijen */
.product-detail-buy .product-block-prices-grid > tbody > tr > * {
  background-color: #ffffff !important;
  padding-top: 1.1rem !important;
  padding-bottom: 1.1rem !important;
  vertical-align: middle !important;
}

/* Thead-cellen: donkergroen bg, witte tekst, dikgedrukt, ruime padding */
.product-detail-buy .product-block-prices-grid > thead > tr > * {
  background-color: #2d4528 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  padding-top: 1.1rem !important;
  padding-bottom: 1.1rem !important;
  vertical-align: middle !important;
}

/* Side-padding op eerste en laatste cellen voor lucht aan zijkanten */
.product-detail-buy .product-block-prices-grid > tbody > tr > *:first-child,
.product-detail-buy .product-block-prices-grid > thead > tr > *:first-child {
  padding-left: 1.5rem !important;
}
.product-detail-buy .product-block-prices-grid > tbody > tr > *:last-child,
.product-detail-buy .product-block-prices-grid > thead > tr > *:last-child {
  padding-right: 1.5rem !important;
}

/* Subtiele rij-separator. Eerste tbody-row krijgt geen extra border (zit
   al onder de thead). Promidata's #eee border-top wordt hierdoor vervangen. */
.product-detail-buy .product-block-prices-grid .product-block-prices-body .product-block-prices-row,
.product-detail-buy .product-block-prices-grid > tbody > tr.product-block-prices-row {
  border-top: 1px solid #ede9e2 !important;
}
.product-detail-buy .product-block-prices-grid > tbody > tr.product-block-prices-row:first-child {
  border-top: none !important;
}

/* Aantallen (eerste cel) dikgedrukt — incl. de inline qty-click span */
.product-detail-buy .product-block-prices-grid > tbody > tr > th:first-child,
.product-detail-buy .product-block-prices-grid .product-block-prices-quantity {
  font-weight: 700 !important;
}

/* Prijs per stuk (laatste cel) groter + dikker */
.product-detail-buy .product-block-prices-grid > tbody > tr > td:last-child {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
}

/* Besparing als sage-groene pill — wordt via JS in een
   <span class="product-block-prices-savings"> gewrapped. */
.product-block-prices-savings {
  display: inline-block;
  background-color: #7a9b6f;
  color: #ffffff;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.4;
}

/* Highlight-row (actieve tier): border-ring in licht-bruin via cell borders.
   Eerste cel krijgt linker rounded corners, laatste cel rechter. */
.product-detail-buy .product-block-prices-row.highlight-row > th,
.product-detail-buy .product-block-prices-row.highlight-row > td {
  border-top: 2px solid #ac723e !important;
  border-bottom: 2px solid #ac723e !important;
  background-color: #ffffff !important;
}
.product-detail-buy .product-block-prices-row.highlight-row > th:first-child {
  border-left: 2px solid #ac723e !important;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.product-detail-buy .product-block-prices-row.highlight-row > td:last-child,
.product-detail-buy .product-block-prices-row.highlight-row > th:last-child {
  border-right: 2px solid #ac723e !important;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.product-detail-buy .product-block-prices-row {
  cursor: pointer;
  transition: background-color 0.15s ease;
}


/* ------------------------------------------------------------
   21. PDP — TOTAALPRIJS-TABEL (custom-configurator-table)
   Dezelfde styling als staffel-tabel: wit, donkergroene header,
   afgeronde corners. CSS-only via cell-corner radii — geen JS
   wrapper, want #total-price-bottom-container wordt door Promidata
   re-rendered bij prijswijzigingen waardoor wrappers gewist worden.
   Items-tabel + price-container ogen samen als één rounded kaart:
   - Tabel: border + top-rounded corners, geen border-bottom
   - Price-container daaronder: border + bottom-rounded corners,
     border-top als subtiele scheiding van de tabel
   ------------------------------------------------------------ */

.product-detail-buy .custom-configurator-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin-bottom: 0 !important;
  border: 1px solid #ede9e2;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
}

/* Cell-corners moeten matchen met table border-radius om visueel
   geen vierkante hoeken te tonen */
.product-detail-buy .custom-configurator-table > thead > tr > *:first-child {
  border-top-left-radius: 8px;
}
.product-detail-buy .custom-configurator-table > thead > tr > *:last-child {
  border-top-right-radius: 8px;
}

/* Header donkergroen, witte tekst, dikgedrukt, ruime padding */
.product-detail-buy .custom-configurator-table > thead > tr > * {
  background-color: #2d4528 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  padding: 1.1rem 1rem !important;
  vertical-align: middle !important;
  border: none !important;
}

/* Tbody rijen wit, ruime padding */
.product-detail-buy .custom-configurator-table > tbody > tr > * {
  background-color: #ffffff !important;
  padding: 1.1rem 1rem !important;
  vertical-align: middle !important;
  border-top: 1px solid #ede9e2 !important;
  border-bottom: none !important;
}

/* Side-padding op eerste/laatste cellen */
.product-detail-buy .custom-configurator-table > thead > tr > *:first-child,
.product-detail-buy .custom-configurator-table > tbody > tr > *:first-child {
  padding-left: 1.5rem !important;
}
.product-detail-buy .custom-configurator-table > thead > tr > *:last-child,
.product-detail-buy .custom-configurator-table > tbody > tr > *:last-child {
  padding-right: 1.5rem !important;
}

/* Override striped — alle rijen wit ipv afwisselend */
.product-detail-buy table.custom-configurator-table {
  --bs-table-striped-bg: transparent !important;
}
.product-detail-buy table.custom-configurator-table > tbody > tr > *,
.product-detail-buy table.custom-configurator-table > tbody > tr:nth-of-type(odd) > *,
.product-detail-buy table.custom-configurator-table > tbody > tr:nth-of-type(even) > * {
  background-color: #ffffff !important;
}

/* Price-container (Stukprijs / Totaalprijs Netto / Bruto) sluit
   visueel aan op de items-tabel: side borders + bottom-rounded corners,
   border-top als subtiele scheiding. */
.product-detail-buy #total-price-bottom-container .configurator-price-container {
  background-color: #ffffff;
  padding: 1rem 1.5rem;
  border-left: 1px solid #ede9e2;
  border-right: 1px solid #ede9e2;
  border-bottom: 1px solid #ede9e2;
  border-top: 1px solid #ede9e2;
  border-radius: 0 0 8px 8px;
  margin-bottom: 1rem;
}
.product-detail-buy #total-price-bottom-container .configurator-price-container > table {
  margin-bottom: 0 !important;
}
.product-detail-buy #total-price-bottom-container .configurator-price-container > table th,
.product-detail-buy #total-price-bottom-container .configurator-price-container > table td {
  border: none !important;
  padding: 0.4rem 0 !important;
  background-color: #ffffff !important;
}


/* ------------------------------------------------------------
   22. PDP — FORM CONTROLS (aantallen, opmerkingen)
   Witte achtergrond, ruimer, consistent met de tabel-styling.
   ------------------------------------------------------------ */

.product-detail-buy .form-control,
.product-detail-buy .form-select,
.product-detail-buy textarea.form-control,
.product-detail-buy input[type="number"].form-control {
  background-color: #ffffff !important;
  padding: 0.75rem 1rem !important;
  font-size: 1rem !important;
  border: 1px solid #ede9e2 !important;
  border-radius: 6px !important;
  min-height: 48px;
}

/* Textarea iets meer hoogte voor opmerkingen */
.product-detail-buy textarea.form-control {
  min-height: 100px;
}

/* Focus state — subtiele bruine outline ipv default Bootstrap blauw */
.product-detail-buy .form-control:focus,
.product-detail-buy .form-select:focus {
  border-color: #ac723e !important;
  box-shadow: 0 0 0 0.2rem rgba(172, 114, 62, 0.15) !important;
}


/* ------------------------------------------------------------
   23. PDP — STEPS SEPARATORS
   Promidata zet grijze borders tussen de configurator-steps
   (Kleur, Aantal, Opdruk, etc.). Wij willen #ede9e2 als accent.
   ------------------------------------------------------------ */

.product-detail-buy .product-detail-configurator-group,
.product-detail-buy .collapse-group {
  border-color: #ede9e2 !important;
  border-top-color: #ede9e2 !important;
  border-bottom-color: #ede9e2 !important;
}
.product-detail-buy .product-detail-configurator-group + .product-detail-configurator-group,
.product-detail-buy .collapse-group + .collapse-group {
  border-top: 1px solid #ede9e2 !important;
}

/* Hoofdafbeelding klikbaar — cursor zoom-in als hint. */
.product-detail-media .gallery-slider-image,
.product-detail-media .js-magnifier-image {
  cursor: zoom-in !important;
}

/* Zoom-trigger button — wordt via JS toegevoegd aan de gallery-col.
   Alleen zichtbaar op hover. Click triggert image click → zoom modal.
   Note: position:relative + padding-bottom worden ook gezet bij de
   gallery layout sectie hierboven; hier laten we ze weg om duplicate
   declaraties te voorkomen. */
.gallery-zoom-trigger {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 7;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background-color 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.product-detail-media .gallery-slider-col:hover .gallery-zoom-trigger {
  opacity: 1;
}
.gallery-zoom-trigger:hover {
  background-color: #ffffff;
}
.gallery-zoom-trigger svg {
  width: 20px;
  height: 20px;
  stroke: #2d4528;
}

/* Gallery slider dots — on-brand pill, donkergroene actieve dot.
   Promidata levert de dots als <div class="base-slider-dots"> met
   <button class="base-slider-dot"> children, actieve dot heeft
   .tns-nav-active. */
.product-detail-media .gallery-slider-col .base-slider-dots {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  background-color: rgba(255, 255, 255, 0.9) !important;
  border-radius: 999px !important;
  width: max-content;
  margin: 1.5rem auto 0 !important;
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  z-index: 5;
}

.product-detail-media .base-slider-dots .base-slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #d4cdc2;
  border: none !important;
  padding: 0 !important;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.product-detail-media .base-slider-dots .base-slider-dot:hover {
  background-color: #ac723e;
}

.product-detail-media .base-slider-dots .base-slider-dot.tns-nav-active {
  background-color: #2d4528;
}


/* ------------------------------------------------------------
   18. PDP — SPLIT BACKGROUND
   PDP achtergrond wit, rechter kolom (buy col, col-lg-5) krijgt
   off-white #FBF7F5. Achtergrond loopt door tot onder het menu
   via een linear-gradient op .content-main: split op 58.333%
   (= grens col-lg-7 / col-lg-5).
   Alleen op desktop — op mobile/tablet stackt alles, geen split.
   ------------------------------------------------------------ */

/* PDP body wit (overschrijft eventuele Promidata default) */
body.is-ctl-product {
  background-color: #ffffff !important;
}

/* Desktop: gradient op content-main als split bg.
   content-main heeft padding-top:170px voor het fixed menu — de
   gradient vult vanaf y=0 (top, achter menu) tot bottom van main,
   dus visueel "sluit aan tot het menu" zoals gewenst.
   Split op 50% omdat de buy col verbreed is naar 6/12 (zie hieronder). */
@media (min-width: 992px) {
  body.is-ctl-product .content-main {
    background: linear-gradient(
      to right,
      #ffffff 0%,
      #ffffff 50%,
      #FBF7F5 50%,
      #FBF7F5 100%
    );
  }

  /* Buy col verbreden van col-lg-5 (5/12) naar 6/12 (50%) voor
     meer ademruimte rond de configurator. Media col krimpt navenant. */
  body.is-ctl-product .product-detail-media.col-lg-7 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
  body.is-ctl-product .product-detail-buy.col-lg-5 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
}

/* Mobile/tablet: buy col als zelfstandige off-white blok */
@media (max-width: 991px) {
  body.is-ctl-product .product-detail-buy {
    background-color: #FBF7F5;
    padding: 1.5rem !important;
    border-radius: 8px;
    margin-top: 1rem;
  }
}


/* ------------------------------------------------------------
   19. PDP — BUY COL: sample button verbergen
   "Sample voor € 22,04 bestellen" knop weghalen — niet relevant
   voor deze B2B context waar samples via offerte-flow lopen.
   ------------------------------------------------------------ */
#js-request-sample {
  display: none !important;
}


/* ------------------------------------------------------------
   20. PDP — TABS SECTIE (Beschrijving / Beoordelingen)
   - Hele section achtergrond off-white, full viewport width
     via pseudo-element zodat het door de container heen breekt
   - Card-elementen binnenin transparant zodat de off-white doorschijnt
   - Beschrijving-tab layout: titel boven, omschrijving links, specs rechts
   ------------------------------------------------------------ */

.product-detail-tabs {
  position: relative;
  margin-top: 3rem;
  padding: 2.5rem 0;
}

/* Viewport-wijde off-white achtergrond achter de tabs section */
.product-detail-tabs::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background-color: #FBF7F5;
  z-index: 0;
}

/* Content boven de bg pseudo */
.product-detail-tabs > * {
  position: relative;
  z-index: 1;
}

/* Card-tabs wrapper = de witte box (omsluit zowel tabs-nav als content).
   Alle inner elementen krijgen expliciet witte bg zodat de visuele box
   heel doorloopt (Bootstrap's tab-content kan soms uit z'n parent vallen). */
.product-detail-tabs .card.card-tabs,
.product-detail-tabs .card.card-tabs > .card-header,
.product-detail-tabs .card.card-tabs > .card-body,
.product-detail-tabs .product-detail-tab-navigation,
.product-detail-tabs .product-detail-tabs-content,
.product-detail-tabs .tab-content,
.product-detail-tabs .tab-pane,
.product-detail-tabs .offcanvas-body {
  background-color: #ffffff !important;
  border: none !important;
}

.product-detail-tabs .card.card-tabs {
  border-radius: 16px !important;
  margin: 0 auto;
  max-width: 1250px;
  display: block;
  position: relative;
  overflow: hidden;
}

/* Tab navigation: subtiele border eronder zodat tabs en content
   visueel gescheiden blijven binnen de witte box */
.product-detail-tabs .product-detail-tab-navigation {
  border-bottom: 1px solid #ede9e2 !important;
  padding: 0.5rem 1.5rem 0 !important;
}

/* Card body padding consistent maken */
.product-detail-tabs .card.card-tabs > .card-body,
.product-detail-tabs .product-detail-tabs-content {
  padding: 0 !important;
}

/* Actieve tab: witte bg + lichtbruine border-bottom als active-indicator.
   Andere borders transparant zodat 'ie naadloos in de witte box overgaat. */
.product-detail-tabs .nav-tabs .nav-link.active,
.product-detail-tabs .nav-tabs .nav-link.active:hover,
.product-detail-tabs .nav-tabs .nav-link.active:focus {
  background-color: #ffffff !important;
  border-top-color: transparent !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom: 2px solid #ac723e !important;
}

/* Hover/focus op INACTIEVE tabs: geen achtergrondswisseling */
.product-detail-tabs .nav-tabs .nav-link:not(.active):hover,
.product-detail-tabs .nav-tabs .nav-link:not(.active):focus {
  background-color: transparent !important;
  border-color: transparent !important;
}

/* Beschrijving — geen eigen box meer, zit nu binnen de witte
   card-tabs box hierboven. Alleen layout (grid) + padding. */
.product-detail-description {
  padding: 2rem;
}

@media (min-width: 992px) {
  .product-detail-description {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "title title"
      "text  properties";
    column-gap: 3rem;
    row-gap: 1.5rem;
    padding: 2.5rem 3rem;
  }
  .product-detail-description-title {
    grid-area: title;
  }
  .product-detail-description-text {
    grid-area: text;
  }
  .product-detail-properties {
    grid-area: properties;
  }

  /* Properties col-md-10 col-lg-6 vult nu de hele rechter grid-area
     ipv 6/12 van de oorspronkelijke row */
  .product-detail-description .product-detail-properties .col-md-10,
  .product-detail-description .product-detail-properties .col-lg-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Properties-tabel accent: zelfde kleur als topbar (#ede9e2) als
   striped-row achtergrond ipv Bootstrap default lichtgrijs.
   --bs-table-striped-bg is de Bootstrap 5 variabele hiervoor. */
.product-detail-properties-table {
  --bs-table-striped-bg: #ede9e2 !important;
  --bs-table-striped-color: #000000 !important;
  --bs-table-bg: transparent !important;
}
.product-detail-properties-table.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: #ede9e2 !important;
  color: #000000 !important;
}


/* ------------------------------------------------------------
   24. PLP — PRODUCT LISTING PAGE
   Cleaner tiles, in stijl van homepage productslider tiles:
   - Verberg ruis: "Nieuw" badges, hr divider, lange description
   - Verberg "Details" button — image + naam zijn al klikbaar
   - Subtiele card-styling met hover-lift en rounded corners
   - Pricing bold + on-brand kleuren
   Geen JS toegevoegd: Promidata's PLP heeft al re-renders bij
   filteren/sorteren — onze CSS is robuust tegen die rebuilds.
   ------------------------------------------------------------ */

/* Verberg overbodige elementen op de tile */
.cms-listing-row .badge-new {
  display: none !important;
}
.cms-listing-row .product-box hr {
  display: none !important;
}
.cms-listing-row .product-action {
  display: none !important;
}

/* Description: zichtbaar maar subtiel — max 2 regels met ellipsis */
.cms-listing-row .product-description {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.825rem;
  color: #888;
  line-height: 1.4;
  margin: 0.25rem 0 0.5rem 0;
}

/* Card styling — rounded, border, lift on hover */
.cms-listing-row .product-box {
  border: 1px solid #ede9e2 !important;
  border-radius: 12px !important;
  background-color: #ffffff;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  height: 100%;
  position: relative;
}

/* Hele tile klikbaar via ::after op de product-name link.
   Wishlist en variant-thumbs krijgen hogere z-index. */
.cms-listing-row .product-name {
  position: static;
}
.cms-listing-row .product-name::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.cms-listing-row .product-wishlist,
.cms-listing-row .variant-thumbnail,
.cms-listing-row .product-image-link {
  position: relative;
  z-index: 2;
}
.cms-listing-row .product-box:hover {
  box-shadow: 0 6px 20px rgba(45, 69, 40, 0.08);
  transform: translateY(-2px);
}

/* Card body padding ruimer — meer ademruimte boven en onder
   image, plus breathing room rond text. */
.cms-listing-row .product-box .card-body {
  padding: 2rem 1.5rem !important;
  display: flex;
  flex-direction: column;
}

/* Image-wrapper bijna square — aspect-ratio voor compactere PLP tiles. */
.cms-listing-row .product-image-wrapper {
  position: relative;
  margin-bottom: 1rem;
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 10 / 9 !important;
}
.cms-listing-row .product-image-link {
  display: block;
  width: 100%;
  height: 100%;
}
.cms-listing-row .product-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 8px;
}

/* Wishlist button — Promidata default position. Alleen icon-kleur on-brand. */
.cms-listing-row .product-wishlist svg use,
.cms-listing-row .product-wishlist svg path {
  fill: #2d4528 !important;
}

/* Variant thumbnails — alleen img-styling, layout-rules overlaten
   aan Promidata zodat .slider.active scroll-modus niet conflicteert. */
.cms-listing-row .variant-thumbnail-img {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 1px solid #ede9e2 !important;
  object-fit: cover !important;
}

/* Variant slider prev/next pijlen — alleen tonen wanneer .active class
   is gezet (Promidata's JS doet dat als items overflowen). On-brand
   ronde buttons ipv zwarte vierkanten. */
.cms-listing-row .variant-thumbnail.slider:not(.active) .prev,
.cms-listing-row .variant-thumbnail.slider:not(.active) .next {
  display: none !important;
}
.cms-listing-row .variant-thumbnail.slider.active .prev,
.cms-listing-row .variant-thumbnail.slider.active .next {
  background-color: rgba(255, 255, 255, 0.92) !important;
  color: #2d4528 !important;
  border: 1px solid #ede9e2 !important;
  border-radius: 50% !important;
  width: 26px !important;
  height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.cms-listing-row .variant-thumbnail.slider.active .prev:hover,
.cms-listing-row .variant-thumbnail.slider.active .next:hover {
  background-color: #ffffff !important;
  border-color: #ac723e !important;
  color: #ac723e !important;
}

/* Product info — naam in donkergroen, regular weight, on-brand */
.cms-listing-row .product-info {
  margin-top: auto;
}
.cms-listing-row .product-name {
  display: block;
  font-weight: 400 !important;
  color: #2d4528 !important;
  text-decoration: none !important;
  font-size: 1rem;
  line-height: 1.3;
  margin: 0.25rem 0 0.5rem 0;
}
.cms-listing-row .product-name:hover {
  color: #ac723e !important;
}

/* Prijs — bold, donkergroen, "Van" iets dimmer als label */
.cms-listing-row .product-price-info {
  margin-top: 0.25rem;
}
.cms-listing-row .product-price-wrapper {
  font-size: 0.95rem;
  color: #888;
}
.cms-listing-row .product-price {
  font-weight: 700 !important;
  color: #2d4528 !important;
  font-size: 1.15rem;
  margin-left: 0.25rem;
}

/* Filter en sort balk — meer lucht en consistente styling */
.cms-element-product-listing-actions {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #ede9e2;
}
.sorting-label {
  display: inline-block;
  font-size: 0.875rem;
  color: #2d4528;
  margin-right: 0.5rem;
  font-weight: 500;
}
/* Sort dropdown gestyled als pill, consistent met filter-pillen.
   Native arrow weggehaald, vervangen door custom chevron via
   background-image (zelfde stijl als filter-pillen). */
.sorting select.sorting {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 2.5rem 0.5rem 1.25rem !important;
  border: 1px solid #ede9e2 !important;
  border-radius: 999px !important;
  background-color: #ffffff !important;
  color: #2d4528 !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%232d4528' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 6 8 10 12 6'></polyline></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
}
.sorting select.sorting:hover,
.sorting select.sorting:focus {
  border-color: #ac723e !important;
  outline: none;
}

/* Filter buttons (Eco / Kleur / Made in Europe / Merk / Prijs).
   inline-flex + align-items center voor verticaal uitlijnen van
   tekst, count en chevron-icoon. */
.filter-panel .filter-panel-item-toggle.btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  border: 1px solid #ede9e2 !important;
  border-radius: 999px !important;
  background-color: #ffffff !important;
  color: #2d4528 !important;
  padding: 0.5rem 1.25rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

/* Chevron-icoon: span en SVG verticaal centreren, kleur on-brand
   donkergroen. Promidata's eigen CSS zet `top: <waarde>px` op de
   SVG (icon-filter-panel-item-toggle), die overschrijven we naar 0. */
.filter-panel .filter-panel-item-toggle.btn .icon {
  display: inline-flex !important;
  align-items: center !important;
}
.filter-panel .filter-panel-item-toggle.btn .icon svg,
.icon.icon-filter-panel-item-toggle > svg {
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  top: 0 !important;
}
.filter-panel .filter-panel-item-toggle.btn .icon svg use,
.filter-panel .filter-panel-item-toggle.btn .icon svg path {
  fill: #2d4528 !important;
}
.filter-panel .filter-panel-item-toggle.btn:hover,
.filter-panel .filter-panel-item-toggle.btn[aria-expanded="true"] {
  border-color: #ac723e !important;
  background-color: #FBF7F5 !important;
}

/* Filter panel — geen sticky, geen achtergrond, normale flow */
.cms-block-sidebar-filter {
  padding: 0.5rem 0;
}

/* Filter panel active container — chips + reset button als filters actief zijn.
   Promidata vult deze div automatisch. Verberg als 'ie leeg is. */
.filter-panel-active-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid #ede9e2;
}
.filter-panel-active-container:empty {
  display: none;
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

/* Filter chips — pill-style on-brand */
.filter-panel-active-container .filter-active {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.5rem 0.35rem 0.85rem !important;
  background-color: #FBF7F5 !important;
  border: 1px solid #ede9e2 !important;
  border-radius: 999px !important;
  font-size: 0.825rem !important;
  color: #2d4528 !important;
  font-weight: 500;
}
.filter-panel-active-container .filter-active-remove,
.filter-panel-active-container .filter-active button {
  background: none !important;
  border: none !important;
  color: #2d4528 !important;
  cursor: pointer;
  padding: 0 !important;
  font-size: 1.1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.filter-panel-active-container .filter-active-remove:hover {
  color: #ac723e !important;
}

/* "Alles resetten" knop — on-brand bruin ipv default Bootstrap rood */
.filter-panel-active-container .filter-reset-all,
.filter-panel-active-container .btn,
.filter-panel-active-container button:not(.filter-active-remove) {
  background-color: transparent !important;
  border: 1px solid #ac723e !important;
  color: #ac723e !important;
  padding: 0.35rem 0.95rem !important;
  border-radius: 999px !important;
  font-size: 0.825rem !important;
  font-weight: 500 !important;
  cursor: pointer;
}
.filter-panel-active-container .filter-reset-all:hover,
.filter-panel-active-container button:not(.filter-active-remove):hover {
  background-color: #ac723e !important;
  color: #ffffff !important;
}

/* PLP categorie titel — Playfair, donkergroen, ademruimte */
.cms-block-text h2 {
  font-family: 'Playfair Display', serif !important;
  color: #2d4528 !important;
  margin-bottom: 1.5rem !important;
}

/* Sidebar categorie navigatie cleaner */
.category-navigation .category-navigation-link {
  color: #2d4528 !important;
  text-decoration: none;
  padding: 0.4rem 0;
  display: block;
  font-size: 0.95rem;
  transition: color 0.15s ease;
}
.category-navigation .category-navigation-link:hover {
  color: #ac723e !important;
}
.category-navigation .category-navigation-link.is-active {
  color: #ac723e !important;
  font-weight: 600;
}
.category-navigation.level-1 {
  margin-left: 1rem;
  padding-left: 0.75rem;
  border-left: 2px solid #ede9e2;
}

/* ------------------------------------------------------------
   25. CATEGORIE-TILES (image met tekst-overlay, klikbaar)
   ------------------------------------------------------------
   Eén .rg-cat-grid container met daarin losse .rg-cat-tile links.
   De grid vouwt automatisch in rijen van 4 (responsive minder).
   Nieuwe categorie = gewoon een extra <a> in de container plakken;
   de grid herschikt zelf. Landscape tiles, donkere overlay, witte
   titel + subtitel linksboven, lichte zoom on hover. Pure CSS.      */

.rg-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin: 2rem 0;
  padding: 0 40px;
}

@media (max-width: 991px) {
  .rg-cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .rg-cat-grid {
    grid-template-columns: 1fr;
    padding: 0 15px;
  }
}

.rg-cat-tile {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 32 / 9;          /* zeer plat (helft van 16/9 hoogte); hoger = bv. 21/9 of 2/1 */
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none !important;
  background-color: #ede9e2;
}

/* Absoluut laten vullen zodat de natuurlijke beeldhoogte de tile NIET
   hoger maakt — alleen aspect-ratio bepaalt de hoogte. */
.rg-cat-tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.rg-cat-tile:hover .rg-cat-tile__img,
.rg-cat-tile:focus-visible .rg-cat-tile__img {
  transform: scale(1.06);
}

/* Volledige donkere overlay (zelfde look als .image-cards blok) zodat
   de witte tekst overal leesbaar is. */
.rg-cat-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

/* Tekstblok linksboven over de image */
.rg-cat-tile__label {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.25rem;
  padding: 1.5rem;
  pointer-events: none;
}

.rg-cat-tile__title {
  color: #ffffff !important;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
}

.rg-cat-tile__sub {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.3;
}