/* =====================================================================
   shop-about.css, alleen wat /nl/over-ons extra nodig heeft.

   Laadt NA shop.css. Elke knop, kaart, pil en kop komt uit shop.css;
   hier staat uitsluitend wat alleen op deze pagina voorkomt. Geen eigen
   kleuren en geen losse px-maten: alles via de tokens uit blok 1 van
   shop.css (--fs-*, --lh-*, --sp-*, --r-*, --sec-gap, --kop-gap).

   Volgorde:
     0  Container en ritme
     1  Kop met beeld
     2  Cijferstrook
     3  Lopende tekst en lijsten
     4  Sectie met beeld ernaast
     5  Verzendtarieven
     6  Twee kolommen: hier of op een marktplaats
     7  Beoordelingen
     8  Veelgestelde vragen
     9  Contactkaart en vrijwaring
    10  Responsief
    11  prefers-reduced-motion
   ===================================================================== */

/* ---------------------------------------------------------------
   0  Container en ritme
   ---------------------------------------------------------------
   Een linkerrand voor de hele pagina, gelijk aan die van de header en
   de footer (.bsw-container). Elke sectie draagt de helft van de
   sectie-afstand, net als .bsw-section in shop.css, zodat er tussen
   twee secties precies --sec-gap zit zonder losse margins. */
.bsw-ab {
  max-width: var(--bsw-container);
  margin: 0 auto;
  padding: var(--sp-5) var(--bsw-gutter) var(--sp-9);
}
.bsw-ab-sec { padding: calc(var(--sec-gap) / 2) 0 0; }
.bsw-ab-sec > * + * { margin-top: var(--sp-4); }
.bsw-ab-sec > .bsw-h2 + * { margin-top: var(--kop-gap); }

/* ---------------------------------------------------------------
   1  Kop met beeld
   --------------------------------------------------------------- */
/* De kop bevat een woord van twintig tekens zonder afbreekpunt:
   "Bouwsteenwinkel.shop". Op 26px is dat 390 pixels, en omdat een grid-kolom
   van 1fr nooit smaller wordt dan de min-content van zijn inhoud, rekte dat
   ene woord de hele kop op tot 454 pixels in een kolom van 288. Op elke
   telefoon liep de kop dus buiten beeld. Vandaar: kolommen mogen krimpen
   (minmax(0, ...)) en lange woorden mogen afbreken. */
.bsw-ab-hero__h1,
.bsw-ab-hero__lead { overflow-wrap: break-word; }
.bsw-ab-hero > * { min-width: 0; }
.bsw-ab-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--sp-7);
  align-items: center;
  background: var(--navy);
  color: var(--cream);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.bsw-ab-hero__tekst { padding: var(--sp-7) 0 var(--sp-7) var(--sp-7); }
.bsw-ab-hero .bsw-kicker { color: var(--yellow-soft); }
.bsw-ab-hero__h1 {
  font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-h1); line-height: var(--lh-num);
  color: var(--white); margin: var(--sp-2) 0 0;
}
.bsw-ab-hero__lead {
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--cream); max-width: 32em; margin: var(--sp-4) 0 0;
}
.bsw-ab-hero__acties {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5);
}
.bsw-ab-hero__beeld { align-self: stretch; min-height: 280px; }
.bsw-ab-hero__beeld img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ---------------------------------------------------------------
   2  Cijferstrook
   ---------------------------------------------------------------
   Vier tellingen uit de database. Het getal in de kopletter, het
   bijschrift eronder in de leesletter, zodat het cijfer het eerst
   gelezen wordt en het woord het uitlegt. */
.bsw-ab-cijfers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
.bsw-ab-cijfer {
  background: var(--cream);
  border: 1px solid var(--cream-3);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}
.bsw-ab-cijfer__n {
  display: block;
  font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-price-lg); line-height: var(--lh-num);
  color: var(--navy);
}
.bsw-ab-cijfer__l {
  display: block;
  font-size: var(--fs-sm); line-height: var(--lh-body);
  color: var(--text-2); margin-top: var(--sp-1);
}

/* ---------------------------------------------------------------
   3  Lopende tekst en lijsten
   --------------------------------------------------------------- */
.bsw-ab-prose { max-width: 34em; }
.bsw-ab-prose p { margin: 0 0 var(--sp-4); line-height: var(--lh-body); color: var(--text-2); }
.bsw-ab-prose p:last-child { margin-bottom: 0; }
.bsw-ab-prose strong { color: var(--navy); }
.bsw-ab-prose a { color: var(--navy); text-decoration: underline; }

/* Lijst met een pictogram ervoor. De marker is een inline-SVG in de
   HTML, geen ::before met tekst, zodat hij op elke regelhoogte
   uitgelijnd blijft en de schermlezer hem overslaat. */
.bsw-ab-lijst { list-style: none; margin: 0; padding: 0; max-width: 40em; }
.bsw-ab-lijst li {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--gray-line);
  line-height: var(--lh-body); color: var(--text-2);
}
.bsw-ab-lijst li:first-child { border-top: 0; padding-top: 0; }
.bsw-ab-lijst svg {
  flex: none; width: 20px; height: 20px; margin-top: 2px;
  stroke: var(--success); stroke-width: 1.75; fill: none;
}
.bsw-ab-lijst--neutraal svg { stroke: var(--navy-3); }
.bsw-ab-lijst b { color: var(--navy); font-weight: 700; }

/* ---------------------------------------------------------------
   4  Sectie met beeld ernaast
   --------------------------------------------------------------- */
/* Bovenaan uitlijnen, niet in het midden: de tekstkolom is korter dan het
   beeld en zou anders met een gat onder zijn eigen kop beginnen. */
.bsw-ab-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-7);
  align-items: start;
}
.bsw-ab-split__beeld { margin: 0; }
.bsw-ab-split__beeld img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
}
.bsw-ab-split__beeld figcaption {
  font-size: var(--fs-cap); line-height: var(--lh-head);
  color: var(--text-muted); margin-top: var(--sp-2);
}

/* ---------------------------------------------------------------
   5  Verzendtarieven
   ---------------------------------------------------------------
   Een lijst van rijen, geen <table>: er is een waarde per regel en op
   een telefoon leest een rij prettiger dan een cel. */
.bsw-ab-tarieven { display: grid; gap: 0; max-width: 40em; }
.bsw-ab-tarief {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--gray-line);
}
.bsw-ab-tarief:first-child { border-top: 0; }
.bsw-ab-tarief__naam { font-weight: 700; color: var(--navy); }
.bsw-ab-tarief__prijs {
  margin-left: auto;
  font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-body); line-height: var(--lh-num); color: var(--navy);
}
.bsw-ab-tarief__note {
  flex-basis: 100%;
  font-size: var(--fs-cap); line-height: var(--lh-head); color: var(--text-muted);
}

/* ---------------------------------------------------------------
   6  Twee kolommen: hier of op een marktplaats
   --------------------------------------------------------------- */
.bsw-ab-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  align-items: start;
}
.bsw-ab-kaart {
  border: 1px solid var(--gray-line);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  background: var(--white);
}
.bsw-ab-kaart--stil { background: var(--gray-soft); border-color: var(--gray-3); }
.bsw-ab-kaart > .bsw-h3 + * { margin-top: var(--sp-3); }

/* ---------------------------------------------------------------
   7  Beoordelingen
   --------------------------------------------------------------- */
.bsw-ab-scores {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  max-width: 44em;
}
.bsw-ab-score {
  border: 1px solid var(--cream-3);
  background: var(--cream);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}
.bsw-ab-score__cijfer {
  display: flex; align-items: baseline; gap: var(--sp-2);
  font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-price-lg); line-height: var(--lh-num); color: var(--navy);
}
.bsw-ab-score__uit { font-size: var(--fs-sm); font-weight: 400; color: var(--text-muted); }
.bsw-ab-score__sterren { display: flex; gap: 2px; margin-top: var(--sp-2); }
.bsw-ab-score__sterren svg { width: 18px; height: 18px; }
.bsw-ab-score__bron {
  font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-2);
  margin: var(--sp-2) 0 0;
}

/* ---------------------------------------------------------------
   8  Veelgestelde vragen
   ---------------------------------------------------------------
   <details> met een eigen pijl. De ingebouwde driehoek gaat weg, de
   chevron in de HTML draait mee. Alle antwoorden staan in de HTML, ook
   dicht, zodat een crawler en de paginazoekfunctie ze vinden. */
.bsw-ab-faq { max-width: 44em; border-top: 1px solid var(--gray-line); }
.bsw-ab-faq details { border-bottom: 1px solid var(--gray-line); }
.bsw-ab-faq summary {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4) 0;
  cursor: pointer; list-style: none;
  font-family: var(--font-head); font-weight: 600;
  font-size: var(--fs-h3); line-height: var(--lh-head); color: var(--navy);
}
.bsw-ab-faq summary::-webkit-details-marker { display: none; }
.bsw-ab-faq summary:hover { color: var(--navy-2); }
/* De vraag is een kop (h3), zodat de koppenstructuur van de pagina klopt
   en een schermlezer er doorheen kan springen. Zijn eigen maat en marge
   gaan weg: die staan al op de <summary> eromheen. */
.bsw-ab-faq__v { font: inherit; color: inherit; margin: 0; }
.bsw-ab-faq__chev {
  flex: none; width: 20px; height: 20px; margin-top: 3px; margin-left: auto;
  stroke: var(--navy-3); stroke-width: 1.75; fill: none;
  transition: transform 160ms ease;
}
.bsw-ab-faq details[open] .bsw-ab-faq__chev { transform: rotate(180deg); }
.bsw-ab-faq__a {
  padding: 0 0 var(--sp-5);
  max-width: 34em;
  line-height: var(--lh-body); color: var(--text-2);
}
.bsw-ab-faq__a p { margin: 0 0 var(--sp-3); }
.bsw-ab-faq__a p:last-child { margin-bottom: 0; }
.bsw-ab-faq__a a { color: var(--navy); text-decoration: underline; }

/* ---------------------------------------------------------------
   9  Contactkaart en vrijwaring
   --------------------------------------------------------------- */
.bsw-ab-contact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
  background: var(--navy);
  color: var(--cream);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}
.bsw-ab-contact .bsw-h2 { color: var(--white); }
.bsw-ab-contact a { color: var(--cream); text-decoration: underline; }
.bsw-ab-contact a:hover { color: var(--yellow); }
.bsw-ab-contact__rij {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) 0;
}
.bsw-ab-contact__rij svg {
  flex: none; width: 20px; height: 20px; margin-top: 2px;
  stroke: var(--yellow); stroke-width: 1.5; fill: none;
}
.bsw-ab-contact__kop { display: block; font-weight: 700; color: var(--white); }
.bsw-ab-legal {
  margin-top: var(--sp-6);
  font-size: var(--fs-cap); line-height: var(--lh-body); color: var(--text-muted);
  max-width: 44em;
}

/* ---------------------------------------------------------------
   10  Responsief
   --------------------------------------------------------------- */
@media (max-width: 1000px) {
  .bsw-ab-cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .bsw-ab-hero { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .bsw-ab-hero__tekst { order: 2; padding: var(--sp-6); }
  .bsw-ab-hero__beeld { order: 1; min-height: 200px; max-height: 260px; }
  .bsw-ab-split { grid-template-columns: 1fr; gap: var(--sp-5); }
  .bsw-ab-split__beeld { order: 2; }
  .bsw-ab-duo,
  .bsw-ab-scores,
  .bsw-ab-contact { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .bsw-ab { padding-bottom: var(--sp-7); }
  .bsw-ab-cijfers { grid-template-columns: 1fr; }
  .bsw-ab-tarief__prijs { margin-left: 0; }
}

/* ---------------------------------------------------------------
   11  prefers-reduced-motion
   ---------------------------------------------------------------
   Alleen de overgang gaat uit; de chevron blijft draaien, want die
   stand is de enige aanwijzing of een vraag open of dicht staat. */
@media (prefers-reduced-motion: reduce) {
  .bsw-ab-faq__chev { transition: none; }
}