/*
 * Aanpassingen op het oorspronkelijke thema.
 * Los bestand zodat de originele stylesheets ongemoeid blijven; wordt als
 * laatste ingeladen en overschrijft dus wat eerder is gezet.
 */

/* ------------------------------------------------------------ megamenu
 * Het uitklappaneel is 760 px breed en werd gecentreerd op het menu-item.
 * Omdat "Filters per merk" links in de balk staat, viel het paneel links
 * buiten beeld. Nu lijnt het uit op de linkerrand van de container.
 */
.mega-nav__inner { position: relative; }
.mega-nav__item--has-mega { position: static; }

.mega-dropdown {
  left: 24px;
  right: auto;
  transform: translateY(8px);
  max-width: calc(100vw - 48px);
}
.mega-nav__item--has-mega:hover .mega-dropdown { transform: translateY(0); }

/* de drie kolommen mogen krimpen op smallere schermen */
.mega-dropdown { min-width: 0; width: min(880px, calc(100vw - 48px)); }
.mega-dropdown__inner { grid-template-columns: minmax(0,1.1fr) minmax(0,1fr) auto; }
.mega-dropdown__links { columns: 2; column-gap: 20px; }
.mega-dropdown__links a { break-inside: avoid; display: block; }

@media (max-width: 1100px) {
  .mega-dropdown__inner { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .mega-dropdown__cta { display: none; }
}

/* ------------------------------------------------------------ logo */
.header__logo { gap: 0; }

/* ------------------------------------------------------------ prijzen */
.wtwfs-vanaf { font-size: .82em; color: var(--mid-grey); font-weight: 600; }

/* ------------------------------------------------------------ productpagina
 * De galerijkolom nam zoveel hoogte dat de beschrijving eronder wegviel en er
 * een leeg vlak overbleef. Nu smaller, met een maximum aan de hoogte.
 */
.single-product div.product .woocommerce-product-gallery {
  width: 42%;
  max-width: 460px;
  margin-bottom: 24px;
}
.single-product div.product .woocommerce-product-gallery img { max-height: 460px; width: auto; margin: 0 auto; }
.single-product div.product .summary.entry-summary { width: 54%; }
.single-product div.product .woocommerce-tabs,
.single-product div.product .related.products,
.single-product div.product .up-sells { clear: both; }

@media (max-width: 900px) {
  .single-product div.product .woocommerce-product-gallery,
  .single-product div.product .summary.entry-summary { width: 100%; max-width: none; }
  .single-product div.product .woocommerce-product-gallery img { max-height: 320px; }
}

/* ------------------------------------------------------------ varianttegels
 * De dropdowns blijven bestaan (WooCommerce stuurt erop) maar zijn onzichtbaar;
 * de tegels zijn wat de klant ziet en bedient.
 */
:root {
  --rl-accent: #5a9e3f;
  --rl-accent-licht: #eef6e9;
  --rl-waarschuw: #b4741a;
  --rl-waarschuw-licht: #fbf1e2;
}

table.variations.rl-verborgen { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.summary .price.rl-verborgen { display: none !important; }

.rl-vanaf-prijs { font-size: 1.15rem; color: var(--ink, #1d2321); margin: 2px 0 14px; }
.rl-vanaf-prijs b { font-size: 1.5rem; font-weight: 800; color: var(--rl-accent); }

/* de gekozen combinatie mag juist wél groot */
.woocommerce-variation-price .price { font-size: 1.5rem; font-weight: 800; color: var(--ink, #1d2321); }

.rl-tegels { margin: 4px 0 18px; }
.rl-tegelgroep { margin-bottom: 16px; }
.rl-tegelgroep__label { font-size: .8rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--mid-grey); margin: 0 0 8px; }
.rl-tegelrij { display: flex; flex-wrap: wrap; gap: 8px; }

.rl-tegel { position: relative; display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px; min-width: 116px; padding: 10px 12px 9px; cursor: pointer; text-align: left;
  background: var(--white, #fff); border: 1.5px solid var(--light-grey, #dfe5e2);
  border-radius: 10px; transition: border-color .12s, box-shadow .12s; font: inherit; }
.rl-tegel:hover { border-color: var(--rl-accent); }
.rl-tegel.is-actief { border-color: var(--rl-accent); box-shadow: 0 0 0 3px var(--rl-accent-licht); }
.rl-tegel.is-actief::after { content: "✓"; position: absolute; top: 6px; right: 9px;
  font-size: 12px; font-weight: 800; color: var(--rl-accent); }
.rl-tegel.is-uit { opacity: .4; cursor: not-allowed; }

.rl-tegel__kop { font-weight: 700; font-size: .98rem; color: var(--ink, #1d2321); }
.rl-tegel__sub { font-size: .74rem; color: var(--mid-grey); line-height: 1.35; max-width: 180px; }
.rl-tegel__prijs { font-size: .85rem; color: var(--ink, #1d2321); margin-top: 3px; }
.rl-tegel__prijs b { font-weight: 700; }
.rl-tegel__prijs i { display: block; font-style: normal; font-size: .74rem; color: var(--mid-grey); }
.rl-tegel__badge { margin-top: 4px; font-size: .7rem; font-weight: 700; color: var(--rl-accent);
  background: var(--rl-accent-licht); border-radius: 20px; padding: 2px 8px; }

@media (max-width: 640px) {
  .rl-tegelrij { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .rl-tegel { min-width: 0; }
}

/* ------------------------------------------------------------ leesbaarheid
 * Eén kleur voor alles maakt lezen zwaar; dit geeft de tekst hiërarchie.
 */
.woocommerce-Tabs-panel--description { max-width: 76ch; }
.woocommerce-Tabs-panel--description p,
.woocommerce-Tabs-panel--description li { font-size: 15.5px; line-height: 1.7; color: #3a453f; }
.woocommerce-Tabs-panel--description h3 { font-size: 1.05rem; font-weight: 800; color: var(--ink, #1d2321);
  margin: 26px 0 8px; padding-left: 12px; border-left: 3px solid var(--rl-accent); }
.woocommerce-Tabs-panel--description strong { color: var(--ink, #1d2321); }
.woocommerce-Tabs-panel--description ul { padding-left: 20px; }
.woocommerce-Tabs-panel--description li { margin-bottom: 6px; }

.woocommerce-product-details__short-description p { font-size: 15.5px; line-height: 1.65; color: #3a453f; }

/* specificatietabel met zebrastrepen */
table.rl-specs { width: 100%; max-width: 560px; border-collapse: collapse; font-size: 14.5px; }
table.rl-specs th, table.rl-specs td { text-align: left; padding: 9px 12px; }
table.rl-specs tbody tr:nth-child(odd) { background: #f4f7f5; }
table.rl-specs th { width: 38%; color: var(--mid-grey); font-weight: 600; }

/* waarschuwingskader (JS zet de kop en de bijbehorende alinea's in .rl-waarschuwing) */
.rl-waarschuwing { border-left: 3px solid var(--rl-waarschuw); background: var(--rl-waarschuw-licht);
  border-radius: 0 10px 10px 0; padding: 14px 18px 6px; margin: 22px 0; }
.rl-waarschuwing h3 { border-left: 0 !important; padding-left: 0 !important; margin: 0 0 8px !important;
  color: #7c5012 !important; }
.rl-waarschuwing p { color: #6a4a1c !important; }

/* ------------------------------------------------------------ betaaliconen */
.wtwfs-payment-trust__icons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wtwfs-pay-icon { display: inline-flex; align-items: center; height: 26px; padding: 3px 6px;
  background: var(--white); border: 1px solid var(--light-grey); border-radius: 5px; }
.wtwfs-pay-icon img { height: 20px; width: auto; display: block; max-width: 60px; }

/* Dezelfde keuzehulp op shop-, categorie- en merkpagina's. */
.rl-shop-finder { clear: both; margin: 22px 0 30px; padding: 24px; background: var(--navy, #163344); color: #fff; border-radius: 14px; }
.rl-shop-finder h2 { margin: 0 0 8px; color: #fff; font-size: 1.25rem; }
.rl-shop-finder p { color: #e4edf1; margin: 0 0 16px; }
.rl-shop-finder .filter-finder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 12px; }
.rl-shop-finder label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .875rem; }
.rl-shop-finder .filter-finder__select { display: block; width: 100%; min-width: 0; font-size: 16px; }
.rl-shop-finder #ff-zoek { min-height: 49px; }
.rl-shop-finder .rl-finder-help { margin: 16px 0 0; font-size: .9rem; }
.rl-shop-finder .rl-finder-help a { color: #fff; text-decoration: underline; }
.merk-card { flex-direction: column; gap: 12px; }
.merk-card__name { text-align: center; font-size: .9rem; }
.woo-wrapper .page-title { padding-inline: 0; }
.rl-mobile-product-search { display: none; }
.rl-besteloverzicht { padding: 12px 14px; background: #eef6f6; border-left: 3px solid var(--teal, #006d77); border-radius: 0 8px 8px 0; font-weight: 600; line-height: 1.5; }
.rl-quantity-label { display: block; margin: 0 0 6px; font-size: .85rem; font-weight: 600; }
.rl-tegel:focus-visible { outline: 3px solid var(--teal, #006d77); outline-offset: 3px; }
@media (max-width: 768px) {
  .rl-mobile-product-search { display: flex; grid-column: 1 / -1; grid-row: 2; gap: 8px; margin: 0; }
  .rl-mobile-product-search input[type="search"] { min-width: 0; flex: 1; padding: 11px 12px; border: 1px solid #cad6dc; border-radius: 8px; font: inherit; font-size: 16px; background: #fff; }
  .rl-mobile-product-search button { padding: 10px 12px; border: 0; border-radius: 8px; background: var(--teal, #006d77); color: #fff; font: inherit; font-weight: 600; }
  .mega-nav { max-height: calc(100dvh - 180px); }
  #filter-finder { scroll-margin-top: 180px; }
}
@media (max-width: 960px) { .rl-shop-finder .filter-finder { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) {
  .rl-shop-finder { padding: 20px 16px; }
  .rl-shop-finder .filter-finder { grid-template-columns: minmax(0, 1fr); }
}

/* Menu: houd kaarten binnen hun kolom, ook bij lange merknamen. */
.mega-dropdown > .container { width:100%; max-width:none; padding:0; }
.mega-dropdown__featured,.mega-dropdown__all,.mega-dropdown__cta { min-width:0; }
.mega-dropdown .merk-grid-mini { grid-template-columns:repeat(2,minmax(0,1fr)); }
.mega-dropdown .merk-card-mini { min-width:0; gap:8px; padding:12px; }
.mega-dropdown .merk-card-mini__name { min-width:0; overflow-wrap:anywhere; }
.mega-dropdown .merk-card-mini svg { flex-shrink:0; }
.mega-dropdown__links { columns:auto; }
@media(min-width:769px){
 .mega-dropdown { width:min(1100px,calc(100vw - 48px)); }
 .mega-dropdown__inner { grid-template-columns:minmax(0,1.35fr) minmax(0,.7fr) minmax(0,1fr); }
 .mega-dropdown__featured,.mega-dropdown__all,.mega-dropdown__cta { padding:24px; }
}
@media(min-width:769px) and (max-width:1100px){
 .mega-dropdown__inner { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); }
}

/* Merk- en categorie-intros staan op een witte ondergrond. */
.woocommerce .term-description,.woocommerce .term-description p,.woocommerce .term-description strong { color:var(--charcoal,#25394a); }
.woocommerce .term-description { max-width:850px; line-height:1.7; margin:16px 0 28px; }
.woocommerce .term-description a { color:var(--teal,#00747c); text-decoration:underline; }

/* Modelkeuze: duidelijke aanraakvlakken en leesruimte op merkpagina's. */
@media(max-width:768px) {
  .single-product div.product .woocommerce-product-gallery__image img { height:220px !important; max-height:220px !important; width:100% !important; object-fit:contain; }
  .single-product div.product .woocommerce-product-gallery .flex-viewport { max-height:220px; }
  .single-product div.product .flex-control-thumbs img { max-height:48px; object-fit:contain; }
  body.rl-sticky-bestellen-actief { padding-bottom:96px; }
  .wtwfs-sticky-cart__btn:disabled { opacity:.65; cursor:default; }
  .wtwfs-sticky-cart { padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px)); }
}
.term-description .rl-modelkeuze { margin:12px 0; padding:14px 16px; border:1px solid #cadbdf; border-radius:10px; background:#f4f9f9; }
.term-description .rl-modelkeuze summary { cursor:pointer; line-height:1.5; }
.term-description .rl-modelkeuze summary:focus-visible { outline:3px solid var(--teal,#00747c); outline-offset:5px; }
.term-description .rl-modelkeuze[open] summary { margin-bottom:12px; }
.term-description .rl-modelkeuze h3 { font-size:1.05rem; line-height:1.5; margin:16px 0 8px; }
.term-description .rl-modelkeuze p:last-child { margin-bottom:0; }
@media(max-width:768px) {
  .tax-product_brand .woo-wrapper.container { padding-inline:16px; }
  .term-description .rl-modelkeuze { padding:14px; }
}

/* Ook gewone categorie- en shoppagina's houden op mobiel leesbare zijmarges. */
@media (max-width: 767px) {
  body.tax-product_cat main.woo-wrapper,
  body.post-type-archive-product main.woo-wrapper {
    box-sizing: border-box;
    padding-left: 16px;
    padding-right: 16px;
  }
  body.tax-product_cat main.woo-wrapper > .page-title,
  body.post-type-archive-product main.woo-wrapper > .page-title {
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}

/* Meerregelige modellinks krijgen een aaneengesloten aanraakvlak. */
.term-description .rl-modelkeuze li a {
  display: block;
  box-sizing: border-box;
  min-height: 44px;
  padding: 8px 0;
}
.term-description .rl-modelkeuze li a:focus-visible {
  outline: 3px solid var(--teal, #00747c);
  outline-offset: 2px;
}

@media (min-width: 768px) {
  body.tax-product_cat main.woo-wrapper.container,
  body.tax-product_brand main.woo-wrapper.container,
  body.post-type-archive-product main.woo-wrapper.container {
    box-sizing: border-box;
    padding-inline: 24px;
  }
}

/* Tabletmenu: twee uitgelijnde rijen, zonder afgebroken menuteksten. */
@media (min-width: 769px) and (max-width: 1100px) {
  .mega-nav__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .mega-nav__item { min-width: 0; }
  .mega-nav__link { justify-content: center; min-height: 52px; height: 100%; box-sizing: border-box; padding: 12px 10px; white-space: nowrap; }
  .header__inner { grid-template-columns: auto minmax(0, 1fr) auto; }
  .header__search { min-width: 0; }
  .header__search .dgwt-wcas-search-wrapp { min-width: 0; max-width: 100%; }
}