/* HairWise navy + electric teal: visual design only. Research/ranking logic unchanged. */
:root {
  --page: #f5fafb;
  --card: #fff;
  --text: #142c40;
  --muted: #4d6577;
  --border: #cfe1e8;
  --accent: #007e88;
  --accent-dark: #005b68;
  --accent-soft: #e2f4f6;
  --success: #e0f2f0;
  --warning: #fff5e6;
  --warning-border: #ae7124;
  --radius: 19px;
  --editorial-rose: #007e88;
  --editorial-rose-dark: #005b68;
  --editorial-blush: #e2f4f6;
  --editorial-line: #cfe1e8;
  --editorial-ink: #142c40;
}
html { scroll-padding-top:95px; }
body { background:var(--page); color:var(--text); font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }
body:has(.editorial-results) { background:var(--page); }
.page-shell { max-width:1350px; }
a { text-underline-offset:3px; }
:focus-visible { outline:3px solid #007e88; outline-offset:3px; }
.hero,.panel,.safety-info-page,.evidence-panel {
  border-color:var(--border);
  border-radius:22px;
  box-shadow:0 6px 28px rgb(18 57 76 / 5%);
}
.eyebrow,.step-label,.result-kicker { color:#007686; }
h1,h2,h3 { color:#142c40; letter-spacing:-.025em; }
.intro { color:#415b70; }
.primary-button,.compare-open,.wizard-next,.wizard-submit {
  background:linear-gradient(105deg,#008e94,#00606f);
  color:#fff;
  border:1px solid #006e77;
  border-radius:13px;
  box-shadow:0 3px 9px rgb(2 110 123 / 10%);
}
.primary-button:hover,.primary-button:focus-visible,.compare-open:hover:not(:disabled),.wizard-next:hover { background:#005b68; color:#fff; }
.secondary-button { border-color:#007a86; border-radius:13px; color:#006d7a; background:#fff; }
.secondary-button:hover,.secondary-button:focus-visible { background:#e9f8f9; }
.route-card,.category-card,.finder-result-card,.product-result-card,.catalogue-result-card,.product-page-section {
  border-color:var(--border);
  border-radius:17px;
  box-shadow:0 2px 10px rgb(20 66 81 / 3%);
}
.route-card:hover,.category-card:hover { background:#f7fdfd; box-shadow:0 5px 20px rgb(7 102 117 / 9%); }
.route-number,.status-pill.ready { background:var(--accent-soft); color:#006b74; }
.choice-button { border-color:#c7e0e5; background:#fff; }
.choice-button:hover,.choice-button:focus-visible { background:#e9f8f9; }
.text-button,.back-link,.profile-edit-link { color:#006b7b; }
.note,.finder-note,.field-help,.finder-explainer { background:#ebf7f8; color:#405d71; }
.preference-box,.form-field select,.profile-choice-question .profile-choice-card { border-color:#cee5e9; }
.profile-choice-question .profile-choice-card:has(input:checked),
.wizard-step .profile-choice-question .profile-choice-card:has(input:checked) { border-color:#008c95; background:#e7f8f9; }
.profile-choice-card input[type="radio"]:checked { border-color:#007d87; }
.matcher-category-nav { border:1px solid #c9e3e8; background:#fff; border-radius:18px; }
.matcher-category-link.active,.matcher-category-link[aria-current="page"] { background:#d9f3f6; border-color:#0098a2; color:#005a68; }
.product-detail-panel { border-color:#cfe1e8; }
.meta-list span,.product-page-pill,.catalogue-category-pill { background:#dcf3f5; color:#005e69; }
.catalogue-result-card h2,.product-page-title,
body:has(.editorial-results) #matcher-app > h1,
body:has(.editorial-results) .results-heading h2,
.editorial-results .section-heading-row h2 { font-family:inherit; color:#152f47; letter-spacing:-.025em; }
.catalogue-product-media,.product-page-media { background:linear-gradient(130deg,#f1fbfc,#e5f3f6); border-color:#cde6eb; }
.catalogue-filters { background:#eff9fa; }
.catalogue-next-step { background:#e6f6f8; }
.product-page-highlights { background:#e6f7f8; border-color:#b6e1e7; }
.product-page-category,.product-page-label,.product-page-highlights li::marker { color:#007f89; }
.product-page-trust { border-color:#00858d; }
.product-page-section { background:#fff; }
.product-page-field { border-top-color:#d6e8eb; }
.product-page-research-note { color:#486778; }

.editorial-results {
  --editorial-rose:#00828c;
  --editorial-rose-dark:#005969;
  --editorial-blush:#e2f4f6;
  --editorial-line:#c9e2e8;
  --editorial-ink:#173148;
  --accent:#00818b;
  --accent-dark:#00606c;
  --accent-soft:#e0f4f6;
}
.editorial-results .editorial-result-card { border-color:#cbe2e8; border-radius:17px; box-shadow:0 5px 20px rgb(7 57 78 / 5%); }
.editorial-results .editorial-result-card.selected-product-card,
.editorial-results .top-picks-grid .editorial-result-card:first-child { border-color:#00848e; box-shadow:0 0 0 1px #bdeaf0; }
.editorial-results .editorial-card-media,.editorial-results .editorial-card-image { background:#eef9fa; }
.editorial-results .editorial-card-ribbon { background:#007783; color:#fff; }
.editorial-results .editorial-card-teaser { color:#445e70; }
.editorial-results .editorial-detail-hero { background:#ecf8fa; }
.editorial-results .editorial-glance-box { border-color:#c1e1e5; background:#f1fbfb; }
.editorial-results .editorial-glance-heading { color:#075f6d; }
.editorial-results .editorial-match-goal { border-left-color:#007f8c; }
.editorial-results .editorial-match-evidence { border-left-color:#16856e; }
.editorial-results .browse-field select { background:#fff; border-color:#badce3; }
.editorial-results .editorial-result-card .product-card-actions a { color:#006d7a; }
.editorial-results .compare-option { background:#e6f5f8; color:#15394a; border-color:#afdde3; }
.editorial-results .compare-option.compare-option-selected { background:#ceeef1; border-color:#008991; }
.compare-dock { border-top-color:#007d88; box-shadow:0 -10px 28px rgb(7 50 72 / 13%); }
.compare-open { border-color:#00707b; }
.compare-chip { background:#e9f7f8; border-color:#a8d7df; color:#1d455c; }
.compare-dialog { border:1px solid #b9dbe2; }
.compare-dialog-heading { background:#e7f7f9; }
.compare-top-pick { background:#dff5f3; color:#00616e; }
.compare-table tbody tr:nth-child(even) { background:#f2fafb; }
.compare-table .compare-row-label { background:#ebf7f8; }
.safety-quiet-note { background:#f1f9f9; border-color:#cce5ea; }
.results-loading-screen { color:#123048; background:#f6fbfb; }
.results-loading-screen .load { background:#00848c; }
.results-loading-screen .load::before { background:#b1e3e7; }
@media (max-width:600px) {
  .hero,.panel { border-radius:17px; }
  .page-shell { width:calc(100% - 22px); }
}