/* Treatments route-card material
   Mirrors HOME's tonal depth while preserving Treatments geometry and colour. */

body.treatments-v2-page.treatments-redesign-page .txr-route {
  border: 1px solid rgba(237, 232, 223, .18);
  border-radius: 18px;
  box-shadow:
    0 22px 36px -28px rgba(4, 7, 11, .68),
    0 9px 18px -15px rgba(4, 7, 11, .48),
    0 2px 0 rgba(201, 183, 154, .12),
    inset 1px 1px 0 rgba(255, 255, 255, .11),
    inset -1px -1px 0 rgba(0, 0, 0, .32),
    inset 0 -22px 34px rgba(0, 0, 0, .22);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition:
    translate .78s cubic-bezier(.16, .76, .20, 1),
    border-color .58s ease,
    box-shadow .78s cubic-bezier(.16, .76, .20, 1);
}

/* Let the soft shadow finish before the horizontal scroller clips it. */
body.treatments-v2-page.treatments-redesign-page .txr-route-track {
  margin-bottom: -14px;
  padding-bottom: 32px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 32px), transparent 100%);
}

/* A fixed bevel replaces the cursor-following white spotlight. */
body.treatments-v2-page.treatments-redesign-page .txr-route::after {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .075), transparent 24%),
    linear-gradient(315deg, rgba(0, 0, 0, .24), transparent 38%);
  opacity: .82;
}

body.treatments-v2-page.treatments-redesign-page .txr-route::before {
  color: rgba(255, 255, 255, .055);
}

body.treatments-v2-page.treatments-redesign-page .txr-route--face {
  background:
    linear-gradient(90deg, rgba(201, 183, 154, .78), rgba(201, 183, 154, 0)) clamp(30px, 3.2vw, 46px) 0 / 56px 1px no-repeat,
    radial-gradient(125% 76% at 28% -9%, rgba(255, 236, 242, .11), transparent 43%),
    radial-gradient(110% 88% at 16% -2%, rgba(125, 67, 86, .38), transparent 64%),
    linear-gradient(155deg, #29161d, #180d12 58%, #0f080b);
}

body.treatments-v2-page.treatments-redesign-page .txr-route--skin {
  background:
    linear-gradient(90deg, rgba(201, 183, 154, .72), rgba(201, 183, 154, 0)) clamp(30px, 3.2vw, 46px) 0 / 56px 1px no-repeat,
    radial-gradient(125% 76% at 28% -9%, rgba(235, 248, 239, .10), transparent 43%),
    radial-gradient(110% 88% at 16% -2%, rgba(74, 107, 87, .35), transparent 64%),
    linear-gradient(155deg, #10251b, #0c1711 58%, #06110c);
}

body.treatments-v2-page.treatments-redesign-page .txr-route--medical {
  background:
    linear-gradient(90deg, rgba(201, 183, 154, .72), rgba(201, 183, 154, 0)) clamp(30px, 3.2vw, 46px) 0 / 56px 1px no-repeat,
    radial-gradient(125% 76% at 28% -9%, rgba(231, 242, 252, .10), transparent 43%),
    radial-gradient(110% 88% at 16% -2%, rgba(67, 98, 126, .38), transparent 64%),
    linear-gradient(155deg, #172a33, #0d1a26 58%, #0a151b);
}

@media (min-width: 1001px) {
  body.treatments-v2-page.treatments-redesign-page .txr-route {
    flex-basis: min(680px, 56vw);
    min-height: 440px;
  }

  body.treatments-v2-page.treatments-redesign-page .txr-route-story,
  body.treatments-v2-page.treatments-redesign-page .txr-route-directory {
    padding: 32px;
  }

  body.treatments-v2-page.treatments-redesign-page .txr-route h3 {
    font-size: clamp(38px, 3.35vw, 48px);
  }

  body.treatments-v2-page.treatments-redesign-page .txr-route-sub {
    margin-bottom: 24px;
  }

  body.treatments-v2-page.treatments-redesign-page .txr-concerns span {
    padding-block: 7px;
    font-size: 13.5px;
  }

  body.treatments-v2-page.treatments-redesign-page .txr-route details {
    margin-top: 18px;
  }

  body.treatments-v2-page.treatments-redesign-page .txr-family-list a {
    padding-block: 10px;
    font-size: 17px;
  }

  body.treatments-v2-page.treatments-redesign-page .txr-family-list a::after {
    top: 10px;
  }
}

@media (hover: hover) and (pointer: fine) {
  body.treatments-v2-page.treatments-redesign-page .txr-route:hover {
    translate: 0 -4px;
    border-color: rgba(201, 183, 154, .38);
    box-shadow:
      0 26px 40px -30px rgba(4, 7, 11, .74),
      0 11px 20px -16px rgba(4, 7, 11, .54),
      0 2px 0 rgba(201, 183, 154, .16),
      inset 1px 1px 0 rgba(255, 255, 255, .13),
      inset -1px -1px 0 rgba(0, 0, 0, .34),
      inset 0 -24px 38px rgba(0, 0, 0, .24);
  }
}

@media (max-width: 699px) {
  body.treatments-v2-page.treatments-redesign-page .txr-route-instruction {
    color: rgba(48, 38, 29, .88);
    font-size: 11px;
    letter-spacing: .115em;
  }

  body.treatments-v2-page.treatments-redesign-page .txr-route-instruction--touch {
    display: inline-flex;
    align-items: center;
  }

  body.treatments-v2-page.treatments-redesign-page .txr-route-controls {
    gap: 9px;
    margin-top: 11px;
  }

  body.treatments-v2-page.treatments-redesign-page .txr-route-tabs {
    gap: 8px;
  }

  body.treatments-v2-page.treatments-redesign-page .txr-route-tabs button {
    display: grid;
    width: 44px;
    min-width: 44px;
    height: 44px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(23, 35, 29, .26);
    border-radius: 50%;
    background: rgba(255, 252, 246, .50);
    color: rgba(23, 35, 29, .76);
    font-size: 13px;
    letter-spacing: .08em;
  }

  body.treatments-v2-page.treatments-redesign-page .txr-route-tabs button::after {
    display: none;
  }

  body.treatments-v2-page.treatments-redesign-page .txr-route-tabs button[aria-current="step"] {
    border-color: var(--txr-route-tab-color);
    background: var(--txr-route-tab-color);
    color: #f5f1ea;
    box-shadow: 0 8px 16px -11px rgba(18, 27, 24, .72);
  }

  body.treatments-v2-page.treatments-redesign-page .txr-route-arrow:disabled {
    opacity: .42;
  }

  body.treatments-v2-page.treatments-redesign-page .txr-route-arrow {
    width: 44px;
    height: 44px;
  }

  body.treatments-v2-page.treatments-redesign-page .txr-route-track {
    gap: 12px;
    margin-top: 14px;
  }

  body.treatments-v2-page.treatments-redesign-page .txr-route {
    flex-basis: 100%;
    border-radius: 16px;
  }

  body.treatments-v2-page.treatments-redesign-page .txr-route-story,
  body.treatments-v2-page.treatments-redesign-page .txr-route-directory {
    padding: 20px 18px 21px;
  }

  body.treatments-v2-page.treatments-redesign-page .txr-route-directory {
    min-height: 294px;
  }

  body.treatments-v2-page.treatments-redesign-page .txr-route h3 {
    margin-top: 12px;
    font-size: clamp(38px, 10.9vw, 44px);
  }

  body.treatments-v2-page.treatments-redesign-page .txr-route-sub {
    margin: 10px 0 17px;
    font-size: 14.5px;
  }

  body.treatments-v2-page.treatments-redesign-page .txr-concerns span {
    padding-block: 6px;
    font-size: 12px;
  }

  body.treatments-v2-page.treatments-redesign-page .txr-route details {
    margin-top: 14px;
  }

  body.treatments-v2-page.treatments-redesign-page .txr-route summary {
    padding-block: 10px;
  }

  body.treatments-v2-page.treatments-redesign-page .txr-route summary::after {
    top: 8px;
  }

  body.treatments-v2-page.treatments-redesign-page .txr-family-list a {
    padding-block: 9px;
    font-size: 15px;
  }

  body.treatments-v2-page.treatments-redesign-page .txr-family-list a::after {
    top: 9px;
  }
}

/* Treatment availability: finished guides retain the full route colour;
   entries still being prepared remain readable but visibly quieter. */
body.treatments-v2-page.treatments-redesign-page .txr-family-list a[data-guide-status="preparing"] {
  padding-right: 118px;
  color: rgba(218, 220, 216, .52);
}

body.treatments-v2-page.treatments-redesign-page .txr-family-list a[data-guide-status="preparing"]::after {
  content: "Read summary";
  top: 50%;
  color: rgba(218, 220, 216, .48);
  font: 500 8px/1.2 var(--mono);
  letter-spacing: .10em;
  text-transform: uppercase;
  transform: translateY(-50%);
}

body.treatments-v2-page.treatments-redesign-page .txr-index-row[data-guide-status="preparing"] .txr-index-name {
  color: rgba(218, 222, 224, .62);
}

body.treatments-v2-page.treatments-redesign-page .txr-index-row[data-guide-status="preparing"] > p {
  color: rgba(185, 195, 201, .48);
}

body.treatments-v2-page.treatments-redesign-page .txr-index-row[data-guide-status="preparing"] .txr-index-tags i {
  color: rgba(161, 174, 184, .45);
}

body.treatments-v2-page.treatments-redesign-page .txr-index-row[data-guide-status="preparing"] .txr-index-link {
  color: rgba(175, 185, 190, .55);
}

body.treatments-v2-page.treatments-redesign-page .txr-index-row[data-guide-status="preparing"] .txr-index-link::after {
  display: none;
}

@media (hover: hover) {
  body.treatments-v2-page.treatments-redesign-page .txr-index-row[data-guide-status="preparing"]:hover {
    padding-left: 0;
    background: transparent;
  }

  body.treatments-v2-page.treatments-redesign-page .txr-family-list a[data-guide-status="preparing"]:hover::after {
    transform: translateY(-50%);
  }
}

@media (max-width: 699px) {
  body.treatments-v2-page.treatments-redesign-page .txr-route-story,
  body.treatments-v2-page.treatments-redesign-page .txr-route-directory {
    padding: 18px 16px 19px;
  }

  body.treatments-v2-page.treatments-redesign-page .txr-route-directory {
    min-height: 0;
  }

  body.treatments-v2-page.treatments-redesign-page .txr-concerns {
    gap: 0 8px;
    margin-top: 6px;
  }

  body.treatments-v2-page.treatments-redesign-page .txr-concerns span {
    padding: 3px 0 3px 10px;
    font-size: 11.5px;
    line-height: 1.25;
  }

  body.treatments-v2-page.treatments-redesign-page .txr-concerns span::before {
    top: 10px;
    width: 4px;
  }

  body.treatments-v2-page.treatments-redesign-page .txr-route details {
    margin-top: 10px;
  }

  body.treatments-v2-page.treatments-redesign-page .txr-route summary {
    padding-block: 8px;
  }

  body.treatments-v2-page.treatments-redesign-page .txr-family-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px;
    margin-top: 10px;
  }

  body.treatments-v2-page.treatments-redesign-page .txr-family-list a,
  body.treatments-v2-page.treatments-redesign-page .txr-family-list a[data-guide-status="preparing"] {
    min-width: 0;
    padding: 8px 12px 8px 0;
    font-size: 13.25px;
    line-height: 1.2;
  }

  body.treatments-v2-page.treatments-redesign-page .txr-family-list a[data-guide-status="preparing"]::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.treatments-v2-page.treatments-redesign-page .txr-route {
    transition: none;
    translate: none;
  }
}