/* Rockland Beauty — /treatments/<id>, one page per treatment.
   Loaded after treatments.css and built on it: the panel (photo + copy), the
   tokens and the header treatment all come from there. This sheet only adds
   what a standalone page needs: the shell width, the breadcrumb, the panel
   title as an h1, and the list of the other treatments. */

.treatment-page__inner {
  max-width: var(--rbw-shell);
  margin: 0 auto;
  padding: 0 var(--rbw-gutter);
}

/* ---------------------------------------------------------------- breadcrumb */
.treatment-page__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 clamp(18px, 2.4vw, 28px);
  font-family: "HelveticaNowDisplay-Regular", Arial, sans-serif;
  font-size: .95rem;
  line-height: 1.4;
  color: var(--rbw-muted);
}

.treatment-page__crumbs a {
  color: var(--rbw-plum);
  text-decoration: none;
  border-bottom: 1px solid rgba(65, 48, 51, .3);
  transition: border-color .3s ease;
}

.treatment-page__crumbs a:hover {
  border-bottom-color: var(--rbw-plum);
}

/* ---------------------------------------------------------------- panel */
/* The catalog styles the panel title as an h2; here it is the page's h1. */
.treatment-panel h1 {
  margin: 0;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  font-family: "Hatton-Medium", Georgia, serif;
  font-size: clamp(1.9rem, 2.8vw, 2.8rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--rbw-plum);
}

/* ---------------------------------------------------------------- others */
.treatment-page__others {
  margin-top: clamp(48px, 6vw, 80px);
}

.treatment-page__others-title {
  margin: 0 0 20px;
  font-family: "Hatton-Medium", Georgia, serif;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--rbw-plum);
}

.treatment-page__others-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.treatment-page__others-list a {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--rbw-line);
  border-radius: 999px;
  background: #fff;
  font-family: "HelveticaNowDisplay-Regular", Arial, sans-serif;
  font-size: .95rem;
  line-height: 1.3;
  color: var(--rbw-plum);
  text-decoration: none;
  transition: background-color .3s ease, border-color .3s ease;
}

.treatment-page__others-list a:hover {
  border-color: rgba(65, 48, 51, .28);
  background: var(--rbw-cream-2);
}

.treatment-page__all {
  display: inline-block;
  margin-top: 26px;
  font-family: "HelveticaNowDisplay-Medium", Arial, sans-serif;
  font-size: 1rem;
  color: var(--rbw-plum);
  text-decoration: none;
  border-bottom: 1px solid rgba(65, 48, 51, .35);
  transition: border-color .3s ease;
}

.treatment-page__all:hover {
  border-bottom-color: var(--rbw-plum);
}

@media screen and (max-width: 700px) {
  .treatment-panel h1 {
    font-size: clamp(1.75rem, 7vw, 2.2rem);
  }

  .treatment-page__others-list a {
    padding: 9px 14px;
    font-size: .92rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .treatment-page__crumbs a,
  .treatment-page__others-list a,
  .treatment-page__all {
    transition: none;
  }
}