/*
Theme Name: Laagwerk Studio
Theme URI: https://laagwerkstudio.nl
Author: Bodi
Description: Thema voor Laagwerk Studio: 3D-ontwerp en print op maat, een eenvoudige shop en gratis bestanden via MakerWorld. Aanvragen en bestellingen komen binnen in het dashboard en per mail.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: laagwerk
*/

:root{
  --paper:#F2F3F1; --surface:#FFFFFF; --ink:#16181B; --muted:#5E646A; --line:#D7DAD6;
  --accent:#2D49D6; --accent-ink:#FFFFFF; --accent-soft:#E3E7FB; --ok:#2F7D4F; --ok-soft:#E3F1E8; --err:#B4352B; --err-soft:#F8E4E1;
  --mw:#0E7C4A; --mw-soft:#E1F1E8; --header:rgba(242,243,241,.92);
  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --r:6px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --paper:#111315; --surface:#1A1D20; --ink:#ECEEEC; --muted:#9AA0A6; --line:#2C3035;
  --accent:#7B90FF; --accent-ink:#0E1120; --accent-soft:#1E2442; --ok:#6BC28E; --ok-soft:#15281C; --err:#F08A80; --err-soft:#2E1714;
  --mw:#5FCB94; --mw-soft:#14281D; --header:rgba(17,19,21,.92); color-scheme:dark}}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:80px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.55}
img{max-width:100%;height:auto}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0;line-height:1.05}
p{margin:0}
.label{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* header */
header.top{position:sticky;top:0;z-index:50;background:var(--header);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.admin-bar header.top{top:32px}
@media (max-width:782px){.admin-bar header.top{top:46px}}
@media (max-width:600px){.admin-bar header.top{top:0}}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand svg{width:26px;height:26px;display:block}
.brand b{font-family:var(--f-display);font-stretch:118%;font-weight:750;font-size:19px;letter-spacing:-.01em}
.st{font-family:var(--f-mono);font-weight:500;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);align-self:flex-start;margin-top:2px}
nav.main{display:flex;gap:18px;font-size:14px;align-items:center}
nav.main a{text-decoration:none;color:var(--muted)}
nav.main a:hover{color:var(--ink)}
nav.main .cartlink{color:var(--ink);font-family:var(--f-mono);font-size:12.5px;border:1px solid var(--line);border-radius:999px;padding:3px 10px;background:var(--surface)}

/* notices */
.notice{border-radius:var(--r);padding:14px 16px;margin-bottom:20px;font-size:15px;border:1px solid var(--line)}
.notice.ok{background:var(--ok-soft);border-color:var(--ok)}
.notice.err{background:var(--err-soft);border-color:var(--err)}
.notice b{font-family:var(--f-mono);font-weight:500}

/* hero */
.hero{padding-block:56px 44px;display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:end}
.hero h1{font-stretch:125%;font-weight:800;font-size:clamp(46px,8.5vw,104px);letter-spacing:-.035em}
.hero h1 .stud{display:block;font-family:var(--f-mono);font-weight:500;font-stretch:100%;font-size:.17em;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin:0 0 .45em .15em}
.hero h1 .sub{display:block;font-stretch:62%;font-weight:500;font-size:.34em;letter-spacing:0;color:var(--muted);margin-top:12px}
.hero .side{display:grid;gap:18px;min-width:0}
.hero .side p{font-size:18px;max-width:42ch}
.specs{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--f-mono);font-size:12px;border:1px solid var(--line);border-radius:999px;padding:4px 10px;color:var(--muted)}
.cta{display:flex;gap:10px;flex-wrap:wrap}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:0 0 80px;list-style:none;padding:0}
.steps li{background:var(--surface);padding:20px;display:grid;gap:8px;align-content:start;min-width:0}
.steps .n{font-family:var(--f-mono);font-size:12px;color:var(--accent)}
.steps h3{font-size:20px;font-stretch:110%;font-weight:700}
.steps p{color:var(--muted);font-size:14.5px}

/* sections */
section.block{scroll-margin-top:80px;margin-bottom:88px}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.sec-head h2{font-size:clamp(30px,4.5vw,44px);font-stretch:112%;font-weight:750;letter-spacing:-.02em}
.sec-head p{color:var(--muted);max-width:48ch}
.empty-state{border:1px dashed var(--line);border-radius:var(--r);padding:28px;color:var(--muted);background:var(--surface)}

/* forms */
.bench{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px;align-items:start}
.lw-form{display:grid;gap:28px;min-width:0}
fieldset{border:0;margin:0;padding:0;display:grid;gap:12px;min-width:0}
legend{padding:0;margin-bottom:10px;display:flex;gap:10px;align-items:baseline}
legend .n{font-family:var(--f-mono);font-size:12px;color:var(--accent)}
legend b{font-family:var(--f-display);font-stretch:108%;font-weight:700;font-size:19px}
.types{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.type{position:relative}
.type input{position:absolute;opacity:0;pointer-events:none}
.type label{display:grid;gap:4px;height:100%;padding:14px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);cursor:pointer}
.type label b{font-weight:600}
.type label small{color:var(--muted);font-size:13px;line-height:1.4}
.type input:checked+label{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--accent-soft)}
.type input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:grid;gap:6px;min-width:0}
.field>span{font-size:13.5px;font-weight:500}
.field>span em{font-style:normal;color:var(--muted);font-weight:400}
.lw-form input[type=text],.lw-form input[type=email],.lw-form input[type=number],.lw-form input[type=date],.lw-form input[type=url],.lw-form select,.lw-form textarea,.ticket input[type=text],.ticket input[type=email],.ticket textarea{
  width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
.lw-form textarea{min-height:110px;resize:vertical}
.ticket textarea{min-height:70px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.invalid{border-color:var(--err)!important}
.hint{font-size:13px;color:var(--muted);font-family:var(--f-body)}
.err{font-size:13px;color:var(--err);font-family:var(--f-body)}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.sw{position:relative}
.sw input{position:absolute;opacity:0}
.sw label{display:flex;align-items:center;gap:7px;padding:6px 10px 6px 6px;border:1px solid var(--line);border-radius:999px;background:var(--surface);cursor:pointer;font-size:13.5px}
.sw i{width:18px;height:18px;border-radius:50%;background:var(--c);border:1px solid var(--line)}
.sw input:checked+label{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.sw input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}
.files{font-family:var(--f-mono);font-size:12.5px;color:var(--muted)}
.btn{font:inherit;font-weight:600;font-size:15px;border:0;border-radius:var(--r);padding:12px 18px;cursor:pointer;background:var(--accent);color:var(--accent-ink);text-decoration:none;display:inline-flex;align-items:center;gap:8px;justify-content:center}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.sm{font-size:14px;padding:8px 12px}
.btn.mw{background:var(--mw);color:var(--surface)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ticket */
.ticket{position:sticky;top:90px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);font-family:var(--f-mono);font-size:13px;min-width:0}
.ticket .t-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px dashed var(--line)}
.ticket .t-head b{font-family:var(--f-display);font-stretch:118%;font-weight:750;font-size:15px}
.ticket dl{margin:0;padding:12px 16px;display:grid;grid-template-columns:auto 1fr;gap:6px 14px}
.ticket dt{color:var(--muted)}
.ticket dd{margin:0;text-align:right;overflow-wrap:anywhere}
.ticket dd.empty{color:var(--muted);opacity:.7}
.ticket .desc{padding:0 16px 14px;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere;max-height:9em;overflow:auto}
.ticket .t-foot{border-top:1px dashed var(--line);padding:14px 16px;display:grid;gap:10px}
.ticket .field>span{font-family:var(--f-body)}

/* shop */
.shop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:24px;align-items:start}
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;min-width:0}
.prod{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:grid;grid-template-rows:auto 1fr;min-width:0}
.prod .pic{aspect-ratio:4/3;max-width:100%;display:grid;place-items:center;background:repeating-linear-gradient(0deg,var(--line) 0 1px,transparent 1px 9px),var(--paper);border-bottom:1px solid var(--line);overflow:hidden}
.prod .pic img{width:100%;height:100%;object-fit:cover;display:block}
.prod .pic svg{width:56px;height:56px;color:var(--muted);opacity:.7}
.prod .body{padding:16px;display:grid;gap:8px;align-content:start}
.prod h3{font-size:19px;font-stretch:108%;font-weight:700}
.prod p{color:var(--muted);font-size:14px}
.prod .meta{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.prod .row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px;flex-wrap:wrap}
.price{font-family:var(--f-mono);font-weight:500;font-variant-numeric:tabular-nums;font-size:15px}
.price.tbd{color:var(--muted);font-size:13px}
.mwlink{font-size:13px;color:var(--mw);text-decoration:none}
.mwlink:hover{text-decoration:underline}
.cart-items{list-style:none;margin:0;padding:12px 16px;display:grid;gap:10px}
.cart-items li{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center}
.cart-items .q{display:flex;gap:6px;align-items:center}
.cart-items button{font:inherit;font-size:12px;width:24px;height:24px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:4px;cursor:pointer}
.cart-items .sub{grid-column:1/-1;color:var(--muted);font-size:11.5px}
.cart-empty{padding:16px;color:var(--muted);font-family:var(--f-body);font-size:14px}
.total{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums}

/* makerworld */
.mw-band{background:var(--mw-soft);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:20px}
.mw-band p{max-width:60ch}
.mw-band .handle{font-family:var(--f-mono);font-size:13px;color:var(--mw)}
.models{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.model{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:grid;gap:10px;align-content:start;min-width:0}
.model .thumb{aspect-ratio:4/3;max-width:100%;border-radius:4px;overflow:hidden;background:var(--paper)}
.model .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.model .free{justify-self:start;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mw);border:1px solid var(--mw);border-radius:999px;padding:2px 8px}
.model h3{font-size:18px;font-stretch:108%;font-weight:700}
.model p{color:var(--muted);font-size:14px}
.model .links{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:4px}
.linkbtn{font:inherit;font-size:13px;background:none;border:0;padding:0;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* generic pages */
.entry{max-width:720px;padding-block:56px 80px}
.entry h1{font-size:clamp(34px,5vw,54px);font-stretch:112%;font-weight:750;letter-spacing:-.02em;margin-bottom:24px}
.entry .content{display:grid;gap:1em}
.entry .content h2{font-size:26px;font-stretch:108%;margin-top:.6em}

footer.bottom{border-top:1px solid var(--line);padding-block:24px;color:var(--muted);font-size:13.5px}
footer.bottom .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.footer-menu{list-style:none;margin:0;padding:0;display:flex;gap:16px;flex-wrap:wrap}
.footer-menu a{text-decoration:none}
.footer-menu a:hover{color:var(--ink)}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-block:36px 28px;gap:20px}
  .steps{grid-template-columns:1fr 1fr}
  .bench,.shop{grid-template-columns:1fr}
  .ticket{position:static}
}
@media (max-width:560px){
  nav.main a:not(.cartlink){display:none}
  .steps,.types,.grid2{grid-template-columns:1fr}
}