.jhs-choice {
  --jhs-black: #171717;
  --jhs-white: #fff;
  --jhs-gray-50: #fafafa;
  --jhs-gray-100: #f5f5f5;
  --jhs-gray-200: #e5e5e5;
  --jhs-gray-300: #d4d4d4;
  --jhs-gray-500: #737373;
  --jhs-gray-700: #404040;
  --jhs-gold: #c9a962;
  --jhs-gold-light: #e8d5a3;
  --jhs-gold-dark: #a88b4a;
  --jhs-green: #128c7e;
  --jhs-gutter: clamp(20px, 4vw, 64px);
  --jhs-section: clamp(72px, 9vw, 124px);
  background: var(--jhs-white);
  color: var(--jhs-black);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow: clip;
}

.jhs-choice *, .jhs-choice *::before, .jhs-choice *::after { box-sizing: border-box; }
.jhs-choice button, .jhs-choice a { -webkit-tap-highlight-color: transparent; }
.jhs-choice button { font: inherit; }
.jhs-choice img, .jhs-choice svg { display: block; max-width: 100%; }
.jhs-choice h1, .jhs-choice h2, .jhs-choice h3, .jhs-choice p, .jhs-choice ul { margin-top: 0; }

.jhs-choice h1, .jhs-choice h2 {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 300;
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: .035em;
}

.jhs-choice h1 { max-width: 13ch; margin-bottom: 22px; font-size: clamp(2.25rem, 9.7vw, 3.9rem); }
.jhs-choice h1 em { display: block; color: var(--jhs-gold-light); font-style: normal; font-weight: 600; }
.jhs-choice h2 { margin-bottom: 18px; font-size: clamp(1.85rem, 7vw, 3.05rem); }
.jhs-shell { width: min(100% - (2 * var(--jhs-gutter)), 1240px); margin-inline: auto; }
.jhs-svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.jhs-kicker, .jhs-overline {
  margin-bottom: 12px;
  color: var(--jhs-gold-dark);
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.jhs-button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: 0;
  font-size: .78rem;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .07em;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.jhs-button-primary { background: var(--jhs-black); color: var(--jhs-white) !important; }
.jhs-button-primary:hover, .jhs-button-primary:focus-visible { background: var(--jhs-gold); color: var(--jhs-black) !important; }
.jhs-button-light { background: var(--jhs-gold); color: var(--jhs-black) !important; }
.jhs-button-light:hover, .jhs-button-light:focus-visible { background: var(--jhs-gold-light); }
.jhs-button-full { width: 100%; }
.jhs-button.is-disabled { background: var(--jhs-gray-300); color: var(--jhs-gray-700) !important; pointer-events: none; }
.jhs-choice :focus-visible { outline: 3px solid var(--jhs-gold); outline-offset: 3px; }

.jhs-choice-hero { padding: 68px 0 56px; background: var(--jhs-black); color: var(--jhs-white); }
.jhs-hero-grid { display: grid; gap: 42px; }
.jhs-hero-lead { max-width: 590px; margin-bottom: 26px; color: rgba(255,255,255,.78); font-size: clamp(1rem, 3.7vw, 1.16rem); }
.jhs-hero-actions { display: grid; gap: 4px; margin-bottom: 28px; }

.jhs-text-link {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: inherit !important;
  font-size: .76rem;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-transform: uppercase;
  letter-spacing: .055em;
}

.jhs-proof-list { display: grid; gap: 8px; margin-bottom: 0; padding: 0; color: rgba(255,255,255,.75); font-size: .78rem; list-style: none; }
.jhs-proof-list li { display: flex; align-items: center; gap: 9px; }
.jhs-proof-list li::before { color: var(--jhs-gold-light); content: "✓"; font-size: .76rem; font-weight: 900; }

.jhs-hero-visual {
  max-width: 510px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 0;
  background: var(--jhs-white);
  color: var(--jhs-black);
}

.jhs-hero-card-topline, .jhs-set-card-topline {
  display: flex;
  min-height: 24px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--jhs-gray-500);
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .11em;
}

.jhs-live-pill, .jhs-recommended { padding: 5px 9px; border-radius: 0; background: var(--jhs-black); color: var(--jhs-white); }
.jhs-hero-map { width: min(100%, 330px); margin: 0 auto; }
.jhs-set-map { width: 100%; overflow: visible; }
.jhs-map-shoulders { fill: var(--jhs-gray-100); }
.jhs-map-neck { fill: var(--jhs-gray-200); }
.jhs-map-hair { fill: #f2f2f2; stroke: #a3a3a3; stroke-width: 1.1; }
.jhs-map-scalp { fill: var(--jhs-white); stroke: var(--jhs-gray-300); stroke-width: 1; }
.jhs-map-ear, .jhs-map-hairline, .jhs-map-strand { fill: none; stroke: #8b8b8b; stroke-linecap: round; stroke-width: 1.15; }
.jhs-map-safe { fill: none; stroke: var(--jhs-gold); stroke-dasharray: 4 7; stroke-linecap: round; opacity: .6; }
.jhs-tracks > path { fill: none; stroke: var(--jhs-gold); stroke-linecap: square; stroke-width: 7; }
.jhs-tracks use { fill: var(--jhs-gold-light); stroke: var(--jhs-black); stroke-linecap: square; stroke-linejoin: miter; stroke-width: 1.1; }

.jhs-hero-card-copy { display: grid; gap: 14px; padding: 17px 0 0; border-top: 1px solid var(--jhs-gray-200); }
.jhs-hero-card-copy p { margin-bottom: 0; }
.jhs-hero-card-copy > strong { font-size: 1.15rem; white-space: nowrap; }

.jhs-trust-strip { border-bottom: 1px solid var(--jhs-gray-200); background: var(--jhs-white); }
.jhs-trust-strip .jhs-shell { display: grid; gap: 8px; padding-block: 21px; color: var(--jhs-gray-700); font-size: .68rem; font-weight: 800; text-align: center; text-transform: uppercase; letter-spacing: .09em; }
.jhs-section { padding-block: var(--jhs-section); }
.jhs-section-heading { max-width: 700px; margin: 0 auto 40px; text-align: center; }
.jhs-section-heading > p:last-child, .jhs-quiz-intro > p:last-child, .jhs-faq-intro > p:last-child { margin-bottom: 0; color: var(--jhs-gray-500); }
.jhs-section-heading-left { margin-left: 0; text-align: left; }

.jhs-set-grid { display: grid; gap: 14px; }
.jhs-set-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 18px;
  border: 1px solid var(--jhs-gray-200);
  border-radius: 0;
  background: var(--jhs-white);
  color: var(--jhs-black);
  cursor: pointer;
  text-align: left;
  transition: border-color 180ms ease;
}
.jhs-set-card:hover, .jhs-set-card:focus-visible, .jhs-set-card.is-selected { border-color: var(--jhs-gold); }
.jhs-set-card.is-selected { box-shadow: inset 0 0 0 1px var(--jhs-gold); }
.jhs-set-card .jhs-set-map { width: 100%; margin: 12px auto 16px; }
.jhs-choice .jhs-placement-image { height: auto; aspect-ratio: 5 / 6; object-fit: contain; }
.jhs-placement-detail { width: 100%; margin-bottom: 8px; }
.jhs-set-card-copy { display: grid; gap: 7px; }
.jhs-set-name { font-size: 1.05rem; font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: .035em; }
.jhs-set-promise { min-height: 3.2em; color: var(--jhs-gray-500); font-size: .88rem; }
.jhs-set-meta { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .035em; }
.jhs-card-cta { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--jhs-gray-200); color: var(--jhs-black); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .055em; }
.jhs-set-card.is-selected .jhs-card-cta { color: var(--jhs-gold-dark); }
.jhs-placement-note { display: flex; max-width: 740px; align-items: flex-start; justify-content: center; gap: 10px; margin: 24px auto 0; color: var(--jhs-gray-500); font-size: .72rem; text-align: center; }
.jhs-placement-note span { display: grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center; border: 1px solid var(--jhs-gray-300); border-radius: 0; font-style: normal; font-weight: 800; }

.jhs-quiz { background: var(--jhs-black); color: var(--jhs-white); }
.jhs-quiz .jhs-kicker { color: var(--jhs-gold-light); }
.jhs-quiz-grid { display: grid; gap: 40px; }
.jhs-quiz-intro > p:last-child { color: rgba(255,255,255,.67); }
.jhs-quiz-options { display: grid; }
.jhs-quiz-options button { display: grid; min-height: 78px; grid-template-columns: 34px 1fr 22px; align-items: center; gap: 12px; padding: 15px 4px; border: 0; border-top: 1px solid rgba(255,255,255,.22); background: transparent; color: var(--jhs-white); cursor: pointer; text-align: left; }
.jhs-quiz-options button:last-child { border-bottom: 1px solid rgba(255,255,255,.22); }
.jhs-quiz-options button > span { color: var(--jhs-gold-light); font-size: .7rem; font-weight: 800; }
.jhs-quiz-options button > strong { font-size: .9rem; line-height: 1.35; }
.jhs-quiz-options button > i { font-style: normal; font-size: 1.15rem; transition: transform 180ms ease; }
.jhs-quiz-options button:hover > i, .jhs-quiz-options button:focus-visible > i { transform: translateX(4px); }

.jhs-configurator { background: var(--jhs-gray-50); }
.jhs-config-grid { display: grid; gap: 32px; }
.jhs-config-controls { display: grid; gap: 32px; }
.jhs-fieldset { margin: 0; padding: 0; border: 0; }
.jhs-fieldset legend { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; font-size: .86rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.jhs-fieldset legend > span { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 0; background: var(--jhs-black); color: var(--jhs-white); font-size: .68rem; }
.jhs-field-help { margin: -6px 0 13px 36px; color: var(--jhs-gray-500); font-size: .76rem; }
.jhs-inline-options, .jhs-length-options { display: grid; grid-template-columns: 1fr; gap: 8px; }
.jhs-option-button, .jhs-length-button { min-height: 50px; padding: 12px 14px; border: 1px solid var(--jhs-gray-300); border-radius: 0; background: var(--jhs-white); color: var(--jhs-black); cursor: pointer; font-weight: 700; text-align: left; }
.jhs-option-button.is-selected, .jhs-length-button.is-selected { border-color: var(--jhs-black); background: var(--jhs-black); color: var(--jhs-white); }
.jhs-length-button { display: flex; justify-content: space-between; gap: 12px; }
.jhs-length-button span { opacity: .72; font-size: .75rem; }
.jhs-color-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.jhs-color-button { min-width: 0; min-height: 72px; padding: 5px; border: 1px solid transparent; border-radius: 0; background: transparent; color: var(--jhs-black); cursor: pointer; }
.jhs-color-button.is-selected { border-color: var(--jhs-black); background: var(--jhs-white); }
.jhs-color-swatch { display: block; width: 100%; height: 35px; margin-bottom: 5px; border: 1px solid rgba(23,23,23,.14); border-radius: 0; background: var(--swatch); }
.jhs-color-button > span:last-child { display: block; overflow: hidden; font-size: .6rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.jhs-whatsapp-link { display: inline-flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--jhs-gray-300); color: var(--jhs-black) !important; font-size: .76rem; font-weight: 800; text-decoration: none; text-transform: uppercase; letter-spacing: .035em; }

.jhs-product-summary { align-self: start; overflow: hidden; border: 1px solid var(--jhs-gray-200); border-radius: 0; background: var(--jhs-white); }
.jhs-product-image-wrap { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--jhs-gray-100); }
.jhs-product-image-wrap img { width: 100%; height: 100%; object-fit: cover; }
.jhs-product-image-wrap > span { position: absolute; top: 0; left: 0; padding: 8px 11px; border-radius: 0; background: var(--jhs-black); color: var(--jhs-white); font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .055em; }
.jhs-product-summary-copy { padding: 23px; }
.jhs-product-summary h3 { margin-bottom: 11px; font-family: "Manrope",system-ui,sans-serif; font-size: clamp(1.3rem,5.8vw,1.85rem); font-weight: 500; line-height: 1.18; text-transform: uppercase; letter-spacing: .025em; }
.jhs-product-summary-copy > p:not(.jhs-overline):not(.jhs-summary-small) { color: var(--jhs-gray-500); font-size: .86rem; }
.jhs-summary-price-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0 15px; }
.jhs-summary-price-row strong { font-size: 1.45rem; }
.jhs-summary-price-row span { color: var(--jhs-green); font-size: .7rem; font-weight: 800; }
.jhs-summary-small { margin: 9px 0 0; color: var(--jhs-gray-500); font-size: .68rem; text-align: center; }

.jhs-comparison { background: var(--jhs-white); }
.jhs-comparison-table { overflow: hidden; border: 1px solid var(--jhs-gray-200); border-radius: 0; }
.jhs-compare-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 21px; border-bottom: 1px solid var(--jhs-gray-200); }
.jhs-compare-row:last-child { border-bottom: 0; }
.jhs-compare-row > * { font-size: .78rem; }
.jhs-compare-row [data-label]::before { display: block; margin-bottom: 2px; color: var(--jhs-gray-500); content: attr(data-label); font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.jhs-compare-row > *:last-child { grid-column: 1/-1; color: var(--jhs-gray-500); }
.jhs-compare-head { display: none; }
.jhs-compare-row.is-featured { background: var(--jhs-gray-100); box-shadow: inset 4px 0 0 var(--jhs-gold); }

.jhs-results { border-top: 1px solid var(--jhs-gray-200); background: var(--jhs-gray-50); }
.jhs-results-track { display: grid; grid-auto-columns: min(82vw,340px); grid-auto-flow: column; gap: 10px; overflow-x: auto; padding: 0 var(--jhs-gutter) 16px; margin-inline: calc(-1 * var(--jhs-gutter)); scroll-padding-inline: var(--jhs-gutter); scroll-snap-type: x mandatory; scrollbar-width: thin; }
.jhs-result-card { position: relative; overflow: hidden; aspect-ratio: 4/5; margin: 0; border-radius: 0; background: var(--jhs-gray-100); scroll-snap-align: start; }
.jhs-result-card img { width: 100%; height: 100%; object-fit: cover; }
.jhs-result-card figcaption { position: absolute; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 0; background: var(--jhs-white); color: var(--jhs-black); font-size: .72rem; text-transform: uppercase; letter-spacing: .035em; }
.jhs-result-card figcaption span { color: var(--jhs-gold-dark); font-weight: 800; }
.jhs-results-action { display: flex; justify-content: center; margin-top: 12px; }

.jhs-story-grid, .jhs-faq-grid { display: grid; gap: 42px; }
.jhs-story-visual { overflow: hidden; aspect-ratio: 4/5; border-radius: 0; background: var(--jhs-gray-100); }
.jhs-story-visual img { width: 100%; height: 100%; object-fit: cover; }
.jhs-feature-list { display: grid; gap: 0; margin: 28px 0 0; padding: 0; list-style: none; }
.jhs-feature-list li { display: grid; gap: 2px; padding: 17px 0; border-top: 1px solid var(--jhs-gray-200); }
.jhs-feature-list li:last-child { border-bottom: 1px solid var(--jhs-gray-200); }
.jhs-feature-list span { color: var(--jhs-gray-500); font-size: .8rem; }

.jhs-faq { background: var(--jhs-gray-100); }
.jhs-accordion details { border-top: 1px solid var(--jhs-gray-300); }
.jhs-accordion details:last-child { border-bottom: 1px solid var(--jhs-gray-300); }
.jhs-accordion summary { display: grid; min-height: 72px; grid-template-columns: 1fr 28px; align-items: center; gap: 16px; padding: 14px 0; cursor: pointer; font-size: .84rem; font-weight: 800; list-style: none; }
.jhs-accordion summary::-webkit-details-marker { display: none; }
.jhs-accordion summary span { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--jhs-gray-300); border-radius: 0; font-size: 1rem; transition: transform 180ms ease; }
.jhs-accordion details[open] summary span { transform: rotate(45deg); }
.jhs-accordion details p { padding: 0 40px 22px 0; color: var(--jhs-gray-500); font-size: .86rem; }

.jhs-final-cta { padding: 84px 0 110px; background: var(--jhs-black); color: var(--jhs-white); text-align: center; }
.jhs-final-cta .jhs-shell { max-width: 820px; }
.jhs-final-cta .jhs-kicker { color: var(--jhs-gold-light); }
.jhs-final-cta p:not(.jhs-kicker) { max-width: 600px; margin: 0 auto 27px; color: rgba(255,255,255,.72); }

.jhs-mobile-bar { position: fixed; z-index: 50; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 9px max(12px,env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); border-top: 1px solid var(--jhs-gray-300); background: var(--jhs-white); }
.jhs-mobile-bar > div { display: grid; }
.jhs-mobile-bar span { overflow: hidden; max-width: 46vw; font-size: .7rem; font-weight: 800; text-overflow: ellipsis; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.jhs-mobile-bar strong { color: var(--jhs-gray-500); font-size: .66rem; }
.jhs-mobile-bar a { display: inline-flex; min-height: 46px; align-items: center; padding: 10px 15px; border-radius: 0; background: var(--jhs-black); color: var(--jhs-white) !important; font-size: .7rem; font-weight: 800; text-decoration: none; text-transform: uppercase; letter-spacing: .045em; }

@media (min-width:600px) {
  .jhs-hero-actions { display: flex; align-items: center; gap: 18px; }
  .jhs-proof-list { grid-template-columns: repeat(3,auto); gap: 16px; }
  .jhs-hero-card-copy { grid-template-columns: 1fr auto; align-items: end; }
  .jhs-trust-strip .jhs-shell { grid-template-columns: repeat(3,1fr); gap: 0; }
  .jhs-trust-strip span + span { border-left: 1px solid var(--jhs-gray-200); }
  .jhs-inline-options { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .jhs-length-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .jhs-color-options { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .jhs-compare-row { grid-template-columns: 1.2fr .6fr .7fr .7fr 2fr; align-items: center; }
  .jhs-compare-row > *:last-child { grid-column: auto; }
  .jhs-compare-row [data-label]::before { display: none; }
  .jhs-compare-head { display: grid; background: var(--jhs-black); color: var(--jhs-white); text-transform: uppercase; letter-spacing: .04em; }
}

@media (min-width:880px) {
  .jhs-choice-hero { min-height: min(790px,calc(100vh - 86px)); display: grid; align-items: center; padding: 80px 0; }
  .jhs-hero-grid { grid-template-columns: minmax(0,1.05fr) minmax(390px,.95fr); align-items: center; gap: clamp(52px,7vw,100px); }
  .jhs-set-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .jhs-quiz-grid { grid-template-columns: .85fr 1.15fr; align-items: center; gap: clamp(60px,9vw,120px); }
  .jhs-config-grid { grid-template-columns: minmax(0,1.05fr) minmax(380px,.75fr); align-items: start; gap: clamp(56px,8vw,106px); }
  .jhs-product-summary { position: sticky; top: 28px; }
  .jhs-story-grid { grid-template-columns: minmax(0,.88fr) minmax(0,1fr); align-items: center; gap: clamp(60px,9vw,128px); }
  .jhs-results-track { grid-template-columns: repeat(3,minmax(0,1fr)); grid-auto-flow: row; gap: 16px; overflow: visible; margin-inline: 0; padding: 0; }
  .jhs-faq-grid { grid-template-columns: .72fr 1.28fr; gap: clamp(60px,9vw,120px); }
  .jhs-mobile-bar { display: none; }
}

@media (min-width:1160px) {
  .jhs-set-card { padding: 24px; }
  .jhs-color-options { grid-template-columns: repeat(6,minmax(0,1fr)); }
}

@media (prefers-reduced-motion:reduce) {
  .jhs-choice *, .jhs-choice *::before, .jhs-choice *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Nabestelling (02-10-2026) */
.jhs-backorder-legend { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.jhs-backorder-legend[hidden] { display: none; }
.jhs-backorder-dot { display: inline-block; flex: none; width: 8px; height: 8px; background: var(--jhs-gold); }
.jhs-color-button.is-backorder .jhs-color-swatch { position: relative; }
.jhs-color-button.is-backorder .jhs-color-swatch::after { content: ''; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; background: var(--jhs-gold); box-shadow: 0 0 0 2px var(--jhs-white); }
.jhs-summary-price-row span.is-backorder { color: var(--jhs-gold-dark); }