/* ==========================================================================
   NTG VISUALZ — shop
   Gebruikt dezelfde kleuren en lettertypen als de rest (css/site.css).
   Alles hier is mobiel eerst: één kolom op een telefoon, meer kolommen
   naarmate er ruimte is. Niets hangt af van hover.
   ========================================================================== */

body.shop main{padding-top:72px}
.shop-hero{padding:clamp(56px,10vw,130px) 0 clamp(24px,4vw,50px)}
.shop-hero h1{font-size:clamp(56px,13vw,170px)}
.shop-hero h1 em{font-style:normal;color:var(--accent)}
.shop-hero .lead{margin-top:22px}

/* ---------- e-mail aanmelden ---------- */
.sub-box{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-soft);
  padding:clamp(22px,4vw,44px);display:grid;gap:clamp(18px,3vw,40px);
  grid-template-columns:1fr}
@media(min-width:880px){ .sub-box{grid-template-columns:1fr 1.1fr;align-items:center} }
.sub-box h2{margin:0 0 10px;font-size:clamp(24px,3.2vw,38px);line-height:1.05;font-weight:800;
  letter-spacing:-.02em}
.sub-box p{margin:0;color:var(--ink-dim);max-width:46ch}

.sub{display:flex;flex-direction:column;gap:12px}
@media(min-width:560px){ .sub .sub-row{flex-direction:row} }
.sub-row{display:flex;flex-direction:column;gap:12px}
.sub input[type=email]{
  flex:1;min-width:0;min-height:54px;padding:0 20px;border-radius:999px;
  background:var(--bg);border:1px solid var(--line);color:var(--ink);
  font:inherit;font-size:16px;/* 16px: iPhone zoomt anders in op het veld */
  transition:border-color .25s}
.sub input[type=email]::placeholder{color:var(--ink-dim)}
.sub input[type=email]:focus{outline:none;border-color:var(--ink)}
.sub .btn{justify-content:center;min-height:54px;white-space:nowrap}
.sub .btn[disabled]{opacity:.6;cursor:progress}
.sub .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.sub-note{font-size:13px;color:var(--ink-dim);margin:0}
.sub-msg{min-height:1.5em;margin:0;font-size:14.5px}
.sub-msg.ok{color:#2BD576}
.sub-msg.bad{color:#FF6B5E}
.sub-msg a{text-decoration:underline}

/* ---------- producten ---------- */
.shop-prod{padding:clamp(54px,8vw,110px) 0 clamp(40px,6vw,80px)}
.shop-grid{display:grid;gap:clamp(16px,2.4vw,28px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg-soft);overflow:hidden}
.card .pic{aspect-ratio:4/3;background:var(--bg);overflow:hidden;border-bottom:1px solid var(--line)}
.card .pic img{width:100%;height:100%;object-fit:cover}
.card .cb{display:flex;flex-direction:column;gap:10px;padding:clamp(18px,2.4vw,24px);flex:1}
.card .ctag{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim)}
.card h3{font-size:clamp(20px,2vw,24px);line-height:1.15}
.card .cd{margin:0;color:var(--ink-dim);font-size:15.5px}
.card .crow{margin-top:auto;padding-top:16px;display:flex;align-items:center;
  justify-content:space-between;gap:14px}
.card .price{font-weight:800;font-size:22px;letter-spacing:-.01em}
.card .btn{min-height:50px;justify-content:center}

.shop-empty{border:1px dashed var(--line);border-radius:var(--radius);
  padding:clamp(30px,6vw,70px);text-align:center}
.shop-empty h3{font-size:clamp(22px,3vw,32px);margin-bottom:10px}
.shop-empty p{margin:0 auto;color:var(--ink-dim);max-width:44ch}

.shop-foot{padding-top:0;padding-bottom:clamp(50px,7vw,90px);display:flex;flex-wrap:wrap;gap:10px 26px;
  align-items:center;justify-content:space-between;font-size:13.5px;color:var(--ink-dim)}
.shop-foot a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}