/* Hallmark · macrostructure: editorial koopgids (per-pagatype) · genre: editorial
 * theme: denim-editorial (paper #f6f1e9 · accent indigo #34407a · koperen topstitch #b5611f · Schibsted Grotesk+Inter)
 * spijkerbroeken-kopen.nl — onafhankelijke koopgids voor spijkerbroeken (jeans) · NL
 * pre-emit critique: P5 H4 E5 S5 R4 V5
 */
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;600&display=swap');

:root{
  --color-blue:#34407a; --color-blue-deep:#222a55;
  --color-rust:#b5611f; --color-rust-d:#974e13;
  --color-stitch:#c98a4a;
  --color-dark:#1b2138; --color-dark-2:#161b2e;
  --color-paper:#f6f1e9; --color-paper-2:#ece4d6;
  --color-ink:#26304f; --color-ink-soft:#586089; --color-ink-inv:#eef0f7;
  --color-wood:#b88a5e; --color-sage:#2f9e63;
  --color-line:#ddd3c2; --color-line-inv:rgba(238,240,247,.16);

  --font-display:'Schibsted Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'Spline Sans Mono',ui-monospace,monospace;

  --space-xs:.5rem; --space-sm:.85rem; --space-md:1.4rem; --space-lg:2.4rem;
  --space-xl:4rem; --space-2xl:6.5rem;
  --gutter:clamp(1rem,5vw,2.5rem);
  --maxw:1140px;

  --text-display:clamp(2.4rem,6vw,4.4rem);
  --text-h2:clamp(1.7rem,3.4vw,2.6rem);
  --text-h3:1.3rem;
  --radius:14px; --radius-sm:9px;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --shadow:0 16px 44px -26px rgba(31,42,48,.4);
}

*{box-sizing:border-box}
html,body{overflow-x:clip}
body{margin:0;font-family:var(--font-body);color:var(--color-ink);
  background:var(--color-paper);line-height:1.7;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:var(--color-blue-deep);text-decoration:none}
a:hover{text-decoration:underline;color:var(--color-rust)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.08;
  letter-spacing:-.018em;margin:0 0 .4em;overflow-wrap:anywhere;min-width:0;color:var(--color-ink)}
h1{font-size:var(--text-display)}
h2{font-size:var(--text-h2)}
h3{font-size:var(--text-h3);font-weight:600}
p{margin:0 0 1em}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.eyebrow{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-blue);font-weight:600;margin-bottom:.6rem}

/* ---- nav: floating pill ---- */
.nav{position:sticky;top:0;z-index:40;padding:.7rem var(--gutter)}
.nav-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;background:rgba(36,54,64,.9);
  backdrop-filter:blur(12px);border:1px solid var(--color-line-inv);
  border-radius:999px;padding:.55rem .85rem .55rem 1.1rem}
.brand{display:flex;align-items:center;gap:.55rem;color:var(--color-ink-inv);
  font-family:var(--font-display);font-weight:600;font-size:1.14rem}
.brand:hover{text-decoration:none}
.brand img{width:30px;height:30px}
.nav-links{display:flex;gap:1.25rem;align-items:center;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--color-ink-inv);font-size:.92rem;opacity:.86}
.nav-links a:hover{opacity:1;text-decoration:none;color:#fff}
.nav-cta{background:var(--color-rust);color:#fff;padding:.5rem 1rem;border-radius:999px;
  font-weight:600;font-size:.9rem}
.nav-cta:hover{background:var(--color-rust-d);text-decoration:none;color:#fff}

/* ---- hero ---- */
.hero{position:relative;background:var(--color-dark-2);color:var(--color-ink-inv);overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(31,42,48,.85) 0%,rgba(31,42,48,.55) 48%,rgba(31,42,48,.2) 100%)}
.hero-content{position:relative;max-width:var(--maxw);margin:0 auto;
  padding:clamp(3.5rem,10vw,7rem) var(--gutter) clamp(3rem,8vw,5.5rem)}
.hero-content.narrow{padding-block:clamp(3rem,7vw,5rem)}
.hero h1{color:#fff;max-width:16ch}
.hero .eyebrow{color:#E9C9A1}
.hero .lead{font-size:1.18rem;max-width:48ch;color:var(--color-ink-inv);opacity:.94}
.btn{display:inline-block;background:var(--color-rust);color:#fff;font-weight:600;
  padding:.85rem 1.5rem;border-radius:999px;transition:transform .2s var(--ease-out),background .2s}
.btn:hover{background:var(--color-rust-d);transform:translateY(-2px);text-decoration:none;color:#fff}
.btn-ghost{background:transparent;border:1.5px solid var(--color-line-inv);color:var(--color-ink-inv)}
.btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem}

/* ---- sections ---- */
section{padding:var(--space-2xl) 0}
.section-head{max-width:56ch;margin-bottom:var(--space-lg)}
.lead{font-size:1.18rem;color:var(--color-ink-soft);max-width:62ch}

/* cards grid */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
.cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:#fff;border:1px solid var(--color-line);border-radius:var(--radius);
  padding:1.6rem;box-shadow:var(--shadow);transition:transform .25s var(--ease-out);display:block;color:inherit}
.card:hover{transform:translateY(-4px);text-decoration:none}
.card .ico{width:46px;height:46px;margin-bottom:.9rem;color:var(--color-blue)}
.card h3{margin-bottom:.3rem}
.card p{color:var(--color-ink-soft);font-size:.96rem;margin:0}
.card .more{display:inline-block;margin-top:.9rem;font-weight:600;font-size:.9rem;color:var(--color-rust)}

/* season strip */
.seasons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
.season{background:#fff;border:1px solid var(--color-line);border-radius:var(--radius);
  padding:1.4rem;border-top:4px solid var(--color-wood);box-shadow:var(--shadow)}
.season.rust{border-top-color:var(--color-sage)}
.season.vlucht{border-top-color:var(--color-rust)}
.season span{font-family:var(--font-mono);font-size:.74rem;color:var(--color-blue);
  text-transform:uppercase;letter-spacing:.1em}
.season h3{margin:.3rem 0}

/* facts (mono) */
.facts{background:var(--color-dark-2);border-radius:var(--radius);padding:var(--space-lg);color:var(--color-ink-inv)}
.facts .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem}
.fact .n{font-family:var(--font-mono);font-size:2rem;color:#fff;font-weight:600;line-height:1.1}
.fact .l{font-size:.8rem;color:rgba(242,238,229,.72);text-transform:uppercase;letter-spacing:.06em}

/* "in het kort" */
.summary{background:var(--color-paper-2);border-left:4px solid var(--color-blue);
  border-radius:var(--radius-sm);padding:1.2rem 1.4rem;margin:1.4rem 0}
.summary h2{font-size:1.25rem;margin-bottom:.5rem}
.summary ul{margin:0;padding-left:1.1rem}.summary li{margin-bottom:.3rem}

/* article layout */
.article{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:var(--space-xl);
  padding-block:var(--space-xl)}
.prose{max-width:70ch}
.prose h2{margin-top:2.2rem}
.prose img{border-radius:var(--radius);margin:1.2rem 0}
.aside-stick{position:sticky;top:90px;align-self:start;display:grid;gap:1.2rem}

table{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:.95rem;
  background:#fff;border:1px solid var(--color-line);border-radius:var(--radius);overflow:hidden}
th,td{text-align:left;padding:.75rem 1rem;border-bottom:1px solid var(--color-line)}
thead th{background:var(--color-blue);color:#fff;font-family:var(--font-body);font-weight:600}
tbody tr:last-child td{border-bottom:0}
.num{font-family:var(--font-mono);color:var(--color-blue-deep)}
.table-scroll{overflow-x:auto}

/* aanrader card */
.rec{display:grid;grid-template-columns:200px 1fr;gap:1.2rem;background:#fff;
  border:1px solid var(--color-line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);margin:1.2rem 0}
.rec-img{min-height:170px;background:var(--color-paper-2);object-fit:cover}
.rec-body{padding:1.3rem;display:flex;flex-direction:column;gap:.5rem}
.badge{align-self:flex-start;background:var(--color-rust);color:#fff;font-size:.7rem;font-weight:700;
  padding:.25rem .65rem;border-radius:999px;letter-spacing:.04em;text-transform:uppercase}
.badge.blue{background:var(--color-blue)}
.rec-who{font-size:.92rem;color:var(--color-ink-soft);margin:0}
.rec ul{list-style:none;padding:0;margin:.2rem 0;display:grid;gap:.25rem}
.rec ul li{font-size:.92rem;padding-left:1.4rem;position:relative}
.rec ul li::before{content:"✓";position:absolute;left:0;color:var(--color-sage);font-weight:700}
.rec ul li.min::before{content:"–";color:var(--color-wood)}
.rec-foot{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:auto;flex-wrap:wrap}

/* steps */
.steps{list-style:none;counter-reset:s;padding:0;margin:1.4rem 0;display:grid;gap:1.2rem}
.steps li{counter-increment:s;position:relative;padding-left:62px;min-height:46px}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;display:grid;place-items:center;width:46px;height:46px;
  border-radius:50%;background:var(--color-blue);color:#fff;font-family:var(--font-display);font-size:1.25rem}
.steps li strong{display:block;margin-bottom:.15rem}

/* faq */
.faq details{border-bottom:1px solid var(--color-line);padding:.85rem 0}
.faq summary{cursor:pointer;font-family:var(--font-display);font-size:1.2rem;list-style:none;
  display:flex;justify-content:space-between;gap:1rem}
.faq summary::after{content:"+";color:var(--color-rust);font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq summary::-webkit-details-marker{display:none}
.faq p{margin:.6rem 0 0}

/* byline */
.byline{display:flex;gap:1rem;align-items:center;margin:1.6rem 0;background:#fff;
  border:1px solid var(--color-line);border-radius:var(--radius);padding:1.1rem 1.3rem;box-shadow:var(--shadow)}
.byline img{width:72px;height:72px;border-radius:50%;flex:none;object-fit:cover;background:var(--color-blue)}
.byline.col{flex-direction:column;text-align:center}
.byline .nm{font-family:var(--font-display);font-size:1.2rem}
.byline .ro{font-size:.85rem;color:var(--color-blue)}
.byline p{font-size:.9rem;margin:.3rem 0 0;color:var(--color-ink-soft)}

/* disclosure */
.disclosure{font-size:.8rem;color:var(--color-ink-soft);background:var(--color-paper-2);
  border:1px dashed var(--color-line);border-radius:var(--radius-sm);padding:.6rem .9rem;margin:1rem 0}

/* tool */
.tool{background:#fff;border:1px solid var(--color-line);border-radius:var(--radius);
  padding:1.8rem;box-shadow:var(--shadow);max-width:680px;display:grid;gap:1rem}
.tool label{font-weight:600;font-size:.92rem;display:block;margin:.4rem 0 .3rem}
.tool select,.tool input[type=range]{width:100%}
.tool input[type=range]{accent-color:var(--color-blue)}
.tool-out{background:var(--color-dark-2);color:var(--color-ink-inv);border-radius:var(--radius-sm);
  padding:1.2rem;font-family:var(--font-mono)}
.tool-out b{color:#fff;font-size:1.9rem;display:block}

/* form */
.form{max-width:600px}
.form label{font-weight:600;font-size:.9rem;display:block;margin:1rem 0 .3rem}

/* footer */
.footer{background:var(--color-dark-2);color:var(--color-ink-inv);padding:var(--space-2xl) 0 var(--space-lg)}
.footer .big{font-family:var(--font-display);font-size:clamp(1.5rem,4vw,2.4rem);
  max-width:22ch;color:#fff;margin-bottom:var(--space-lg)}
.footer-cols{display:flex;flex-wrap:wrap;gap:var(--space-xl);justify-content:space-between;
  border-top:1px solid var(--color-line-inv);padding-top:var(--space-lg)}
.footer-cols ul{list-style:none;margin:.5rem 0 0;padding:0}
.footer-cols a{color:var(--color-ink-inv);opacity:.82;font-size:.92rem;line-height:2}
.footer-cols a:hover{opacity:1;color:#fff}
.footer h4{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin:0}
.footer .brand{color:#fff;font-family:var(--font-display);font-weight:600;font-size:1.14rem}
.foot-note{opacity:.55;font-size:.82rem;margin-top:var(--space-lg)}
.foot-note a{color:inherit}

/* nav mobiel (checkbox-hack) */
.menu-btn{display:none;cursor:pointer;line-height:1;color:var(--color-ink-inv);font-size:1.5rem}
.mnav-toggle{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.mnav-panel{display:none}
@media(max-width:900px){
  .cards,.cards-2,.facts .grid,.seasons{grid-template-columns:1fr}
  .rec{grid-template-columns:1fr}.rec-img{min-height:190px}
  .article{grid-template-columns:1fr}.aside-stick{position:static}
  .nav-links,.nav-cta{display:none}
  .menu-btn{display:block}
  .nav-inner{position:relative}
  .mnav-toggle:checked ~ .mnav-panel{display:block}
  .mnav-panel{position:absolute;right:0;top:3.1rem;background:var(--color-dark);
    border:1px solid var(--color-line-inv);border-radius:14px;padding:.6rem;min-width:210px;z-index:60}
  .mnav-panel a{display:block;color:var(--color-ink-inv);padding:.55rem .8rem;border-radius:8px}
  .mnav-panel a:hover{background:rgba(255,255,255,.1);text-decoration:none}
}

/* WP-specifiek */
.wp-site-blocks{overflow-x:clip}
.admin-bar .nav{top:32px}
@media(max-width:782px){.admin-bar .nav{top:46px}}
.crumb{font-size:.85rem;color:var(--color-ink-soft);margin:.4rem 0}
.crumb a{color:var(--color-blue-deep)}
.meta{font-size:.88rem;color:var(--color-ink-soft);display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}
.meta img{width:34px;height:34px;border-radius:50%}
.postgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;list-style:none;padding:0}
@media(max-width:900px){.postgrid{grid-template-columns:1fr}}
.postcard{background:#fff;border:1px solid var(--color-line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);transition:transform .25s var(--ease-out)}
.postcard:hover{transform:translateY(-4px)}
.postcard .pc-body{padding:1.2rem 1.4rem}
.postcard h2,.postcard h3{margin:0 0 .3rem;font-size:1.15rem}
.postcard img{aspect-ratio:16/9;object-fit:cover;width:100%}
.postcard .pc-svg{aspect-ratio:16/9;background:var(--color-blue)}
input[type=text],input[type=email],input[type=url],input[type=tel],textarea,select{
  width:100%;padding:.75rem;border:1.5px solid var(--color-line);border-radius:var(--radius-sm);
  font:inherit;background:#fff;max-width:100%;color:var(--color-ink)}
input:focus,textarea:focus,select:focus{outline:2px solid var(--color-blue);outline-offset:1px;border-color:var(--color-blue)}
.ff-btn,.wpforms-submit,button[type=submit],.fluentform input[type=submit]{
  background:var(--color-rust)!important;color:#fff!important;border:0!important;
  font-weight:600!important;padding:.85rem 1.6rem!important;border-radius:999px!important;cursor:pointer}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== denim-specifiek ===== */
/* koperen topstitch-divider (de naad van een jeans) */
.stitch{height:0;border:0;border-top:2px dashed var(--color-stitch);opacity:.85;margin:2.4rem 0;max-width:var(--maxw)}
.stitch.wrap{margin-inline:auto}
/* wordmark stiksel-lijn onder het logo */
.brand .mark{position:relative}
/* maattabellen: cijfers uitgelijnd */
table .num,td.num,.fact .n,.num,.tool-out b,.stat-n{font-variant-numeric:tabular-nums}
/* pasvorm-silhouet kaart */
.fitgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem;margin:1.6rem 0}
@media(max-width:900px){.fitgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fitcard{background:#fff;border:1px solid var(--color-line);border-radius:var(--radius);
  padding:1.1rem;text-align:center;box-shadow:var(--shadow);display:block;color:inherit;transition:transform .25s var(--ease-out)}
.fitcard:hover{transform:translateY(-4px);text-decoration:none}
.fitcard svg{width:54px;height:88px;margin:.2rem auto .6rem;color:var(--color-blue)}
.fitcard h3{font-size:1.05rem;margin:.1rem 0 .2rem}
.fitcard p{font-size:.84rem;color:var(--color-ink-soft);margin:0}
.fitcard .more{color:var(--color-rust);font-weight:600;font-size:.84rem;margin-top:.5rem;display:inline-block}
/* eyebrow op cream → koper accent voor denim-warmte */
.wrap .eyebrow,.prose .eyebrow{color:var(--color-rust)}
/* aanrader-/info-kaart accenttitels */
.summary{border-left-color:var(--color-rust)}
/* pros/cons compacte lijst */
.pc2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin:1.4rem 0}
@media(max-width:700px){.pc2{grid-template-columns:1fr}}
.pc2 .box{background:#fff;border:1px solid var(--color-line);border-radius:var(--radius);padding:1.1rem 1.3rem;box-shadow:var(--shadow)}
.pc2 .box h4{font-family:var(--font-display);font-size:1.02rem;margin:0 0 .5rem}
.pc2 ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.pc2 li{font-size:.92rem;padding-left:1.4rem;position:relative}
.pc2 .pro li::before{content:"✓";position:absolute;left:0;color:var(--color-sage);font-weight:700}
.pc2 .con li::before{content:"✕";position:absolute;left:0;color:var(--color-rust);font-weight:700}