/* ==================================================================
   Hipstoeren Headless — extras.css
   Kim's improvements (Oct 2026): category texts, fabrics on home,
   sweater designer spotlight, brand collage, "Anderen kochten ook".
   Loaded after side-cart.css, before mobile-fixes.css. No !important.
================================================================== */

/* ── category: size line under the intro ─────────────────────── */
.arch-head__maat{margin:14px 0 0;max-width:62ch;font-size:13.5px;line-height:1.75;color:var(--text);font-weight:400}
.arch-head__maat a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--blush);text-underline-offset:3px;transition:text-decoration-color .3s}
.arch-head__maat a:hover{text-decoration-color:var(--ink)}

/* ── category: long description below the products ──────────── */
.arch-desc .eyebrow{margin-bottom:16px}
.arch-desc__t{margin-bottom:24px}
.arch-desc__body{max-width:72ch}
.arch-desc__body>h2:first-child{margin-top:0;font-size:clamp(24px,2.6vw,36px);font-weight:200;letter-spacing:-.02em}
.arch-desc__body h2{font-size:clamp(20px,2vw,28px)}

/* ── home: newest fabrics ────────────────────────────────────── */
.hsh-fab{display:block;color:var(--ink)}
.hsh-fab__media{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:var(--field)}
.hsh-fab__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.01);transition:transform 1.4s var(--ease)}
.hsh-fab:hover .hsh-fab__media img{transform:scale(1.08)}
.hsh-fab__name{display:block;margin-top:12px;font-family:var(--d);font-size:15px;font-weight:300;line-height:1.3;letter-spacing:-.01em;overflow-wrap:anywhere}
.hsh-fab__type{display:block;margin-top:5px;font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--olive)}
@media(min-width:1024px){
  .fab-rail.rail{grid-auto-flow:row;grid-template-columns:repeat(6,minmax(0,1fr));row-gap:clamp(26px,3vw,40px)}
}
@media(max-width:1023px){
  .fab-rail.rail{grid-auto-columns:min(42vw,210px)}
}

/* ── home: sweater designer spotlight ────────────────────────── */
.so-spot{background:var(--ink);color:rgba(255,255,255,.74)}
.so-spot__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,90px);align-items:center}
.so-spot__media{position:relative;aspect-ratio:4/5;overflow:hidden;background:#3a3631}
.so-spot__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.so-spot__svg{display:grid;place-items:center;height:100%;padding:8%;background:var(--shell)}
.so-spot__svg svg{width:100%;height:auto}
.so-spot .eyebrow{color:var(--blush)}
.so-spot .h-sec{color:#fff}
.so-spot .h-sec i{color:var(--blush)}
.so-spot .lead{color:rgba(255,255,255,.74)}
.so-spot__steps{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid rgba(255,255,255,.16);max-width:460px}
.so-spot__steps li{display:flex;gap:18px;align-items:baseline;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.16);font-size:14.5px;color:#fff;font-weight:300}
.so-spot__steps b{flex:none;font-size:10px;font-weight:600;letter-spacing:.22em;color:var(--blush)}
.so-spot__acts{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:900px){
  .so-spot__in{grid-template-columns:1fr}
  .so-spot__media{aspect-ratio:1}
}

/* ── home: brand collage around the badge ────────────────────── */
.brand__media--collage{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  grid-template-areas:"a c" "a d" "e b";gap:clamp(10px,1.2vw,16px);padding:0}
.brand__media--collage>div:not(.brand__badge){position:relative;overflow:hidden;background:var(--field)}
.brand__media--collage>div:not(.brand__badge) img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.brand__media--collage .a{grid-area:a;aspect-ratio:auto}
.brand__media--collage .c{grid-area:c;aspect-ratio:4/5}
.brand__media--collage .d{grid-area:d;aspect-ratio:1}
.brand__media--collage .e{grid-area:e;aspect-ratio:4/3}
.brand__media--collage .b{grid-area:b;position:relative;right:auto;bottom:auto;width:auto;aspect-ratio:1;border:0}
.brand__media--collage .brand__badge{grid-area:e;position:relative;left:auto;bottom:auto;align-self:end;justify-self:start;margin:0 0 14px 14px;z-index:2}
@media(max-width:900px){
  .brand__media--collage{grid-template-columns:1fr 1fr;grid-template-areas:"a a" "c d" "e b"}
  .brand__media--collage .a{aspect-ratio:4/3}
  .brand__media--collage .c,.brand__media--collage .d,.brand__media--collage .e,.brand__media--collage .b{aspect-ratio:1}
  .brand__media--collage .brand__badge{margin:0 0 10px 10px;padding:14px 16px;max-width:170px}
}

/* ── cart + checkout: "Anderen kochten ook" ──────────────────── */
.hsh-xs{margin-top:clamp(40px,5vw,72px);padding-top:clamp(30px,4vw,48px);border-top:1px solid var(--line);clear:both}
.hsh-cart-layout .woocommerce>.hsh-xs{grid-column:1/-1;grid-row:3}
.hsh-xs .eyebrow{margin-bottom:12px}
.hsh-xs__t{font-size:clamp(24px,2.6vw,36px);font-weight:200;letter-spacing:-.02em;margin:0 0 clamp(20px,2.4vw,32px)}
.hsh-xs__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
.hsh-xs .card__title{font-size:15px}
@media(max-width:900px){.hsh-xs__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── description: check list ── */
.arch-desc__body ul.checks{list-style:none;padding:0;margin:0 0 1.2em}
.arch-desc__body ul.checks li{position:relative;padding-left:26px;margin:0 0 6px}
.arch-desc__body ul.checks li::before{content:'\2713';position:absolute;left:0;color:var(--olive)}

/* ── header: longer CTA ── */
/* hide the wordmark until the nav + longer CTA fit next to it */
@media(min-width:1060px) and (max-width:1519px){.hdr__name{display:none}}
.site-top:not(.is-solid):not(.is-stuck) .hdr__cta{--fg:#fff;--bd:rgba(255,255,255,.55);--fill:#fff;--fgh:var(--ink)}