.preparation-detail .article-hero { background: #E7CFC6; }

.preparation-detail .article-hero-media img {
  object-position: 50% 45%;
}

.detangle-media,
.center-part-media,
.product-media,
.final-prep-media { box-shadow: 0 16px 36px rgba(47, 41, 39, .08); }

.detangle-arrow,
.parting-overlay,
.product-overlay {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  filter: drop-shadow(0 2px 3px rgba(47, 41, 39, .36));
  pointer-events: none;
}

.state-badges {
  position: absolute;
  z-index: 3;
  top: 16px;
  left: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.state-badges span {
  padding: 7px 10px;
  color: var(--ivory);
  background: rgba(59, 46, 40, .92);
  border: 1px solid rgba(247, 241, 236, .55);
  border-radius: 999px;
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.section-pin {
  width: 40px;
  height: 40px;
  position: absolute;
  z-index: 3;
  top: 38%;
  display: grid;
  place-items: center;
  color: var(--ivory);
  background: rgba(59, 46, 40, .94);
  border: 2px solid var(--ivory);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: .9rem;
}

.section-a { left: 24%; }
.section-b { right: 24%; }

.product-step { align-items: stretch; }
.product-media { display: grid; grid-template-rows: auto 1fr auto; }

.dose-guide {
  min-height: 130px;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 84px 1fr;
  align-items: center;
  gap: 20px;
  color: var(--charcoal);
  background: #F3E7D9;
}

.finger-shape {
  width: 78px;
  height: 38px;
  position: relative;
  display: block;
  background: #D5A889;
  border-radius: 26px 10px 10px 26px;
  box-shadow: inset 0 -7px 0 rgba(59, 46, 40, .08);
}

.finger-shape::after {
  content: "";
  width: 22px;
  height: 13px;
  position: absolute;
  top: 6px;
  right: 5px;
  background: #F3E1D3;
  border-radius: 9px 7px 6px 6px;
}

.product-drop {
  width: 13px;
  height: 13px;
  position: absolute;
  z-index: 2;
  top: -7px;
  right: 10px;
  background: var(--copper);
  border: 2px solid var(--ivory);
  border-radius: 50% 50% 46% 54%;
  box-shadow: 0 2px 5px rgba(47, 41, 39, .25);
}

.dose-guide strong { display: block; font-family: var(--serif); font-size: 1.18rem; font-weight: 500; }
.dose-guide small { display: block; margin-top: 5px; color: var(--cocoa); font-size: .76rem; line-height: 1.45; }

.application-photo { position: relative; overflow: hidden; }
.application-photo img { width: 100%; height: 100%; min-height: 360px; display: block; object-fit: cover; filter: saturate(.84) contrast(.97); }
.application-photo .product-overlay { height: 100%; }

.product-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.step-media figcaption.product-legend span {
  width: auto;
  height: auto;
  margin: 0;
  min-height: 32px;
  padding-left: 24px;
  position: relative;
  display: flex;
  align-items: center;
  color: var(--cocoa);
  background: transparent;
  border-radius: 0;
  font-family: var(--sans);
  font-size: .72rem;
}

.step-media figcaption.product-legend span::before {
  width: 14px;
  height: 14px;
  position: absolute;
  left: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ivory);
  font-size: .62rem;
}

.step-media figcaption.product-legend .legend-hair::before { content: "✓"; background: var(--copper); }
.step-media figcaption.product-legend .legend-scalp::before { content: "×"; background: var(--cocoa); }

.ready-list {
  margin: 22px 0;
  padding: 0;
  list-style: none;
}

.ready-list li {
  padding: 12px 0 12px 30px;
  position: relative;
  border-bottom: 1px solid var(--line);
  font-size: .84rem;
  line-height: 1.55;
}

.ready-list li::before {
  content: "✓";
  width: 20px;
  height: 20px;
  position: absolute;
  top: 13px;
  left: 0;
  display: grid;
  place-items: center;
  color: var(--ivory);
  background: var(--copper);
  border-radius: 50%;
  font-size: .65rem;
  font-weight: 600;
}

@media (max-width: 760px) {
  .product-media { min-height: 0; }
  .application-photo img { min-height: 0; }
}

@media (max-width: 560px) {
  .state-badges { top: 10px; left: 10px; }
  .state-badges span { padding: 5px 7px; font-size: .56rem; }
  .dose-guide { min-height: 112px; padding: 18px; grid-template-columns: 70px 1fr; gap: 14px; }
  .finger-shape { width: 66px; }
  .product-legend { grid-template-columns: 1fr; }
}