/* Turquoise Hendi: huisstijl van de nieuwe homepage (donker teal, aqua, amber) */
:root{--ink:#03222a;--ink2:#063840;--card:#0a323b;--card2:#0d3d47;--line:rgba(255,255,255,.14);--teal:#12828e;--aqua:#42dcdc;--foam:#e7fafa;--amber:#ffbd40;--amber2:#ff9d1c;--pink:#ffb3c7;--rose:#ff7aa8;--tx:#e8f6f6;--mu:#9cc3c6;--r:18px;--disp:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;--body:"Instrument Sans","Segoe UI",system-ui,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.hd{margin:0;background:var(--ink);color:var(--tx);font:400 16px/1.55 var(--body);-webkit-font-smoothing:antialiased}
.hd a{color:var(--aqua);text-decoration-thickness:1px;text-underline-offset:3px}
.hd img{max-width:100%;height:auto}
.hd-skip{position:absolute;left:-999px;top:8px;background:var(--amber);color:#1b1200;padding:8px 14px;border-radius:10px;z-index:100}
.hd-skip:focus{left:8px}
.hd-wrap{width:100%;max-width:1260px;margin:0 auto;padding-inline:24px}
/* zakelijke balk */
.hd-b2b{background:var(--pink);color:#3a0b22;display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;padding:8px 16px;font:600 13px/1.4 var(--body)}
.hd-b2b b{background:#3a0b22;color:#fff;border-radius:999px;padding:3px 12px}
/* kop */
.hd-top{background:var(--ink);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.hd-bar{max-width:1260px;margin:0 auto;padding:12px 24px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px}
.hd-logo{display:block;line-height:0}.hd-logo img{height:32px;width:auto}
.hd-nav{justify-self:center;display:flex;gap:4px;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;padding:5px}
.hd-nav a{color:var(--tx);text-decoration:none;font:600 15px/1 var(--body);padding:11px 18px;border-radius:999px}
.hd-nav a:hover{background:rgba(255,255,255,.08)}
.hd-nav a.on{background:#fff;color:var(--ink)}
.hd-r{display:flex;gap:10px}
.hd a.hd-pill{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;color:var(--tx);text-decoration:none;font:600 15px/1 var(--body)}
.hd-pill b{color:var(--amber)}
.hd-pill-i{width:44px;padding:0;justify-content:center}
.hd a.hd-pill:hover{background:rgba(255,255,255,.07)}
/* broodkruimels, hero */
.hd-crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-top:28px;font-size:14px;color:var(--mu)}
.hd-crumb a{color:var(--mu);text-decoration:none}.hd-crumb a:hover{color:var(--aqua)}.hd-crumb b{color:var(--tx);font-weight:600}
.hd-hero{padding:18px 0 22px}
.hd-eyebrow,.hd-brand{margin:0 0 8px;font:700 12px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--aqua)}
.hd h1{font:700 clamp(34px,5.4vw,64px)/1.04 var(--disp);letter-spacing:-.02em;margin:0 0 14px;text-wrap:balance}
.hd h1 em{font-style:normal;color:var(--aqua)}
.hd-lead{max-width:62ch;color:#cfe8e8;font-size:18px;margin:0 0 18px}
.hd-chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0}
.hd-chips li{border:1px solid var(--line);border-radius:999px;padding:8px 14px 8px 30px;font:600 14px/1 var(--body);position:relative;background:rgba(255,255,255,.04)}
.hd-chips li:before{content:"";position:absolute;left:13px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--aqua)}
.hd-note{background:rgba(255,189,64,.12);border:1px solid rgba(255,189,64,.45);border-radius:14px;padding:12px 16px;margin:6px 0 18px;color:#ffe3a6}
.hd-note a{color:#fff}
/* knoppen */
.hd .hd-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:13px 22px;background:#fff;color:var(--ink);font:700 15px/1 var(--body);cursor:pointer;text-decoration:none}
.hd .hd-btn:hover{background:var(--foam)}
.hd .hd-btn-cta{background:var(--amber);color:#1b1200;box-shadow:0 10px 28px rgba(255,189,64,.28)}
.hd .hd-btn-cta:hover{background:#ffc95f}
.hd .hd-btn-cta[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.hd-btn-s{padding:10px 16px;font-size:14px}
.hd .hd-btn-go{background:var(--aqua);padding:11px 20px}
.hd-btn:focus-visible,.hd a:focus-visible,.hd select:focus-visible,.hd input:focus-visible,.hd summary:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
/* indeling overzicht */
.hd-layout{display:grid;grid-template-columns:290px minmax(0,1fr);gap:28px;align-items:start;padding-bottom:70px}
.hd-fbtn{display:none}
.hd-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:84px;max-height:calc(100vh - 100px);overflow:auto;scrollbar-width:thin}
.hd-box{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.hd-box h2{margin:0 0 10px;font:700 12px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--aqua)}
.hd-cats,.hd-cats ul{list-style:none;margin:0;padding:0}
.hd-cats li a{display:flex;justify-content:space-between;gap:10px;color:var(--tx);text-decoration:none;padding:8px 10px;border-radius:10px;font-weight:500;font-size:15px;line-height:1.3}
.hd-cats li a:hover{background:rgba(255,255,255,.07)}
.hd-cats em{font-style:normal;color:var(--mu);font-size:13px;flex:none}
.hd-cats li.on>a,.hd-cats li.on>details>summary>a{background:rgba(66,220,220,.14);color:#fff;font-weight:700}
.hd-cats details>summary{list-style:none;cursor:pointer}
.hd-cats details>summary::-webkit-details-marker{display:none}
.hd-cats details ul{margin:2px 0 6px 12px;border-left:1px solid var(--line);padding-left:8px}
.hd-cats details ul a{font-size:14px;padding:6px 10px}
.hd-radio{display:flex;align-items:center;gap:10px;padding:7px 2px;cursor:pointer;font-size:15px}
.hd-radio input{accent-color:var(--aqua);width:18px;height:18px;margin:0}
/* zoekbalk */
.hd-sw{position:relative}
.hd-search{display:flex;align-items:center;gap:12px;background:var(--card);border:1.5px solid var(--teal);border-radius:999px;padding:7px 8px 7px 20px;color:var(--aqua)}
.hd-search:focus-within{border-color:var(--aqua);box-shadow:0 0 0 4px rgba(66,220,220,.16)}
.hd-search input{flex:1;min-width:0;background:transparent;border:0;color:#fff;font:500 17px/1.2 var(--body);padding:10px 0;outline:0}
.hd-search input::placeholder{color:#8db5b8}
.hd-search input::-webkit-search-cancel-button{display:none}
.hd-sug{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;list-style:none;margin:0;padding:8px;background:#fff;color:var(--ink);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.hd-sug li a{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;padding:8px 10px;border-radius:12px;color:var(--ink);text-decoration:none}
.hd-sug li a:hover,.hd-sug li a[aria-selected=true]{background:#e7fafa}
.hd-sug img{width:48px;height:48px;object-fit:contain;background:#fff;border-radius:8px}
.hd-sug b{display:block;font-weight:600;font-size:15px;line-height:1.25}
.hd-sug small{color:#4a6b70}
.hd-sug .hd-sug-all a{grid-template-columns:1fr;text-align:center;font-weight:700;color:#075a63}
/* resultaatbalk */
.hd-toolbar{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;margin:18px 0 16px}
.hd-count{margin:0;color:var(--mu)}.hd-count b{color:#fff;font-size:18px}
.hd-sort{display:flex;align-items:center;gap:10px;color:var(--mu);font-size:14px}
.hd-sort select{appearance:none;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23e8f6f6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 5 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;border:1px solid var(--line);border-radius:999px;color:#fff;font:700 15px/1 var(--body);padding:12px 38px 12px 18px}
/* productraster */
.hd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.hd-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,border-color .2s}
.hd-card:hover{transform:translateY(-3px);border-color:rgba(66,220,220,.6)}
.hd-ph{position:relative;margin:10px 10px 0;border-radius:12px;background:#fff;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hd-ph img{width:100%;height:100%;object-fit:contain;padding:10px}
.hd-noimg{display:flex;color:#7ba3a7}
.hd-badge{position:absolute;left:10px;top:10px;z-index:2;background:var(--aqua);color:var(--ink);font:700 11px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:6px 10px}
.hd-cb{padding:12px 16px 16px;display:flex;flex-direction:column;gap:5px;flex:1}
.hd-cb h3{margin:0;font:700 17px/1.22 var(--disp);letter-spacing:-.005em}
.hd-cb h3 a{color:#fff;text-decoration:none;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hd-cb h3 a:after{content:"";position:absolute;inset:0;z-index:1}
.hd-meta{margin:0;color:var(--mu);font-size:13px;line-height:1.35}
.hd-foot-row{margin-top:auto;padding-top:10px;display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;justify-content:space-between}
.hd-pr{display:flex;flex-direction:column;line-height:1.15}
.hd-pr b{font:700 19px/1.1 var(--disp);color:#fff}.hd-pr small{color:var(--mu);font-size:12px}
.hd-pr-note{color:var(--amber);font-weight:700;font-size:14px}
/* voorraadlabels */
.hd-av{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:6px 11px;font:700 12.5px/1 var(--body);white-space:nowrap}
.hd-av i{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.hd-av-instock{background:rgba(66,220,220,.14);color:var(--aqua);border:1px solid rgba(66,220,220,.5)}
.hd-av-last{background:rgba(255,122,168,.14);color:#ffb3c7;border:1px solid rgba(255,122,168,.55)}
.hd-av-expected{background:rgba(255,189,64,.08);color:var(--amber);border:1px dashed rgba(255,189,64,.7)}
.hd-av-order{background:rgba(255,189,64,.14);color:var(--amber);border:1px solid rgba(255,189,64,.55)}
/* paginering, leeg */
.hd-pg{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin:34px 0 0}
.hd-pg a,.hd-pg b{min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border-radius:999px;border:1px solid var(--line);color:var(--tx);text-decoration:none;font-weight:600}
.hd-pg b{background:#fff;color:var(--ink);border-color:#fff}.hd-pg a:hover{border-color:var(--aqua);color:var(--aqua)}.hd-pg-g{color:var(--mu)}
.hd-empty{background:var(--card);border:1px dashed var(--line);border-radius:var(--r);padding:34px;text-align:center}
.hd-empty h3{font:700 24px/1.2 var(--disp);margin:0 0 8px}.hd-empty p{color:var(--mu);max-width:56ch;margin:0 auto 18px}
/* productpagina */
.hd-pp{padding-bottom:70px}
.hd-pp-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:start;margin-top:18px}
.hd-gal-main{background:#fff;border-radius:22px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hd-gal-main img{width:100%;height:100%;object-fit:contain;padding:18px}
.hd-thumbs{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.hd-thumbs button{width:76px;height:76px;padding:4px;background:#fff;border:2px solid transparent;border-radius:12px;cursor:pointer;opacity:.85}
.hd-thumbs button[aria-current=true]{border-color:var(--aqua);opacity:1}
.hd-thumbs img{width:100%;height:100%;object-fit:contain}
.hd-info h1{font-size:clamp(28px,3.6vw,44px);margin-bottom:10px}
.hd-ids{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0 0 14px;color:var(--mu);font-size:14px}.hd-ids b{color:#fff;font-weight:600}
.hd-short{color:#cfe8e8;margin:0 0 16px;max-width:60ch}
.hd-buy{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px;display:flex;flex-direction:column;gap:16px}
.hd-var{display:flex;flex-direction:column;gap:7px;font:700 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--aqua)}
.hd-var select{appearance:none;background:var(--ink2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23e8f6f6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 5 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 16px center;border:1px solid var(--line);border-radius:14px;color:#fff;font:600 16px/1.3 var(--body);letter-spacing:0;text-transform:none;padding:14px 42px 14px 16px;width:100%}
.hd-pricebox{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between}
.hd-price{font:500 15px/1.2 var(--body);color:var(--mu)}
.hd-price b{font:700 32px/1 var(--disp);color:#fff;letter-spacing:-.01em}
.hd-price small{color:var(--mu)}
.hd-order{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:end}
.hd-qty{display:flex;flex-direction:column;gap:7px;font:700 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--aqua)}
.hd-qty input{background:var(--ink2);border:1px solid var(--line);border-radius:14px;color:#fff;font:700 18px/1 var(--body);padding:13px 12px;width:100%}
.hd-order .hd-btn{height:52px;font-size:16px}
.hd-moq{margin:-6px 0 0;color:var(--mu);font-size:14px}.hd-moq b{color:#fff}
.hd-cta-box{background:rgba(255,189,64,.1);border:1px solid rgba(255,189,64,.4);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.hd-cta-box p{margin:0;color:#ffe9bd}
.hd-points{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;padding:0;margin:16px 4px 0;color:var(--mu);font-size:14px}
.hd-points li:before{content:"✓";color:var(--aqua);margin-right:7px;font-weight:700}
.hd-sections{display:grid;gap:18px;margin-top:40px;max-width:900px}
.hd-sec{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px}
.hd-sec h2{font:700 22px/1.2 var(--disp);margin:0 0 12px}
.hd-prose{color:#d4eaea}.hd-prose p{margin:0 0 12px;max-width:72ch}
.hd-bul{margin:0;padding-left:20px;color:#d4eaea;display:grid;gap:6px}.hd-bul li::marker{color:var(--aqua)}
.hd-spec{width:100%;border-collapse:collapse;font-size:15px}
.hd-spec th,.hd-spec td{text-align:left;padding:10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.hd-spec th{color:var(--mu);font-weight:500;width:42%;padding-right:12px}.hd-spec td{color:#fff;font-weight:500}
.hd-docs{display:flex;flex-wrap:wrap;gap:10px}
.hd-docs a{display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--ink);text-decoration:none;font:700 14px/1 var(--body);border-radius:999px;padding:12px 18px}
.hd-docs a:hover{background:var(--foam)}
/* voet */
.hd-foot{border-top:1px solid var(--line);background:#02181e;padding:30px 0 34px;margin-top:20px}
.hd-foot-in{display:grid;grid-template-columns:auto 1fr auto;gap:18px 30px;align-items:center}
.hd-foot-in p{margin:0;color:var(--mu);font-size:14px}
.hd-foot-in nav{display:flex;gap:16px;flex-wrap:wrap}.hd-foot-in nav a{color:var(--tx);font-weight:600;text-decoration:none}
/* melding in winkelwagenberichten */
.woocommerce-message,.woocommerce-error,.woocommerce-info{list-style:none;margin:16px 0 0;padding:14px 18px;border-radius:14px;background:rgba(66,220,220,.12);border:1px solid rgba(66,220,220,.5);color:#fff}
.woocommerce-error{background:rgba(255,122,168,.12);border-color:rgba(255,122,168,.6)}
.woocommerce-message a.button{float:right;background:var(--amber);color:#1b1200;border-radius:999px;padding:9px 16px;text-decoration:none;font-weight:700}
/* telefoon en tablet */
@media (max-width:1020px){
	.hd-layout{grid-template-columns:minmax(0,1fr);gap:14px}
	.hd-fbtn{display:inline-flex;align-items:center;gap:9px;justify-self:start;background:var(--card);border:1px solid var(--line);color:#fff;border-radius:999px;padding:12px 18px;font:700 15px/1 var(--body);cursor:pointer}
	.hd-side{display:none;position:static;max-height:none}
	.hd-side.open{display:flex}
	.hd-pp-grid{grid-template-columns:minmax(0,1fr);gap:22px}
}
@media (max-width:760px){
	.hd-bar{grid-template-columns:1fr auto;padding:10px 16px}
	.hd-nav{display:none}
	.hd-wrap{padding-inline:16px}
	.hd-pill-t{display:none}.hd-pill{padding:0 14px}
	.hd-logo img{height:28px}
	.hd-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
	.hd-cb{padding:10px 12px 14px}.hd-cb h3{font-size:15px}
	.hd-av{font-size:11.5px;padding:5px 9px}
	.hd-pr b{font-size:17px}
	.hd-search{padding-left:16px}.hd-search .hd-btn-go{padding:11px 16px}
	.hd-chips{display:none}.hd-lead{font-size:16px;margin-bottom:6px}.hd-hero{padding-bottom:10px}
	.hd-foot-in{grid-template-columns:1fr}
	.hd-order{grid-template-columns:96px 1fr}
	.hd-sec{padding:18px}
}
@media (max-width:380px){.hd-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Hendi-logo (door Hendi aangeleverd). Klein label op de foto's; de foto's zelf blijven externe Hendi-links. */
.hd-ph::after,.hd-gal-main::after{content:"";position:absolute;right:8px;top:8px;z-index:2;width:58px;height:14px;box-sizing:content-box;padding:5px 9px;border-radius:999px;background:#fff url(img/hendi-badge.png) center/calc(100% - 18px) auto no-repeat;box-shadow:0 1px 6px rgba(3,34,42,.18),0 0 0 1px rgba(3,34,42,.08);pointer-events:none}
.hd-gal-main{position:relative}
.hd-gal-main::after{right:14px;top:14px;width:84px;height:20px;padding:7px 13px}
.hd-hero{position:relative}
.hd-hero-logo{display:block;width:min(210px,56vw);margin:0 0 16px;padding:14px 18px;border-radius:18px;background:#fff;box-shadow:0 0 0 6px rgba(66,220,220,.12),0 18px 44px rgba(0,10,14,.4)}
.hd-hero-logo img{display:block;width:100%;height:auto}
.hd-hero-logo:focus-visible{outline:2px solid var(--aqua);outline-offset:4px}
@media (min-width:900px){.hd-hero{padding-right:300px}.hd-hero-logo{position:absolute;right:0;top:22px;width:250px;margin:0;padding:18px 22px;border-radius:22px}}
