/*
 * 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; }
}