/* ============================================================
   Ontwerp A · Etiket
   Een apotheek-etiket: papierwit, inktgroen, haarlijnen als structuur,
   cijfers en labels in mono. Precies en rustig, geen bandkleuren.
   ============================================================ */

@font-face { font-family: "MH Instrument"; src: url("../fonts/instrument-sans-vf.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "MH Plex Mono"; src: url("../fonts/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --mh-inkt: #16201a;
  --mh-bos: #1f3d2b;
  --mh-creme: #fbfaf6;
  --mh-papier: #ffffff;
  --mh-lijn: #e1ddd2;
  --mh-mos: #56775a;
  --mh-moslicht: #eef0e8;
  --mh-gedempt: #5d6259;
  --mh-lees: #333a34;
  --mh-oker: #9e5716;
  --mh-okerdonker: #7a420f;
  --mh-radius: 3px;
  --mh-knop-radius: 3px;
  --mh-schaduw: none;
  --mh-font: "MH Instrument", "Instrument Sans", ui-sans-serif, "Helvetica Neue", Arial, sans-serif;
  --mh-font-kop: var(--mh-font);
  --mh-font-num: "MH Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --mh-kop-gewicht: 650;
}

body.mh-design--etiket { background: var(--mh-creme); }
body.mh-design--etiket h1, body.mh-design--etiket .mh-h1 { letter-spacing: -0.03em; line-height: 1.02; }
body.mh-design--etiket h2 { letter-spacing: -0.02em; }

/* labels en eyebrows als etiketregels */
body.mh-design--etiket .mh-eyebrow,
body.mh-design--etiket .card-product__meta,
body.mh-design--etiket .pdp-subnav > span,
body.mh-design--etiket .pdp-pay > span {
  font-family: var(--mh-font-num); font-weight: 500; letter-spacing: .06em; font-size: .78rem; color: var(--mh-gedempt);
}
/* secties genummerd: 01, 02, 03 */
body.mh-design--etiket .mh-home { counter-reset: sectie; }
body.mh-design--etiket .mh-home > .mh-sectie:not(.mh-hero) .mh-eyebrow::before {
  counter-increment: sectie; content: counter(sectie, decimal-leading-zero) "  /  "; color: var(--mh-oker);
}
body.mh-design--etiket .mh-band,
body.mh-design--etiket .mh-band--mos,
body.mh-design--etiket .mh-verwant,
body.mh-design--etiket .mh-store-page { background: transparent; }
body.mh-design--etiket .mh-home > .mh-sectie + .mh-sectie { border-top: 1px solid var(--mh-lijn); }

/* header: witte strook met haarlijn, navigatie iets zwaarder */
body.mh-design--etiket .mh-header-wrap { background: var(--mh-papier); }
body.mh-design--etiket .mh-nav a { color: var(--mh-inkt); font-weight: 500; }
body.mh-design--etiket .mh-nav a:hover { color: var(--mh-oker); }
body.mh-design--etiket .cart-count { background: var(--mh-inkt); border-radius: 3px; font-family: var(--mh-font-num); }

/* hero: productfoto op een licht vlak, etiket eronder */
body.mh-design--etiket .mh-hero { padding-block: clamp(48px, 7vw, 96px) clamp(56px, 8vw, 104px); }
body.mh-design--etiket .mh-hero h1 { font-size: clamp(2.7rem, 5.8vw, 4.7rem); max-width: 13ch; }
body.mh-design--etiket .mh-hero__beeld { background: #f2f0ea; aspect-ratio: 5 / 4; }
body.mh-design--etiket .mh-hero__beeld img { object-fit: cover; }
body.mh-design--etiket .mh-etiket dd { font-weight: 500; }

/* producten */
body.mh-design--etiket .card-product__media { background: #f2f0ea; border-radius: 2px; }
body.mh-design--etiket .card-product__title { font-weight: 600; font-size: 1.12rem; }
body.mh-design--etiket .card-product__price { font-size: 1rem; font-weight: 500; }

/* calculator als rekenblad */
body.mh-design--etiket .mh-calc__uitkomst { border-top: 1.5px solid var(--mh-inkt); }
body.mh-design--etiket .mh-calc__uitkomst strong { color: var(--mh-inkt); font-weight: 500; }
body.mh-design--etiket .mh-calc input, body.mh-design--etiket .mh-calc select { border-color: #cfcabd; background: var(--mh-papier); }

/* waarom: drie kolommen tekst met haarlijn erboven */
@media (min-width: 901px) {
  body.mh-design--etiket .mh-waarom { max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  body.mh-design--etiket .mh-waarom__blok, body.mh-design--etiket .mh-waarom__blok:first-child { border-top: 1.5px solid var(--mh-inkt); padding: 20px 0 0; }
}

/* productpagina */
body.mh-design--etiket .pdp-gallery__main { box-shadow: none; background: #f2f0ea; border-radius: 2px; }
body.mh-design--etiket .pdp-buy .price { font-size: 1.7rem; font-weight: 500; }
body.mh-design--etiket .pdp-subnav { border-top: 1.5px solid var(--mh-inkt); }
body.mh-design--etiket .pdp-pay li { border-radius: 2px; font-family: var(--mh-font-num); font-weight: 500; }
body.mh-design--etiket .product-assurances strong { font-weight: 600; }
body.mh-design--etiket .mh-varkeuze button[aria-pressed="true"] { background: var(--mh-papier); box-shadow: inset 0 0 0 1px var(--mh-inkt); border-color: var(--mh-inkt); }

/* winkel */
body.mh-design--etiket .shop-head-media { box-shadow: none; border-radius: 2px; }
body.mh-design--etiket .cat-chips a { border-radius: 3px; background: transparent; color: var(--mh-inkt); }
body.mh-design--etiket .cat-chips a[aria-current="page"] { background: var(--mh-inkt); border-color: var(--mh-inkt); color: var(--mh-creme); }
body.mh-design--etiket .woocommerce-ordering select { border-radius: 3px; }
body.mh-design--etiket .mh-shopfaq > h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }

/* footer */
body.mh-design--etiket .mh-footer { background: var(--mh-inkt); }
body.mh-design--etiket .mh-footer h2, body.mh-design--etiket .mh-footer h3 { font-family: var(--mh-font-num); font-weight: 500; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(246, 242, 234, .7); }
body.mh-design--etiket .mh-footer-grid > div:first-child > h2,
body.mh-design--etiket .mh-footer-grid > div:first-child > h3 { font-family: var(--mh-font); font-size: 1.3rem; text-transform: none; letter-spacing: -0.01em; color: #fff; }