/* ==========================================================================
   ABCspecialist — Productpagina
   Bestand: assets/abc-product.css
   Hoort bij: pages/product.rain en snippets/abc-statiegeld.rain

   Typografische schaal
     desktop   titel 26 · sectiekop 26 · subkop 18 · body 17 · tabel 16 · fijn 14
     mobiel    titel 20 · sectiekop 22 · subkop 17 · body 16 · tabel 15 · fijn 13
   Formuliervelden blijven op mobiel 16px: onder die maat zoomt iOS in bij focus.
   ========================================================================== */

.product-content,
.product-menu,
.abc-flow {
  --abc-teal: #128470;
  --abc-teal-mid: #18A98F;
  --abc-teal-bright: #1DD4B4;
  --abc-teal-hover: #107B69;
  --abc-teal-active: #0F705F;
  --abc-bg1: #FAFFFC;
  --abc-bg2: #EAF7F2;
  --abc-bg3: #DAE6E1;
  --abc-bg4: #C7D2CE;
  --abc-dark2: #083B32;
  --abc-dark3: #05251F;
  --abc-txt1: #0A493E;
  --abc-txt2: #062E27;
  --abc-txt3: #041A16;
  --abc-muted: #6B7F7A;

  --border: #C7D2CE;
  --radius: 6px;
  --bodyText: #0A493E;
  --primaryColor: #128470;
  --btn1: #128470;
  --btn1Text: #FFFFFF;
  --green: #128470;
  --uspicon: #128470;

  font-family: 'Lato', Arial, Helvetica, sans-serif;
  color: var(--abc-txt1);
}

/* ==========================================================================
   1. Kop en galerij
   ========================================================================== */
.product-content.container {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  border-bottom: none;
  padding-bottom: 0;
}

.art_bread_wrap { font-size: 14px; color: var(--abc-muted); }
.art_bread_wrap a { color: var(--abc-muted); text-decoration: none; }
.art_bread_wrap a:hover { color: var(--abc-teal); }

.product-content .header .title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--abc-txt3);
  text-transform: uppercase;
  margin: 0 0 6px;
}
.single-meta { font-size: 15px; color: var(--abc-txt1); }
.single-meta a { color: var(--abc-teal); }
.single-meta .item-rating .star.on,
.single-meta .item-rating .star.semi { color: var(--abc-teal-mid); }
.single-meta .item-rating .star.off { color: var(--abc-bg4); }

.images.small.p-carousel .main-images {
  border: 1px solid var(--abc-bg4);
  border-radius: var(--radius);
  background: #FFFFFF;
}
.product-content .images img { padding: 12px; }

#carouselMain { position: relative; }
#carouselMain .swiper-prev,
#carouselMain .swiper-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  width: 48px;
  height: 60px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--abc-bg4);
  border-radius: var(--radius);
  color: var(--abc-teal);
  font-size: 20px;
  z-index: 3;
}
#carouselMain .swiper-prev { left: 12px; right: auto; }
#carouselMain .swiper-next { right: 12px; left: auto; }

#carouselThumb .thumb-images .swiper-slide {
  border: 1px solid var(--abc-bg4);
  border-radius: var(--radius);
  background: #FFFFFF;
}
#carouselThumb .thumb-images .swiper-slide:hover,
#carouselThumb .swiper-slide-thumb-active { border-color: var(--abc-teal); }

/* ==========================================================================
   2. Buy box
   ========================================================================== */
@media (min-width: 992px) {
  .product-content .images { max-width: 48%; width: 48%; }
  .product-content .meta.item { width: 49%; }
}

.product-content .meta.item {
  border: 1px solid var(--abc-bg4);
  border-radius: 8px;
  box-shadow: none;
  background: #FFFFFF;
  padding: 32px;
}

/* De volgorde verschilt tussen desktop en mobiel; daarom flex + order.
   Er is dus maar één DOM-volgorde nodig. */
.abc-buyform { display: flex; flex-direction: column; }
.abc-buyform .abc-pricepanel { order: 1; }
.abc-buyform .product-add { order: 2; }
.abc-buyform .abc-levering { order: 3; }
.abc-buyform .onpage_discount { order: 4; }
.abc-buyform .adding { order: 5; }

/* ---- prijspaneel ---- */
.abc-pricepanel { margin: 0 0 20px; }
.abc-pricepanel-top {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}
/* .pricing blijft bestaan omdat product.js daarin de staffelprijs herschrijft */
.abc-pricepanel .pricing {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  border-right: none;
  padding: 0;
  margin: 0;
}
.abc-pricepanel .abc-oud {
  flex: 1 1 100%;
  margin: 0;
  font-size: 15px;
  color: var(--abc-muted);
  text-decoration: line-through;
}
.abc-pricepanel .item-price,
.abc-pricepanel .reg_p {
  font-size: 38px;
  font-weight: 700;
  color: var(--abc-txt3);
  line-height: 1.05;
}
.abc-pricepanel .abc-btw { font-size: 14px; color: var(--abc-muted); }
.abc-pricepanel .abc-voorraad {
  font-size: 16px;
  font-weight: 700;
  color: var(--abc-teal);
  white-space: nowrap;
}
.abc-pricepanel .abc-voorraad.is-out { color: var(--abc-muted); }
.abc-pricepanel .abc-voorraad.is-low { color: var(--abc-teal-mid); }

/* Dit is één doorlopende zin, dus geen flex — anders wordt elk woordgroepje
   een eigen kolom zodra de ruimte krap wordt. De theme zet
   .meta.item .co_timer op display:none met margin-top:15px; vandaar de
   zwaardere selectors hieronder. */
.meta.item .abc-levering {
  display: block;
  margin: 12px 0;
  /* 17px past net niet in de kolom: de tijdchip valt dan naar een tweede
     regel en maakt de <p> hoger, waardoor het gat naar de knop groeit. */
  font-size: 16px;
  color: var(--abc-txt2);
  line-height: 1.5;
}
.abc-levering strong { color: var(--abc-txt3); }
.abc-truck { color: var(--abc-teal); vertical-align: -2px; margin-right: 6px; }
/* !important is hier nodig: ergens in theme-department-v3.css staat een regel
   die #clockdiv op display:flex zet en die met specificiteit niet te verslaan
   is. Zonder dit worden "Order vandaag verwerken?", "U heeft nog" en de tijd
   elk een eigen kolom zodra de ruimte krap wordt. */
.meta.item .abc-levering #clockdiv {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: inherit;
  font-weight: 400;
}
.meta.item .abc-levering #clockdiv b { display: inline !important; font-weight: 400; }
.meta.item .abc-levering #clockdiv .timer {
  display: inline-flex !important;
  background: var(--abc-bg2);
  border-radius: var(--radius);
  padding: 2px 8px;
  margin-left: 4px;
  font-weight: 700;
  font-size: inherit;
  color: var(--abc-txt3);
  white-space: nowrap;
}
/* De leveringsregel moet even veel lucht boven als onder hebben. Daarvoor
   moeten drie theme-marges weg: .product-add heeft 30px onder, de laatste
   custom-option 18px, en .adding krijgt op desktop margin:30px 0 0. */
.meta.item .product-add { margin-bottom: 0; }
.meta.item .product-add .product-configure-custom-option:last-child { margin-bottom: 0; }
.meta.item .adding { margin-top: 0; }

/* ---- keuzevelden ---- */
.custom-select label,
.addlabel,
.product-configure-custom-option label {
  font-size: 17px;
  font-weight: 700;
  color: var(--abc-txt3);
  margin: 0 0 8px;
  display: block;
}
.product-configure-custom-option { margin-bottom: 18px; }
.product-configure-custom-option label em { color: var(--abc-teal); }
.product-configure-custom-option-item label { font-weight: 400; font-size: 17px; }

.meta.item .custom-select select,
.meta.item .product-configure-custom-option select,
.meta.item .product-configure-custom-option input[type="text"],
.meta.item .product-configure-custom-option textarea {
  width: 100%;
  font-family: inherit;
  font-size: 17px;
  color: var(--abc-txt2);
  background-color: #FAFAFA;
  border: 1px solid var(--abc-bg4);
  border-radius: var(--radius);
  padding: 15px 14px;
  height: auto;
}
.product-configure-custom-option input[type="checkbox"],
.product-configure-custom-option input[type="radio"] { accent-color: var(--abc-teal); }

.open-vars {
  background: #FAFAFA;
  border: 1px solid var(--abc-bg4);
  border-radius: var(--radius);
}
.open-vars:hover { box-shadow: none; border-color: var(--abc-teal); }

/* ---- toevoegen-rij: alle drie exact even hoog ---- */
.meta.item .adding { margin: 0; gap: 10px; align-items: stretch; }
.meta.item .adding > * { box-sizing: border-box; }
.meta.item .quantity-input { margin-right: 0; display: flex; }
.meta.item .quantity-input .quantity-btn { display: none; }
.meta.item .input-wrap.is_pp {
  border: 1px solid var(--abc-bg4);
  border-radius: var(--radius);
  background: #FAFAFA;
  height: 60px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.meta.item .quantity-input .input-wrap input {
  width: 72px;
  height: 100%;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  color: var(--abc-txt2);
  background: transparent;
  border: none;
}
.meta.item .adding .btn.btn1 {
  height: 60px;
  min-height: 60px;
  background: var(--abc-teal);
  color: #FFFFFF;
  border-radius: var(--radius);
  font-size: 17px;
  font-weight: 700;
  box-sizing: border-box;
  transition: background 0.15s ease;
}
.meta.item .adding .btn.btn1:hover { background: var(--abc-teal-hover); }
.meta.item .adding .btn.btn1:active { background: var(--abc-teal-active); }
.meta.item .adding .btn.btn1 > span { font-size: 17px; }
.meta.item .adding .btn.btn1.disabled { background: var(--abc-bg3); color: var(--abc-muted); }
.wl-btn.btn-hover {
  height: 60px;
  width: 60px;
  box-sizing: border-box;
  border: 1px solid var(--abc-bg4);
  border-radius: var(--radius);
  color: var(--abc-teal);
  background: var(--abc-bg1);
  margin-left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wl-btn.btn-hover:hover { background: var(--abc-bg2); }
.errors { border-radius: var(--radius); }

.meta.item .product-usps { margin-top: 20px; }
.meta.item .product-usps > * { font-size: 17px; color: var(--abc-txt1); margin-bottom: 10px; align-items: center; }
.meta.item .product-usps i { color: var(--abc-teal); margin-right: 6px; }

.compare.mobile.checkbox label { color: var(--abc-txt2); }
.compare.mobile.checkbox [type="checkbox"]:checked + label::before { background-color: var(--abc-teal); }

/* ==========================================================================
   3. Sectienavigatie
   ========================================================================== */
.product-menu {
  border-top: 1px solid var(--abc-bg4);
  border-bottom: 1px solid var(--abc-bg4);
  background: #FFFFFF;
}
.product-menu .container { max-width: 1400px; }
.product-menu ul.list-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.product-menu li { flex: 0 0 auto; }
.product-menu a {
  font-size: 16px;
  font-weight: 700;
  color: var(--abc-teal);
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  padding: 14px 16px;
}
.product-menu a:hover,
.product-menu a.active { background: var(--abc-bg2); border-bottom-color: var(--abc-teal); }
.product-menu a.active::after { border-top-color: var(--abc-teal); }
.product-menu.sticky { background: #FFFFFF; box-shadow: 0 2px 12px rgba(4, 26, 22, 0.08); }
/* .secondary_add is onzichtbaar tot de balk sticky wordt, maar reserveerde wel
   zijn breedte — daardoor brak de laatste tab af naar een tweede regel. */
.product-menu .secondary_add { display: none; }
.product-menu.sticky .secondary_add { display: flex; border-left: 1px solid var(--abc-bg4); }
.product-menu .secondary_add img { border: 1px solid var(--abc-bg4); border-radius: var(--radius); }
.product-menu .secondary_add .sec-title { color: var(--abc-txt3); }
.product-menu .secondary_add .item-price { color: var(--abc-txt3); font-weight: 700; }
.product-menu .secondary_add .btn.btn1 {
  background: var(--abc-teal);
  color: #FFFFFF;
  border-radius: var(--radius);
  font-weight: 700;
}

/* ==========================================================================
   4. Secties
   ========================================================================== */
.abc-flow { display: block; max-width: 1400px; margin: 0 auto; }
.abc-flow > .abc-blok {
  display: block;
  width: 100%;
  background: #FFFFFF;
  border-radius: var(--radius);
  padding: 32px 28px;
  margin: 0 0 4px;
}
.abc-flow > .abc-blok:last-child { margin-bottom: 0; }
/* voorwaarden is fijndruk: iets meer lucht boven, minder onder */
.abc-flow > .abc-terms { padding: 28px; }
.abc-flow > .abc-terms .abc-kop { margin-bottom: 12px; }
.abc-flow > .abc-terms p { margin: 0; max-width: 1100px; }

/* De theme gebruikt zij-padding en negatieve marges op binnenblokken; hier
   gelijkgetrokken zodat elke sectie op dezelfde x begint. */
.abc-flow .product-block,
.abc-flow .menu-toggle,
.abc-flow .menu-toggle > .toggle,
.abc-flow .toggle-content,
.abc-flow .inner,
.abc-flow .product-details-list,
.abc-flow #service,
.abc-flow #reviews .header {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
.abc-flow .product-block { background: transparent; padding: 0; }
.abc-flow .menu-toggle .toggle { display: flex; }
.abc-flow #service { background: transparent; border-bottom: 0; }

/* ---- sectiekoppen met ruitmarkering ---- */
.abc-flow .abc-kop,
.abc-flow .menu-toggle .title,
.abc-flow .home-products .title,
.abc-flow .header-title .title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--abc-txt3);
  text-transform: none;
  font-family: 'Lato', Arial, Helvetica, sans-serif;
}
/* De pb-*.rain snippets renderen hun kop zonder ruit. Voor die koppen zetten
   we de ruit met ::before. Eigen blokken hebben een echte <span class="abc-dia">
   en staan hier dus bewust niet bij, anders krijg je er twee. */
.abc-flow .menu-toggle .title::before,
.abc-flow .home-products .title::before,
.abc-flow .header-title .title::before,
.abc-flow #service .title::before {
  content: "\25C6";
  color: var(--abc-teal-mid);
  font-size: 0.75em;
  line-height: 1;
  flex: 0 0 auto;
}
/* product.css heeft #description .title { font-size: 1.2em } — id + class, dus
   zwaarder dan de regel hierboven. Daarom hier met dezelfde id-specificiteit. */
.abc-flow #description .title,
.abc-flow #specifications .title,
.abc-flow #reviews .title,
.abc-flow #recent .title,
.abc-flow #related .title,
.abc-flow #service .title { font-size: 26px; }

.abc-flow .abc-dia {
  color: var(--abc-teal-mid);
  font-size: 0.75em;
  line-height: 1;
  flex: 0 0 auto;
}
.abc-statiegeld .abc-dia { color: var(--abc-teal-bright); }
.abc-flow .menu-toggle .title > i { margin-left: auto; color: var(--abc-teal); }

/* ---- typografie ---- */
.abc-flow h3 { font-size: 18px; font-weight: 700; line-height: 1.3; }
.abc-flow p,
.abc-flow li,
.abc-flow .desc-wrap,
.abc-flow .abc-pc-col li,
.abc-flow .abc-lead,
.abc-flow .abc-step-t,
.abc-flow .abc-about p,
.abc-flow #reviews .content,
.abc-flow .has_specs span { font-size: 17px; line-height: 1.7; }

.abc-flow .spec-label,
.abc-flow .spec-value,
.abc-flow td,
.abc-flow th { font-size: 16px; }

.abc-flow .abc-terms p,
.abc-flow #reviews .review-date,
.abc-flow #reviews .range-amt,
.abc-flow #reviews .range-cnt,
.abc-flow .de-legal { font-size: 14px; }

/* koppen uit product.content mogen niet met de sectiekop concurreren */
.abc-flow .desc-wrap h1,
.abc-flow .desc-wrap h2 { font-size: 20px; font-weight: 700; color: var(--abc-txt3); margin: 22px 0 8px; text-transform: none; }
.abc-flow .desc-wrap h3,
.abc-flow .desc-wrap h4 { font-size: 18px; font-weight: 700; color: var(--abc-txt3); margin: 18px 0 6px; text-transform: none; }
.abc-flow .desc-wrap a { color: var(--abc-teal); }
.abc-flow .desc-wrap img { max-width: 100%; height: auto; border-radius: var(--radius); }

/* ---- omschrijving + USP-kaart ---- */
.abc-desc-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.abc-desc-main { min-width: 0; }
.abc-flow .has_specs {
  background: var(--abc-bg2);
  border: none;
  border-top: 3px solid var(--abc-teal-mid);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 0;
}
.abc-flow .has_specs .abc-usp-kop {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--abc-txt3);
  margin-bottom: 10px;
}
.abc-flow .has_specs .usp_bullit { display: none; }
.abc-flow .has_specs span { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; }
.abc-flow .has_specs span::before {
  content: "\25C6";
  color: var(--abc-teal-bright);
  font-size: 0.75em;
  flex: 0 0 auto;
}
.abc-flow .has_specs .abc-usp-kop::before,
.abc-flow .has_specs .goSmoothly::before { content: none; }
.abc-flow .has_specs .goSmoothly { color: var(--abc-teal); display: block; margin-top: 4px; }

/* ---- specificaties ---- */
.abc-flow #specifications .product-details-list {
  border: 1px solid var(--abc-bg4);
  border-radius: var(--radius);
  overflow: hidden;
}
.abc-flow #specifications.specs li {
  padding: 10px 14px;
  margin: 0;
  border-bottom: 1px solid var(--abc-bg4);
}
.abc-flow #specifications.specs li:last-child { border-bottom: none; }
.abc-flow #specifications.specs li:nth-child(2n) { background: var(--abc-bg1); }
.abc-flow #specifications .spec-label { color: var(--abc-txt1); font-weight: 700; flex: 0 0 36%; }
.abc-flow #specifications .spec-value a { color: var(--abc-teal); }
.abc-flow #specifications .icon-check.color-green { color: var(--abc-teal); }

/* ---- voor- en nadelen ---- */
.abc-flow .proscons-wrap .toggle-content { background: none; padding: 0; }
.abc-pc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.abc-pc-col { border-radius: var(--radius); padding: 16px; }
.abc-pc-pro { background: var(--abc-bg2); }
.abc-pc-con { background: var(--abc-bg3); }
.abc-pc-col h3 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.abc-pc-pro h3 { color: var(--abc-teal); }
.abc-pc-con h3 { color: var(--abc-txt2); }
.abc-pc-col ul { list-style: none; margin: 0; padding: 0; }
.abc-pc-col li { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; color: var(--abc-txt1); }
.abc-pc-col li:last-child { margin-bottom: 0; }
.abc-pc-teken { font-weight: 700; flex: 0 0 auto; }
.abc-pc-pro .abc-pc-teken { color: var(--abc-teal); }
.abc-pc-con .abc-pc-teken { color: var(--abc-txt2); }

/* ---- statiegeld ---- */
.abc-flow > .abc-statiegeld { background: var(--abc-dark2); }
.abc-statiegeld .abc-kop { color: var(--abc-bg1); }
.abc-statiegeld .abc-lead { color: var(--abc-bg1); margin: 0 0 18px; max-width: 700px; }
.abc-statiegeld .abc-lead a { color: var(--abc-teal-bright); }
.abc-statiegeld ol { list-style: none; margin: 0; padding: 0; }
.abc-statiegeld li { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px; }
.abc-statiegeld li:last-child { margin-bottom: 0; }
.abc-statiegeld .abc-step-n {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--abc-teal);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.abc-statiegeld .abc-step-t { color: var(--abc-bg1); padding-top: 6px; }

/* ---- reviews ---- */
.abc-flow #reviews .header { background: var(--abc-bg2); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.abc-flow #reviews .reviews-inner.scroll { max-height: none; overflow: visible; }
.abc-flow #reviews .star { background: none; color: var(--abc-teal-mid); width: auto; height: auto; font-size: 18px; margin-right: 2px; }
.abc-flow #reviews .star.off { color: var(--abc-bg4); }
.abc-flow #reviews .progress { background-color: var(--abc-bg3); }
.abc-flow #reviews .progress .chart { background-color: var(--abc-teal); }
.abc-flow #reviews .reviewer { font-size: 17px; font-weight: 700; color: var(--abc-txt3); }
.abc-flow #reviews .review-date { color: var(--abc-muted); }
.abc-flow #reviews .review-container { border-bottom: 1px solid var(--abc-bg4); padding-bottom: 18px; margin-bottom: 18px; }
.abc-flow #reviews .rev-point .icon-plus { background: var(--abc-teal); }
.abc-flow #reviews .rev-point .icon-minus { background: var(--abc-bg4); color: var(--abc-txt2); }

.abc-flow .btn.btn2,
.abc-flow .btn.btn3 {
  background: #FFFFFF;
  color: var(--abc-teal);
  border: 1px solid var(--abc-teal);
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 700;
}
.abc-flow .btn.btn2:hover,
.abc-flow .btn.btn3:hover { background: var(--abc-bg2); }

/* ---- over ABCspecialist ---- */
.abc-about { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
.abc-about img { max-width: 100%; height: auto; display: block; border-radius: var(--radius); }
.abc-about p { margin: 0 0 14px; }
.abc-about .abc-cta { color: var(--abc-txt2); font-weight: 700; }
.abc-about .abc-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.abc-about .abc-b1,
.abc-about .abc-b2 {
  font-size: 17px;
  font-weight: 700;
  border-radius: var(--radius);
  padding: 12px 22px;
  text-decoration: none;
  display: inline-block;
}
.abc-about .abc-b1 { background: var(--abc-teal); color: #FFFFFF; }
.abc-about .abc-b1:hover { background: var(--abc-teal-hover); color: #FFFFFF; }
.abc-about .abc-b2 { background: #FFFFFF; color: var(--abc-teal); border: 1px solid var(--abc-teal); padding: 11px 22px; }
.abc-about .abc-b2:hover { background: var(--abc-bg2); }

/* ---- productkaarten ---- */
.abc-flow .item,
.abc-flow .related .item {
  background: var(--abc-bg1);
  border: 1px solid var(--abc-bg4);
  border-radius: var(--radius);
}
.abc-flow .item:hover { border-color: var(--abc-teal); }
.abc-flow .item-name { font-size: 16px; font-weight: 700; color: var(--abc-teal); }
.abc-flow .item-price { font-size: 18px; font-weight: 700; color: var(--abc-txt3); }
.abc-flow .item-price .vat { font-size: 13px; font-weight: 400; color: var(--abc-muted); }
.abc-flow .related .home-products:first-of-type { background: transparent; }

/* ==========================================================================
   5. Mobiel
   ========================================================================== */
@media (max-width: 991.98px) {
  .product-content.container { max-width: none; }
  .product-content .meta.item { border: none; padding: 0; }
  .product-content .header .title { font-size: 20px; line-height: 1.35; }
  .single-meta, .single-meta a { font-size: 14px; }
  .art_bread_wrap { font-size: 13px; }

  /* prijspaneel onder de keuzevelden */
  /* op mobiel staan paneel en leveringsregel onder de keuzevelden en vormen
     samen één groen blok */
  .abc-buyform .product-add { order: 1; }
  .abc-buyform .abc-pricepanel { order: 2; }
  .abc-buyform .abc-levering { order: 3; }
  .abc-buyform .adding { order: 5; }
  .abc-pricepanel {
    background: var(--abc-bg2);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 16px 16px 12px;
    margin: 4px 0 0;
  }
  .abc-buyform .abc-levering {
    background: var(--abc-bg2);
    border-radius: 0 0 var(--radius) var(--radius);
    border-top: 1px solid var(--abc-bg4);
    padding: 12px 16px 16px;
    margin: 0 0 14px;
  }
  .abc-pricepanel .abc-oud { font-size: 14px; }
  .abc-pricepanel .item-price,
  .abc-pricepanel .reg_p { font-size: 24px; }
  .abc-pricepanel .abc-voorraad { font-size: 15px; }
  /* Op mobiel geen flex: de losse woorden werden anders elk een eigen kolom.
     Hier gewoon doorlopende tekst die netjes afbreekt. */
  .meta.item .abc-buyform .abc-levering {
    font-size: 15px;
    /* geen marge boven: paneel en leveringsregel vormen samen één groen blok */
    margin: 0 0 14px;
    padding: 12px 16px 16px;
    background: var(--abc-bg2);
    border-top: 1px solid var(--abc-bg4);
    border-radius: 0 0 var(--radius) var(--radius);
  }
  .meta.item .abc-levering #clockdiv .timer { background: #FFFFFF; }

  .addlabel,
  .product-configure-custom-option label { font-size: 17px; }
  .product-configure-custom-option-item label { font-size: 16px; }
  .meta.item .custom-select select,
  .meta.item .product-configure-custom-option select,
  .meta.item .quantity-input .input-wrap input { font-size: 16px; }
  .meta.item .custom-select select,
  .meta.item .product-configure-custom-option select { padding: 13px 10px; }
  .meta.item .quantity-input .input-wrap input { width: 60px; }
  .meta.item .adding .btn.btn1,
  .meta.item .adding .btn.btn1 > span { font-size: 16px; }
  .meta.item .product-usps > * { font-size: 16px; }

  #carouselMain .swiper-prev,
  #carouselMain .swiper-next { width: 40px; height: 52px; }

  /* tabbalk als scrollbare pillen */
  .product-menu { display: block; }
  .product-menu .container { display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px; -webkit-overflow-scrolling: touch; }
  .product-menu .container::-webkit-scrollbar { display: none; }
  .product-menu ul { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; flex: 0 0 auto; }
  .product-menu li { flex: 0 0 auto; }
  .product-menu a {
    display: block;
    background: var(--abc-bg2);
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 15px;
    white-space: nowrap;
    border: none;
  }
  .product-menu .secondary_add { display: none; }

  /* secties */
  .abc-flow > .abc-blok { padding: 24px 16px; border-radius: 0; }
  .abc-desc-row, .abc-pc-grid, .abc-about { grid-template-columns: minmax(0, 1fr); }
  .abc-about .abc-img { order: -1; }

  .abc-flow .abc-kop,
  .abc-flow .menu-toggle .title,
  .abc-flow #description .title,
  .abc-flow #specifications .title,
  .abc-flow #reviews .title,
  .abc-flow #recent .title,
  .abc-flow #related .title,
  .abc-flow #service .title { font-size: 22px; align-items: flex-start; }
  /* De pb-*.rain snippets renderen hun kop zonder ruit. Voor die koppen zetten
   we de ruit met ::before. Eigen blokken hebben een echte <span class="abc-dia">
   en staan hier dus bewust niet bij, anders krijg je er twee. */
.abc-flow .menu-toggle .title::before,
.abc-flow .home-products .title::before,
.abc-flow .header-title .title::before,
.abc-flow #service .title::before {
  content: "\25C6";
  color: var(--abc-teal-mid);
  font-size: 0.75em;
  line-height: 1;
  flex: 0 0 auto;
}
.abc-flow .abc-dia { margin-top: 0.3em; }
  .abc-flow h3, .abc-pc-col h3, .abc-flow .has_specs .abc-usp-kop { font-size: 17px; }

  .abc-flow p,
  .abc-flow li,
  .abc-flow .desc-wrap,
  .abc-flow .abc-pc-col li,
  .abc-flow .abc-lead,
  .abc-flow .abc-step-t,
  .abc-flow .abc-about p,
  .abc-flow #reviews .content,
  .abc-flow .has_specs span { font-size: 16px; line-height: 1.65; }

  .abc-flow .spec-label,
  .abc-flow .spec-value,
  .abc-flow td,
  .abc-flow th,
  .abc-flow .item-name,
  .abc-flow #reviews .reviewer,
  .abc-flow .abc-terms p,
  .abc-flow .btn.btn2,
  .abc-flow .abc-about .abc-b1,
  .abc-flow .abc-about .abc-b2 { font-size: 15px; }

  .abc-flow #reviews .review-date,
  .abc-flow #reviews .range-amt,
  .abc-flow #reviews .range-cnt,
  .abc-flow .item-price .vat,
  .abc-flow .de-legal { font-size: 13px; }

  .abc-flow .item-price { font-size: 17px; }
  .abc-flow .desc-wrap h1, .abc-flow .desc-wrap h2 { font-size: 18px; }
  .abc-flow .desc-wrap h3, .abc-flow .desc-wrap h4 { font-size: 17px; }
  .abc-flow .item-list-desc { display: none; }
  .abc-statiegeld .abc-step-n { width: 32px; height: 32px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .product-content *, .product-menu *, .abc-flow * { transition: none !important; }
}