@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');
:root{--ts-red:#e2231a;--ts-red-dark:#b21a14;--ts-black:#111111;--ts-text:#1a1a1a;--ts-grey:#6b6b6b;--ts-line:#e6e6e6;--ts-soft:#f5f5f5;}
*{box-sizing:border-box}
body{font-family:'Montserrat',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:var(--ts-text);background:#fff;font-size:15px;-webkit-font-smoothing:antialiased}
a{color:var(--ts-black);text-decoration:none}
a:hover{color:var(--ts-red)}
h1,h2,h3,h4,h5{font-weight:700;color:var(--ts-black)}
h1{font-size:28px;letter-spacing:-.6px}
main{padding-top:0}
#content{padding-bottom:0!important}
footer{position:static!important}
.container{max-width:1320px}
nav#top{background:var(--ts-black);border:0;padding:0;margin:0;min-height:42px}
nav#top .container>.row{align-items:center;min-height:42px}
nav#top a,nav#top .btn,nav#top .dropdown-toggle{color:#e0e0e0!important;font-size:13px;font-weight:500}
nav#top a:hover,nav#top .btn:hover{color:#ffffff!important}
nav#top .btn{background:transparent!important;border:0!important;box-shadow:none!important;padding:4px 8px}
nav#top ul.list-inline{margin:0;text-align:right}
header{background:#ffffff;padding:18px 0 14px;border:0}
header .row{align-items:center}
#logo img{max-height:62px;width:auto}
header .input-group .form-control{height:48px;border:1.5px solid #d9d9d9;border-right:0;border-radius:4px 0 0 4px;font-size:15px;box-shadow:none;padding-left:16px}
header .input-group .form-control:focus{border-color:#bdbdbd;box-shadow:none}
header .input-group .btn{height:48px;min-width:60px;background:var(--ts-red)!important;border:1px solid var(--ts-red)!important;color:#ffffff!important;border-radius:0 4px 4px 0}
header .input-group .btn:hover{background:var(--ts-red-dark)!important;border-color:var(--ts-red-dark)!important}
#cart .btn,#cart .btn-dark{background:var(--ts-black)!important;border-color:var(--ts-black)!important;color:#ffffff!important;font-weight:700;font-size:14px;border-radius:4px;height:48px;white-space:nowrap}
#cart .btn:hover,#cart .btn-dark:hover{background:var(--ts-red)!important;border-color:var(--ts-red)!important}
#cart .dropdown-menu{border:1px solid var(--ts-line);border-radius:4px;box-shadow:0 10px 26px rgba(0,0,0,.12);padding:10px;min-width:320px}
header ul.list-inline{margin:0;display:flex;justify-content:flex-end;align-items:center;gap:22px;flex-wrap:nowrap}
header ul.list-inline .list-inline-item{margin:0}
header ul.list-inline a{color:#4a4a4a;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
header ul.list-inline a:hover{color:var(--ts-red)}
header ul.list-inline i{font-size:16px;color:var(--ts-black)}
header ul.list-inline a:hover i{color:var(--ts-red)}
nav#menu.navbar,nav#menu.navbar.bg-primary{background:#ffffff!important;border-top:1px solid var(--ts-line);border-bottom:1px solid var(--ts-line);padding:0;border-radius:0;margin-bottom:0}
nav#menu .navbar-nav{margin:0 auto;flex-wrap:wrap;justify-content:center}
nav#menu .navbar-nav>li>a,nav#menu .nav-link,nav#menu .navbar-nav>li>a.dropdown-item{color:var(--ts-black)!important;background:transparent!important;font-weight:600;font-size:15px;padding:14px 16px!important;border-bottom:3px solid transparent;width:auto}
nav#menu .navbar-nav>li>a:hover,nav#menu .nav-link:hover,nav#menu .nav-item.show>.nav-link,nav#menu .navbar-nav>li>a.dropdown-item:hover{color:var(--ts-red)!important;background:transparent!important;border-bottom-color:var(--ts-red)}
nav#menu .navbar-nav>a{display:none!important}
nav#menu .navbar-toggler{border-color:var(--ts-line);color:var(--ts-black);margin:8px 0}
nav#menu .navbar-toggler i{color:var(--ts-black)}
nav#menu #category{font-weight:700;padding:12px 0;color:var(--ts-black)}
nav#menu .dropdown-menu{border:1px solid var(--ts-line);border-top:3px solid var(--ts-red);border-radius:0;box-shadow:0 10px 26px rgba(0,0,0,.10);padding:8px 0;margin-top:0}
nav#menu .dropdown-menu .dropdown-item{font-size:14px;font-weight:500;padding:8px 18px;color:var(--ts-text)!important;border:0}
nav#menu .dropdown-menu .dropdown-item:hover{background:#f7f7f7;color:var(--ts-red)!important}
.btn{border-radius:4px;font-weight:600}
.btn-primary,.btn-primary:focus{background-color:var(--ts-red)!important;border-color:var(--ts-red)!important;color:#ffffff!important;font-weight:700}
.btn-primary:hover,.btn-primary:active{background-color:var(--ts-red-dark)!important;border-color:var(--ts-red-dark)!important}
.btn-light{background:#f2f2f2;border-color:#e4e4e4;color:var(--ts-text)}
.form-control,.form-select{border:1.5px solid #d9d9d9;border-radius:4px;min-height:46px;font-size:14px}
.form-control:focus,.form-select:focus{border-color:var(--ts-red);box-shadow:none}
.form-label,label{font-size:13px;font-weight:600}
.text-danger{color:var(--ts-red)!important}
#content h1,#content h2:not(.price),#content h3{font-weight:800;font-size:23px;letter-spacing:-.4px;margin:26px 0 18px;position:relative;padding-bottom:9px}
#content h1::after,#content h2:not(.price)::after,#content h3::after{content:"";position:absolute;left:0;bottom:0;width:52px;height:3px;background:var(--ts-red)}
.breadcrumb{background:transparent;padding:14px 0 4px;font-size:12.5px;margin-bottom:0}
.breadcrumb a{color:var(--ts-grey)}
.breadcrumb a:hover{color:var(--ts-red)}
.alert-success{background:#eef8f1;border-color:#cfe8d8;color:#14603a}
.fa-star,.fa-star-half-stroke{color:#f5a623}
#content .row[class*="row-cols"]>*:has(.product-thumb){display:flex}
.product-thumb{border:1px solid var(--ts-line);border-radius:6px;background:#ffffff;width:100%;display:flex;flex-direction:column;overflow:hidden;margin-bottom:20px;transition:box-shadow .15s ease,transform .15s ease,border-color .15s ease}
.product-thumb:hover{box-shadow:0 10px 26px rgba(0,0,0,.12);transform:translateY(-3px);border-color:#dcdcdc}
.product-thumb .image{height:208px;padding:18px;background:#ffffff;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;justify-content:center}
.product-thumb .image a{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.product-thumb .image img{object-fit:contain;max-height:172px;max-width:100%;width:auto;display:block}
.product-thumb .content{display:flex;flex-direction:column;flex:1 1 auto;padding:14px 16px 16px}
.product-thumb .description{flex:1 1 auto;display:flex;flex-direction:column}
.product-thumb h4{font-size:14px;line-height:1.4;font-weight:700;margin:0 0 8px;min-height:58px}
.product-thumb h4 a{color:var(--ts-black)}
.product-thumb h4 a:hover{color:var(--ts-red)}
.product-thumb .description p{font-size:12.5px;color:var(--ts-grey);line-height:1.55;margin:0}
.product-thumb .rating{margin-top:8px;font-size:12px}
.product-thumb .price{margin-top:auto;padding-top:12px;font-size:22px;font-weight:800;letter-spacing:-.5px;color:var(--ts-red);line-height:1.2}
.product-thumb .price-new{font-size:22px;font-weight:800;letter-spacing:-.5px;color:var(--ts-red)}
.product-thumb .price-old{font-size:14px;color:#9a9a9a;text-decoration:line-through;margin-right:8px;font-weight:600}
.product-thumb .price-tax{display:block;font-size:11.5px;color:#8a8a8a;font-weight:500;margin-top:4px;letter-spacing:0}
.product-thumb form{margin:14px 0 0}
.product-thumb .button{display:flex;gap:8px}
.product-thumb .button button{background:var(--ts-red);border:0;color:#ffffff;font-weight:700;font-size:14px;border-radius:4px;height:46px;flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 10px}
.product-thumb .button button:hover{background:var(--ts-red-dark)}
.product-thumb .button button:nth-child(2),.product-thumb .button button:nth-child(3){flex:0 0 46px;background:#ffffff;border:1px solid #e0e0e0;color:#4a4a4a}
.product-thumb .button button:nth-child(2):hover,.product-thumb .button button:nth-child(3):hover{background:#f6f6f6;color:var(--ts-red)}
.product-thumb .ts-model{background:var(--ts-soft);margin:-14px -16px 12px;padding:7px 16px;font-size:11px;font-weight:600;color:var(--ts-grey);letter-spacing:.3px}
#product .price,#product h2.price,#content #product h2{color:var(--ts-red);font-weight:800;letter-spacing:-.6px}
#content #product h2::after{display:none}
#button-cart{background:var(--ts-red);border-color:var(--ts-red);color:#ffffff;font-weight:800;font-size:16px;height:52px;padding:0 26px;border-radius:4px}
#button-cart:hover{background:var(--ts-red-dark);border-color:var(--ts-red-dark)}
.thumbnails img,#product-thumbnail img{border:1px solid var(--ts-line);border-radius:4px}
.nav-tabs{border-bottom:1px solid var(--ts-line)}
.nav-tabs .nav-link{color:var(--ts-grey);font-weight:600;border:0;padding:13px 20px}
.nav-tabs .nav-link.active{color:var(--ts-black);background:transparent;border:0;border-bottom:3px solid var(--ts-red)}
.tab-content{padding:22px 0;font-size:14.5px;line-height:1.75;color:#3d3d3d}
#product .form-check-label,#product label{font-size:13.5px}
.carousel-item img{width:100%;height:auto}
.carousel-indicators [data-bs-target]{background-color:var(--ts-red)}
.pagination .page-link{border:1px solid #dedede;color:var(--ts-text);font-weight:600;min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;margin-left:6px;border-radius:4px}
.pagination .page-item.active .page-link{background:var(--ts-red);border-color:var(--ts-red);color:#ffffff}
.list-group-item.active{background:var(--ts-red);border-color:var(--ts-red)}
footer{background:#0d0d0d;color:#b5b5b5;padding:44px 0 20px;margin-top:52px;border:0}
footer h5{color:#ffffff;text-transform:uppercase;font-size:12.5px;letter-spacing:.7px;margin-bottom:16px;font-weight:700}
footer a{color:#b5b5b5;font-size:13.5px}
footer a:hover{color:#ffffff}
footer ul{padding:0;list-style:none}
footer li{margin-bottom:10px}
footer hr{border-color:#232323;margin:28px 0 16px;opacity:1}
footer p{font-size:12.5px;color:#7d7d7d}
.ts-pay{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;align-items:center}
.ts-pay span{height:26px;padding:0 10px;border-radius:3px;background:#ffffff;color:#111111;font-size:10px;font-weight:800;display:flex;align-items:center;letter-spacing:.2px}
@media (max-width:991px){
nav#menu .navbar-nav{margin:0}
nav#menu .navbar-nav>li>a,nav#menu .nav-link,nav#menu .navbar-nav>li>a.dropdown-item{padding:12px 14px!important;border-bottom:1px solid var(--ts-line)}
#logo img{max-height:46px}
header .input-group{margin-bottom:10px}
header ul.list-inline{gap:14px;justify-content:flex-start}
nav#top .container>.row>div{text-align:center!important}
.ts-pay{justify-content:flex-start;margin-top:14px}
}
@media (max-width:575px){
.product-thumb h4{font-size:13.5px;min-height:54px}
.product-thumb .image{height:180px}
.product-thumb .price,.product-thumb .price-new{font-size:19px}
#content h1,#content h2:not(.price),#content h3{font-size:19px}
}
nav#menu .navbar-collapse{flex-grow:1}
nav#menu .navbar-nav{width:100%;margin:0;justify-content:center;flex-wrap:wrap}
nav#menu>.container-fluid{padding:0}
.product-thumb{position:relative;height:100%;border-color:var(--ts-line)}
.product-thumb .description{padding:0!important;margin-bottom:0!important}
.product-thumb .button{position:static!important;width:auto!important;bottom:auto!important;border:0!important;margin:14px 0 0!important}
.product-thumb .button button{width:auto!important;border:0!important;border-top:0!important;line-height:normal!important;background-color:var(--ts-red)!important;color:#fff!important}
.product-thumb .button button:hover{background-color:var(--ts-red-dark)!important;color:#fff!important}
.product-thumb .button button:nth-child(2),.product-thumb .button button:nth-child(3){background-color:#fff!important;border:1px solid #e0e0e0!important;color:#4a4a4a!important}
.product-thumb .button button:nth-child(2):hover,.product-thumb .button button:nth-child(3):hover{background-color:#f6f6f6!important;color:var(--ts-red)!important}
.product-thumb .button button+button{border-left:1px solid #e0e0e0!important}
nav#menu{border-left:0!important;border-right:0!important}
#content li h2{margin:0;padding:0;font-size:32px;font-weight:800;letter-spacing:-1px;color:var(--ts-red)}
#content li h2::after{display:none}
#content ul.list-unstyled{margin-bottom:14px}
#content ul.list-unstyled li{margin-bottom:4px;font-size:14px;color:#3d3d3d}
#product .form-check{margin-bottom:8px}
#product .form-check-input:checked{background-color:var(--ts-red);border-color:var(--ts-red)}
#content ul.list-unstyled li h2{font-size:30px!important;line-height:1.15}
.price-new,#content .price-new{color:var(--ts-red)!important}
.price-old,#content .price-old{color:#9a9a9a!important;text-decoration:line-through;font-weight:600;font-size:.62em;margin-right:8px}
#content li h2 .price-tax,.price-tax{color:#8a8a8a;font-weight:500;font-size:12.5px}
.ts-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:32px 0 8px}
.ts-tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:186px;border-radius:6px;overflow:hidden;background:#efeff1;padding:20px;color:var(--ts-black)}
.ts-tile:nth-child(2){background:#e7e7ea}
.ts-tile:nth-child(4){background:#1c1c1e}
.ts-tile:nth-child(4) .ts-tile-head{color:#ffffff}
.ts-tile-head{position:absolute;top:20px;left:20px;display:flex;align-items:center;gap:9px;font-size:21px;font-weight:800;letter-spacing:-.4px;z-index:2}
.ts-tile-head i{color:var(--ts-red);font-size:17px}
.ts-tile-btn{position:relative;z-index:2;align-self:flex-start;background:var(--ts-red);color:#ffffff;font-size:14px;font-weight:700;padding:0 20px;height:44px;display:inline-flex;align-items:center;gap:8px;border-radius:4px}
.ts-tile:hover .ts-tile-btn{background:var(--ts-red-dark)}
.ts-tile-art{position:absolute;right:-6px;bottom:6px;width:158px;opacity:.92;z-index:1}
@media (max-width:991px){.ts-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}nav#top .ts-usp span:nth-child(n+3){display:none}}
@media (max-width:575px){.ts-tiles{grid-template-columns:1fr}}
.ts-tile-art{width:192px;right:-16px;bottom:-8px;opacity:1}
.ts-tile{min-height:190px}
@media (max-width:575px){
.ts-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px}
.ts-tile{min-height:148px;padding:14px}
.ts-tile-head{top:14px;left:14px;font-size:16px;gap:6px}
.ts-tile-head i{font-size:13px}
.ts-tile-btn{font-size:12.5px;height:40px;padding:0 12px;gap:6px}
.ts-tile-art{width:118px;right:-12px;bottom:-6px;opacity:.55}
nav#top .ts-usp span:nth-child(n+2){display:none}
nav#top .ts-usp{font-size:12px}
#content .row[class*="row-cols"]>*:has(.product-thumb){width:50%!important;flex:0 0 auto}
.product-thumb .image{height:150px;padding:12px}
.product-thumb .image img{max-height:126px}
.product-thumb .content{padding:12px}
.product-thumb h4{font-size:12.5px;min-height:52px}
.product-thumb .description p{display:none}
.product-thumb .button button{font-size:12px;height:42px;padding:0 6px}
.product-thumb .button button:nth-child(2),.product-thumb .button button:nth-child(3){flex:0 0 42px}
}
/* ts-optiekaarten */
#product h3{font-size:18px;font-weight:700;margin:0 0 14px}
#product .form-label{font-weight:600;font-size:14px;margin-bottom:8px}
#product div[id^="input-option-"]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#product .form-check{padding:0;margin:0;min-height:0;display:block}
#product .form-check-input[type=radio],#product .form-check-input[type=checkbox]{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
#product .form-check-label:hover{border-color:var(--ts-red)}
#product .form-check-input:focus-visible+.form-check-label{outline:2px solid var(--ts-black);outline-offset:2px}
#product .form-check-label img{border-radius:4px;flex:0 0 auto}
@media (max-width:575px){#product div[id^="input-option-"]{grid-template-columns:1fr}}
#product .form-check-label{display:flex;align-items:center;gap:10px;width:100%;height:100%;min-height:54px;margin:0;padding:12px 16px;border:1px solid var(--ts-line);border-radius:8px;background:#fff;color:var(--ts-text);font-size:14px;line-height:1.35;cursor:pointer;transition:border-color .15s ease,background .15s ease}
#product .form-check-label::before{content:"";width:18px;height:18px;flex:0 0 auto;border-radius:50%;border:1px solid #c9c9c9;background:#fff}
#product .form-check-input:checked+.form-check-label{background:#fff5f4;border-color:var(--ts-red);box-shadow:inset 0 0 0 1px var(--ts-red);font-weight:600}
#product .form-check-input:checked+.form-check-label::before{border-color:var(--ts-red);background:var(--ts-red) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5,8.5 6.5,11.5 12.5,4.5'/%3E%3C/svg%3E") center/12px no-repeat}
/* ts-uitverkocht */
.ts-oos{background:#f2f2f2!important;border:1px solid var(--ts-line)!important;color:#8a8a8a!important;cursor:not-allowed;font-weight:600;opacity:1!important;border-radius:6px}
.product-thumb .ts-oos{width:auto;padding:10px 14px;font-size:13px;margin:14px 0 0}
.product-thumb .button button.ts-oos,.product-thumb .button button.ts-oos:hover{background:#f2f2f2!important;color:#8a8a8a!important;border:1px solid var(--ts-line)!important;cursor:not-allowed}
/* ts-tegels v2 + paginamarges */
.ts-tile{overflow:hidden}
.ts-tile-art{width:150px;right:16px;bottom:14px;left:auto;top:auto}
.container{padding-left:24px;padding-right:24px}
@media (max-width:991px){.ts-tile-art{width:120px;right:10px;bottom:10px}}
@media (max-width:575px){.container{padding-left:16px;padding-right:16px}.ts-tile-art{width:96px}}
.ts-tile-art{width:112px;right:14px;bottom:12px;z-index:1}
.ts-tile-head,.ts-tile-btn{z-index:2}
@media (max-width:991px){.ts-tile-art{width:100px}}
@media (max-width:575px){.ts-tile-art{width:84px;right:10px;bottom:10px}}
footer .row>*{padding-left:12px;padding-right:12px}
@media (max-width:575px){.ts-tile-art{display:none}}
/* winkelwagenknop paste binnen de container */
header #cart .btn{white-space:nowrap}
@media (min-width:768px){header .row>#cart{flex:0 0 auto;width:auto;max-width:none}header .row>.col-md-5{flex:1 1 auto;width:auto;max-width:none}}
@media (min-width:768px){header .row>.col-md-5{min-width:0}}
@media (min-width:768px) and (max-width:1199px){header #cart .btn{font-size:13px;padding:9px 12px}header #cart .btn i{margin-right:4px}}
@media (min-width:768px){header .row>.col-md-5{flex:1 1 0%}header .row{flex-wrap:nowrap}}
/* taalmenu binnen de container */
#form-language .dropdown-menu{right:0;left:auto}
#form-language .dropdown-item{color:var(--ts-text)}
#form-language .dropdown-item:hover,#form-language .dropdown-item:focus{color:var(--ts-red);background:var(--ts-soft)}
nav#top #form-language a.dropdown-item{color:var(--ts-text)!important}
nav#top #form-language a.dropdown-item:hover{color:var(--ts-red)!important;background:var(--ts-soft)}
#header-cart td{white-space:nowrap}
#header-cart td:nth-child(2){white-space:normal;min-width:180px}
#cart .dropdown-menu td{white-space:nowrap}
#cart .dropdown-menu td:nth-child(2){white-space:normal;min-width:170px}
#logo img{height:70px;width:auto;max-width:100%}
@media (max-width:575px){#logo img{height:52px}}
#logo img{height:72px!important;max-height:none!important;width:auto}
@media (max-width:575px){#logo img{height:52px!important}}
#content .breadcrumb{margin-bottom:24px}
@media (max-width:575px){#content .breadcrumb{margin-bottom:16px}}
.breadcrumb{margin-bottom:24px}
@media (max-width:575px){.breadcrumb{margin-bottom:16px}}
#content .table td.text-end,#content .table th.text-end{white-space:nowrap}
@media (min-width:768px){#content>.row:has(#form-register>p){position:relative;padding-top:2.25rem}
#form-register>p:first-child{position:absolute;top:0;left:12px;right:12px;margin:0}}
#form-register .row>*:has(>fieldset){flex:0 0 100%;width:100%;max-width:100%}
#content .carousel-item img{display:block;width:100%;height:auto;aspect-ratio:1600/500;object-fit:cover}

/* ts-footer nieuw */
footer .ts-foot h5{font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px;font-weight:700}
footer .ts-foot ul li{margin-bottom:9px}
footer .ts-foot-adres{font-style:normal;line-height:1.75;margin-bottom:14px}
footer .ts-foot-tel{display:block;font-size:20px;font-weight:700;margin-bottom:8px}
footer .ts-foot-mail{display:block}
footer .ts-foot-open li{display:flex;justify-content:space-between;gap:12px}
footer .ts-foot-pay{border-top:1px solid rgba(255,255,255,.12);padding:24px 0;text-align:center}
footer .ts-foot-pay-kop{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.65;margin-bottom:14px}
footer .ts-foot-pay .ts-pay{justify-content:center}
footer .ts-foot-slot{border-top:1px solid rgba(255,255,255,.12);padding:18px 0;display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;align-items:center;font-size:13px}
footer .ts-foot-slot .list-inline-item{margin-right:16px}
@media (max-width:575px){footer .ts-foot-slot{justify-content:center;text-align:center}footer .ts-foot-tel{font-size:18px}}
footer .ts-foot-levering{margin-top:16px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px}
footer .ts-foot-levering::before{content:"";width:8px;height:8px;border-radius:50%;background:#2ecc71;flex:0 0 auto}
footer .ts-foot-zakelijk span{margin-right:18px;white-space:nowrap}
footer .ts-foot-zakelijk strong{font-weight:700}
footer .ts-foot-copy{text-align:center;padding:0 0 20px;font-size:13px;opacity:.65}

/* ===========================================================================
   13-09-2026 - horizontale schuifbalk op mobiel opgelost

   Op een scherm van 375 px was de pagina 385 px breed, waardoor de hele site
   zijwaarts meeschoof. Twee oorzaken, allebei hieronder aangepakt. Dit blok
   staat bewust onderaan: style.css wordt als laatste ingeladen, dus deze
   regels winnen van wat er eerder staat. De oorspronkelijke regels zijn niet
   aangeraakt, zodat er op desktop niets verandert.
   =========================================================================== */

/* 1. De meldingenbalk (#alert, o.a. "toegevoegd aan uw winkelwagen").
      In stylesheet.css staat: width:400px met left:50% en margin-left:-200px.
      Op een scherm van 375 px is dat 400 px breed - breder dan het scherm -
      en steekt hij er aan beide kanten uit. Op telefoonformaat zetten we hem
      daarom van rand tot rand met 16 px marge; de vaste breedte en de
      negatieve marge worden dan niet meer gebruikt. Vanaf 576 px blijft
      alles precies zoals het was. */
@media (max-width: 575px) {
  #alert {
    left: 16px;
    right: 16px;
    width: auto;
    margin-left: 0;
  }
}

/* 2. Het balkje met KvK-, btw- en BE-nummer onderaan (.ts-foot-zakelijk).
      De drie nummers stonden als losse spans achter elkaar met
      white-space:nowrap en 18 px tussenruimte. Samen zijn ze 393 px breed,
      en omdat het geheel een flex-item is dat niet mocht krimpen, liep het
      aan beide kanten buiten beeld.

      Nu is het zelf een flex-regel die mag afbreken: de nummers blijven
      onderling heel (je wilt NL002231868B21 niet halverwege afgekapt zien),
      maar ze zakken netjes naar een volgende regel als het niet past.
      min-width:0 is nodig om het item uberhaupt te laten krimpen. */
footer .ts-foot-zakelijk {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 18px;
  min-width: 0;
}

footer .ts-foot-zakelijk span {
  margin-right: 0;
}

@media (max-width: 575px) {
  footer .ts-foot-zakelijk {
    justify-content: center;
  }
}

/* ===========================================================================
   13-09-2026 - USP-balk: op mobiel alle vier de argumenten tonen

   Situatie vooraf: de balk bovenaan heeft vier argumenten, maar onder 992 px
   werden nummer 3 en 4 verborgen met display:none, en nummer 2 paste er
   simpelweg niet meer bij. Op een telefoon zag de bezoeker dus alleen
   "Gratis verzending" - juist garantie en retourrecht, de twee dingen die
   twijfel wegnemen, bleven onzichtbaar.

   Waarom om beurten en niet alle vier tegelijk: samen vragen de vier
   argumenten ongeveer 890 px, en op een scherm van 375 px is daar 343 px
   voor. Alle vier tegelijk zou betekenen dat de teksten fors ingekort worden
   of dat de balk drie regels hoog wordt, en de mobiele koptekst is al hoog.
   Nu wisselen ze elkaar af op een regel: elk argument staat ruim drie
   seconden in beeld, de hele ronde duurt veertien seconden.

   Alleen CSS - aan de opmaak in header.twig is niets veranderd.
   =========================================================================== */

@media (max-width: 991px) {

  /* De balk wordt een vast vak van een regel hoog waarin de argumenten over
     elkaar heen liggen. overflow:hidden vangt een enkel lang argument af.

     40 px is de hoogte die de balk al had (gemeten: 41 px). De padding van
     9 px staat als inline-stijl in header.twig en moet eruit, anders telt
     box-sizing:border-box hem binnen die 40 px mee en wordt de balk krap.
     De regelhoogte hieronder is gelijk aan deze hoogte, zodat de tekst
     precies in het midden van de zwarte balk staat. */
  nav#top .ts-usp {
    position: relative;
    height: 40px;
    padding: 0 !important;
    overflow: hidden;
  }

  /* :nth-child(n) staat hier met opzet. De regel die 3 en 4 verbergt is
     nav#top .ts-usp span:nth-child(n+3); zonder die pseudo-klasse weegt deze
     regel lichter en blijven argument 3 en 4 verborgen. Met :nth-child(n)
     zijn ze even zwaar en wint deze, omdat hij later staat.
     margin heeft !important nodig: in header.twig staat de marge als
     inline-stijl op de spans, en die wint van een gewone regel. */
  nav#top .ts-usp span:nth-child(n) {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 0 !important;
    line-height: 40px;
    white-space: nowrap;
    opacity: 0;
    animation: tsUspWissel 14s infinite;
  }

  nav#top .ts-usp span:nth-child(1) { animation-delay: 0s; }
  nav#top .ts-usp span:nth-child(2) { animation-delay: 3.5s; }
  nav#top .ts-usp span:nth-child(3) { animation-delay: 7s; }
  nav#top .ts-usp span:nth-child(4) { animation-delay: 10.5s; }
}

@keyframes tsUspWissel {
  0%        { opacity: 0; }
  2%, 23%   { opacity: 1; }
  25%, 100% { opacity: 0; }
}

/* Bezoekers die in hun systeem hebben aangegeven bewegende beelden te willen
   beperken, krijgen geen wisselende balk. Voor hen staan de vier argumenten
   gewoon naast elkaar op een regel die je opzij kunt vegen - alle vier dus
   nog steeds bereikbaar, alleen zonder beweging. */
@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
  nav#top .ts-usp {
    height: auto;
    padding: 9px 0 !important;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
  }

  nav#top .ts-usp::-webkit-scrollbar { display: none; }

  nav#top .ts-usp span:nth-child(n) {
    position: static;
    display: inline-block;
    opacity: 1;
    animation: none;
    margin: 0 12px !important;
  }
}

/* ===========================================================================
   V3 - mobiel: aanraakvlakken, leesbare tekstgrootte en de kruimelbalk
   Toegevoegd 13-09-2026. Alles hieronder staat in een media query en raakt
   het beeld op een computerscherm dus niet aan.
   =========================================================================== */

/* De kruimelbalk stond op white-space:nowrap. Bij een productnaam van zeventig
   tekens werd die regel 571 pixels breed en schoof de HELE pagina mee: op een
   telefoon van 390 pixels liep de productpagina door tot 639 pixels, met
   horizontaal schuiven als gevolg. De naam mag hier gewoon afbreken. */
@media (max-width:767px){
  .breadcrumb{min-width:0}
  .breadcrumb-item,
  .breadcrumb-item a{white-space:normal;overflow-wrap:anywhere;min-width:0}
}

/* Aanraakvlakken in de voettekst. De links waren 16 pixels hoog; Google houdt
   24 pixels aan als ondergrens en Apple 44. Met wat ruimte boven en onder komt
   er een raakvlak van 28 pixels omheen, zonder dat de kolom er anders uitziet:
   de regelafstand doet het werk, niet een groter lettertype. */
@media (max-width:991px){
  footer .ts-foot ul.list-unstyled li{margin-bottom:2px}
  footer .ts-foot ul.list-unstyled li a{display:inline-block;padding:6px 0;line-height:1.35}
}

/* Tekst kleiner dan 12 pixels leest op een telefoon niet prettig en Google
   merkt het aan als 'lettertype te klein'. Deze onderdelen stonden op 10 tot
   11,8 pixels. Alleen op telefoonformaat aangepast - op een breed scherm is
   de kleine letter juist rustig. */
@media (max-width:575px){
  .product-thumb .ts-model{font-size:12px}
  .product-thumb .price-tax,
  #content li h2 .price-tax,
  .price-tax{font-size:12px}
  .price-old,#content .price-old{font-size:12px}
  /* Deze twee staan in een <style>-blok IN de pagina, en dat blok komt na dit
     bestand. Bij gelijk gewicht wint dan de laatste, dus hier is !important
     nodig - anders blijft de regel zonder zichtbaar gevolg staan. */
  .thk-ps-cond,.thk-ps-korting{font-size:12px!important}
  .vi-info{font-size:12px!important}
  footer .ts-foot-pay-kop{font-size:12px}
  footer .ts-pay span{font-size:11px}
}

/* ts-methodekaarten (afrekenen)
   ===========================================================================
   De verzend- en betaalmethoden staan sinds kort als radioknoppen op de
   afrekenpagina. Ze krijgen hier dezelfde kaartvorm als de productopties,
   zodat de winkel er consequent uitziet: de knop zelf is verborgen, het
   label is de kaart en tekent zijn eigen rondje ervoor.

   Dit lost meteen een zichtbare fout op. Een .form-check van Bootstrap heeft
   padding-left:1.5em en trekt de knop met margin-left:-1.5em naar links. Zet
   je daar een kader en padding omheen, dan valt de knop veertien pixels
   BUITEN dat kader - precies wat er op de afrekenpagina te zien was.
   =========================================================================== */
#shipping-method-list .form-check,
#payment-method-list .form-check{padding:0;margin:0 0 10px;min-height:0;display:block}
#shipping-method-list .form-check:last-child,
#payment-method-list .form-check:last-child{margin-bottom:0}
#shipping-method-list .form-check-input,
#payment-method-list .form-check-input{position:absolute;opacity:0;width:0;height:0;border:0;margin:0;padding:0;pointer-events:none}
#shipping-method-list .form-check-label,
#payment-method-list .form-check-label{display:flex;align-items:center;gap:10px;width:100%;min-height:54px;margin:0;padding:12px 16px;border:1px solid var(--ts-line);border-radius:8px;background:#fff;color:var(--ts-text);font-size:14px;line-height:1.35;cursor:pointer;transition:border-color .15s ease,background .15s ease}
#shipping-method-list .form-check-label::before,
#payment-method-list .form-check-label::before{content:"";width:18px;height:18px;flex:0 0 auto;border-radius:50%;border:1px solid #c9c9c9;background:#fff}
#shipping-method-list .form-check-label:hover,
#payment-method-list .form-check-label:hover{border-color:var(--ts-red)}
#shipping-method-list .form-check-input:focus-visible+.form-check-label,
#payment-method-list .form-check-input:focus-visible+.form-check-label{outline:2px solid var(--ts-black);outline-offset:2px}
#shipping-method-list .form-check-input:checked+.form-check-label,
#payment-method-list .form-check-input:checked+.form-check-label{background:#fff5f4;border-color:var(--ts-red);box-shadow:inset 0 0 0 1px var(--ts-red);font-weight:600}
#shipping-method-list .form-check-input:checked+.form-check-label::before,
#payment-method-list .form-check-input:checked+.form-check-label::before{border-color:var(--ts-red);background:var(--ts-red) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5,8.5 6.5,11.5 12.5,4.5'/%3E%3C/svg%3E") center/12px no-repeat}
/* Naam links, tarief rechts. De naam mag afbreken, het bedrag nooit: anders
   valt "EUR 9,08" op een smal scherm over twee regels uiteen. */
#shipping-method-list .ts-methode-naam,
#payment-method-list .ts-methode-naam{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:10px}
#shipping-method-list .ts-methode-prijs{flex:0 0 auto;margin-left:auto;white-space:nowrap}
#payment-method-list .form-check-label img{border-radius:4px;flex:0 0 auto}

/* De kopjes van de blokken stonden op 24px in een lichte snit, terwijl de
   paginatitel "Afrekenen" erboven 23px vet is. Het kopje van een blok was
   daarmee groter dan de titel van de pagina. Zelfde maat als de kopjes op
   de productpagina: 18px vet. De streep eronder blijft. */
#checkout-checkout legend{font-size:18px;font-weight:700}

/* De grijze toelichting onder de methoden mag niet even zwaar wegen als de
   keuzes zelf. */
#shipping-method-note,#payment-method-note{margin-top:8px;color:var(--ts-grey)}

/* De regel "Veilige betalingen geleverd door mollie" onder het
   besteloverzicht staat als los kind in een Bootstrap-row, en krijgt daar
   uit een <style>-blok van de Mollie-uitbreiding nog 7 pixels marge
   bovenop. Op een telefoon van 375 pixels liep de afrekenpagina daardoor
   door tot 378 en kon je horizontaal schuiven. Het blok van Mollie staat
   IN de pagina en komt dus na dit bestand; de selector hieronder wint op
   gewicht, zodat !important niet nodig is. */
#checkout-checkout .mollie-text{margin-left:0;max-width:100%}

/* ts-usp balk op desktop
   ===========================================================================
   De vier argumenten stonden als losse spans in een kolom van col-md-8. Elke
   span had 14 pixels marge aan weerszijden, wat met de spaties ertussen op
   932 pixels uitkwam in een balk van 864. Het vierde argument paste er dus
   niet bij en brak af op het koppelteken: "De Lenovo-" op de eerste regel en
   "specialist van NL" op de tweede. De zwarte balk werd daardoor twee regels
   hoog.

   Drie dingen lossen dat op:

   1. De balk wordt een flexrij. Daarmee vervallen de spaties tussen de spans
      en verdeelt space-between de ruimte gelijkmatig.
   2. white-space:nowrap op elk argument. Moet een argument ooit toch zakken,
      dan zakt het in zijn geheel en breekt de tekst niet meer middenin een
      woord. De marge moet met !important weg, want die staat als inline-stijl
      op de spans in header.twig.
   3. De taalkolom krimpt naar wat hij werkelijk nodig heeft (99 px in plaats
      van 432) en de balk krijgt de rest. Dat scheelt ruim 300 pixels, zodat
      de regel ook op smallere schermen heel blijft.

   Alleen vanaf 992 pixels. Daaronder staat hierboven al een balk die de
   argumenten om beurten laat zien; die blijft ongemoeid.
   =========================================================================== */
@media (min-width:992px){
  nav#top .ts-usp{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:16px;row-gap:4px;flex:1 1 auto;width:auto;max-width:none;margin-right:32px}
  nav#top .ts-usp > span{white-space:nowrap;margin:0 !important}
  nav#top .ts-usp + [class*="col-"]{flex:0 0 auto;width:auto;max-width:none}
}

/* ts-usp balk op de tussenmaat: 992 tot 1199 pixels
   ===========================================================================
   Nagemeten op een laptopscherm van 992 px breed. De vier argumenten samen
   zijn daar 808 px tekst; met drie tussenruimten, 32 px lucht en de taalkolom
   van 99 px komt dat op 987 px, terwijl de balk er maar 953 heeft. De
   taalkolom zakte dus naar een tweede regel en de balk werd weer 81 px hoog
   in plaats van 41.

   Een punt kleiner is genoeg: 12 px maakt de tekst samen 746 px, en dan
   blijft er 32 px over tussen het laatste argument en "Taal". Geen argument
   hoeft te verdwijnen. Vanaf 1200 px is er ruimte zat en blijft 13 px staan.
   =========================================================================== */
@media (min-width:992px) and (max-width:1199.98px){
  nav#top .ts-usp > span{font-size:12px}
}

/* Kop op de telefoon: van vijf regels naar drie
   ===========================================================================
   Onder 768 px stond de kop op een telefoon zo:

     1  zwarte balk met het argument            }  nav#top, samen 80 px
     2  taalkeuze                               }
     3  logo                                    }
     4  zoekveld                                }  header, samen 245 px
     5  winkelwagen over de volle breedte       }
     6  icoontjes account en verlanglijst       }
     7  "Categorieen" met hamburgerknop            nav#menu, 66 px

   Samen 391 px voordat de klant het eerste product zag. Het logo en het
   zoekveld blijven zoals ze waren; de rest gaat samen:

     - de taalkeuze schuift naast het argument in de zwarte balk
     - categorieknop, icoontjes en winkelwagen komen op een regel
     - de winkelwagen wordt een icoontje met het aantal in een rood bolletje
     - de regel "Categorieen" in de balk eronder vervalt; die knop staat nu
       in de kop (zie de toelichting in common/header.twig)

   Onder 375 px vervalt ook het woord "Categorieen" naast de hamburger,
   anders past de regel niet op de smalste telefoons.

   Alles hieronder geldt alleen onder 768 px. Op de tablet en de computer
   verandert er niets: daar staat de kop al op een regel.
   =========================================================================== */
@media (max-width:767.98px){

  /* 1. zwarte balk: argument en taalkeuze naast elkaar */
  nav#top .container>.row{flex-wrap:nowrap;align-items:center}
  nav#top .ts-usp{flex:1 1 auto;width:auto;max-width:none}
  nav#top .ts-usp+[class*="col-"]{flex:0 0 auto;width:auto;max-width:none;padding-left:0}
  nav#top .ts-usp+[class*="col-"] ul.list-inline{margin:0;display:flex;justify-content:flex-end;align-items:center}
  nav#top .ts-usp+[class*="col-"] ul.list-inline li{margin:0}

  /* 2. de kop wordt drie regels: logo, zoekveld, knoppen */
  header>.container>.row{flex-wrap:wrap;align-items:center;padding-bottom:12px}
  header>.container>.row>.col-md-2:not(#cart){order:1;flex:0 0 100%;width:100%}
  header>.container>.row>.col-md-5{order:2;flex:0 0 100%;width:100%}
  header .ts-mob-menu{order:3;flex:0 0 auto;width:auto;margin-right:auto}
  header>.container>.row>.col-md-3{order:4;flex:0 0 auto;width:auto}
  header>.container>.row>#cart{order:5;flex:0 0 auto;width:auto;margin-bottom:0!important}
  /* dezelfde 12 px als bij de andere kolommen, zodat de knoppenregel links
     en rechts precies onder het zoekveld uitkomt */
  header .ts-mob-menu,header>.container>.row>.col-md-3,header>.container>.row>#cart{padding-left:12px;padding-right:12px}
  header .input-group{margin-bottom:0}

  /* 3. de categorieknop */
  header .ts-mob-menu .btn{height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 14px;font-size:14px;font-weight:700;border-radius:4px;background:var(--ts-black);border-color:var(--ts-black);color:#fff;white-space:nowrap}
  header .ts-mob-menu .btn:hover,header .ts-mob-menu .btn:focus{background:var(--ts-red);border-color:var(--ts-red);color:#fff}

  /* 4. account en verlanglijst als icoontjes van 44 bij 44 px: groot genoeg
        om met een vinger te raken. De pijltjes eronder vervallen; er is geen
        ruimte voor en het icoontje spreekt voor zich. */
  header>.container>.row>.col-md-3 ul.list-inline{margin:0;gap:2px;display:flex;align-items:center}
  header>.container>.row>.col-md-3 ul.list-inline li{margin:0}
  header>.container>.row>.col-md-3 a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;font-size:18px;color:var(--ts-black)}
  header>.container>.row>.col-md-3 a .fa-caret-down{display:none}
  header>.container>.row>.col-md-3 a.dropdown-toggle::after{display:none}

  /* 5. de winkelwagen als icoontje met het aantal in een rood bolletje.
        Let op de selector: alleen de knop van de winkelwagen zelf, niet de
        verwijderknopjes binnenin de uitklap - die houden hun eigen maat. */
  header #cart .dropdown.d-grid{display:block!important}
  header #cart>.dropdown>.btn.dropdown-toggle{width:44px;height:44px;padding:0;font-size:0!important;position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;overflow:visible}
  header #cart>.dropdown>.btn.dropdown-toggle::after{display:none}
  header #cart>.dropdown>.btn.dropdown-toggle i{font-size:18px;margin:0}
  header #cart>.dropdown>.btn.dropdown-toggle[data-ts-aantal]::before{content:attr(data-ts-aantal);position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--ts-red);color:#fff;font-size:11px;font-weight:700;line-height:19px;text-align:center}

  /* 6. de uitklap van de winkelwagen paste niet op een telefoon: de tabel
        erin was 451 px breed op een scherm van 375. Vaste kolombreedtes en
        de specificatieregels weg, dan past hij. */
  header #cart .dropdown-menu{min-width:0;width:calc(100vw - 32px);max-width:calc(100vw - 32px);padding:8px}
  header #cart .dropdown-menu table{width:100%;table-layout:fixed;margin-bottom:8px}
  header #cart .dropdown-menu td{padding:6px 4px;font-size:12.5px;white-space:normal;vertical-align:top}
  header #cart .dropdown-menu td:first-child{width:52px}
  header #cart .dropdown-menu td:first-child img{width:44px;height:auto}
  header #cart .dropdown-menu td:nth-child(2){min-width:0}
  header #cart .dropdown-menu td:nth-child(2) ul{display:none}
  header #cart .dropdown-menu td:nth-child(3){width:30px;text-align:center;white-space:nowrap}
  header #cart .dropdown-menu td:nth-child(4){width:62px;white-space:nowrap}
  header #cart .dropdown-menu td:nth-child(5){width:46px}
  header #cart .dropdown-menu .btn{width:auto;height:auto;padding:5px 8px;font-size:13px}
  header #cart .dropdown-menu .table-sm td{width:auto}
  header #cart .dropdown-menu p a{font-size:13px}

  /* 7. de regel "Categorieen" in de balk eronder vervalt. De balk zelf blijft
        staan - het menu zit erin en klapt op dezelfde plek open als altijd. */
  nav#menu{min-height:0!important;padding:0!important;border-top:0!important;border-bottom:0!important}
  nav#menu>#category,nav#menu>.navbar-toggler{display:none!important}
  nav#menu .navbar-collapse.show,nav#menu .navbar-collapse.collapsing{border-top:1px solid var(--ts-line);border-bottom:1px solid var(--ts-line)}
}

/* Op de smalste telefoons (onder 375 px) past het woord naast de hamburger
   er niet bij; dan blijft alleen het icoontje over. */
@media (max-width:374.98px){
  header .ts-mob-menu .btn span{display:none}
  header .ts-mob-menu .btn{width:44px;padding:0;gap:0;justify-content:center}
}

/* Logo naast de hamburger (telefoon)
   ===========================================================================
   Vervolg op het blok hierboven. Daar stond het logo nog op een eigen regel
   van 66 px. Nu staat het naast de hamburger, zoals bij ibo-computers:

     [hamburger] [logo] ................ [account] [verlanglijst] [wagen]
     [ zoekveld over de volle breedte                                   ]

   Het woord "Categorieen" naast de hamburger vervalt daarmee overal op de
   telefoon; naast het logo is er geen ruimte voor, en het icoontje is
   inmiddels bekend genoeg.

   De kop wordt zo 168 px in plaats van 260 px, en 391 px voor we begonnen.
   Boven 768 px verandert er niets.
   =========================================================================== */
@media (max-width:767.98px){
  header .ts-mob-menu{order:1;margin-right:0}
  header>.container>.row>.col-md-2:not(#cart){order:2;flex:0 0 auto;width:auto;padding-left:4px;padding-right:0}
  header>.container>.row>.col-md-3{order:3;margin-left:auto}
  header>.container>.row>#cart{order:4}
  header>.container>.row>.col-md-5{order:5;flex:0 0 100%;width:100%;margin-top:10px}

  header #logo{display:flex;align-items:center;margin:0}
  header #logo img{height:46px!important;width:auto}

  header .ts-mob-menu .btn span{display:none}
  header .ts-mob-menu .btn{width:44px;padding:0;gap:0;justify-content:center}

  /* de kop zelf wat strakker, nu er nog maar twee regels in staan */
  header{padding-top:12px;padding-bottom:10px}
  header .col-md-5 form.input-group{margin-bottom:0!important}
  header>.container>.row{padding-bottom:0}
}

/* Op de smalste telefoons (onder 375 px) past de regel alleen met een
   kleiner logo en minder lucht tussen de knoppen. */
@media (max-width:374.98px){
  header #logo img{height:38px!important}
  header .ts-mob-menu,header>.container>.row>.col-md-3,header>.container>.row>#cart{padding-left:6px;padding-right:6px}
  header>.container>.row>.col-md-2:not(#cart){padding-left:2px}
}

/* Categoriemenu zweeft over de pagina (telefoon)
   ===========================================================================
   Het menu was een uitklap in de pagina zelf: ging het open, dan schoof de
   hele winkel 314 px naar beneden, en bij het sluiten weer terug. De
   winkelwagen doet dat niet - die legt zijn paneel over de pagina heen.

   Nu doet het menu hetzelfde. Het paneel staat los (position:absolute) en
   valt over de inhoud; wat eronder staat blijft op zijn plaats.

   Het paneel wordt nooit hoger dan het scherm: is er meer in te zien dan
   past - bijvoorbeeld als iemand Laptops openklapt, dan is het 843 px - dan
   schuift het paneel zelf, niet de pagina.
   =========================================================================== */
@media (max-width:767.98px){
  nav#menu{position:relative;z-index:1030}
  nav#menu .navbar-collapse{position:absolute;top:0;left:0;right:0;background:#fff;border-radius:4px;box-shadow:0 12px 28px rgba(0,0,0,.16);max-height:calc(100vh - 190px);overflow-y:auto}
  nav#menu .navbar-collapse.show,nav#menu .navbar-collapse.collapsing{border:1px solid var(--ts-line)}
}

/* Winkelwagen bekijken / Afrekenen als echte knoppen
   ===========================================================================
   Onderin de uitklap van de winkelwagen stonden twee gewone tekstlinkjes,
   rechts uitgelijnd en met drie vaste spaties ertussen. Ze zagen er niet uit
   als iets om op te drukken, terwijl het de twee belangrijkste stappen van
   de hele winkel zijn.

   Nu zijn het knoppen, met de rolverdeling erin: afrekenen is rood (dat is
   wat u wilt dat er gebeurt), de winkelwagen bekijken is een omlijnde knop
   (de rustige tweede keuze). Op de telefoon staan ze onder elkaar over de
   volle breedte, vanaf 768 px naast elkaar en even breed.

   De font-size:0 op de alinea is geen fout: daarmee vallen de drie vaste
   spaties tussen de twee links weg, zodat de tussenruimte van de knoppen
   zelf klopt. De knoppen krijgen hun eigen lettergrootte terug.
   =========================================================================== */
#cart .dropdown-menu p.text-end{display:flex;flex-direction:column;gap:8px;margin:6px 0 2px;font-size:0;text-align:center}
#cart .dropdown-menu p.text-end a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 14px;border-radius:4px;font-size:14px;font-weight:700;line-height:1.2;text-decoration:none;white-space:nowrap}
#cart .dropdown-menu p.text-end a:first-of-type{background:#fff;color:var(--ts-black);border:1px solid var(--ts-black)}
#cart .dropdown-menu p.text-end a:first-of-type:hover{background:var(--ts-black);color:#fff}
#cart .dropdown-menu p.text-end a:last-of-type{background:var(--ts-red);color:#fff;border:1px solid var(--ts-red)}
#cart .dropdown-menu p.text-end a:last-of-type:hover{background:var(--ts-red-dark);border-color:var(--ts-red-dark);color:#fff}
#cart .dropdown-menu p.text-end a strong{font-weight:700;display:inline-flex;align-items:center;gap:8px}
@media (min-width:768px){
  #cart .dropdown-menu p.text-end{flex-direction:row}
  #cart .dropdown-menu p.text-end a{flex:1 1 0}
}

/* Productpagina: prijsblok, koopknop en de foto's op de telefoon
   ===========================================================================

   1. DE VAN-PRIJS WERD IN 8,68 PIXELS AFGEDRUKT

   In dit bestand stond al:

       .price-old, #content .price-old { ... font-size: 0.62em; ... }

   0,62em werkt in de productkaartjes, want daar staat de van-prijs naast een
   grote prijs. Op de productpagina staat hij in een eigen <li> van 14 px, en
   0,62 x 14 = 8,68 px. Nagemeten in de browser: de "van EUR 999,00" stond er
   in acht-en-een-halve punt, grijs, 30 px boven de echte prijs. Vrijwel
   onzichtbaar, terwijl dat juist het bedrag is dat de korting verkoopt.

   De maten staan nu vast in pixels, en de twee bedragen staan naast elkaar
   op een regel:

       EUR 899,00   EUR 999,00        <- doorgestreept, 18 px
       Excl. btw: EUR 742,98

   De volgorde in de opmaak van OpenCart is oude prijs, nieuwe prijs, btw. Met
   order: 1/2/3 draait de opmaak dat om zonder dat er een sjabloon aan te pas
   komt. Kan de browser :has() niet, dan blijven de bedragen onder elkaar
   staan maar hebben ze wel de goede maat - de regels met de lettergroottes
   staan daarom los van de indeling.

   2. HET AANTAL-VELD WAS BREDER DAN DE KOOPKNOP

   Gemeten op 1440 px: het invoerveld voor het aantal was 368 px breed, de
   knop 190 px. Nu is het veld 74 px en krijgt de knop de rest.

   3. OP DE TELEFOON STOND DE PRIJS PAS NA 1.183 PIXELS

   De foto was 343 px hoog en de zes miniaturen stonden eronder in twee rijen
   van drie. Samen 527 px, waardoor de titel pas op 825 px begon en de prijs
   op 1.183 px - anderhalf scherm naar beneden.

   De foto is nu hoogstens 260 px en de miniaturen staan op een regel die
   opzij schuift. Gemeten na de wijziging:

       titel   825 -> 644 px
       prijs  1183 -> 951 px
       knop   1360 -> 1114 px

   Dat is 246 px gewonnen; de titel staat daarmee op het eerste scherm.
   =========================================================================== */

/* maten: werken ook zonder :has() */
#content .price-new{font-size:32px;font-weight:800;color:var(--ts-red);line-height:1.1}
#content .price-old{font-size:18px;font-weight:600;color:#9a9a9a;text-decoration:line-through;margin:0}

/* indeling: prijs, van-prijs, en daaronder de btw-regel */
#content ul.list-unstyled:has(.price-new){display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;margin:10px 0 18px}
#content ul.list-unstyled:has(.price-new) li{margin:0}
#content ul.list-unstyled:has(.price-new) li:has(.price-new){order:1}
#content ul.list-unstyled:has(.price-new) li:has(.price-old){order:2}
#content ul.list-unstyled:has(.price-new) li:not(:has(.price-new)):not(:has(.price-old)){order:3;flex:0 0 100%;font-size:13px;color:#6b7280;margin-top:2px}
#content ul.list-unstyled:has(.price-new) h2{margin:0;font-size:inherit;line-height:1.1}

/* koopregel */
#content .input-group input[name="quantity"]{flex:0 0 74px;width:74px;text-align:center}
#content .input-group #button-cart{flex:1 1 auto}

/* foto's op de telefoon */
@media (max-width:767.98px){
  #content .magnific-popup > a > img.img-thumbnail{max-height:260px;width:auto;margin:0 auto 10px;display:block}
  #content .magnific-popup > div{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  #content .magnific-popup > div > a{flex:0 0 auto}
  #content .magnific-popup > div > a img{height:64px;width:auto}
}

/* =========================================================================
   SEO-blok onder aan de homepagina (thk_home_seo.twig)
   Hier staat sinds de audit ook de H1 van de homepagina.
   ========================================================================= */
.thk-seo{background:var(--ts-soft);border:1px solid var(--ts-line);border-radius:6px;padding:34px 34px 30px;margin:46px 0 0}
#content .thk-seo h1{margin-top:0;margin-bottom:16px}
.thk-seo-lead{max-width:920px;font-size:16px;line-height:1.75;color:#3a3a3a;margin:0 0 28px}

.thk-seo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:30px 34px}
#content .thk-seo h2{font-size:16px;font-weight:800;letter-spacing:-.2px;margin:0 0 10px;padding-bottom:0}
#content .thk-seo h2::after{content:none}
#content .thk-seo .thk-seo-col h2 + p{margin-top:0}
.thk-seo-col p{font-size:14px;line-height:1.75;color:#4a4a4a;margin:0 0 12px}
.thk-seo-col h2:not(:first-child){margin-top:26px}

.thk-seo-list{list-style:none;margin:0 0 14px;padding:0}
.thk-seo-list li{position:relative;padding-left:15px;font-size:14px;line-height:1.7;color:#4a4a4a;margin-bottom:7px}
.thk-seo-list li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--ts-red)}
.thk-seo-list strong{color:var(--ts-black);font-weight:800}

.thk-seo-links{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.thk-seo-links a{display:inline-block;background:#fff;border:1px solid var(--ts-line);border-radius:4px;padding:7px 13px;font-size:13px;font-weight:700;color:var(--ts-black);transition:border-color .15s,color .15s}
.thk-seo-links a:hover{border-color:var(--ts-red);color:var(--ts-red)}

#content .thk-seo h2.thk-seo-faq-kop{margin:34px 0 6px;font-size:16px}
.thk-seo-faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:0 40px}
.thk-seo-faq details{border-bottom:1px solid var(--ts-line)}
.thk-seo-faq summary{list-style:none;cursor:pointer;padding:13px 26px 13px 0;font-size:14px;font-weight:700;color:var(--ts-black);position:relative}
.thk-seo-faq summary::-webkit-details-marker{display:none}
.thk-seo-faq summary::after{content:"";position:absolute;right:4px;top:50%;width:9px;height:9px;margin-top:-6px;border-right:2px solid var(--ts-grey);border-bottom:2px solid var(--ts-grey);transform:rotate(45deg);transition:transform .15s}
.thk-seo-faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.thk-seo-faq summary:hover{color:var(--ts-red)}
.thk-seo-faq-a p{font-size:14px;line-height:1.75;color:#4a4a4a;margin:0 0 14px}

@media (max-width:767.98px){
  .thk-seo{padding:22px 18px 18px;margin-top:34px;border-radius:0;border-left:0;border-right:0;margin-left:-12px;margin-right:-12px}
  .thk-seo-lead{font-size:15px;margin-bottom:22px}
  .thk-seo-grid{gap:24px}
}

/* =========================================================================
   Categoriepagina: kopblok, filterkolom, productraster
   (catalog/view/template/product/category.twig)
   ========================================================================= */

/* --- kopblok ------------------------------------------------------------ */
.thk-kop{
  background:linear-gradient(103deg,#0f0f0f 0%,#1c1c1c 58%,#2a1210 100%);
  color:#fff;border-radius:6px;padding:30px 32px;margin:4px 0 0;
  display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  position:relative;overflow:hidden;
}
.thk-kop::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ts-red)}
.thk-kop-tekst{flex:1 1 420px;min-width:0}
.thk-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:#ff6a60;margin-bottom:9px}
#content .thk-kop h2{font-size:30px;font-weight:800;letter-spacing:-.7px;line-height:1.12;color:#fff;margin:0;padding:0}
#content .thk-kop h2::after{content:none}
.thk-kop p{margin:10px 0 0;color:#c9c9c9;font-size:15px;line-height:1.6;max-width:62ch}
.thk-usps{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.thk-usp{
  display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:7px 14px;
  font-size:12.5px;font-weight:600;color:#e8e8e8;
}
.thk-usp::before{content:"";width:6px;height:6px;border-radius:50%;background:#7bd88f;flex:none}
.thk-telling{
  flex:0 0 auto;text-align:center;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:20px 30px;min-width:150px;
}
.thk-telling b{display:block;font-size:42px;font-weight:800;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.thk-telling span{display:block;margin-top:7px;font-size:12px;color:#bdbdbd;letter-spacing:.3px}

/* --- subcategorieen ----------------------------------------------------- */
.thk-subs{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}
.thk-sub{
  display:inline-flex;align-items:baseline;gap:7px;border:1px solid var(--ts-line);
  background:#fff;border-radius:999px;padding:9px 17px;font-size:13.5px;font-weight:700;
  color:var(--ts-black);transition:border-color .15s,color .15s;
}
.thk-sub:hover{border-color:var(--ts-red);color:var(--ts-red)}

/* --- twee kolommen ------------------------------------------------------ */
.thk-kolommen{display:grid;grid-template-columns:272px minmax(0,1fr);gap:28px;margin-top:26px;align-items:start}
@media (max-width:991.98px){.thk-kolommen{grid-template-columns:minmax(0,1fr)}}

/* --- filterkolom -------------------------------------------------------- */
.thk-rail{position:sticky;top:12px}
@media (max-width:991.98px){.thk-rail{position:static}}
.thk-rail-kop{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
#content .thk-rail-kop h3{font-size:15px;font-weight:800;margin:0;padding:0}
#content .thk-rail-kop h3::after{content:none}
.thk-wis{font-size:12px;font-weight:600;color:var(--ts-red)}
.thk-wis:hover{text-decoration:underline;color:var(--ts-red)}

.thk-gekozen{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.thk-chip{
  display:inline-flex;align-items:center;gap:6px;background:var(--ts-soft);
  border:1px solid var(--ts-line);border-radius:4px;padding:5px 8px;font-size:12px;font-weight:600;
}
.thk-chip span{color:var(--ts-grey);font-size:14px;line-height:1}
.thk-chip:hover{border-color:var(--ts-red);color:var(--ts-red)}
.thk-chip:hover span{color:var(--ts-red)}

.thk-groep{border:1px solid var(--ts-line);border-radius:5px;background:#fff;margin-bottom:9px}
.thk-groep > summary{
  list-style:none;cursor:pointer;padding:12px 14px;font-size:13.5px;font-weight:800;
  display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--ts-black);
}
.thk-groep > summary::-webkit-details-marker{display:none}
.thk-groep > summary::after{
  content:"";width:8px;height:8px;flex:none;border-right:2px solid var(--ts-grey);
  border-bottom:2px solid var(--ts-grey);transform:rotate(45deg) translateY(-2px);transition:transform .15s;
}
.thk-groep[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
.thk-groep > summary:hover{color:var(--ts-red)}
.thk-groep-in{padding:2px 14px 13px}

.thk-opt{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:13px;cursor:pointer;margin:0}
.thk-opt input{accent-color:var(--ts-red);width:15px;height:15px;flex:none;margin:0}
.thk-opt .thk-naam{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thk-opt .thk-tel{color:var(--ts-grey);font-size:12px;font-variant-numeric:tabular-nums;flex:none}
.thk-opt input:disabled{cursor:default}
.thk-opt input:disabled ~ .thk-naam,.thk-opt input:disabled ~ .thk-tel{color:#b0b0b0}
.thk-stip{width:8px;height:8px;border-radius:50%;flex:none}
/* Lange filtergroepen: de eerste acht knoppen, de rest achter "Toon alle". */
.thk-opt.thk-extra{display:none}
.thk-groep.thk-uitgeklapt .thk-opt.thk-extra{display:flex}
.thk-meer{background:none;border:0;padding:7px 0 0;font:inherit;font-size:12px;font-weight:700;color:var(--ts-red);cursor:pointer}
.thk-meer:hover{text-decoration:underline}

.thk-btw{font-weight:400;font-size:11.5px;color:var(--ts-grey);letter-spacing:0}
.thk-schuif{width:100%;margin:2px 0 10px;accent-color:var(--ts-red)}
.thk-prijsrij{display:flex;align-items:center;gap:7px}
.thk-prijsrij input[type=number]{
  width:100%;min-width:0;border:1px solid var(--ts-line);border-radius:4px;
  padding:7px 8px;font:inherit;font-size:13px;font-variant-numeric:tabular-nums;
}
.thk-prijsrij span{color:var(--ts-grey)}
.thk-prijsrij button{
  background:var(--ts-black);color:#fff;border:0;border-radius:4px;padding:8px 13px;
  font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
}
.thk-prijsrij button:hover{background:var(--ts-red)}
.thk-toon{
  display:inline-block;background:var(--ts-red);color:#fff;border:0;border-radius:4px;
  padding:10px 16px;font:inherit;font-size:13px;font-weight:800;cursor:pointer;margin-top:8px;
}
.thk-toon:hover{background:var(--ts-red-dark);color:#fff}

/* --- werkbalk ------------------------------------------------------------ */
.thk-balk{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border:1px solid var(--ts-line);border-radius:5px;padding:11px 14px;margin-bottom:16px;
}
.thk-balk-links{font-size:13px;color:var(--ts-grey)}
.thk-balk-rechts{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.thk-veld{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ts-grey)}
.thk-veld label{margin:0;white-space:nowrap}
.thk-veld select{border:1px solid var(--ts-line);border-radius:4px;padding:6px 8px;font:inherit;font-size:12.5px;background:#fff}
.thk-vergelijk{font-size:12.5px;font-weight:700}
.thk-vergelijk:hover{color:var(--ts-red)}

/* --- productraster -------------------------------------------------------- */
.thk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.thk-grid .product-thumb{margin-bottom:0;height:100%}
.thk-lijst{min-width:0}

/* De prijs op de kaart.

   Verderop in dit bestand staat "#content .price-new{font-size:32px}" voor de
   productpagina. Die selector raakt ook de productkaarten, want die staan ook
   binnen #content, en hij wint het van ".product-thumb .price-new" omdat een
   id zwaarder weegt dan een class. Gevolg: 32px op elke kaart, ook op de
   startpagina, en op de telefoon viel de prijs over twee regels.

   Hieronder staat de kaartprijs terug op zijn eigen maat. De productpagina
   blijft ongemoeid. */
#content .product-thumb .price,
#content .product-thumb .price-new{font-size:22px}
@media (max-width:575px){
  #content .product-thumb .price,
  #content .product-thumb .price-new{font-size:18px}
}

.thk-grid .product-thumb .image{height:224px}
.thk-grid .product-thumb .image img{max-height:188px}
.thk-pag{margin-top:20px}
.thk-leeg{padding:30px 0;color:var(--ts-grey)}

/* --- aanpassingen aan de productkaart -------------------------------------- */
.product-thumb .image{position:relative}
.thk-labels{position:absolute;left:10px;top:10px;display:flex;gap:5px;flex-wrap:wrap;z-index:1}
.thk-label{
  font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  color:#fff;padding:4px 8px;border-radius:3px;line-height:1.2;
}
.thk-label-korting{background:var(--ts-red)}
.product-thumb h4{min-height:38px;margin-bottom:8px}
.thk-specs{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px}
.thk-spec{
  font-size:11px;font-weight:600;color:#4a4a4a;background:var(--ts-soft);
  border-radius:3px;padding:3px 7px;white-space:nowrap;
}
/* Het modelnummer staat nu ONDER de titel, dus zonder de grijze balk. */
.product-thumb .description .ts-model{background:none;margin:0 0 8px;padding:0;font-size:11px;color:#9a9a9a;letter-spacing:.2px}
.thk-voorraad{font-size:11.5px;font-weight:600;color:#1e8e3e;display:flex;align-items:center;gap:6px;margin-bottom:4px}
.thk-voorraad .thk-stip{background:#1e8e3e}
.thk-voorraad-nee{color:var(--ts-grey)}
.thk-voorraad-nee .thk-stip{background:#b9b9b9}

/* --- de tekst onderaan ----------------------------------------------------- */
.thk-cat .thk-seo h2{font-size:16px;font-weight:800;margin:22px 0 10px;padding:0}
.thk-cat .thk-seo h2::after{content:none}
.thk-cat .thk-seo p{font-size:14px;line-height:1.75;color:#4a4a4a;margin:0 0 12px;max-width:80ch}
.thk-cat .thk-seo ul{margin:0 0 14px;padding-left:18px}
.thk-cat .thk-seo li{font-size:14px;line-height:1.7;color:#4a4a4a;margin-bottom:6px}

@media (max-width:767.98px){
  .thk-kop{padding:22px 20px}
  #content .thk-kop h2{font-size:23px}
  .thk-telling{width:100%;padding:14px}
  .thk-telling b{font-size:32px}
  .thk-grid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}
  .thk-grid .product-thumb .image{height:150px}
  .thk-grid .product-thumb .image img{max-height:124px}
  /* Op een kaart van nog geen 170 pixels passen drie knoppen niet. De
     bestelknop blijft, verlanglijst en vergelijken vallen weg; vergelijken
     staat ook boven de lijst in de werkbalk. */
  .thk-grid .product-thumb .button button:nth-child(2),
  .thk-grid .product-thumb .button button:nth-child(3){display:none}
  .thk-grid .product-thumb .button button{font-size:12.5px;height:42px;padding:0 8px}
}

/* ===========================================================================
   ThinkStore - prijs zonder kop-element                     (16-09-2026)
   ---------------------------------------------------------------------------
   De prijs op de productpagina stond in een <h2>. Dat was opmaak met een
   kop-element: een schermlezer las "kop niveau 2, EUR 2.749,00" voor, en in de
   koppenstructuur van de pagina stond een regel die geen kop is.

   In catalog/view/template/product/product.twig is dat nu een
   <div class="ts-prijs">. Het uiterlijk blijft precies gelijk: de grootte komt
   uit de regel #content .price-new hierboven, en deze regel doet wat het
   h2-element deed - geen eigen marge, geen eigen lettergrootte.

   De h2-variant blijft ernaast staan, zodat een pagina die het nieuwe sjabloon
   nog niet heeft er hetzelfde uit blijft zien.
   =========================================================================== */
#content ul.list-unstyled:has(.price-new) .ts-prijs{margin:0;font-size:inherit;line-height:1.1}
#content li .ts-prijs .price-tax{color:#8a8a8a;font-weight:500;font-size:12.5px}