/* The site's shared skin. The class is called `product-page` for historical
   reasons — the home page carries it too, alongside `home-page`.

   Linked with a `?v=N` cache-buster hardcoded in haircare/tool/dump_seo_pages.dart.
   Editing this file does nothing on a page already visited until that N is bumped
   and the pages are regenerated (`cd haircare && dart run tool/dump_seo_pages.dart`).

   Every colour below is `AppColorTokens.light(AppPalette.purple)` — the app's
   default palette, in lib/src/design_system/app_color_tokens.dart. A value that
   exists there is copied, never approximated. */
.product-page {
  color-scheme:light;
  --primary:#9774D0;              /* primary */
  --neutral-icon:rgba(0,0,0,.33); /* neutralIcon */
  --ink:#595959;                  /* textBody */
  --muted:rgba(89,89,89,.7);      /* textHint */
  --paper:#F0F0F0;                /* scaffold */
  --line:rgba(102,102,102,.2);    /* borderUnfocused */
  --accent:#9774D0;               /* primary */
  --wash:rgba(151,116,208,.10);   /* primary at 10%, the app's way of
                                     tinting a surface */
  --panel:rgba(255,255,255,.6);   /* cardSurface — translucent, so the
                                     atmosphere reads through every card */
  --card-border:#fff;             /* cardBorder */
  --card-shadow:0 4px 8px rgba(0,0,0,.05); /* surfaceShadow, blur 8, y 4 */
  --card-radius:18px;             /* AppUiConstants.cardBorderRadius */
  --deep:#30253f;                 /* the one non-token colour: the ingredients
                                     card's dark ground */
  --success:#2E9E5B;               /* success */

  background:var(--paper);
  color:var(--ink);
  font-weight:500;
  line-height:1.65
}

.product-page a:focus-visible,.product-page summary:focus-visible {
  outline:3px solid var(--primary);
  outline-offset:6px
}

.product-page header.site {
  max-width:1280px;
  padding:26px 56px;
  display:flex;
  align-items:center;
  gap:26px;
  border-bottom:1px solid var(--line)
}

.product-page .wordmark {
  color:var(--primary);
  font-size:28px;
  letter-spacing:-1.3px;
  display:inline-flex;
  align-items:center;
  gap:12px
}

/* The launcher icon, in the app's own rounded-square silhouette. */
.product-page .wordmark-mark {
  width:38px;
  height:38px;
  border-radius:10px;
  display:block
}

.site-caption {
  color:var(--muted);
  font-size:12px;
  padding-left:24px;
  border-left:1px solid var(--line)
}

.product-page header.site nav {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:28px;
  font-size:13px
}

.product-page header.site nav a {
  color:var(--ink);
  text-decoration:none
}

.product-page header.site .nav-app {
  border:1px solid var(--line);
  border-radius:30px;
  padding:9px 18px
}

.nav-app span {
  margin-left:14px
}

.product-page main {
  max-width:1280px;
  padding:0 56px 72px
}

.product-page .crumbs {
  display:flex;
  gap:16px;
  align-items:center;
  margin:26px 0 30px;
  color:var(--muted);
  font-size:12px
}

.product-page .crumbs a {
  color:var(--muted)
}

.product-page .hero {
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:64px;
  margin:0 0 42px;
  padding:0
}

.stage-wrap {
  position:relative
}

/* ProductCard's `Positioned(top: -9, right: 12)`: the ribbon overhangs the
   card's top edge rather than sitting inside it. */
.product-page .stage-wrap .tags {
  position:absolute;
  top:-9px;
  right:12px;
  z-index:3;
  display:flex;
  gap:4px
}

.product-stage {
  position:relative;
  height:540px;
  border-radius:var(--card-radius);
  border:1px solid var(--card-border);
  box-shadow:var(--card-shadow);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden
}

.product-stage::before,.product-stage::after {
  content:none;
  position:absolute;
  width:340px;
  height:340px;
  border:1px solid #d8cce4;
  border-radius:50%
}

.product-stage::after {
  width:410px;
  height:410px;
  border-color:#e0d5e8
}

.product-page .hero-shot {
  position:relative;
  z-index:1;
  width:76%;
  height:76%;
  padding:22px;
  object-fit:contain;
  background:transparent;
  border-radius:0;
  mix-blend-mode:normal;
  filter:none;
  transition:transform .3s ease
}

.product-stage:hover .hero-shot {
  transform:translateY(-5px) rotate(-2deg)
}

.stage-label {
  position:absolute;
  top:32px;
  left:40px;
  right:40px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:10px;
  font-weight:800;
  letter-spacing:2px;
  color:#79648e;
  z-index:2
}

.stage-label span {
  font-size:28px;
  line-height:1
}

.stage-caption {
  position:absolute;
  bottom:26px;
  left:32px;
  right:32px;
  display:flex;
  justify-content:space-between;
  font-size:12px;
  font-weight:700;
  color:#79648e;
  z-index:2
}

.product-page .brand {
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:11px;
  font-weight:800;
  margin:0 0 18px
}

.product-page .brand span {
  color:var(--muted);
  font-weight:500
}

.product-page h1 {
  font-size:clamp(32px,3.5vw,48px);
  color:var(--primary);
  line-height:1.08;
  letter-spacing:-1.6px;
  margin:0 0 18px;
  text-wrap:balance
}

.product-size {
  color:var(--muted);
  font-size:12px;
  margin-bottom:20px
}

.product-page .hero-body>p:not([class]) {
  font-size:15px;
  color:var(--muted);
  line-height:1.7
}

.product-page .hero-rating {
  margin:22px 0;
  gap:12px;
  flex-wrap:wrap
}

.product-page .ratings {
  color:var(--muted);
  font-size:11px;
  line-height:1.65
}

.product-page .hero-rating .ratings {
  font-size:12px
}

.purchase {
  border-top:1px solid var(--line);
  padding-top:22px
}

.price-caption {
  font-size:9px;
  font-weight:800;
  letter-spacing:1.8px;
  color:var(--muted);
  margin:0 0 6px
}

.product-page .footer {
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  margin:0 0 12px
}

.product-page .price-lg {
  font-size:24px;
  font-weight:800;
  letter-spacing:-.8px;
  color:var(--ink)
}

.product-page .btn {
  padding:13px 22px;
  border-radius:12px;
  border:1px solid var(--card-border);
  box-shadow:var(--card-shadow);
  font-size:13px;
  transition:background .2s,transform .2s
}

.product-page .btn-primary {
  background:var(--accent);
  color:#fff
}

.product-page .btn:hover {
  transform:translateY(-2px);
  background:#8461c4
}

.product-page .btn span {
  margin-left:18px
}

.product-page .meta {
  margin:16px 0 0;
  color:var(--muted);
  font-size:10px
}

.section-nav {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-block:1px solid var(--line);
  margin-bottom:66px
}

.section-nav a {
  display:flex;
  align-items:center;
  gap:15px;
  text-decoration:none;
  color:var(--accent);
  font-size:10px;
  padding:22px 12px
}

.section-nav a span {
  font-size:13px;
  color:var(--ink)
}

.section-nav a:hover {
  background:var(--wash)
}

.product-page section {
  scroll-margin-top:24px
}

.product-page .eyebrow {
  font-size:10px;
  font-weight:800;
  letter-spacing:2px;
  color:var(--accent);
  margin:0 0 14px
}

.product-page h2 {
  font-size:32px;
  line-height:1.17;
  color:var(--primary);
  letter-spacing:-.8px;
  margin-bottom:16px;
  text-wrap:balance
}

.product-page .verdicts,.product-page .inci {
  margin-bottom:64px
}

.product-page section>p:not(.eyebrow):not(.sources) {
  color:var(--muted);
  font-size:14px;
  max-width:72ch
}

.product-page .verdict-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:24px
}

.product-page .card {
  box-shadow:var(--card-shadow);
  border:1px solid var(--card-border);
  background:var(--panel);
  border-radius:var(--card-radius)
}

.product-page .verdict-row {
  padding:24px
}

.product-page .verdict-row:only-child {
  grid-column:1/-1
}

.product-page .evidence-section .verdict-row {
  border-left:3px solid var(--success)
}

.product-page .verdict-head {
  color:var(--primary);
  font-size:17px!important;
  gap:12px;
  align-items:center;
  margin-bottom:14px
}

.product-page .verdict-tier {
  border-radius:30px;
  padding:4px 9px;
  background:var(--wash);
  color:var(--accent);
  text-transform:none;
  letter-spacing:0;
  font-size:10px;
  white-space:normal;
  flex-shrink:0
}

.product-page .verdict-row>p:not(.verdict-head) {
  color:var(--muted);
  font-size:13px;
  line-height:1.8;
  font-weight:500
}

.product-page .sources {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:16px
}

.product-page .sources span {
  display:inline-block;
  overflow-wrap:anywhere;
  max-width:100%;
  font-size:10px;
  color:var(--muted);
  border:1px solid var(--line);
  background:var(--wash);
  padding:3px 8px;
  border-radius:8px
}

.product-page .limits-section {
  padding-top:40px;
  border-top:1px solid var(--line)
}

.product-page .rejected {
  padding:0 20px;
  background:transparent
}

.product-page .rejected .verdict-head {
  color:var(--ink);
  font-size:14px!important;
  font-weight:600!important;
  margin:0;
  padding:18px 0;
  cursor:pointer;
  display:flex;
  list-style:none
}

.product-page summary::-webkit-details-marker {
  display:none
}

.product-page summary::after {
  content:"+";
  font-size:22px;
  font-weight:500;
  color:var(--accent);
  margin-left:auto
}

.product-page details[open] summary::after {
  content:"−"
}

.product-page .rejected .verdict-tier {
  display:none
}

.product-page details[open] {
  background:var(--panel)
}

.product-page details>p:last-child {
  padding-bottom:18px
}

.product-page .inci {
  padding:48px;
  background:var(--deep);
  border-radius:16px
}

.product-page .inci-list {
  max-width:none;
  padding:24px;
  font-size:12px!important;
  line-height:2
}

.product-page .cta {
  position:relative;
  overflow:hidden;
  background:var(--wash);
  padding:32px;
  text-align:left
}

.product-page .cta h2 {
  color:var(--primary);
  max-width:20ch;
  font-size:38px
}

.product-page section.cta>p:not(.eyebrow):not(.buttons) {
  color:var(--muted);
  opacity:1;
  margin-left:0;
  max-width:58ch
}

.product-page .cta .eyebrow {
  color:var(--accent)
}

.product-page .cta .buttons {
  justify-content:flex-start;
  margin:24px 0 0;
  opacity:1!important
}

.product-page .back {
  margin-top:28px;
  font-size:12px
}

.product-page .back a {
  color:var(--accent)
}

.product-page footer.site {
  max-width:1168px;
  padding:28px 0 40px;
  color:var(--muted);
  border-color:var(--line);
  font-size:11px
}

@media(max-width:1000px) {
  
 .product-page header.site {
  padding:24px 32px
}
.product-page main {
  padding-inline:32px
}
.product-page .hero {
  gap:36px
}
.product-stage {
  height:490px
}
.site-caption {
  display:none
}
.product-page footer.site {
  margin-inline:32px
}


}

@media(max-width:700px) {
  
 .product-page header.site {
  padding:20px;
  gap:12px
}
.product-page .wordmark {
  font-size:25px
}
.product-page header.site nav {
  gap:12px;
  font-size:11px
}
.product-page header.site .nav-app {
  padding:8px 12px
}
.product-page header.site nav>a:first-child {
  display:none
}

 .product-page main {
  padding:0 20px 44px
}
.product-page .crumbs {
  margin:22px 0
}
.product-page .hero {
  grid-template-columns:1fr;
  gap:28px;
  margin-bottom:30px
}
.product-stage {
  height:350px
}
.product-stage::before {
  width:240px;
  height:240px
}
.product-stage::after {
  width:290px;
  height:290px
}
.product-page .hero-shot {
  width:80%;
  height:85%;
  padding:28px
}
.stage-label {
  top:25px;
  left:28px;
  right:28px
}
.stage-caption {
  bottom:18px;
  left:24px;
  right:24px
}

 .product-page h1 {
  font-size:36px
}
.product-page .hero-body>.brand {
  margin-bottom:12px
}
.product-page .price-lg {
  font-size:23px
}
.product-page .btn {
  padding:12px 16px
}
.section-nav {
  grid-template-columns:1fr 1fr;
  margin-bottom:40px
}
.section-nav a {
  padding:14px 8px;
  gap:10px
}
.section-nav a span {
  font-size:12px
}

 .product-page h2 {
  font-size:27px
}
.product-page .verdict-grid {
  grid-template-columns:1fr
}
.product-page .verdict-head {
  flex-direction:row;
  flex-wrap:wrap
}
.product-page .verdict-row {
  padding:20px
}
.product-page .rejected {
  padding:0 18px
}
.product-page .verdicts,.product-page .inci {
  margin-bottom:40px
}
.product-page .inci {
  padding:30px 24px
}
.product-page .inci-list {
  padding:16px
}
.product-page .cta {
  padding:22px 18px
}
.product-page .cta h2 {
  font-size:30px
}
.product-page footer.site {
  margin-inline:20px
}


}

@media(prefers-reduced-motion:reduce) {
  .product-page .hero-shot,.product-page .btn {
  transition:none;
  transform:none!important
}

}

/* Keep the caption inside the curved top of the product stage. */
.stage-label {
  left:0;
  right:0;
  justify-content:center;
  gap:14px;
  top:24px
}

.stage-label span {
  font-size:20px
}


.product-page .routine-step { font-size: 11px; color: var(--accent); margin: -10px 0 18px; }

/* Customer-facing overview: approved benefits and optional ingredients. */
.product-page .section-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
}
.product-page .section-nav a {
  color: var(--ink);
  font-size: 13px;
  padding: 20px 12px;
}
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
  margin-top: 24px;
}
.product-page .benefit {
  padding: 28px;
  border-top: 3px solid var(--success);
}
.product-page .benefit h3 {
  color: var(--primary);
  font-size: 21px;
  margin-bottom: 12px;
}
.product-page .benefit p {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
}
.product-page section > .source-note {
  color: var(--muted);
  font-size: 11px;
  margin-top: 18px;
}
.ingredients-details {
  border-top: 1px solid var(--line);
  margin-top: 24px;
}
.ingredients-details summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  cursor: pointer;
  font-size: 14px;
  list-style: none;
}
.product-page .ingredients-details[open] {
  background: transparent;
}
.product-page .ingredients-details .inci-list {
  padding: 0 0 18px;
  color: var(--muted);
}

/* The ingredients card carries the dark treatment, so everything inside it
   inverts: the rules above are written for ink-on-wash and each one needs its
   light-on-ink counterpart. Declared after them so the plain-class selectors
   here win the tie on source order. */
.product-page .inci h2 {
  color: #fff;
}
.product-page .inci .eyebrow {
  color: #ccb5e8;
}
.product-page .inci .ingredients-details {
  border-top-color: rgba(255, 255, 255, 0.2);
}
.product-page .inci summary {
  color: #f1eaf7;
}
.product-page .inci summary::after {
  color: #ccb5e8;
}
.product-page .inci .inci-list {
  color: #d9cee7;
}
@media (max-width: 700px) {
  .product-page .section-nav { gap: 0; justify-content: space-between; }
  .product-page .section-nav a { padding: 16px 8px; font-size: 12px; }
}

/* Original app illustrations, kept decorative beside the page content. */
.benefits-illustration {
  float: right;
  width: 88px;
  height: 88px;
  object-fit: contain;
  margin: 0 0 16px 24px;
}
.benefit-grid { clear: both; }
.product-page .cta {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  column-gap: 36px;
  align-items: start;
}
.product-page .cta > :not(.routine-illustration) { grid-column: 1; }
.routine-illustration {
  grid-column: 2;
  grid-row: 1 / 5;
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: contain;
  align-self: end;
}
@media (max-width: 700px) {
  .benefits-illustration { width: 64px; height: 64px; margin-left: 16px; }
  .product-page .cta { grid-template-columns: minmax(0, 1fr); }
  .routine-illustration {
    grid-column: 1;
    grid-row: 5;
    width: min(100%, 270px);
    justify-self: center;
    margin-top: 28px;
  }
}


/* ---------------------------------------------------------------------------
   Home page. Built from the same card, button and ribbon vocabulary as the
   product pages; only the layout is its own.
   --------------------------------------------------------------------------- */
.home-page main { padding-top: 12px; }

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  margin: 24px 0 88px;
}
.home-hero h1 {
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -1.8px;
  margin: 0 0 20px;
}
.home-page .home-hero-body > p:not(.eyebrow):not(.buttons) {
  font-size: 17px;
  max-width: 46ch;
  margin-bottom: 28px;
}
.home-hero .buttons { justify-content: flex-start; margin: 0; }
.home-hero-shot { width: 100%; height: auto; max-height: 420px; object-fit: contain; }

.home-page section { margin-bottom: 88px; }
.home-page section > h2 { font-size: clamp(26px, 2.6vw, 34px); margin-bottom: 28px; }

.step-grid, .listing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.step-card { position: relative; padding: 28px 24px; border-top: 3px solid var(--step); }
/* A pill rather than bare text: the step accents are pastels, and at 11px on a
   near-white card they were barely legible. */
.step-number {
  display: inline-block; font-size: 11px; font-weight: 800; line-height: 1.6;
  color: #fff; background: var(--step); border-radius: 999px;
  padding: 1px 10px; margin-bottom: 12px;
}
.step-card h3 { font-size: 19px; margin: 0 0 8px; color: var(--primary); }
.step-card p { font-size: 14px; color: var(--muted); margin: 0; }

.home-method { max-width: 74ch; }
.home-method p { font-size: 15px; }

.listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.listing-card { display: block; padding: 26px; text-decoration: none; transition: transform .2s; }
.listing-card:hover { transform: translateY(-3px); }
.listing-card h3 { font-size: 20px; margin: 0 0 6px; color: var(--primary); }
.listing-card .ratings { margin: 0; }

@media (max-width: 860px) {
  .home-hero { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-bottom: 56px; }
  .home-hero-shot { grid-row: 1; width: min(100%, 300px); justify-self: center; }
  .step-grid, .listing-grid { grid-template-columns: minmax(0, 1fr); }
  .home-page section { margin-bottom: 56px; }
}