/* The Trace - filterbalk bovenaan de winkel (variant A, 06-10-2026). Zie inc/tt-shopbalk.php. */

/* >>> thema-winkel (Woodmart; vervalt bij Bricks) */
.tt-sb-pagina .shop-loop-head{display:none!important}
.tt-sb-pagina .wd-sidebar.sidebar-container{display:none!important}
/* het thema zet bij actieve filters een eigen rij "Clear filters" onder de balk; die van ons staat er al */
.tt-sb-pagina .wd-active-filters{display:none!important}
.tt-sb-pagina .wd-content-area.site-content{--wd-col-lg:12!important;--wd-col-md:12!important;--wd-col-sm:12!important}
@media (min-width:1025px){
  html[data-tt-kol-d="2"] .tt-sb-pagina .wd-products[data-source="main_loop"]{--wd-col-lg:2!important}
  html[data-tt-kol-d="4"] .tt-sb-pagina .wd-products[data-source="main_loop"]{--wd-col-lg:4!important}
  html[data-tt-kol-d="6"] .tt-sb-pagina .wd-products[data-source="main_loop"]{--wd-col-lg:6!important}
}
@media (min-width:769px) and (max-width:1024px){
  html[data-tt-kol-m="2"] .tt-sb-pagina .wd-products[data-source="main_loop"]{--wd-col-md:2!important}
  html[data-tt-kol-m="3"] .tt-sb-pagina .wd-products[data-source="main_loop"]{--wd-col-md:3!important}
  html[data-tt-kol-m="4"] .tt-sb-pagina .wd-products[data-source="main_loop"]{--wd-col-md:4!important}
}
@media (max-width:768.98px){
  html[data-tt-kol-t="1"] .tt-sb-pagina .wd-products[data-source="main_loop"]{--wd-col-sm:1!important}
  html[data-tt-kol-t="2"] .tt-sb-pagina .wd-products[data-source="main_loop"]{--wd-col-sm:2!important}
}
/* F1, hele breedte zoals EME (keuze Martijn 06-10-2026): 16 px rand en 8 px tussen de producten op computer en
   tablet, 10 en 6 op de telefoon, rechte hoeken. Foto op 1440 breed 342x456 in plaats van 286x381. */
@media (min-width:769px){.tt-sb-pagina main.wd-content-layout.container{max-width:none!important;padding-left:16px!important;padding-right:16px!important}}
@media (max-width:768.98px){.tt-sb-pagina main.wd-content-layout.container{padding-left:10px!important;padding-right:10px!important}}
html body.tt-sb-pagina .wd-products[data-source="main_loop"],
html.tt-kp body.tt-sb-pagina .products.tt-kp-lijst{column-gap:8px!important;row-gap:22px!important}
@media (max-width:768.98px){
  html body.tt-sb-pagina .wd-products[data-source="main_loop"],
  html.tt-kp body.tt-sb-pagina .products.tt-kp-lijst{column-gap:6px!important;row-gap:18px!important}
}
.tt-sb-pagina .wd-products[data-source="main_loop"] .product-element-top,
.tt-sb-pagina .wd-products[data-source="main_loop"] .product-element-top img{border-radius:0!important}
/* <<< thema-winkel */

.tt-sb{margin:0 0 24px;color:#e8e8e8}
.tt-sb-rij{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);padding:12px 0}
.tt-sb-cats{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;min-width:0;-webkit-overflow-scrolling:touch}
.tt-sb-cats::-webkit-scrollbar{display:none}
.tt-sb a.tt-sb-chip{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 16px;border:1px solid rgba(255,255,255,.22);color:#e8e8e8;font-family:inherit;font-weight:700;font-size:12px;line-height:1;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;text-decoration:none;cursor:pointer;background:transparent;border-radius:0;flex:0 0 auto;box-sizing:border-box;transition:border-color .15s,background-color .15s}
.tt-sb a.tt-sb-chip:hover{border-color:#f2f2f2;color:#fff}
.tt-sb a.tt-sb-chip.is-actief{background:#f2f2f2;color:#0d0d0d;border-color:#f2f2f2}
.tt-sb a.tt-sb-chip-link{border-color:transparent;padding:0 8px 0 10px;color:#bdbdbd}
.tt-sb a.tt-sb-chip-link:hover{border-color:transparent;color:#fff}
.tt-sb-ico{display:inline-flex;width:20px;height:20px;flex:0 0 auto}
.tt-sb-svg{width:100%;height:100%;display:block}
.tt-sb-ico-k{width:15px;height:15px}
.tt-sb-ikoon .tt-sb-ico{width:24px;height:24px}
.tt-sb-tools{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.tt-sb button.tt-sb-tool{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;min-height:44px;min-width:44px;padding:0 16px;margin:0;background:transparent!important;border:1px solid rgba(255,255,255,.22)!important;color:#e8e8e8!important;font-family:inherit!important;font-weight:700!important;font-size:12px!important;line-height:1!important;letter-spacing:.08em;text-transform:uppercase!important;border-radius:0!important;box-shadow:none!important;position:relative;cursor:pointer}
.tt-sb button.tt-sb-tool:hover,.tt-sb button.tt-sb-filterknop[aria-expanded="true"]{border-color:#f2f2f2!important}
.tt-sb button.tt-sb-ikoon{padding:0!important;width:44px}
.tt-sb button.tt-sb-ikoon.is-actief{background:#f2f2f2!important;color:#0d0d0d!important;border-color:#f2f2f2!important;cursor:default}
.tt-sb-teller{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;background:#f2f2f2;color:#0d0d0d;font-size:11px;letter-spacing:0;border-radius:10px;box-sizing:border-box}
.tt-sb-weergave{display:flex;align-items:center;border:1px solid rgba(255,255,255,.22);height:44px;box-sizing:border-box}
.tt-sb-lbl{padding:0 4px 0 14px;font-weight:700;font-size:12px;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:#8c8c8c}
.tt-sb-wg{display:none}
.tt-sb button.tt-sb-num{width:44px;height:42px;min-height:0;padding:0!important;margin:0;background:transparent!important;color:#8c8c8c!important;font-family:inherit!important;font-weight:700!important;font-size:14px!important;line-height:1!important;border:0!important;border-radius:0!important;box-shadow:none!important;cursor:pointer}
.tt-sb button.tt-sb-num:hover{color:#f2f2f2!important}
.tt-sb button.tt-sb-num.is-actief{color:#f2f2f2!important;box-shadow:inset 0 -2px 0 #f2f2f2!important}
@media (min-width:1025px){.tt-sb-wg-d{display:flex}}
@media (min-width:769px) and (max-width:1024px){.tt-sb-wg-m{display:flex}}
@media (max-width:768.98px){.tt-sb-wg-t{display:flex}}

.tt-sb-actief{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.tt-sb a.tt-sb-chip-weg{text-transform:none;letter-spacing:0;font-weight:400;font-size:14px;padding:0 12px 0 14px}
.tt-sb a.tt-sb-wis{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;color:#9a9a9a;text-decoration:underline;font-size:14px;cursor:pointer}
.tt-sb a.tt-sb-wis:hover{color:#fff}

.tt-sb-paneel[hidden]{display:none!important}
.tt-sb-paneel{border-bottom:1px solid rgba(255,255,255,.12);padding:24px 0 20px}
.tt-sb-grid{display:grid;grid-template-columns:1.15fr 1.1fr 1.6fr 1.15fr;gap:32px}
.tt-sb-kop{font-family:"Poppins",Arial,Helvetica,sans-serif;font-weight:600;font-size:13px;line-height:1;letter-spacing:.06em;text-transform:uppercase;color:#f2f2f2;margin-bottom:14px}
.tt-sb-inh{display:flex;flex-wrap:wrap;gap:8px}
.tt-sb a.tt-sb-chip-maat{min-width:52px;justify-content:center;padding:0 10px}
.tt-sb a.tt-sb-chip-s{text-transform:none;letter-spacing:0;font-weight:400;font-size:14px}
.tt-sb-chip-sale em{font-style:normal;color:#CB9500;margin-left:2px}
.tt-sb a.tt-sb-chip-sale.is-actief em{color:#0d0d0d}
.tt-sb a.tt-sb-kleur{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 12px 0 10px;border:1px solid rgba(255,255,255,.22);color:#e8e8e8;font-size:14px;line-height:1;cursor:pointer;box-sizing:border-box;white-space:nowrap;text-decoration:none}
.tt-sb a.tt-sb-kleur:hover{border-color:#f2f2f2;color:#fff}
.tt-sb a.tt-sb-kleur.is-actief{border-color:#f2f2f2;box-shadow:inset 0 0 0 1px #f2f2f2}
.tt-sb-kleur i{width:18px;height:18px;border-radius:50%;border:1px solid rgba(255,255,255,.4);display:inline-block;background:#555;flex:0 0 auto}
.tt-sb-voet{display:flex;justify-content:flex-end;align-items:center;gap:20px;margin-top:22px}
.tt-sb button.tt-sb-toon{height:48px;min-height:48px;padding:0 28px!important;margin:0;background:#f2f2f2!important;color:#0d0d0d!important;font-family:inherit!important;font-weight:700!important;font-size:13px!important;line-height:1!important;letter-spacing:.08em;text-transform:uppercase!important;border:0!important;border-radius:0!important;box-shadow:none!important;cursor:pointer}

/* Tablet en telefoon: categorieen als schuifrij, gereedschap eronder */
@media (max-width:1024px){
  .tt-sb-rij{flex-direction:column;align-items:stretch;gap:10px;padding:10px 0}
  .tt-sb-cats{margin:0 -16px;padding:0 16px}
  .tt-sb-tools{justify-content:space-between}
  .tt-sb button.tt-sb-filterknop{flex:1 1 auto}
  .tt-sb-grid{grid-template-columns:1fr 1fr;gap:24px}
}
@media (max-width:768.98px){
  .tt-sb-cats{margin:0 -10px;padding:0 10px}
  .tt-sb-grid{grid-template-columns:1fr}
  .tt-sb-voet{justify-content:space-between}
  .tt-sb button.tt-sb-toon{flex:1 1 auto}
}
