/**
 * @file
 * HABD treatment page and treatment guide. Library
 * beauty/habd.profile.treatment, theme group, weight 44. Only what differs
 * from the kit. Values follow Treatment Page Polished.dc.html.
 */

/* ==========================================================================
   Hero: breadcrumb, photo, and the "Provided by" card.
   ========================================================================== */
.habd .habd-breadcrumb {
  margin-bottom: 22px;
}
.habd.habd .habd-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-transform: uppercase;
}
.habd .habd-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--habd-ink-light-soft);
}
.habd .habd-breadcrumb__item + .habd-breadcrumb__item::before {
  content: "›";
  color: var(--habd-meta);
  letter-spacing: 0;
}
/* 44px tap target around 13px text. */
.habd.habd .habd-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--habd-ink-light-soft);
}
.habd.habd .habd-breadcrumb__link:hover,
.habd.habd .habd-breadcrumb__link:focus-visible {
  color: var(--habd-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.habd .habd-breadcrumb__current {
  color: var(--habd-gold);
}

/* The treatment photo sits well back, as the design's scrim does. */
.habd.habd .habd-profile--treatment .habd-hero-profile__media img,
.habd-profile--treatment .habd.habd .habd-hero-profile__media img {
  opacity: 0.55;
}
@media (max-width: 640px) {
  .habd.habd .habd-profile--treatment .habd-hero-profile__media img,
  .habd-profile--treatment .habd.habd .habd-hero-profile__media img {
    opacity: 0.2;
  }
}

/* "Provided by": the host card as a light card in the hero's right column. */
.habd .habd-host-card--hero {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 392px;
  padding: 28px 30px;
  border-radius: 18px;
  background: var(--habd-card-bg);
  box-shadow: 0 24px 54px rgba(4, 14, 9, 0.35);
  color: var(--habd-ink-body);
  --habd-heading: var(--habd-ink);
  --habd-text: var(--habd-ink-body);
  --habd-meta: var(--habd-ink-meta);
  --habd-label: var(--habd-gold-ink);
  --habd-accent: var(--habd-gold-ink);
  --habd-focus: var(--habd-gold-ink);
}
.habd .habd-host-card--hero {
  align-items: stretch;
  justify-content: flex-start;
  margin: 0 0 0 auto;
}
.habd .habd-host-card--hero .habd-host-card__id {
  align-items: flex-start;
  gap: 16px;
}
.habd .habd-host-card--hero .habd-host-card__logo {
  width: 62px;
  height: 62px;
  box-shadow: none;
}
.habd.habd .habd-host-card--hero .habd-host-card__heading {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--habd-ink);
}
.habd.habd .habd-host-card--hero .habd-host-card__name {
  font-size: 26px;
  line-height: 1.12;
}
.habd .habd-host-card--hero .habd-host-card__actions {
  align-items: flex-start;
  padding-top: 14px;
  border-top: 1px solid var(--habd-cream-line);
}
.habd.habd .habd-host-card--hero .habd-host-card__label {
  font-family: var(--habd-sans) !important;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--habd-gold-ink);
}
.habd .habd-host-card--hero .habd-host-card__meta,
.habd .habd-host-card--hero .habd-host-card__address,
.habd.habd .habd-host-card--hero .habd-host-card__phone {
  color: var(--habd-ink-body);
}
.habd.habd .habd-host-card--hero .habd-host-card__profile {
  color: var(--habd-gold-ink);
}
@media (max-width: 1024px) {
  .habd .habd-host-card--hero {
    max-width: none;
  }
}

/* ==========================================================================
   Expected results (treatment) and what to expect (guide): translucent
   cards on the forest band.
   ========================================================================== */
.habd .habd-treatment-panel,
.habd .habd-treatment-expect__card {
  padding: 28px 30px;
  border: 1px solid rgba(229, 200, 140, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}
.habd .habd-treatment-panel {
  max-width: 980px;
}
/* A line that is only bold text reads as a gold label, as the design's
   period titles do. */
.habd:not(#habd-reset) .habd-treatment-results p:has(> strong:only-child) {
  margin-top: 26px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--habd-gold);
}
.habd:not(#habd-reset) .habd-treatment-results p:first-child:has(> strong:only-child) {
  margin-top: 0;
}
.habd.habd .habd-treatment-results ul > li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(229, 200, 140, 0.14);
}

.habd.habd .habd-treatment-expect {
  display: grid;
  grid-template-columns: repeat(var(--habd-cols, 3), minmax(0, 1fr));
  gap: 20px;
}
.habd.habd .habd-treatment-expect__title {
  margin-bottom: 14px;
  font-family: var(--habd-sans) !important;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--habd-gold);
}
.habd .habd-treatment-expect__card .habd-prose {
  font-size: 17px;
}
@media (max-width: 1024px) {
  .habd.habd .habd-treatment-expect {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .habd .habd-treatment-panel,
  .habd .habd-treatment-expect__card {
    padding: 22px 20px;
  }
}

/* ==========================================================================
   Preparation and aftercare: two cards, then the downtime strip.
   ========================================================================== */
.habd.habd .habd-treatment-care {
  display: grid;
  grid-template-columns: repeat(var(--habd-cols, 2), minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
.habd .habd-treatment-care__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 32px 34px;
  border-top: 3px solid var(--habd-forest);
  border-radius: var(--habd-radius-l);
  background: var(--habd-card-bg);
  box-shadow: var(--habd-card-shadow);
}
.habd .habd-treatment-care__card--after {
  border-top-color: var(--habd-gold-deep);
}
.habd.habd .habd-treatment-care__title {
  font-size: 30px;
  line-height: 1.1;
  color: var(--habd-ink);
}
.habd .habd-treatment-care__card .habd-prose {
  font-size: 17px;
}
.habd .habd-treatment-downtime {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 20px;
  padding: 22px 28px;
  border: 1px solid var(--habd-cream-line);
  border-radius: var(--habd-radius-l);
  background: linear-gradient(90deg, #FFFEFA 0%, #F7F0DE 100%);
}
.habd .habd-treatment-downtime__label {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--habd-gold-ink);
}
.habd .habd-treatment-downtime__figure {
  font-family: var(--habd-serif);
  font-size: 34px;
  line-height: 1.1;
  color: var(--habd-ink);
}
.habd .habd-treatment-downtime__text {
  flex: 1 1 420px;
  min-width: 0;
  font-size: 17px;
}
@media (max-width: 1024px) {
  .habd.habd .habd-treatment-care {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .habd .habd-treatment-care__card {
    padding: 22px 20px;
  }
  .habd.habd .habd-treatment-care__title {
    font-size: 26px;
  }
  .habd .habd-treatment-downtime {
    padding: 18px 20px;
  }
}

/* ==========================================================================
   Bordered cards: safety (both pages) and the guide's green and red flags.
   ========================================================================== */
.habd.habd .habd-treatment-cards {
  display: grid;
  grid-template-columns: repeat(var(--habd-cols, 3), minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
.habd .habd-treatment-cards__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 28px 30px;
  border-left: 4px solid var(--habd-forest);
  border-radius: var(--habd-radius-l);
  background: var(--habd-card-bg);
  box-shadow: var(--habd-card-shadow);
}
.habd .habd-treatment-cards__card--alert,
.habd .habd-treatment-cards__card--bad {
  border-left-color: #7A2E2E;
}
.habd .habd-treatment-cards__card--gold {
  border-left-color: var(--habd-gold-deep);
}
.habd.habd .habd-treatment-cards__title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 28px;
  line-height: 1.12;
  color: var(--habd-ink);
}
.habd .habd-treatment-cards__sign {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--habd-forest);
  font-family: var(--habd-sans);
  font-size: 15px;
  color: var(--habd-gold);
}
.habd .habd-treatment-cards__card--bad .habd-treatment-cards__sign {
  background: #7A2E2E;
  color: #FFFEFA;
}
.habd .habd-treatment-cards__lead {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--habd-gold-ink);
}
.habd .habd-treatment-cards__card .habd-prose {
  font-size: 17px;
}
@media (max-width: 1100px) {
  .habd.habd .habd-treatment-cards.habd-grid--n3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .habd.habd .habd-treatment-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .habd .habd-treatment-cards__card {
    padding: 22px 20px;
  }
  .habd.habd .habd-treatment-cards__title {
    font-size: 24px;
  }
}

/* ==========================================================================
   Practitioner qualifications (or the guide's questions) beside the booking
   panel.
   ========================================================================== */
.habd.habd .habd-treatment-qual__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}
.habd.habd .habd-treatment-qual__grid--pair {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}
.habd .habd-treatment-qual__card,
.habd .habd-treatment-questions__card {
  display: flex;
  gap: 20px;
  min-width: 0;
  padding: 32px 34px;
  border-radius: 18px;
  background: var(--habd-card-bg);
  box-shadow: var(--habd-card-shadow);
}
.habd .habd-treatment-questions__card {
  flex-direction: column;
  gap: 14px;
}
.habd .habd-treatment-qual__mark {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(155deg, #F7E7BE, var(--habd-gold-deep));
  font-size: 18px;
  color: var(--habd-forest);
}
.habd .habd-treatment-qual__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.habd.habd .habd-treatment-qual__label {
  font-family: var(--habd-sans) !important;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--habd-label);
}
.habd .habd-treatment-qual__value {
  font-family: var(--habd-serif);
  font-size: clamp(22px, calc(0.8vw + 16px), 30px);
  line-height: 1.2;
  color: var(--habd-ink);
  overflow-wrap: anywhere;
}
.habd.habd .habd-treatment-qual__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--habd-gold-ink);
}
.habd .habd-treatment-qual__book {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 32px 34px;
  border-radius: 18px;
  background: linear-gradient(170deg, var(--habd-forest-mid) 0%, var(--habd-forest) 70%, var(--habd-forest-deep) 100%);
  box-shadow: var(--habd-shadow-1);
}
.habd .habd-treatment-qual__price {
  font-family: var(--habd-serif);
  font-size: clamp(24px, calc(0.8vw + 18px), 32px);
  line-height: 1.2;
  color: var(--habd-ink-light);
}
.habd.habd .habd-treatment-qual__cta {
  width: 100%;
  margin-top: 6px;
}
.habd.habd .habd-treatment-questions__title {
  font-size: clamp(32px, calc(1.2vw + 22px), 44px);
  line-height: 1.08;
  color: var(--habd-ink);
}
.habd .habd-treatment-questions__lead {
  font-size: 17px;
  color: var(--habd-ink-body);
}
.habd.habd .habd-treatment-questions__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: habd-q;
}
.habd .habd-treatment-questions__item {
  position: relative;
  padding: 14px 0 14px 52px;
  border-top: 1px solid var(--habd-cream-line);
  font-size: 18px;
  line-height: 1.5;
  color: var(--habd-ink);
  counter-increment: habd-q;
}
.habd .habd-treatment-questions__item::before {
  content: counter(habd-q);
  position: absolute;
  left: 0;
  top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--habd-gold);
  font-size: 15px;
  font-weight: 500;
  color: var(--habd-forest);
}
@media (max-width: 1024px) {
  .habd.habd .habd-treatment-qual__grid--pair {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .habd .habd-treatment-qual__card,
  .habd .habd-treatment-questions__card,
  .habd .habd-treatment-qual__book {
    padding: 22px 20px;
  }
  .habd .habd-treatment-questions__item {
    padding-left: 46px;
    font-size: 17px;
  }
}

/* ==========================================================================
   Gallery video link, and the book band's ownership line.
   ========================================================================== */
.habd.habd .habd-treatment-video {
  margin-bottom: 24px;
}
/* The long "View all treatments at <provider>" link wraps rather than
   squeezing the provider's name. */
.habd-profile--treatment .habd-book .habd-host-card__actions {
  flex: 0 1 300px;
}
.habd.habd .habd-profile--treatment .habd-book .habd-host-card__profile,
.habd-profile--treatment .habd.habd-book .habd-host-card__profile {
  text-align: right;
}
@media (max-width: 1024px) {
  .habd-profile--treatment .habd-book .habd-host-card__actions {
    flex-basis: auto;
  }
  .habd.habd .habd-profile--treatment .habd-book .habd-host-card__profile,
  .habd-profile--treatment .habd.habd-book .habd-host-card__profile {
    text-align: left;
  }
}
/* :not(#habd-reset): style.css sets p margins at 0,4,2 on page nodes. */
.habd:not(#habd-reset) .habd-treatment-owner {
  max-width: 760px;
  margin: 22px auto 0;
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
  color: var(--habd-ink-light-soft);
}

/* The safety band's note is a sentence, as in the design, not the kit's
   small capitals aside. */
.habd.habd .habd-profile--treatment [data-habd-section="safety"] .habd-psection__aside,
.habd-profile--treatment .habd.habd[data-habd-section="safety"] .habd-psection__aside {
  max-width: 400px;
  font-size: 17px;
  font-weight: 300;
  letter-spacing: normal;
  line-height: 1.6;
  text-transform: none;
  color: var(--habd-ink-body);
}