/*
 * Opmaak van het B2B-portaal, in de stijl van thetrace.eu zoals die er nu uitziet.
 *
 * Alles staat bewust in dit ene bestand en nergens anders. Gaat de nieuwe Bricks-site
 * live, dan wordt alleen dit bestand omgezet naar de nieuwe stijl en blijft de werking
 * ongemoeid.
 *
 * Kleuren: donker #0d0d0d, goud #C4A84A (het goud van de site is #CB9500, maar in een
 * afgeschermde omgeving met veel tekst leest het rustiger goud beter), tekst #e8e8e8.
 */

:root {
  --tt-bg: #0d0d0d;
  --tt-kaart: #151515;
  --tt-lijn: #262626;
  --tt-goud: #C4A84A;
  --tt-tekst: #e8e8e8;
  --tt-dim: #9a9a9a;
}

/* ---------- aanmeldformulier ---------- */

.tt-b2b-form {
  background: var(--tt-kaart);
  border: 1px solid var(--tt-lijn);
  border-left: 3px solid var(--tt-goud);
  padding: 28px;
  max-width: 760px;
  color: var(--tt-tekst);
  font-family: Arial, Helvetica, sans-serif;
}

.tt-b2b-rij {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.tt-b2b-rij > label {
  flex: 1 1 300px;
}

.tt-b2b-form label {
  display: block;
  margin-bottom: 16px;
  font-size: 13px;
  letter-spacing: .4px;
  color: var(--tt-dim);
  text-transform: uppercase;
}

.tt-b2b-form input[type="text"],
.tt-b2b-form input[type="email"],
.tt-b2b-form input[type="url"],
.tt-b2b-form select,
.tt-b2b-form textarea {
  width: 100%;
  margin-top: 6px;
  background: #0d0d0d;
  border: 1px solid #333;
  border-radius: 0;
  color: var(--tt-tekst);
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
  padding: 0 12px;
  height: 42px;
  text-transform: none;
  letter-spacing: 0;
}

.tt-b2b-form textarea {
  height: auto;
  padding: 10px 12px;
  line-height: 1.5;
}

.tt-b2b-form input:focus,
.tt-b2b-form select:focus,
.tt-b2b-form textarea:focus {
  outline: none;
  border-color: var(--tt-goud);
}

.tt-b2b-knop,
.tt-b2b-form button {
  display: inline-block;
  background: var(--tt-goud);
  color: #0d0d0d;
  border: none;
  border-radius: 0;
  padding: 14px 30px;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
}

.tt-b2b-knop:hover,
.tt-b2b-form button:hover {
  background: #d8bb57;
  color: #0d0d0d;
}

.tt-b2b-knop-klein {
  display: inline-block;
  border: 1px solid var(--tt-goud);
  color: var(--tt-goud);
  padding: 6px 14px;
  font-size: 12px;
  letter-spacing: .8px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.tt-b2b-knop-klein:hover {
  background: var(--tt-goud);
  color: #0d0d0d;
}

.tt-b2b-note {
  color: var(--tt-dim);
  font-size: 13px;
  margin-top: 16px;
  text-transform: none;
  letter-spacing: 0;
}

.tt-b2b-ok,
.tt-b2b-error {
  background: var(--tt-kaart);
  border: 1px solid var(--tt-lijn);
  padding: 22px 26px;
  max-width: 760px;
  color: var(--tt-tekst);
  font-family: Arial, Helvetica, sans-serif;
}

.tt-b2b-ok {
  border-left: 3px solid #4fae5a;
}

.tt-b2b-ok h2 {
  color: var(--tt-goud);
  margin: 0 0 8px;
  font-size: 22px;
}

.tt-b2b-error {
  border-left: 3px solid #c0453f;
  margin-bottom: 18px;
}

.tt-b2b-error ul {
  margin: 0;
  padding-left: 20px;
}

/* ---------- winkelwagen ---------- */

.tt-b2b-tiernote {
  background: var(--tt-kaart);
  border-left: 3px solid var(--tt-goud);
  color: var(--tt-tekst);
  padding: 14px 18px;
  margin-bottom: 18px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
}

.tt-b2b-tier,
.tt-b2b-exvat {
  color: var(--tt-dim);
  font-size: 12px;
  letter-spacing: .3px;
}

.tt-b2b-vatnote td {
  color: var(--tt-dim);
  font-size: 13px;
}

.tt-b2b-quote {
  background: var(--tt-kaart);
  border-left: 3px solid var(--tt-goud);
  color: var(--tt-tekst);
  padding: 14px 18px;
  font-size: 15px;
}

/* ---------- dashboard ---------- */

/*
 * Het dashboard draagt zijn eigen donkere achtergrond mee.
 * Reden: op de live site is de pagina zelf al donker, maar in een testomgeving of
 * op een licht sjabloon zou lichte tekst op wit onleesbaar worden. Zo werkt het blok
 * los van het thema eromheen, en dat scheelt straks werk bij de overstap naar Bricks.
 */
.tt-b2b-dashboard {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--tt-tekst);
  background: var(--tt-bg);
  padding: 26px 30px 34px;
}

.tt-b2b-dashboard p,
.tt-b2b-dashboard li,
.tt-b2b-dashboard td,
.tt-b2b-dashboard span {
  color: var(--tt-tekst);
}

.tt-b2b-dashboard .tt-b2b-note {
  color: var(--tt-dim);
}

.tt-b2b-dashboard a:not(.tt-b2b-knop-klein) {
  color: var(--tt-goud);
}

.tt-b2b-dashboard h3 {
  color: var(--tt-goud);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  margin: 30px 0 10px;
}

.tt-b2b-kaart {
  background: var(--tt-kaart);
  border: 1px solid var(--tt-lijn);
  border-left: 3px solid var(--tt-goud);
  padding: 18px 22px;
}

.tt-b2b-kaart h3 {
  margin: 0 0 6px;
}

.tt-b2b-badge {
  display: inline-block;
  border: 1px solid var(--tt-goud);
  color: var(--tt-goud);
  padding: 3px 10px;
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.tt-b2b-tabel-wrap {
  overflow-x: auto;
}

.tt-b2b-prijstabel,
.tt-b2b-facturen {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.tt-b2b-prijstabel th,
.tt-b2b-facturen th {
  color: var(--tt-goud);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .9px;
  text-align: right;
  padding: 8px 10px;
  border-bottom: 1px solid var(--tt-lijn);
  white-space: nowrap;
}

.tt-b2b-prijstabel th:first-child,
.tt-b2b-facturen th:first-child {
  text-align: left;
}

.tt-b2b-prijstabel td,
.tt-b2b-facturen td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--tt-lijn);
  text-align: right;
  white-space: nowrap;
  color: var(--tt-tekst);
  background: transparent;
}

.tt-b2b-prijstabel tr:nth-child(even) td,
.tt-b2b-facturen tr:nth-child(even) td {
  background: rgba(255, 255, 255, .03);
}

.tt-b2b-prijstabel td:first-child,
.tt-b2b-facturen td:first-child {
  text-align: left;
}

.tt-b2b-herhaal {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tt-b2b-herhaal li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--tt-lijn);
}

/* ---------- de discrete ingang onderin ---------- */

.tt-b2b-footerlink {
  text-align: center;
  padding: 18px 0 26px;
}

.tt-b2b-footerlink a {
  color: var(--tt-dim);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-decoration: none;
}

.tt-b2b-footerlink a:hover {
  color: var(--tt-goud);
}

/* ============================================================================
 * DE AANMELDPAGINA ALS ECHTE LANDINGSPAGINA, plus de weergave voor een partner
 * die is ingelogd. Toegevoegd 05-09-2026.
 *
 * Aanleiding: een winkel die de link van Bob opende kreeg een kaal formulier te
 * zien zonder een woord uitleg over waarom hij partner zou willen worden. En een
 * ingelogde partner zag de balk "free shipping from EUR 75", die voor hem niet
 * geldt omdat zijn verzendkosten per doos en pallet worden gerekend.
 * ========================================================================== */

/* ---------- de landingspagina ---------- */

.tt-b2b-land {
  max-width: 1080px;
  margin: 0 auto;
  color: var(--tt-tekst);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
}

.tt-b2b-hero {
  border-left: 3px solid var(--tt-goud);
  padding: 4px 0 4px 26px;
  margin-bottom: 42px;
}

.tt-b2b-hero .tt-b2b-eyebrow {
  color: var(--tt-goud);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.tt-b2b-hero h2 {
  font-size: 38px;
  line-height: 1.15;
  margin: 0 0 14px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.tt-b2b-hero p {
  font-size: 17px;
  color: #c4c4c4;
  margin: 0;
  max-width: 720px;
}

/* ---------- de cijfers ---------- */

.tt-b2b-cijfers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--tt-lijn);
  border: 1px solid var(--tt-lijn);
  margin-bottom: 46px;
}

.tt-b2b-cijfers div {
  background: var(--tt-bg);
  padding: 22px 18px;
  text-align: center;
}

.tt-b2b-cijfers strong {
  display: block;
  font-size: 26px;
  color: var(--tt-goud);
  line-height: 1.1;
  margin-bottom: 6px;
}

.tt-b2b-cijfers span {
  font-size: 11px;
  color: var(--tt-dim);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

/* ---------- blokken met een kop ---------- */

.tt-b2b-land h3 {
  font-size: 13px;
  color: var(--tt-goud);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--tt-lijn);
}

.tt-b2b-blok {
  margin-bottom: 46px;
}

.tt-b2b-punten {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 40px;
}

.tt-b2b-punten article h4 {
  font-size: 16px;
  color: #fff;
  margin: 0 0 7px;
  text-transform: none;
  letter-spacing: 0;
}

.tt-b2b-punten article p {
  margin: 0;
  color: #b0b0b0;
  font-size: 14px;
}

/* ---------- de drie stappen ---------- */

.tt-b2b-stappen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  counter-reset: stap;
}

.tt-b2b-stappen article {
  background: var(--tt-kaart);
  border: 1px solid var(--tt-lijn);
  padding: 24px 22px;
  position: relative;
}

.tt-b2b-stappen article::before {
  counter-increment: stap;
  content: counter(stap);
  display: block;
  font-size: 30px;
  font-weight: bold;
  color: var(--tt-goud);
  line-height: 1;
  margin-bottom: 12px;
  opacity: .85;
}

.tt-b2b-stappen h4 {
  font-size: 15px;
  color: #fff;
  margin: 0 0 7px;
  text-transform: none;
  letter-spacing: 0;
}

.tt-b2b-stappen p {
  margin: 0;
  color: #a8a8a8;
  font-size: 14px;
}

/* ---------- de prijstabel ---------- */

.tt-b2b-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.tt-b2b-tabel th {
  text-align: left;
  padding: 11px 14px;
  background: #1a1a1a;
  color: var(--tt-goud);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid var(--tt-lijn);
  font-weight: bold;
}

.tt-b2b-tabel td {
  padding: 11px 14px;
  border-bottom: 1px solid #1e1e1e;
  color: #d0d0d0;
}

.tt-b2b-tabel td.rk,
.tt-b2b-tabel th.rk {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tt-b2b-tabel tr:last-child td {
  border-bottom: none;
}

.tt-b2b-tabel .tt-b2b-vanaf {
  color: var(--tt-goud);
  font-weight: bold;
}

/* ---------- het formulier krijgt een eigen kop ---------- */

.tt-b2b-aanvraag {
  border-top: 1px solid var(--tt-lijn);
  padding-top: 40px;
  margin-top: 10px;
}

.tt-b2b-form {
  max-width: none;
}

.tt-b2b-slot {
  color: var(--tt-dim);
  font-size: 13px;
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--tt-lijn);
}

/* ---------- wat een INGELOGDE partner ziet ---------- */

/* Het staffelniveau achter de prijs hoort op een eigen regel, anders plakt het
   tegen "ex VAT" aan en leest er "ex VATwholesale, 1 to 49 pcs". */
.tt-b2b-niveau {
  display: block;
  font-size: 11px;
  color: var(--tt-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 3px;
  font-weight: normal;
}

.tt-b2b-exvat {
  color: var(--tt-dim);
  font-size: 12px;
  margin-left: 4px;
  text-transform: uppercase;
  letter-spacing: .6px;
}

/* De balk die bovenaan elke pagina laat zien dat je als partner kijkt. */
.tt-b2b-balk {
  background: #1a1710;
  border-bottom: 1px solid var(--tt-goud);
  color: var(--tt-goud);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-align: center;
  padding: 9px 16px;
}

.tt-b2b-balk a {
  color: var(--tt-goud);
  text-decoration: underline;
  margin-left: 14px;
}

.tt-b2b-balk .tt-b2b-balk-dim {
  color: #9a8c5e;
  text-transform: none;
  letter-spacing: .4px;
  margin-left: 12px;
}

/* Consumentenboodschappen die voor een partner niet kloppen. De gratis-verzendbalk
   geldt niet voor hem, want zijn verzendkosten worden per doos en pallet gerekend. */
/* De gemeten selectors: .header-banner is de dropbalk (Controlled Chaos) en .tt-ship
   is de balk "free shipping worldwide from EUR 75". Die tweede is voor een partner
   ronduit misleidend, want zijn verzendkosten worden per doos en pallet gerekend en
   shipping.php zet die drempel juist bewust opzij. De bovenste navigatiebalk met
   My account en Contact blijft wel staan, want die is gewoon nuttig. */
body.tt-b2b-partner .wd-hb-wrapp,
body.tt-b2b-partner .header-banner,
body.tt-b2b-partner .tt-ship,
body.tt-b2b-portaalpagina .wd-hb-wrapp,
body.tt-b2b-portaalpagina .header-banner,
body.tt-b2b-portaalpagina .tt-ship {
  display: none !important;
}

/* Het merkenveld is een hoog tekstvak. Staat de telefoon ernaast, dan valt er links
   een leeg gat van een paar honderd pixels. Op die rij staan de velden daarom onder
   elkaar over de volle breedte. */
.tt-b2b-form .tt-b2b-rij:has(textarea) {
  display: block;
}

.tt-b2b-form .tt-b2b-rij:has(textarea) > label {
  display: block;
  max-width: none;
}

@media (max-width: 900px) {
  .tt-b2b-cijfers { grid-template-columns: repeat(2, 1fr); }
  .tt-b2b-punten,
  .tt-b2b-stappen { grid-template-columns: 1fr; }
  .tt-b2b-hero h2 { font-size: 28px; }
}

/* ---------- de leus ----------
 * Staat op de plek waar eerst de prijstabel stond. Die tabel is er op 05-09-2026 uit
 * gehaald omdat hij de inkoopprijzen van elke productlijn aan iedereen met de link
 * liet zien, en de link gaat naar tientallen winkels waarvan sommige ook een
 * concurrentmerk voeren. Percentages tonen helpt niet: 51 procent marge op een tee
 * van EUR 39,90 is gewoon terug te rekenen naar de inkoopprijs. */

.tt-b2b-leus {
  border-top: 1px solid var(--tt-lijn);
  border-bottom: 1px solid var(--tt-lijn);
  padding: 44px 20px;
  margin: 0 0 46px;
  text-align: center;
}

.tt-b2b-leus p {
  margin: 0;
  font-size: 30px;
  line-height: 1.3;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: bold;
}

.tt-b2b-leus span {
  color: var(--tt-goud);
}

@media (max-width: 700px) {
  .tt-b2b-leus { padding: 30px 12px; }
  .tt-b2b-leus p { font-size: 21px; }
}

/* ============================================================================
   HET BESTELVEL EN DE TWEE WEGEN (07-09-2026)
   Zie bestelvel.php voor waarom de maten pas bij het openklappen geladen worden.
   ============================================================================ */

.tt-b2b-wegen {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 34px;
}
.tt-b2b-weg {
  background: linear-gradient(180deg, #171717 0%, #111 55%, #0e0e0e 100%);
  border: 1px solid #232323; border-radius: 3px; padding: 22px 22px 20px;
  position: relative; display: flex; flex-direction: column;
}
.tt-b2b-weg:before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: linear-gradient(90deg, rgba(196,168,74,0) 0%, rgba(196,168,74,.8) 50%, rgba(196,168,74,0) 100%);
}
.tt-b2b-weg h3 {
  font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
  margin: 0 0 10px; color: #e6e6e6;
}
.tt-b2b-weg p { color: #9a9a9a; font-size: 14px; line-height: 1.6; margin: 0 0 18px; flex: 1; }

.tt-b2b-knop {
  display: inline-block; text-align: center; height: 50px; line-height: 50px;
  padding: 0 24px; border-radius: 2px; border: 0;
  font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.tt-b2b-knop-goud { background: #C4A84A; color: #0a0a0a; }
.tt-b2b-knop-goud:hover { background: #d9bf60; color: #0a0a0a; }
.tt-b2b-knop-goud:disabled { background: #2a2a2a; color: #6a6a6a; cursor: default; }
.tt-b2b-knop-open { background: transparent; border: 1px solid #2f2f2f; color: #cfcfcf; }
.tt-b2b-knop-open:hover { border-color: #C4A84A; color: #C4A84A; }

/* ---- het vel ---- */
.tt-b2b-vel-blok { margin: 0 0 34px; }
.tt-b2b-vel-filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 16px 0 14px; }
#tt-b2b-zoek {
  height: 46px; min-width: 240px; flex: 1 1 240px;
  background: #0b0b0b; border: 1px solid #2b2b2b; border-radius: 2px;
  color: #fff; padding: 0 14px; font-size: 15px;
}
#tt-b2b-zoek:focus { border-color: #C4A84A; outline: none; }
.tt-b2b-vel-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tt-b2b-tab {
  background: transparent; border: 1px solid #2b2b2b; color: #9a9a9a;
  border-radius: 2px; height: 34px; padding: 0 12px; font-size: 12px; cursor: pointer;
}
.tt-b2b-tab:hover { border-color: #3d3d3d; color: #cfcfcf; }
.tt-b2b-tab.is-actief { border-color: #C4A84A; color: #C4A84A; }

.tt-b2b-vel-lijst { border: 1px solid #232323; border-radius: 3px; overflow: hidden; }
.tt-b2b-rij { border-bottom: 1px solid #1e1e1e; background: #111; }
.tt-b2b-rij:last-child { border-bottom: 0; }
.tt-b2b-rij.heeft-aantal { background: #14130f; }
.tt-b2b-rij-kop {
  width: 100%; display: flex; align-items: center; gap: 12px;
  background: transparent; border: 0; cursor: pointer; text-align: left;
  padding: 14px 16px; color: #e6e6e6; font-size: 15px;
}
.tt-b2b-rij-kop:hover { background: #161616; }
.tt-b2b-rij-naam { flex: 1; }
.tt-b2b-rij-type { color: #7d7d7d; font-size: 12px; letter-spacing: .06em; }
.tt-b2b-rij-aantal { color: #C4A84A; font-size: 12px; font-weight: 700; min-width: 52px; text-align: right; }
.tt-b2b-rij-pijl { width: 8px; height: 8px; border-right: 1px solid #6a6a6a; border-bottom: 1px solid #6a6a6a; transform: rotate(45deg); margin-left: 4px; transition: transform .18s ease; }
.tt-b2b-rij.is-open .tt-b2b-rij-pijl { transform: rotate(-135deg); }

.tt-b2b-rij-maten { padding: 0 16px 16px; }
.tt-b2b-laden { color: #7d7d7d; font-size: 13px; padding: 6px 0 10px; }
.tt-b2b-maten { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.tt-b2b-maat { display: flex; flex-direction: column; gap: 6px; }
.tt-b2b-maat span {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #8f8f8f;
}
.tt-b2b-maat em { color: #6a6a6a; font-style: normal; text-transform: none; letter-spacing: 0; }
.tt-b2b-maat.is-uitverkocht { opacity: .45; }
input.tt-b2b-aantal {
  height: 46px; background: #0b0b0b; border: 1px solid #2b2b2b; border-radius: 2px;
  color: #fff; font-size: 16px; text-align: center; padding: 0 6px; width: 100%;
}
input.tt-b2b-aantal:focus { border-color: #C4A84A; outline: none; }

/* ---- de balk onderaan ---- */
.tt-b2b-vel-totaal {
  position: sticky; bottom: 0; z-index: 5; margin-top: 14px;
  background: rgba(12,12,12,.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid #262626; border-radius: 3px; padding: 14px 16px;
  display: grid; grid-template-columns: 1fr auto; gap: 10px 18px; align-items: center;
}
.tt-b2b-totaal-cijfers { display: flex; gap: 20px; flex-wrap: wrap; color: #9a9a9a; font-size: 13px; }
.tt-b2b-totaal-cijfers b { color: #fff; font-size: 15px; }
.tt-b2b-totaal-melding { grid-column: 1 / -1; font-size: 13px; color: #8f8f8f; }
.tt-b2b-totaal-melding.is-kort { color: #d9a15f; }
.tt-b2b-totaal-melding.is-goed { color: #7ec77e; }
#tt-b2b-inleggen { min-width: 240px; }

@media (max-width: 700px) {
  .tt-b2b-wegen { grid-template-columns: 1fr; }
  .tt-b2b-vel-totaal { grid-template-columns: 1fr; }
  #tt-b2b-inleggen { width: 100%; min-width: 0; }
  .tt-b2b-rij-type { display: none; }
  .tt-b2b-maten { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}
.tt-b2b-rij-naam { display: flex; flex-direction: column; gap: 3px; }
.tt-b2b-rij-kleuren { font-style: normal; color: #7d7d7d; font-size: 12px; letter-spacing: .02em; }

/* ============================================================================
   HET THEMA OVERSTEMMEN (07-09-2026)

   Gemeten op de ECHTE pagina, niet op een kale proefpagina: Woodmart geeft elke
   <button> een lichtgrijze achtergrond (rgb(243,243,243)) met donkere tekst en zijn
   eigen padding. Daardoor werden de productrijen en de filtertabs licht in plaats van
   donker, en zag het er in de winkel heel anders uit dan in het voorbeeld.

   Daarom staan de knop-eigenschappen hieronder met !important en met een selector die
   zwaarder weegt. Haal dat er niet af zonder het opnieuw op de echte pagina te meten.
   ============================================================================ */

.tt-b2b-vel button.tt-b2b-tab,
.tt-b2b-vel button.tt-b2b-rij-kop {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-family: inherit !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  min-height: 0 !important;
}

.tt-b2b-vel button.tt-b2b-tab {
  border: 1px solid #2b2b2b !important;
  color: #9a9a9a !important;
  border-radius: 2px !important;
  height: 34px !important;
  line-height: 32px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
}
.tt-b2b-vel button.tt-b2b-tab:hover { border-color: #3d3d3d !important; color: #cfcfcf !important; }
.tt-b2b-vel button.tt-b2b-tab.is-actief { border-color: #C4A84A !important; color: #C4A84A !important; }

.tt-b2b-vel button.tt-b2b-rij-kop {
  border: 0 !important;
  color: #e6e6e6 !important;
  border-radius: 0 !important;
  padding: 14px 16px !important;
  font-size: 15px !important;
  height: auto !important;
  line-height: 1.35 !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-align: left !important;
}
.tt-b2b-vel button.tt-b2b-rij-kop:hover { background: #161616 !important; }

/* de knop onderaan is ook een <button> */
.tt-b2b-vel button.tt-b2b-knop-goud {
  background: #C4A84A !important;
  background-image: none !important;
  color: #0a0a0a !important;
  border: 0 !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  height: 50px !important;
  line-height: 50px !important;
  font-size: 12px !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
}
.tt-b2b-vel button.tt-b2b-knop-goud:hover { background: #d9bf60 !important; color: #0a0a0a !important; }
.tt-b2b-vel button.tt-b2b-knop-goud:disabled { background: #2a2a2a !important; color: #6a6a6a !important; }

/* invoervelden: het thema zet een lichte rand met doorzichtigheid */
.tt-b2b-vel input.tt-b2b-aantal,
.tt-b2b-vel input#tt-b2b-zoek {
  border: 1px solid #2b2b2b !important;
  background: #0b0b0b !important;
  color: #fff !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}
.tt-b2b-vel input.tt-b2b-aantal { height: 46px !important; text-align: center !important; font-size: 16px !important; }
.tt-b2b-vel input#tt-b2b-zoek { height: 46px !important; font-size: 15px !important; }
.tt-b2b-vel input.tt-b2b-aantal:focus,
.tt-b2b-vel input#tt-b2b-zoek:focus { border-color: #C4A84A !important; }

/* de "toon meer"-knop */
.tt-b2b-vel-meer { text-align: center; padding: 12px 0 0; }
.tt-b2b-vel button#tt-b2b-meer {
  background: transparent !important; background-image: none !important;
  border: 1px solid #2b2b2b !important; color: #9a9a9a !important;
  border-radius: 2px !important; height: 40px !important; line-height: 38px !important;
  padding: 0 18px !important; font-size: 12px !important; box-shadow: none !important;
  letter-spacing: .08em !important; text-transform: none !important;
}
.tt-b2b-vel button#tt-b2b-meer:hover { border-color: #C4A84A !important; color: #C4A84A !important; }

/* koppen binnen het vel, zodat het thema er geen eigen maat op zet */
.tt-b2b-vel .tt-b2b-weg h3,
.tt-b2b-vel .tt-b2b-vel-blok > h3 {
  font-size: 13px !important; letter-spacing: .22em !important; text-transform: uppercase !important;
  color: #e6e6e6 !important; margin: 0 0 10px !important;
}

/* De rij zelf moet een gewoon blok blijven. Het thema maakt er een flexrij van, waardoor
   het maatvakje-blok naast de kop kwam te staan en nog maar 219 pixels breed was; de maten
   stonden daardoor onder elkaar in plaats van naast elkaar. Gemeten op de echte pagina. */
.tt-b2b-vel .tt-b2b-rij { display: block !important; }
.tt-b2b-vel .tt-b2b-rij-maten { width: 100% !important; display: block !important; }
.tt-b2b-vel .tt-b2b-rij-maten[hidden] { display: none !important; }
.tt-b2b-vel .tt-b2b-maten {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
  gap: 10px !important;
}
.tt-b2b-vel .tt-b2b-maat { display: flex !important; flex-direction: column !important; gap: 6px !important; width: auto !important; margin: 0 !important; }
.tt-b2b-vel .tt-b2b-maat span { font-size: 11px !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: #8f8f8f !important; }
.tt-b2b-vel .tt-b2b-vel-lijst { display: block !important; }
.tt-b2b-vel .tt-b2b-wegen { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
@media (max-width: 700px) { .tt-b2b-vel .tt-b2b-wegen { grid-template-columns: 1fr !important; } }

/* ---------- aanmeldpagina: de weg naar het formulier (25-09-2026, variant A) ----------
   Aanleiding: Rigad opende deze pagina, klikte op MY ACCOUNT en maakte een gewoon
   klantaccount aan, want het formulier stond 2.011 pixels diep en nergens stond dat je geen
   account hoeft te maken. De knop staat nu in de kop en springt naar #aanvragen. Gemeten op
   de echte pagina: op 1440, 820 en 390 in het eerste scherm, op de telefoon boven de balk
   onderin, knop 50 hoog en op de telefoon schermbreed, de inloglink 48 hoog. */
.tt-b2b-hero-acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 26px;
  margin-top: 24px;
}
.tt-b2b-hero-acties .tt-b2b-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 30px;
}
.tt-b2b-inlog {
  color: var(--tt-dim);
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
}
.tt-b2b-inlog a {
  color: var(--tt-goud);
  display: inline-block;
  padding: 13px 0;
  text-decoration: underline;
}
/* De melding voor wie ingelogd is met een gewoon klantaccount (the_content in application.php). */
.tt-b2b-klantmelding {
  background: #1b1708;
  border: 1px solid #4a3f18;
  border-left: 3px solid var(--tt-goud);
  padding: 16px 20px;
  margin: 0 0 26px;
  color: var(--tt-tekst);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}
.tt-b2b-klantmelding p { margin: 0; color: var(--tt-tekst); }
.tt-b2b-klantmelding strong { color: #fff; }
#aanvragen { scroll-margin-top: 90px; }
@media (max-width: 700px) {
  .tt-b2b-hero-acties .tt-b2b-knop { width: 100%; }
}