:root{--ink:#1d1d1b;--navy:#312783;--blue:#009fe3;--sky:#00b4ed;--light:#b3e0f8;--text:#2b2d36;--muted:#6b7280;--line:#e6e8ee;--bg:#f5f6f9;--card:#fff;--c:#009fe3;--m:#312783;--y:#b3e0f8;--k:#1d1d1b;--primary:#009fe3;--primary-d:#312783;--success:#12a150;--warning:#d97706;--danger:#dc2626;--info:#0284c7;--r:8px;--shadow:0 1px 2px rgba(16,24,40,.05),0 4px 14px rgba(16,24,40,.05)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:16px/1.6 'Chakra Petch',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
a{color:var(--c);text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%;display:block}
h1,h2,h3,h4{color:var(--ink);line-height:1.2;margin:0 0 .5em}
h1{font-size:2.2rem;font-weight:700;letter-spacing:-.02em}h2{font-size:1.4rem;font-weight:700}h3{font-size:1.08rem;font-weight:700}
p{margin:0 0 1em}
.container{max-width:1600px;margin:0 auto;padding:0 24px}
.section{padding-top:28px;padding-bottom:40px}
.narrow{max-width:620px}
.muted{color:var(--muted)}.small{font-size:.86rem}.text-success{color:var(--success)}
.hp{position:absolute;left:-9999px}
[hidden]{display:none!important}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:24px;margin-bottom:20px}
.card-title{font-size:1.1rem;display:flex;align-items:center;gap:10px;margin-bottom:16px}
.stack>.card:last-child{margin-bottom:0}
/* topbar + header (niet sticky) */
.topbar{background:var(--navy);color:#d6d3f0;font-size:.82rem}
.topbar-inner{display:flex;justify-content:space-between;gap:16px;padding:8px 24px}
.topbar i{margin-right:6px;color:var(--sky)}.topbar strong{color:#fff}
.header{background:#fff;border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;gap:28px;padding:8px 24px;min-height:var(--header-h,80px)}
.logo{display:flex;align-items:center}.logo img{height:var(--logo-h,52px);width:auto;max-width:none}
.mainnav{display:flex;gap:4px;flex:1}.nav-center .mainnav{justify-content:center}.nav-right .mainnav{justify-content:flex-end}
.nav-center .header-inner{display:grid;grid-template-columns:1fr auto 1fr}.nav-center .header-actions{justify-self:end}
.mainnav a{color:var(--ink);font-weight:600;padding:8px 14px;border-radius:var(--r)}
.mainnav a:hover,.mainnav a.active{background:var(--bg);text-decoration:none}
.mainnav a.active{color:var(--m)}
.header-actions{display:flex;align-items:center;gap:12px}
.icon-link{display:flex;align-items:center;gap:6px;color:var(--ink);font-weight:600}
.icon-link i{font-size:1.25rem}
.menu-toggle{display:none;background:none;border:0;font-size:1.6rem;color:var(--ink);cursor:pointer}
.btn-cart{position:relative}
.cart-count{background:var(--sky);color:#fff;border-radius:99px;font-size:.72rem;min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;margin-left:2px}
.cmyk-line{display:flex;height:5px;background:linear-gradient(90deg,var(--light),var(--sky) 35%,var(--blue) 65%,var(--navy))}.cmyk-line span{display:none}.cmyk-line span{flex:1}.cmyk-line span:nth-child(1){background:var(--c)}.cmyk-line span:nth-child(2){background:var(--m)}.cmyk-line span:nth-child(3){background:var(--y)}.cmyk-line span:nth-child(4){background:var(--k)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:var(--r);padding:10px 18px;font:inherit;font-weight:600;cursor:pointer;line-height:1.2;white-space:nowrap;transition:.15s}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-d)}
.btn-dark{background:var(--navy);color:#fff}.btn-dark:hover{background:#241c66}
.btn-light{background:#fff;color:var(--ink);border-color:var(--line)}.btn-light:hover{background:var(--bg)}
.btn-danger{background:#fff;color:var(--danger);border-color:#fecaca}.btn-danger:hover{background:#fef2f2}
.btn-lg{padding:14px 24px;font-size:1rem}.btn-sm{padding:6px 12px;font-size:.85rem}
.btn-block{width:100%;margin-top:10px}
.btn-icon{width:44px;height:44px;padding:0;font-size:1.15rem}
.btn-link{background:none;border:0;cursor:pointer;color:var(--muted);font-size:1.05rem;padding:6px}.btn-link.danger:hover{color:var(--danger)}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}
/* badges */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;font-size:.78rem;font-weight:600;background:#f1f2f5;color:var(--muted);white-space:nowrap}
.badge i{font-size:.8rem}
.badge-success{background:#e7f6ee;color:var(--success)}.badge-warning{background:#fef3e2;color:var(--warning)}.badge-danger{background:#fdecec;color:var(--danger)}.badge-info{background:#e6f4fb;color:var(--info)}.badge-primary{background:#ebe9f7;color:var(--navy)}.badge-muted{background:#f1f2f5;color:var(--muted)}
.ink-badge{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:6px;margin-bottom:10px}
.ink-dtf{background:var(--navy);color:#fff}.ink-dtf i{color:var(--sky)}
.ink-uv{background:#7c3aed;color:#fff}.ink-uv i{color:#f0abfc}
.ink-badge.big{font-size:.82rem;padding:7px 14px}.ink-badge.small{font-size:.66rem;padding:2px 7px;margin:0 0 0 6px;vertical-align:middle}
.pill{margin-left:auto;background:var(--m);color:#fff;border-radius:99px;font-size:.72rem;padding:1px 8px}
/* alerts */
.alert{display:flex;gap:10px;align-items:center;border-radius:var(--r);padding:12px 16px;margin:18px 0 0;font-weight:500}
.alert-success{background:#e7f6ee;color:#0b6b36;border:1px solid #bfe7cf}.alert-danger{background:#fdecec;color:#991b1b;border:1px solid #f7c6c6}
.alert-info{background:#e6f4fb;color:#075985;border:1px solid #bae0f3}
/* page head */
.page-head{display:flex;align-items:center;gap:18px}
.page-icon{width:54px;height:54px;flex:0 0 54px;border-radius:var(--r);background:linear-gradient(160deg,var(--sky),var(--blue) 55%,var(--navy));color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.5rem}
.page-head h1{font-size:1.6rem;margin:0}.page-head p{margin:2px 0 0;color:var(--muted)}
.page-head-text{flex:1}.page-head-actions{display:flex;gap:10px;flex-wrap:wrap}
/* hero */
.hero{position:relative;overflow:hidden;color:#fff;background:radial-gradient(circle at 85% 20%,rgba(0,180,237,.45),transparent 45%),radial-gradient(circle at 10% 110%,rgba(0,159,227,.35),transparent 50%),linear-gradient(120deg,#1a1550 0,var(--navy) 45%,#1d4fa8 80%,var(--blue) 100%)}
.hero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:22px 22px;pointer-events:none}
.hero-photo{background:linear-gradient(100deg,rgba(26,21,80,.96) 0,rgba(49,39,131,.88) 45%,rgba(0,159,227,.45) 100%),var(--hero-img) center/cover no-repeat}
.hero-inner{position:relative}.hero h1{color:#fff}.hero .grad{background:linear-gradient(90deg,var(--light),var(--sky) 60%,#fff);-webkit-background-clip:text;background-clip:text}
.hero .ink-dtf{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25)}.hero .usp{color:#fff}.hero .usp i{color:var(--sky)}
.hero .btn-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}.hero .btn-light:hover{background:rgba(255,255,255,.12)}
.hero .btn-primary{background:var(--sky);border-color:var(--sky)}.hero .btn-primary:hover{background:#fff;color:var(--navy);border-color:#fff}
.hero-inner{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center;padding-top:48px;padding-bottom:48px}
.hero h1{font-size:3.1rem;margin:14px 0 16px}
.hero p{font-size:1.1rem;color:rgba(255,255,255,.82);max-width:620px}
.grad{background:linear-gradient(90deg,var(--sky),var(--blue) 45%,var(--navy));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0}
.hero-visual{margin:0}.hero-visual img{filter:drop-shadow(0 20px 30px rgba(0,0,0,.25))}
.usp{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px 24px;font-weight:500}
.usp i{color:var(--m);margin-right:6px}
.usp.small{flex-direction:column;gap:6px;font-size:.9rem;margin-top:18px}.usp.small .text-success{color:var(--success)}
.notice-dtf{display:flex;gap:14px;align-items:center;border-left:4px solid var(--blue);background:#f0f9fe}
.notice-dtf>i{font-size:1.6rem;color:var(--navy)}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:16px}
.section-head h2{margin:0}.section-head p{margin:0;color:var(--muted)}
.eyebrow{display:inline-block;font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:6px}
/* product */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin-bottom:20px}
.product-card{padding:0;overflow:hidden;display:flex;flex-direction:column;margin:0;transition:.15s}
.product-card:hover{border-color:#cfd3dc;transform:translateY(-2px)}
.product-card-img{display:block;background:var(--bg);aspect-ratio:1}
.product-card-img img{width:100%;height:100%;object-fit:cover}
.product-card-body{padding:18px;display:flex;flex-direction:column;flex:1}
.product-card-body h3 a{color:var(--ink)}
.product-card-body p{color:var(--muted);font-size:.9rem;flex:1}
.product-card-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.price{display:flex;flex-direction:column}
.price s{color:var(--muted);font-size:.85rem}
.price strong{font-size:1.35rem;color:var(--ink);font-weight:700}
.price small{color:var(--muted);font-size:.78rem}
.price.big{margin:18px 0;display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:8px 12px}
.price.big strong{font-size:2rem}.price.big small{flex-basis:100%}
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.pdp-img{padding:0;overflow:hidden}
.pdp-buy h1{font-size:2rem;margin:6px 0 8px}
.lead{font-size:1.05rem;color:var(--muted)}
.contents{list-style:none;padding:0;margin:0 0 4px;display:grid;gap:6px}
.contents li{background:var(--bg);border-radius:6px;padding:8px 12px;font-weight:500}
.contents .qty{display:inline-block;min-width:34px;font-weight:700;color:var(--m)}
.buy-row{display:flex;gap:12px;flex-wrap:wrap}
.qty-input{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;height:46px}
.qty-input button{width:40px;border:0;background:var(--bg);font-size:1.2rem;cursor:pointer;color:var(--ink)}
.qty-input input{width:52px;border:0;text-align:center;font:inherit;font-weight:700;-moz-appearance:textfield}
.qty-input input::-webkit-inner-spin-button{-webkit-appearance:none}
.specs{display:grid;grid-template-columns:160px 1fr;gap:8px 16px;margin:16px 0 0}
.specs dt{color:var(--muted)}.specs dd{margin:0;font-weight:500}
.prose{max-width:none}.prose p:last-child{margin:0}
/* about */
.about{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;padding:36px}
.about-facts{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.about-facts div{background:var(--bg);border-radius:var(--r);padding:18px;display:flex;flex-direction:column}
.about-facts i{font-size:1.5rem;color:var(--c);margin-bottom:6px}
.about-facts div:nth-child(2) i{color:var(--navy)}.about-facts div:nth-child(3) i{color:var(--sky)}.about-facts div:nth-child(4) i{color:var(--navy)}
.about-facts span{color:var(--muted);font-size:.88rem}
/* forms */
.grid-2-1{display:grid;grid-template-columns:2fr 1fr;gap:20px;align-items:start}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.field{display:block;position:relative;margin-bottom:14px}
.field>span{display:block;font-weight:600;font-size:.86rem;color:var(--ink);margin-bottom:5px}
.field>i{position:absolute;left:12px;top:36px;color:var(--muted);pointer-events:none}
.field input,.field select,.field textarea{width:100%;font:inherit;color:var(--ink);background:#fff;border:1px solid #d6d9e1;border-radius:var(--r);padding:10px 12px 10px 38px;outline:none;transition:.15s}
.field textarea{padding-left:38px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--c);box-shadow:0 0 0 3px rgba(0,159,227,.18)}
.field.no-icon input,.field.no-icon select,.field.no-icon textarea{padding-left:12px}
.field-error{display:block;color:var(--danger);font-size:.82rem;margin-top:4px}
.field small{display:block;color:var(--muted);font-size:.8rem;margin-top:4px}
.check{display:block;position:relative;padding-left:26px;margin:6px 0 14px;cursor:pointer}
.check input{position:absolute;left:0;top:4px;margin:0;accent-color:var(--blue)}
.form-links{text-align:center;margin:16px 0 0;color:var(--muted)}
.options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.option{display:flex;gap:12px;align-items:center;border:2px solid var(--line);border-radius:var(--r);padding:14px;cursor:pointer;transition:.15s}
.option input{accent-color:var(--m)}
.option>i{font-size:1.5rem;color:var(--c)}
.option span{display:flex;flex-direction:column}.option small{color:var(--muted)}
.option.is-on{border-color:var(--blue);background:#f0f9fe}
.option.is-disabled{opacity:.6;cursor:not-allowed}
.step{display:inline-flex;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;align-items:center;justify-content:center;font-size:.85rem}
.info-row{display:flex;gap:12px;align-items:center}.info-row>i{font-size:1.4rem;color:var(--c)}
/* cart + summary */
.empty{text-align:center;padding:48px}.empty>i{font-size:2.6rem;color:var(--muted)}
.cart{padding:8px 24px}
.cart-line{display:grid;grid-template-columns:72px 1fr auto 100px 36px;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.cart-line:last-of-type{border-bottom:0}
.cart-line img{width:72px;height:72px;border-radius:6px;background:var(--bg)}
.cart-line-info{display:flex;flex-direction:column;align-items:flex-start}.cart-line-info a{color:var(--ink)}.cart-line-info small{color:var(--muted)}
.cart-line-info .ink-badge.small{margin:4px 0}
.cart-line-total{text-align:right;color:var(--ink)}
.sum-row,.sum-line{display:flex;justify-content:space-between;gap:12px;padding:6px 0}
.sum-line{border-bottom:1px dashed var(--line);font-size:.92rem;padding:8px 0}
.sum-row.total{border-top:1px solid var(--line);margin-top:8px;padding-top:12px;font-weight:700;color:var(--ink);font-size:1.1rem}
.sum-row.muted{font-size:.88rem}
.free-bar{height:8px;background:var(--bg);border-radius:99px;overflow:hidden;margin-top:12px}
.free-bar div{height:100%;background:linear-gradient(90deg,var(--sky),var(--navy))}
/* tables */
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse}
.table th{text-align:left;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;padding:10px 12px;border-bottom:1px solid var(--line)}
.table td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tbody tr:nth-child(even){background:#f5f7fb}
.table tbody tr:hover{background:#eaf5fc}
.table .num{text-align:right;white-space:nowrap}
.table tfoot td{border-bottom:0;padding:6px 12px}
.table tfoot tr.total td{font-weight:700;color:var(--ink);font-size:1.05rem;border-top:1px solid var(--line)}
.table a{font-weight:600}
/* account */
.account-nav{display:flex;gap:6px;flex-wrap:wrap;padding:8px}
.account-nav a,.account-nav button{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--r);color:var(--ink);font-weight:600;background:none;border:0;font:inherit;font-weight:600;cursor:pointer}
.account-nav a:hover,.account-nav button:hover{background:var(--bg);text-decoration:none}
.account-nav a.is-active{background:var(--navy);color:#fff}
.account-nav form{margin-left:auto}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:20px}
.stat{margin:0;display:flex;gap:14px;align-items:center}
.stat i{width:46px;height:46px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:1.3rem;background:#e6f4fb;color:var(--c)}
.stat:nth-child(2) i{background:#ebe9f7;color:var(--navy)}.stat:nth-child(3) i{background:#e6f7fd;color:var(--sky)}.stat:nth-child(4) i{background:#eceef2;color:var(--ink)}
.stat strong{display:block;font-size:1.4rem;color:var(--ink);line-height:1.1}.stat span{color:var(--muted);font-size:.85rem}
/* footer */
.footer{background:var(--navy);color:#c9c5ea;margin-top:40px;font-size:.9rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-top:44px;padding-bottom:32px}
.footer-grid>div{display:flex;flex-direction:column;gap:6px}
.footer h4{color:#fff;font-size:.95rem;margin-bottom:8px}
.footer a{color:#d1d5db}.footer a:hover{color:#fff}
.footer-logo{height:48px;width:auto;margin-bottom:8px}
.footer-bottom{display:flex;justify-content:space-between;border-top:1px solid #463c9b;padding-top:18px;padding-bottom:22px;font-size:.84rem}
.pay-icons i{margin-right:6px}
/* bare */
.bare{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px}
@media (max-width:1100px){.hero-inner,.pdp,.about,.grid-2-1,.grid-2{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.hide-md{display:none}}
@media (max-width:760px){
 .container{padding:0 16px}.hide-sm{display:none}.topbar-inner{padding:8px 16px}
 .header-inner,.nav-center .header-inner{display:flex;flex-wrap:wrap;gap:12px;padding:12px 16px;min-height:0}.logo img{height:min(var(--logo-h,52px),40px)}
 .menu-toggle{display:block;margin-left:auto;order:2}.header-actions{order:1;margin-left:auto}
 .mainnav{display:none;order:3;flex-basis:100%;flex-direction:column}.mainnav.is-open{display:flex}
 .hero h1{font-size:2.2rem}.row-2,.row-3,.options,.about-facts{grid-template-columns:1fr}
 .cart-line{grid-template-columns:56px 1fr auto;}.cart-line img{width:56px;height:56px}.cart-line .qty-input{grid-column:2}.cart-line-total{grid-column:3}
 .footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:6px}
 .specs{grid-template-columns:1fr}.section-head{flex-direction:column;align-items:flex-start}.about{padding:22px}
}
.page-head{display:block}.page-head-inner{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.field>i:first-child{top:12px}
.hero-visual img,.pdp-img img,.product-card-img img{width:100%;height:auto}
.switch-row{display:flex;gap:14px;align-items:center;cursor:pointer;margin:4px 0 6px}.switch-row small{display:block;color:var(--muted);font-size:.85rem}
.switch{position:relative;flex:0 0 46px;width:46px;height:26px}.switch input{position:absolute;opacity:0;width:0;height:0}
.switch-slider{position:absolute;inset:0;background:#cbd5e1;border-radius:26px;transition:.2s}.switch-slider:before{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.2s}
.switch input:checked+.switch-slider{background:var(--blue)}.switch input:checked+.switch-slider:before{transform:translateX(20px)}.switch input:focus-visible+.switch-slider{outline:2px solid var(--navy);outline-offset:2px}
.price-login{white-space:nowrap}.price-locked{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:var(--r);background:#f0f9fe;border-left:4px solid var(--blue);margin:14px 0}.price-locked>i{font-size:1.4rem;color:var(--navy)}.price-locked span{display:block;color:var(--muted);font-size:.9rem}
.hero-thumb{display:block;width:100%;max-height:180px;object-fit:cover;border-radius:var(--r);margin:6px 0 10px}
@media (max-width:700px){.hero-inner{padding-top:28px}}
.hero-photo .hero-visual{visibility:hidden}
.align-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0 14px}.align-options label{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;border:1px solid var(--line);border-radius:var(--r);cursor:pointer;font-weight:600}.align-options input{position:absolute;opacity:0}.align-options label:has(input:checked){border-color:var(--blue);background:#f0f9fe;color:var(--navy)}
.range-field{display:block;margin-bottom:12px}.range-field span{display:flex;justify-content:space-between;font-weight:600;font-size:.9rem}.range-field output{color:var(--navy)}.range-field input{width:100%;accent-color:var(--blue)}
.header-preview{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}.header-preview .hp-inner{display:flex;align-items:center;gap:14px;padding:0 14px;min-height:var(--header-h,80px)}.header-preview img{height:var(--logo-h,52px);width:auto}.header-preview .hp-nav{flex:1;display:flex;gap:10px;font-weight:600;font-size:.8rem}.header-preview.nav-center .hp-nav{justify-content:center}.header-preview.nav-right .hp-nav{justify-content:flex-end}.header-preview .hp-cart{background:var(--navy);color:#fff;border-radius:var(--r);padding:6px 10px;font-size:.8rem;font-weight:600}
.field-label{display:block;font-weight:600;font-size:.9rem}
.header-preview .hp-nav span{white-space:nowrap}.header-preview .hp-nav{min-width:0;overflow:hidden}
.admin-tabs{margin-bottom:20px}.tabs-form .tab-pane{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}.tabs-form .tab-pane[hidden]{display:none}.tabs-form .tab-pane>.card:only-child,.tabs-form .tab-pane>.card:has(+.card[hidden]),.tabs-form .tab-pane>.card[hidden]+.card{grid-column:1/-1}.tabs-form .tab-pane>.card{margin:0}
.admin-tabs button.is-active{background:var(--navy);color:#fff}.admin-tabs .tab-dot{width:8px;height:8px;border-radius:50%;background:var(--danger)}
.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
@media (max-width:1100px){.tabs-form .tab-pane{grid-template-columns:1fr}}
.tabs-form .card[hidden]{display:none}
.product-card-img{position:relative}
.preorder-badge{display:inline-flex;align-items:center;gap:5px;background:#ea7a00;color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:6px;vertical-align:middle}
.preorder-badge.on-img{position:absolute;top:12px;right:12px;font-size:.8rem;padding:6px 12px;box-shadow:0 4px 12px rgba(0,0,0,.15)}.preorder-badge.is-out{background:var(--ink)}
.preorder-badge.small{font-size:.64rem;padding:2px 7px;margin:0 0 0 6px}.preorder-badge.big{font-size:.82rem;padding:7px 14px;margin-bottom:10px}
.preorder-text{display:block;color:#b45f00;font-weight:600}
.btn-preorder{background:#ea7a00;border-color:#ea7a00;color:#fff}.btn-preorder:hover{background:#cc6a00;border-color:#cc6a00;color:#fff}
.preorder-note{display:flex;gap:12px;align-items:flex-start;background:#fff4e5;border:1px solid #f6c48a;border-left:4px solid #ea7a00;border-radius:8px;padding:12px 14px;margin:12px 0;color:#7a4300}
.preorder-note>i{font-size:1.3rem;color:#ea7a00}.preorder-note strong{display:block;color:#7a4300}.preorder-note span{font-size:.9rem}
.preorder-note.is-out{background:#f3f4f6;border-color:#d1d5db;border-left-color:var(--ink);color:var(--text)}.preorder-note.is-out>i,.preorder-note.is-out strong{color:var(--ink)}
.ink-badge.big+.preorder-badge.big,.preorder-badge.big{vertical-align:baseline;margin-left:6px}
.impersonate-bar{background:#ea7a00;color:#fff;font-size:.9rem}.impersonate-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 24px;flex-wrap:wrap}.impersonate-inner i{margin-right:6px}
.impersonate-bar .btn{background:#fff;color:#7a4300;border-color:#fff}.impersonate-bar .btn:hover{background:#fff4e5}
.inline-form{display:inline-flex;margin:0}

/* openingstijden + social media */
.contact-sub{font-size:1rem;margin:22px 0 8px}
.hours{width:100%;border-collapse:collapse;font-size:.95rem}
.hours th,.hours td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--line);font-weight:500}
.hours td{text-align:right;white-space:nowrap}.hours td.closed{color:var(--muted)}
.hours tr:nth-child(even){background:#f5f7fb}
.hours tr.is-today{background:#eaf5fc}.hours tr.is-today th,.hours tr.is-today td{color:var(--navy);font-weight:700}
.hours small{font-weight:500;color:var(--blue)}
.socials{display:flex;gap:8px;flex-wrap:wrap}
.socials a{width:38px;height:38px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--navy);font-size:1.1rem}
.socials a:hover{background:var(--blue);color:#fff;text-decoration:none}
.footer .socials{margin-top:8px}.footer .socials a{background:#463c9b;color:#fff}.footer .socials a:hover{background:var(--blue)}
.hours-edit input[type=time]{padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);font:inherit;background:#fff;color:var(--ink)}
.hours-edit .switch-row{margin:0}.hours-edit .js-hours-label{min-width:44px;font-weight:600}
.hours-edit tr.is-closed input[type=time]{opacity:.35}
.social-row{display:grid;grid-template-columns:240px 1fr auto;gap:12px;align-items:end;margin-bottom:12px}
@media (max-width:700px){.social-row{grid-template-columns:1fr auto}.social-row .field:first-child{grid-column:1/-1}}

/* flash-meldingen rechtsonder */
.toasts{position:fixed;right:20px;bottom:20px;z-index:1000;display:flex;flex-direction:column;align-items:flex-end;gap:10px;width:min(420px,calc(100% - 40px));pointer-events:none}
.toasts .alert{margin:0;width:100%;pointer-events:auto;box-shadow:0 12px 32px rgba(29,29,27,.16);animation:toast-in .25s ease;transition:opacity .3s,transform .3s}
.toasts .alert.is-hiding{opacity:0;transform:translateY(10px)}
.toast-close{margin-left:auto;background:none;border:0;padding:2px;cursor:pointer;color:inherit;opacity:.7;font-size:.9rem}.toast-close:hover{opacity:1}
@keyframes toast-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.map-card{padding:0;overflow:hidden;position:relative}.map-card iframe{display:block;width:100%;height:340px;border:0}
.map-route{position:absolute;right:14px;top:14px;box-shadow:0 6px 18px rgba(29,29,27,.18)}
/* contactkaarten */
.contact-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.contact-list li{display:flex;gap:14px;align-items:flex-start;line-height:1.5}
.contact-list small,.contact-ids small{display:block;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:1px}
.contact-icon{flex:0 0 40px;height:40px;border-radius:var(--r);background:#e6f4fb;color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.contact-ids{list-style:none;margin:20px 0 0;padding:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.contact-ids li{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#fff}
.contact-ids li+li{border-top:1px solid var(--line)}
.contact-ids li:nth-child(even){background:#f5f7fb}
.contact-ids div{flex:1;min-width:0}
.contact-ids strong{display:block;font-size:1rem;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.contact-ids-icon{flex:0 0 36px;height:36px;border-radius:var(--r);background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;display:flex;align-items:center;justify-content:center}
.contact-copy{flex:0 0 34px;height:34px;border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.contact-copy:hover{color:var(--blue);border-color:var(--blue)}.contact-copy.is-copied{color:#0b6b36;border-color:#bfe7cf;background:#e7f6ee}
.contact-note{display:flex;gap:10px;margin-top:16px;padding:12px 14px;border-radius:var(--r);background:#e6f4fb;color:#075985;font-size:.92rem;line-height:1.5}
.contact-note i{color:var(--blue);margin-top:2px}
.hours-card{padding-bottom:12px}
.hours-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.hours-head .card-title{margin:0}
.hours-status{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:#eef0f4;color:var(--muted);font-size:.8rem;font-weight:600}
.hours-status i{font-size:.5rem}.hours-status.is-open{background:#e7f6ee;color:#0b6b36}
.hours-list{list-style:none;margin:0 -24px;padding:0}
.hours-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 24px;border-left:4px solid transparent}
.hours-list li:nth-child(even){background:#f5f7fb}
.hours-list li.is-today{background:#eaf5fc;border-left-color:var(--blue);color:var(--navy)}
.hours-list li.is-today>span:first-child{font-weight:700}
.hours-list em{font-style:normal;margin-left:8px;padding:2px 8px;border-radius:999px;background:var(--blue);color:#fff;font-size:.7rem;font-weight:600;vertical-align:2px}
.hours-list strong{font-variant-numeric:tabular-nums;font-weight:600}
.hours-closed{padding:3px 10px;border-radius:999px;background:#eef0f4;color:var(--muted);font-size:.8rem;font-weight:600}
@media (max-width:480px){.contact-ids strong{font-size:.9rem;letter-spacing:0}.contact-ids li{gap:10px;padding:12px}}
/* footer v2 */
.footer{background:#261e6b;color:#c9c5ea;margin-top:60px;font-size:.9rem}
.footer-cta{display:flex;align-items:center;gap:20px;margin-top:36px;padding:24px 28px;border-radius:var(--r);background:linear-gradient(120deg,var(--blue),#4a3fb0 85%);box-shadow:0 14px 34px rgba(0,0,0,.2)}
.footer-cta h3{color:#fff;font-size:1.3rem;margin:0 0 2px}.footer-cta p{margin:0;color:#e0f2fe}
.footer-cta-icon{flex:0 0 54px;height:54px;border-radius:var(--r);background:rgba(255,255,255,.18);color:#fff;font-size:1.6rem;display:flex;align-items:center;justify-content:center}
.footer-cta-actions{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.footer .footer-btn{background:#fff;color:var(--navy);border-color:#fff}.footer .footer-btn:hover{background:var(--light);color:var(--navy)}
.footer .footer-btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)}.footer .footer-btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff}
.footer-grid{grid-template-columns:1.5fr 1fr 1.2fr 1fr;gap:40px;padding-top:44px;padding-bottom:44px}
.footer-grid>div{gap:10px}
.footer h4{position:relative;color:#fff;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 6px;padding-bottom:12px}
.footer h4::after{content:"";position:absolute;left:0;bottom:0;width:28px;height:3px;border-radius:2px;background:var(--sky)}
.footer a{color:#dcdaf3}.footer a:hover{color:#fff;text-decoration:none}
.footer-about p{margin:0;line-height:1.65;max-width:380px}
.footer-badge{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:rgba(0,180,237,.14);border:1px solid rgba(0,180,237,.4);color:#7dd3fc;font-size:.8rem;font-weight:600}
.footer-links{display:flex;flex-direction:column;gap:4px}
.footer-links a{display:flex;align-items:center;gap:8px;padding:3px 0}
.footer-links i{font-size:.65rem;color:var(--sky);transition:transform .15s}.footer-links a:hover i{transform:translateX(3px)}
.footer-contact,.footer-ids{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.footer-contact{gap:12px}
.footer-contact li{display:flex;gap:12px;align-items:flex-start;line-height:1.5}
.footer-contact li>span{flex:0 0 32px;height:32px;border-radius:var(--r);background:rgba(255,255,255,.08);color:var(--sky);display:flex;align-items:center;justify-content:center}
.footer-more{font-size:.8rem;color:#7dd3fc!important}
.footer-ids li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.footer-ids li:first-child{padding-top:2px}
.footer-ids small{color:#a5a0d6;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.footer-ids strong{color:#fff;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.footer-bottom-wrap{background:rgba(0,0,0,.2)}
.footer-bottom{align-items:center;gap:16px;flex-wrap:wrap;border-top:0;padding-top:16px;padding-bottom:16px;font-size:.84rem}
.pay-chips{display:flex;gap:6px;flex-wrap:wrap}
.pay-chips span{padding:4px 10px;border-radius:6px;background:rgba(255,255,255,.1);color:#fff;font-size:.76rem;font-weight:600}
@media (max-width:1100px){.footer-grid{grid-template-columns:1fr 1fr}.footer-cta{flex-wrap:wrap}.footer-cta-actions{margin-left:0}}
@media (max-width:640px){.footer-grid{grid-template-columns:1fr;gap:28px}.footer-cta{padding:20px}.footer-bottom{flex-direction:column;align-items:flex-start}}
.footer-logo{align-self:flex-start}
/* statistieken */
.stats-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 16px;margin-bottom:8px}
.stats-filter label{display:inline-flex;align-items:center;gap:8px;font-weight:600;margin:0}
.stats-filter input,.stats-filter select{padding:7px 10px;border:1px solid var(--line);border-radius:var(--r);font:inherit;background:#fff;width:auto}
.stats-filter .range{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
.stats-filter .btn.is-active{background:var(--navy);color:#fff}
.chip{display:inline-flex;align-items:center;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:600;font-size:.85rem}
.chip:hover{border-color:var(--blue);text-decoration:none}.chip.is-active{background:var(--navy);border-color:var(--navy);color:#fff}
.stats-period{margin:0 0 16px;font-size:.85rem}
.stat small{display:block;color:var(--muted);font-size:.78rem;margin-top:3px}
.chart{display:flex;align-items:stretch;gap:4px;height:230px;padding-top:8px}
.chart-col{flex:1;display:flex;flex-direction:column;min-width:0}
.chart-stack{flex:1;display:flex;flex-direction:column-reverse;border-bottom:1px solid var(--line)}
.chart-bar{background:linear-gradient(180deg,var(--sky),var(--blue));border-radius:3px 3px 0 0}
.chart-bar.alt{background:var(--light)}
.chart-col:hover .chart-bar{filter:brightness(.9)}
.chart-col span{font-size:.7rem;color:var(--muted);text-align:center;margin-top:6px;white-space:nowrap;overflow:visible}
.legend{display:flex;gap:16px;font-size:.82rem;color:var(--muted)}.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;background:var(--blue)}.legend i.alt{background:var(--light)}
.stats-grid{align-items:start;margin-bottom:12px}
.meter-row{margin-bottom:12px}.meter-label{display:flex;justify-content:space-between;gap:10px;font-size:.88rem}
.meter{height:8px;border-radius:999px;background:#eef0f4;overflow:hidden;margin-top:5px}.meter span{display:block;height:100%;background:linear-gradient(90deg,var(--sky),var(--navy));border-radius:999px}
.num{text-align:right!important;font-variant-numeric:tabular-nums;white-space:nowrap}
.rubriek{display:inline-block;min-width:34px;padding:2px 8px;border-radius:6px;background:var(--navy);color:#fff;font-weight:700;font-size:.78rem;text-align:center}
@media (max-width:760px){.stats-filter .range{margin-left:0}.chart{height:170px;gap:2px}.chart-col:not(:first-child):not(:last-child) span{visibility:hidden}}
@media print{.topbar,.header,.footer,.cmyk-line,.admin-side,.account-nav,.no-print,.toasts,.impersonate-bar,.page-head{display:none!important}.admin-layout,.admin-main{display:block!important;margin:0!important;padding:0!important}.card{box-shadow:none!important;break-inside:avoid}body{background:#fff}}
/* compacte tabellen + labels */
.admin-layout .table td{padding:8px 12px}.admin-layout .table th{padding:9px 12px;font-size:.72rem}
.table .badge{gap:6px;padding:2px 9px 2px 8px;border-radius:6px;font-size:.72rem;line-height:1.5;letter-spacing:.01em;box-shadow:inset 0 0 0 1px currentColor;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 22%,transparent)}
.table .badge i{display:none}
.table .badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.table td small.muted{font-size:.74rem;line-height:1.2}.admin-layout .table td{line-height:1.35}
.table td .bi-truck,.table td .bi-shop{color:var(--muted);margin-right:2px}
/* productgalerij */
.pdp-gallery{min-width:0}.pdp-img{position:relative}
.pdp-slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.pdp-slides::-webkit-scrollbar{display:none}
.pdp-slides img{flex:0 0 100%;width:100%;scroll-snap-align:start}
.has-many .pdp-slides img{aspect-ratio:1/1;object-fit:contain;background:#fff}
.pdp-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.94);box-shadow:0 4px 14px rgba(16,24,40,.15);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--navy);font-size:1.1rem;transition:.15s}
.pdp-nav:hover{background:var(--navy);color:#fff}.pdp-nav.prev{left:14px}.pdp-nav.next{right:14px}
.pdp-count{position:absolute;right:14px;bottom:14px;background:rgba(29,29,27,.72);color:#fff;font-size:.75rem;font-weight:600;padding:3px 10px;border-radius:99px}
.pdp-thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding-bottom:4px}
.pdp-thumbs button{flex:0 0 78px;height:78px;padding:0;border:2px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden;cursor:pointer;opacity:.65;transition:.15s}
.pdp-thumbs button img{width:100%;height:100%;object-fit:cover}
.pdp-thumbs button.is-active,.pdp-thumbs button:hover{border-color:var(--blue);opacity:1}
@media (max-width:760px){.pdp-nav{display:none}.pdp-thumbs button{flex-basis:60px;height:60px}}
.img-manager{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.img-manager:empty{display:none}
.img-tile{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.img-tile img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.img-tile:first-child{border-color:var(--blue);box-shadow:0 0 0 2px var(--light)}
.img-main-badge{display:none;position:absolute;top:8px;left:8px;gap:4px;align-items:center;background:var(--navy);color:#fff;font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:6px}
.img-tile:first-child .img-main-badge{display:inline-flex}
.img-tile-actions{display:flex;border-top:1px solid var(--line);background:var(--bg)}
.img-tile-actions button{flex:1;border:0;background:none;padding:7px 0;cursor:pointer;color:var(--ink)}
.img-tile-actions button:hover{background:#e6f4fb;color:var(--blue)}.img-tile-actions .danger:hover{background:#fdecec;color:var(--danger)}
/* statistieken v2 */
.stat{position:relative}
.trend{display:inline-flex;align-items:center;gap:2px;padding:1px 7px;border-radius:6px;font-size:.72rem;font-weight:700}
.trend.up{background:#e7f6ee;color:var(--success)}.trend.down{background:#fdecec;color:var(--danger)}
.chart-wrap{padding-top:10px}
.chart-plot{position:relative;height:230px;margin-left:64px}
.chart-grid div{position:absolute;left:0;right:0;border-top:1px dashed #e3e6ee}
.chart-grid div:first-child{border-top-style:solid}.chart-grid div:last-child{border-top:1px solid var(--line)}
.chart-grid span{position:absolute;right:calc(100% + 10px);top:-.6em;font-size:.7rem;color:var(--muted);white-space:nowrap}
.chart-avg{position:absolute;left:0;right:0;border-top:2px dashed var(--navy);opacity:.55;z-index:1;pointer-events:none}
.chart-avg span{position:absolute;right:0;top:-1.6em;font-size:.68rem;font-weight:700;color:var(--navy);background:#fff;padding:0 4px;border-radius:4px}
.chart-bars{position:absolute;inset:0;display:flex;gap:4px;align-items:stretch;z-index:2}
.chart-bars .chart-col{flex:1;display:flex;flex-direction:column-reverse;position:relative;min-width:0;cursor:default}
.chart-bars .chart-bar{border-radius:3px 3px 0 0}
.chart-bars .chart-col:hover{background:rgba(0,159,227,.06)}
.chart-bars .chart-col:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% - 6px);left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:.74rem;line-height:1.45;white-space:pre;padding:7px 10px;border-radius:6px;box-shadow:0 8px 20px rgba(0,0,0,.18);z-index:5;pointer-events:none}
.chart-bars .chart-col:first-child:hover::after{left:0;transform:none}.chart-bars .chart-col:last-child:hover::after{left:auto;right:0;transform:none}
.chart-labels{display:flex;gap:4px;margin:8px 0 0 64px}.chart-labels span{flex:1;min-width:0;font-size:.7rem;color:var(--muted);white-space:nowrap;overflow:visible}
.meter.thin{height:4px;margin-top:6px}
.page-path{display:block;font-size:.72rem}
.ref-icon{width:22px;display:inline-block;color:var(--navy)}
.ink-dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px;vertical-align:-1px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.donut{width:150px;height:150px;border-radius:50%;margin:4px auto 18px;display:flex;align-items:center;justify-content:center;position:relative}
.donut::before{content:"";position:absolute;inset:22px;border-radius:50%;background:#fff}
.donut span{position:relative;text-align:center;font-size:.75rem;color:var(--muted);line-height:1.2}.donut strong{display:block;font-size:1.3rem;color:var(--ink)}
.legend-dot{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px}
@media (max-width:760px){.chart-plot{height:170px;margin-left:48px}.chart-labels{margin-left:48px}.chart-labels span:not(:first-child):not(:last-child){visibility:hidden}}
.stat strong{display:inline-block}.stat div>span:not(.trend){display:block}
.stat .trend{display:flex;width:fit-content;margin:5px 0 3px}
.stat .trend i{display:inline;width:auto;height:auto;font-size:.7rem;background:none!important;color:inherit!important;border-radius:0}
/* icoontjes met tooltip */
.table .ico-cell{text-align:center;width:1%;white-space:nowrap;padding-left:16px;padding-right:16px}
.ico-badge{position:relative;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;font-size:1rem;cursor:help;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 20%,transparent);transition:transform .15s}
.ico-badge:hover,.ico-badge:focus{transform:translateY(-1px);outline:none}
.badge-neutral{background:#f1f2f5;color:#5b6170}
.ico-badge[data-tip]::after,.ico-badge[data-tip]::before{position:absolute;left:50%;transform:translateX(-50%);opacity:0;pointer-events:none;transition:opacity .15s;z-index:20}
.ico-badge[data-tip]::after{content:attr(data-tip);bottom:calc(100% + 8px);background:var(--ink);color:#fff;font-size:.74rem;font-weight:600;line-height:1.3;white-space:nowrap;padding:5px 9px;border-radius:6px;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.ico-badge[data-tip]::before{content:"";bottom:calc(100% + 3px);border:5px solid transparent;border-bottom:0;border-top-color:var(--ink)}
.ico-badge:hover::after,.ico-badge:hover::before,.ico-badge:focus::after,.ico-badge:focus::before{opacity:1}
.ico-none{background:none;color:#c3c7d2;box-shadow:none}
/* voortgang bestellingen */
.deliv{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:99px;background:#f1f2f5;color:#4b5161;font-size:.78rem;font-weight:600;white-space:nowrap}
.deliv i{color:var(--navy);font-size:.9rem}
.ico-badge.ico-solid{width:26px;height:26px;border-radius:7px;font-size:.86rem;color:var(--tone);background:color-mix(in srgb,var(--tone) 9%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone) 35%,transparent);transition:background .15s}
.ico-badge.ico-solid:hover,.ico-badge.ico-solid:focus{background:color-mix(in srgb,var(--tone) 16%,#fff)}
.tone-success{--tone:#16a34a}.tone-info{--tone:#009fe3}.tone-primary{--tone:#312783}.tone-warning{--tone:#d97706}.tone-danger{--tone:#dc2626}.tone-muted,.tone-neutral{--tone:#8a90a0}.tone-uv{--tone:#7c3aed}
.ico-badge.ink-ico{width:auto;padding:0 9px 0 7px;gap:5px;font-size:.72rem;font-weight:700;letter-spacing:.04em}
.ico-badge.ico-label{width:auto;padding:0 10px 0 8px;gap:6px;font-size:.76rem;font-weight:600;white-space:nowrap;cursor:default}.ico-label i{font-size:.85rem}.ink-ico i{font-size:.85rem}

.auth-body{background:#f4f6fb;min-height:100vh}
.auth-split{display:grid;grid-template-columns:minmax(380px,44%) 1fr;min-height:100vh}
.auth-brand{position:relative;display:flex;flex-direction:column;padding:44px 56px;color:#fff;background:radial-gradient(circle at 85% 15%,rgba(0,180,237,.45),transparent 45%),radial-gradient(circle at 10% 90%,rgba(0,159,227,.35),transparent 50%),linear-gradient(150deg,#312783,#1f1a5c);overflow:hidden}
.auth-brand .cmyk-line{position:absolute;top:0;left:0;right:0}
.auth-brand::after{content:"";position:absolute;right:-120px;bottom:-120px;width:360px;height:360px;border-radius:50%;border:40px solid rgba(255,255,255,.05)}
.auth-logo img{height:46px}
.auth-pitch{margin:auto 0;max-width:440px}
.auth-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:8px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.auth-pitch h2{font-size:2.3rem;line-height:1.15;margin:18px 0 26px;color:#fff}
.auth-pitch ul{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.auth-pitch li{display:flex;align-items:center;gap:12px;color:#dfe6ff}
.auth-pitch li i{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.1);color:var(--sky,#00b4ed);font-size:1rem;flex:none}
.auth-foot{color:#aab2dc;position:relative;z-index:1}.auth-foot a{color:#dfe6ff}
.auth-main{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;position:relative}
.auth-back{position:absolute;top:28px;left:32px;display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-weight:600;font-size:.9rem}
.auth-back:hover{color:var(--navy)}
.auth-box{width:100%;max-width:460px;background:#fff;border-radius:8px;padding:36px 36px 28px;box-shadow:0 20px 50px -20px rgba(49,39,131,.25),0 0 0 1px rgba(16,24,40,.05)}
.auth-split:has(form[action="/registreren"]) .auth-box{max-width:560px}
.auth-head{margin-bottom:22px}
.auth-ico{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:8px;background:linear-gradient(135deg,#00b4ed,#312783);color:#fff;font-size:1.3rem;margin-bottom:14px}
.auth-head h1{font-size:1.6rem;margin:0 0 6px}
.auth-head p{color:var(--muted);margin:0;font-size:.95rem}
.auth-form{display:grid;gap:4px}
.auth-form .form-links{text-align:center;margin:14px 0 0;color:var(--muted)}
@media (max-width:900px){
.auth-split{grid-template-columns:1fr;min-height:0}
.auth-brand{padding:22px 20px 20px}.auth-brand::after,.auth-pitch ul,.auth-foot{display:none}
.auth-pitch{margin:16px 0 0}.auth-pitch h2{font-size:1.35rem;margin:12px 0 0}.auth-logo img{height:36px}
.auth-main{padding:16px 14px 40px;justify-content:flex-start}
.auth-back{position:static;align-self:flex-start;margin:0 0 14px}
.auth-box{padding:24px 20px}
}
.tabs-form .form-actions[hidden]{display:none}
.card-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}.card-head-row .card-title{margin-bottom:2px}.card-head-row p{margin:0}

.page-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
}

.page-link i {
    color: var(--blue, #009fe3);
}

.table .nowrap {
    white-space: nowrap;
}

.account-nav {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
}

.account-nav > a,
.account-nav > button,
.account-nav > form button {
    justify-content: center;
    white-space: nowrap;
}

.account-nav > form {
    display: flex;
    margin-left: 0;
}

.account-nav > form button {
    flex: 1;
}

@media (max-width: 1000px) {
    .account-nav {
        grid-auto-flow: row;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .account-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-nav > a,
    .account-nav > button,
    .account-nav > form button {
        padding: 9px 8px;
        white-space: normal;
        text-align: center;
    }
}

.maintenance-bar {
    background: #b45309;
    color: #fff;
    font-size: .9rem;
}

.maintenance-bar .btn {
    background: #fff;
    color: #7a3a00;
    border-color: #fff;
}

.maintenance-bar i {
    margin-right: 6px;
}

.auth-maintenance {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 18px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    font-size: .88rem;
}

.auth-maintenance strong {
    display: block;
}

.maintenance {
    position: fixed;
    inset: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 40px 16px;
    background: linear-gradient(135deg, #00b4ed 0%, #009fe3 45%, #312783 100%);
}

.maintenance > .cmyk-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.maintenance-box {
    width: 100%;
    max-width: 520px;
    background: #fff;
    border-radius: 8px;
    padding: 36px 32px 28px;
    text-align: center;
    box-shadow: 0 30px 60px -25px rgba(20, 15, 70, .55);
}

.maintenance-logo {
    height: 44px;
    margin: 0 auto 22px;
    display: block;
}

.maintenance-icon {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e6f6fd;
    color: var(--blue);
    font-size: 1.6rem;
    margin-bottom: 12px;
}

.maintenance-box h1 {
    font-size: 1.5rem;
    margin: 0 0 10px;
    color: var(--ink);
}

.maintenance-box p {
    color: var(--muted);
    margin: 0 0 10px;
}

.maintenance-contact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 18px 0 20px;
}

.maintenance-contact a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    background: var(--bg);
    color: var(--navy);
    font-weight: 600;
}

.maintenance-login {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
    color: var(--muted);
}

.maintenance-foot {
    color: rgba(255, 255, 255, .8);
}

.btn-account {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.btn-account:hover {
    border-color: var(--light);
    box-shadow: 0 4px 14px -6px rgba(0, 159, 227, .45);
    text-decoration: none;
}

.btn-account-icon {
    width: 31px;
    height: 31px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--sky), var(--navy));
    color: #fff;
    font-size: 1.05rem;
}

.header-actions .btn-cart,
.header-actions .btn-account {
    height: 42px;
}

.header-actions .btn-account {
    width: 42px;
}

.header-actions .btn-account-icon {
    width: 32px;
    height: 32px;
}

@media (max-width: 640px) {
    .header-actions .btn-cart {
        width: 42px;
        padding: 0;
    }

    .header-actions .cart-count {
        position: absolute;
        top: -7px;
        right: -7px;
        margin: 0;
        border: 2px solid #fff;
    }
}
/* instellingen: kaarten als uitklapblokken over de volle breedte */
.tabs-form .tab-pane{grid-template-columns:minmax(0,1fr);gap:12px}

.account-nav>.tab-dd{position:relative;display:flex;min-width:0}
.account-nav>.tab-dd>button{flex:1;min-width:0;justify-content:center;white-space:nowrap}
.tab-caret{font-size:11px;opacity:.7;transition:transform .15s}
.tab-dd.is-open .tab-caret{transform:rotate(180deg)}
.tab-menu{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:30;min-width:100%;width:max-content;max-width:min(320px,90vw);padding:6px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 12px 32px rgba(49,39,131,.14)}
.tab-dd.is-open .tab-menu{display:block}
.account-nav .tab-menu button{display:flex;width:100%;justify-content:flex-start;padding:9px 12px;white-space:normal;text-align:left;font-weight:500}
.admin-tabs .tab-menu button.is-active{background:#e6f6fd;color:var(--navy);font-weight:600}
@media (max-width:600px){.account-nav>.tab-dd>button{padding:9px 8px;white-space:normal}.tab-menu{width:100%;min-width:0}}

.prose h1,.prose h2,.prose h3,.prose h4,.prose h5,.prose h6,.about-text h1,.about-text h3,.about-text h4,.about-text h5,.about-text h6{margin:1.3em 0 .5em;line-height:1.2;color:var(--navy)}
.prose h1{font-size:1.9rem}.prose h2{font-size:1.5rem}.prose h3{font-size:1.25rem}.prose h4{font-size:1.1rem}.prose h5{font-size:1rem}.prose h6{font-size:.9rem;text-transform:uppercase;letter-spacing:.05em}
.prose>:first-child{margin-top:0}
.prose ul,.prose ol,.about-text ul,.about-text ol{margin:0 0 1em;padding-left:1.4em}
.prose li{margin:.25em 0}
.prose blockquote{margin:0 0 1em;padding:8px 16px;border-left:3px solid var(--blue);background:#f5f7fb}

.own-price{display:inline-block;flex-basis:auto!important;align-self:center;margin-left:6px;padding:1px 7px;border-radius:999px;background:#e6f6fd;color:var(--blue);font-size:.72rem;font-weight:700;vertical-align:middle}
.tier-box{margin:14px 0;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);background:#f5f9fd}
.tier-box>strong{display:flex;align-items:center;gap:8px;color:var(--navy);margin-bottom:6px}
.tier-table{width:100%;border-collapse:collapse;margin-bottom:6px}
.tier-table td{padding:6px 0;border-bottom:1px solid var(--line)}
.tier-table tr:last-child td{border-bottom:0}
.tier-table .num{text-align:right;padding-left:12px}
.address-card{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.address-card p{margin:6px 0 0}
.address-card.is-active{border-color:var(--blue);box-shadow:0 0 0 2px rgba(0,159,227,.2)}
.address-actions{display:flex;gap:6px;flex-shrink:0}
.address-pick{margin-bottom:14px}
.field-label{display:block;font-weight:600;font-size:.88rem;margin:4px 0 8px}
@media (max-width:640px){.address-card{flex-direction:column}}

.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-bottom:20px}
.blog-card{padding:0;overflow:hidden;display:flex;flex-direction:column;margin:0;transition:.15s}
.blog-card:hover{border-color:#cfd3dc;transform:translateY(-2px)}
.blog-card-img{display:block;aspect-ratio:16/9;background:var(--bg);overflow:hidden}
.blog-card-img>img{width:100%;height:100%;object-fit:cover;display:block}
.blog-card-ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:linear-gradient(135deg,var(--sky),var(--navy))}
.blog-card-ph img{width:45%;max-width:180px;height:auto;opacity:.9}
.blog-card-body{padding:18px;display:flex;flex-direction:column;flex:1}
.blog-card-body time,.blog-date{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.85rem}
.blog-card-body h2{font-size:1.2rem;margin:8px 0}
.blog-card-body h2 a{color:var(--ink)}
.blog-card-body p{color:var(--muted);font-size:.92rem;flex:1}
.blog-more{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.blog-post{padding:0;overflow:hidden;max-width:860px;margin:0 auto 32px}
.blog-post-img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.blog-post-inner{padding:32px 40px 40px}
.blog-post-inner h1{margin:14px 0 8px;font-size:2.1rem;line-height:1.15;color:var(--navy)}
.blog-back{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.9rem}
.blog-intro{font-size:1.12rem;color:var(--ink);font-weight:500;margin:18px 0 22px}
.blog-others-title{max-width:860px;margin:0 auto 14px}
@media (max-width:640px){.blog-post-inner{padding:20px 18px 26px}.blog-post-inner h1{font-size:1.6rem}}
/* Blog-categorieën en kennisbank */
.chip-bar{display:flex;flex-wrap:wrap;gap:8px}
.chip i{margin-right:6px}
.post-chips{margin:0 0 20px}
.post-cat{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:#ebe9f7;color:var(--navy);font-size:.8rem;font-weight:600}
.post-cat:hover{text-decoration:none;background:var(--navy);color:#fff}
.blog-card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.blog-date{flex-wrap:wrap;gap:8px 14px}.blog-date>span,.blog-date>time{display:inline-flex;align-items:center;gap:6px}
.kb-hero{background:linear-gradient(135deg,var(--navy),#1f1a5c 55%,#0a5f8f);color:#fff;padding:56px 0 64px;text-align:center}
.kb-hero h1{color:#fff;font-size:2.4rem;margin:14px 0 8px}
.kb-hero p{color:rgba(255,255,255,.82);margin:0 auto 26px;max-width:560px}
.kb-hero .ink-dtf{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25)}
.kb-search{position:relative;display:flex;gap:8px;max-width:640px;margin:0 auto;background:#fff;border-radius:var(--r);padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.kb-search>i{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--muted)}
.kb-search input{flex:1;min-width:0;border:0;outline:0;padding:10px 10px 10px 40px;font:inherit;font-size:1rem;background:transparent;color:var(--ink)}
.kb-side .kb-search{box-shadow:var(--shadow);border:1px solid var(--line);margin-bottom:20px}
.kb-side .kb-search .btn{display:none}
.kb-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;margin-top:-40px;position:relative}
.kb-cats .kb-cat{margin:0;display:flex;flex-direction:column;gap:6px;color:var(--ink);transition:.15s}
.kb-cat:hover{text-decoration:none;border-color:var(--blue);transform:translateY(-2px)}
.kb-cat strong{font-size:1.1rem;margin-top:8px}
.kb-cat p{color:var(--muted);font-size:.9rem;margin:0;flex:1}
.kb-cat-icon{width:46px;height:46px;flex:0 0 46px;border-radius:var(--r);background:linear-gradient(160deg,var(--sky),var(--blue) 55%,var(--navy));color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.kb-cat-count{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-weight:600;font-size:.88rem;margin-top:8px}
.kb-subtitle{margin:34px 0 14px;font-size:1.3rem}
.kb-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}.kb-head h2{margin:0;font-size:1.3rem}
.kb-list{padding:6px 0}
.kb-item{display:flex;align-items:center;gap:14px;padding:14px 20px;color:var(--ink);border-bottom:1px solid var(--line)}
.kb-item:last-child{border-bottom:0}
.kb-item:hover{text-decoration:none;background:var(--bg)}
.kb-item-icon{width:36px;height:36px;flex:0 0 36px;border-radius:8px;background:#e6f4fb;color:var(--blue);display:flex;align-items:center;justify-content:center}
.kb-item-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.kb-item-text small{color:var(--muted);font-size:.88rem}
.kb-item-text em{font-style:normal;color:var(--muted);font-size:.8rem}
.kb-item-go{color:var(--muted)}
.kb-empty{text-align:center;color:var(--muted)}.kb-empty>i{font-size:2rem;color:var(--blue)}.kb-empty p{margin:8px 0 0}
.kb-help{display:flex;align-items:center;gap:16px;margin-top:30px}
.kb-help div{flex:1}.kb-help p{margin:2px 0 0;color:var(--muted)}
.kb-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.9rem;color:var(--muted);margin-bottom:16px}
.kb-crumbs i{font-size:.7rem}.kb-crumbs span{color:var(--ink);font-weight:600}
.kb-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:24px;align-items:start}
.kb-side .card{padding:16px}
.kb-side h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 10px}
.kb-side-cats a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;color:var(--ink);font-weight:500}
.kb-side-cats a i{color:var(--blue)}
.kb-side-cats a span{margin-left:auto;font-size:.8rem;color:var(--muted)}
.kb-side-cats a:hover{background:var(--bg);text-decoration:none}
.kb-side-cats a.is-active{background:var(--navy);color:#fff}.kb-side-cats a.is-active i,.kb-side-cats a.is-active span{color:#fff}
.kb-toc a{display:block;padding:6px 10px;border-left:2px solid var(--line);color:var(--ink);font-size:.9rem}
.kb-toc a:hover{border-color:var(--blue);color:var(--blue);text-decoration:none}
.kb-toc a.lvl-3{padding-left:22px;font-size:.85rem;color:var(--muted)}
.kb-article{max-width:none;margin-bottom:0}
.kb-article .prose h2,.kb-article .prose h3{scroll-margin-top:20px}
@media (max-width:900px){.kb-layout{grid-template-columns:1fr}.kb-layout-article .kb-side{order:2}.kb-cats{margin-top:-30px}}
@media (max-width:640px){.kb-hero{padding:36px 0 52px}.kb-hero h1{font-size:1.7rem}.kb-search .btn{padding:0 14px}.kb-help{flex-direction:column;align-items:flex-start}.kb-item{padding:12px 14px}}
.hero-lead{max-width:620px}.hero-lead>*{color:rgba(255,255,255,.82)}.hero-lead h2,.hero-lead h3,.hero-lead h4,.hero-lead h5,.hero-lead h6{color:#fff;margin:10px 0 6px}.hero-lead a{color:#fff;text-decoration:underline}.hero-lead ul,.hero-lead ol{padding-left:20px}