/*
 * Skin, Nails and Makeup use the literal /hair/ document and stylesheet.
 * Keep this adapter deliberately small: it only protects substituted content
 * from clipping and does not redefine the Hair design system.
 */

:is(
  body.page-id-1153, body.elementor-page-1153,
  body.page-id-1659, body.elementor-page-1659,
  body.page-id-1727, body.elementor-page-1727
) {
  margin: 0 !important;
  overflow-x: hidden;
  background: #f3f3f1 !important;
}

:is(
  body.page-id-1153, body.elementor-page-1153,
  body.page-id-1659, body.elementor-page-1659,
  body.page-id-1727, body.elementor-page-1727
) :is(.body_wrap, .page_wrap, .page_content_wrap, .top_panel) {
  background: #f3f3f1 !important;
}

:is(
  body.page-id-1153, body.elementor-page-1153,
  body.page-id-1659, body.elementor-page-1659,
  body.page-id-1727, body.elementor-page-1727
) .top_panel {
  position: relative !important;
  z-index: 1000 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

:is(
  body.page-id-1153, body.elementor-page-1153,
  body.page-id-1659, body.elementor-page-1659,
  body.page-id-1727, body.elementor-page-1727
) .hair-exact-page {
  width: min(calc(100% - 48px), 1440px) !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 88px 0 70px !important;
  overflow: hidden !important;
}

/* The outer Elementor host already supplies the page gutter. */
:is(
  body.page-id-1153, body.elementor-page-1153,
  body.page-id-1659, body.elementor-page-1659,
  body.page-id-1727, body.elementor-page-1727
) :is(
  #vir-skin-reference-1153,
  #vir-nail-reference-1659,
  #vir-makeup-reference-1727
) {
  position: relative !important;
  left: auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 82px 0 0 !important;
  overflow: hidden !important;
  transform: none !important;
  background: #f3f3f1 !important;
}

:is(
  #vir-skin-reference-1153,
  #vir-nail-reference-1659,
  #vir-makeup-reference-1727
) iframe {
  display: block;
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  background: #f3f3f1 !important;
}

/* Keep the Skin hero close to the shared header without a large blank band. */
:is(body.page-id-1153, body.elementor-page-1153) #vir-skin-reference-1153 {
  margin-top: 12px !important;
}

/* Keep the Nails hero close to the shared header. */
:is(body.page-id-1659, body.elementor-page-1659) #vir-nail-reference-1659 {
  margin-top: 10px !important;
}

.exact-hair-clone.page-id-1659 .hair-exact-page {
  padding-top: 24px !important;
}

/* Makeup is nested in a constrained Elementor container; match the other pages. */
:is(body.page-id-1727, body.elementor-page-1727) #vir-makeup-reference-1727 {
  position: relative !important;
  left: 50% !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-top: -13px !important;
  transform: translateX(-50%) !important;
  background: #f3f3f1 !important;
}

.exact-hair-clone.page-id-1727 .hero-card {
  height: clamp(290px, 30vw, 420px) !important;
}

.exact-hair-clone.page-id-1727 .hero-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 35% !important;
}
.exact-hair-clone.page-id-1727 .hero-card .hair-hero-video {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.exact-hair-clone.page-id-1727 .spec-grid .spec-card {
  height: clamp(300px, 30vw, 420px) !important;
  min-height: 0 !important;
  isolation: isolate;
}

.exact-hair-clone.page-id-1727 .spec-grid .spec-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(3, 25, 23, .78) 0%, rgba(3, 25, 23, .42) 58%, rgba(3, 25, 23, .12) 100%);
  pointer-events: none;
}

.exact-hair-clone.page-id-1727 .spec-grid .spec-card img {
  filter: brightness(.82) contrast(1.05) saturate(.92) !important;
}

.exact-hair-clone.page-id-1727 .spec-grid .spec-card .copy {
  z-index: 2 !important;
  justify-content: center;
}

.exact-hair-clone.page-id-1727 .spec-grid .spec-card .copy :is(.label, h3, p, .bottom) {
  position: relative;
  z-index: 2;
  color: var(--vir-white, #fff) !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .32);
}

.exact-hair-clone.page-id-1727 .spec-grid .spec-card h3 {
  max-width: 78% !important;
  margin: 18px 0 12px !important;
  font-size: clamp(34px, 3.6vw, 56px) !important;
  line-height: .96 !important;
}

.exact-hair-clone.page-id-1727 .spec-grid .spec-card p {
  max-width: 62% !important;
  font-size: clamp(13px, 1vw, 16px) !important;
  line-height: 1.5 !important;
}

.exact-hair-clone {
  overflow-x: hidden;
  background: #f3f3f1 !important;
}

.exact-hair-clone .page {
  width: calc(100% - 40px) !important;
  max-width: none !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.exact-hair-clone .hair-exact-page,
.exact-hair-clone .hair-exact-page * {
  box-sizing: border-box;
}

.exact-hair-clone :is(h1, h2, h3, p, .eyebrow, .label, .bottom) {
  overflow-wrap: break-word;
}

/* Match the Hair page's green feature-panel treatment for page titles. */
.exact-hair-clone .hero-title {
  position: relative !important;
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: clamp(280px, 28vw, 410px) !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin: clamp(24px, 3vw, 42px) 0 0 !important;
  padding: clamp(38px, 4.5vw, 66px) !important;
  overflow: hidden !important;
  isolation: isolate;
  border: 1px solid rgba(212, 181, 106, .42) !important;
  border-radius: clamp(28px, 3vw, 48px) !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(22, 111, 99, .96), transparent 44%),
    linear-gradient(115deg, #242225 0%, #0d5c52 48%, #041f1d 100%) !important;
  box-shadow: 0 24px 60px rgba(4, 31, 29, .16) !important;
  color: var(--vir-white, #fff) !important;
  text-align: center !important;
}

.exact-hair-clone .hero-title::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 28%, rgba(255, 255, 255, .08) 50%, transparent 72%);
  pointer-events: none;
}

.exact-hair-clone .hero-title h1 {
  width: min(1240px, 100%) !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  color: var(--vir-white, #fff) !important;
  font-size: clamp(48px, 6.4vw, 96px) !important;
  line-height: .94 !important;
  text-align: center !important;
  text-shadow: 0 5px 28px rgba(3, 25, 23, .28);
}

.exact-hair-clone.page-id-1153 .hero-title h1 {
  max-width: 1160px !important;
  font-size: clamp(40px, 5.2vw, 78px) !important;
  line-height: .98 !important;
}

.exact-hair-clone.page-id-1659 .hero-title h1 {
  max-width: 1240px !important;
  font-size: clamp(38px, 4.6vw, 68px) !important;
  line-height: 1 !important;
}

.exact-hair-clone .hero-title .float-label {
  color: rgba(255, 255, 255, .78) !important;
}

/* Keep the Hair master proportions while allowing longer page-specific copy. */
.exact-hair-clone .statement .body-copy {
  max-width: 920px;
}

.exact-hair-clone .story-grid {
  align-items: stretch;
}

.exact-hair-clone .story-grid .card {
  min-width: 0;
}

.exact-hair-clone .story-grid .card p,
.exact-hair-clone .collage .info p,
.exact-hair-clone .spec-card .service-description {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}

.exact-hair-clone .extra-hair-grid {
  margin-top: 18px;
}

.exact-hair-clone .card[hidden] {
  display: none !important;
}

/*
 * Preserve the Hair final-panel appearance while placing longer Skin, Nails
 * and Makeup copy in normal document flow. The master uses absolute positions
 * for its very short CTA; those positions cause substituted copy to overlap.
 */
.exact-hair-clone .final {
  display: flex !important;
  min-height: clamp(500px, 48vw, 650px) !important;
  height: auto !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(22px, 3vw, 38px) !important;
  padding: clamp(90px, 9vw, 130px) clamp(24px, 6vw, 90px) 70px !important;
  text-align: center !important;
}

.exact-hair-clone .final h2 {
  position: relative !important;
  z-index: 1;
  width: min(1120px, 100%) !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
  color: var(--vir-text, #1a1a1a) !important;
  font-size: clamp(42px, 5.2vw, 76px) !important;
  line-height: .98 !important;
  letter-spacing: -.055em !important;
  text-align: center !important;
  text-wrap: balance;
}

.exact-hair-clone .final h2,
.exact-hair-clone .final h2 * {
  transform: none !important;
}

.exact-hair-clone .hair-final-copy {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  z-index: 1;
  width: min(760px, 92%) !important;
  max-height: none !important;
  margin: 0 auto !important;
  overflow: visible !important;
  color: var(--vir-secondary-copy, #6b6b6b);
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.6;
  text-align: center;
  transform: none !important;
}

.exact-hair-clone .hair-final-copy :is(h1, h2, h3, h4) {
  display: none;
}

.exact-hair-clone .hair-final-copy :is(p, ul) {
  margin: 0;
}

.exact-hair-clone .hair-final-copy ul {
  padding: 0;
  list-style: none;
}

.exact-hair-clone .final .pill {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 2;
  width: fit-content;
  max-width: min(100%, 620px);
  margin: 0 auto !important;
  transform: none !important;
  white-space: normal;
  text-align: center;
}

@media (max-width: 760px) {
  :is(
    body.page-id-1153, body.elementor-page-1153,
    body.page-id-1659, body.elementor-page-1659,
    body.page-id-1727, body.elementor-page-1727
  ) :is(
    #vir-skin-reference-1153,
    #vir-nail-reference-1659,
    #vir-makeup-reference-1727
  ) {
    width: auto !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    margin-top: 68px !important;
  }

  :is(body.page-id-1153, body.elementor-page-1153) #vir-skin-reference-1153 {
    position: relative !important;
    left: 50% !important;
    width: 100vw !important;
    max-width: 100vw !important;
    transform: translateX(-50%) !important;
  }

  #vir-skin-reference-1153 iframe {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  :is(
    body.page-id-1153, body.elementor-page-1153,
    body.page-id-1659, body.elementor-page-1659,
    body.page-id-1727, body.elementor-page-1727
  ) .hair-exact-page {
    width: min(calc(100% - 28px), 720px) !important;
    padding-top: 72px !important;
  }

  .exact-hair-clone .final {
    min-height: 460px !important;
    gap: 22px !important;
    padding: 82px 20px 54px !important;
  }

  .exact-hair-clone .final h2 {
    font-size: clamp(36px, 10vw, 54px) !important;
    line-height: 1 !important;
  }

  .exact-hair-clone .hero-title {
    min-height: 250px !important;
    padding: 34px 18px !important;
    border-radius: 28px !important;
  }

  .exact-hair-clone .hero-title h1 {
    font-size: clamp(36px, 10vw, 56px) !important;
    line-height: .98 !important;
  }

  .exact-hair-clone.page-id-1153 .hero-title h1 {
    font-size: clamp(32px, 8.5vw, 48px) !important;
  }

  .exact-hair-clone.page-id-1659 .hero-title h1 {
    font-size: clamp(30px, 8vw, 44px) !important;
  }

  .exact-hair-clone .page {
    width: calc(100% - 24px) !important;
  }

  .exact-hair-clone.page-id-1727 .hero-card {
    height: clamp(250px, 66vw, 360px) !important;
  }

  .exact-hair-clone.page-id-1727 .spec-grid .spec-card {
    height: 340px !important;
  }

  .exact-hair-clone.page-id-1727 .spec-grid .spec-card h3,
  .exact-hair-clone.page-id-1727 .spec-grid .spec-card p {
    max-width: 90% !important;
  }

  :is(body.page-id-1153, body.elementor-page-1153) #vir-skin-reference-1153 {
    margin-top: 8px !important;
  }

  :is(body.page-id-1659, body.elementor-page-1659) #vir-nail-reference-1659 {
    margin-top: 8px !important;
  }

  .exact-hair-clone.page-id-1659 .hair-exact-page {
    padding-top: 14px !important;
  }
}

@media (max-width: 420px) {
  :is(
    body.page-id-1153, body.elementor-page-1153,
    body.page-id-1659, body.elementor-page-1659,
    body.page-id-1727, body.elementor-page-1727
  ) .hair-exact-page {
    width: calc(100% - 20px) !important;
  }
}

/* Keep the Skin clone constrained to the real iframe viewport on phones. */
@media (max-width: 760px) {
  html:has(body.exact-hair-clone.page-id-1153),
  body.exact-hair-clone.page-id-1153 {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }

  body.exact-hair-clone.page-id-1153 .page {
    width: calc(100% - 24px) !important;
    min-width: 0 !important;
    max-width: calc(100% - 24px) !important;
    margin-inline: auto !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body.exact-hair-clone.page-id-1153 :is(
    .hero-title,
    .hero-card,
    .statement,
    .story-grid,
    .section-head,
    .collage,
    .spec-intro,
    .spec-grid,
    .extra-hair-grid,
    .final
  ) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.exact-hair-clone.page-id-1153 .hero-title h1 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  body.exact-hair-clone.page-id-1153 .hero-card {
    height: clamp(320px, 110vw, 470px) !important;
  }

  body.exact-hair-clone.page-id-1153 .hero-card img {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.exact-hair-clone.page-id-1153 .hero-tag {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: calc(100% - 24px) !important;
    white-space: normal !important;
  }

  body.exact-hair-clone.page-id-1153 .hero-shop {
    right: 12px !important;
    max-width: calc(100% - 24px) !important;
  }
}

/* Skin page alignment pass: preserve the Hair design while keeping every
 * section on the same visual axis and preventing long Chennai copy from
 * escaping the mobile canvas. */
.exact-hair-clone.page-id-1153 .hair-exact-page {
  width: min(calc(100% - 48px), 1440px) !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

.exact-hair-clone.page-id-1153 :is(
  .hero-title,
  .hero-card,
  .statement,
  .story-grid,
  .section-head,
  .collage,
  .spec-intro,
  .spec-grid,
  .extra-hair-grid,
  .final
) {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: auto !important;
}

.exact-hair-clone.page-id-1153 :is(.statement, .section-head, .spec-intro) {
  text-align: center !important;
}

.exact-hair-clone.page-id-1153 :is(.statement .body-copy, .spec-intro p) {
  margin-inline: auto !important;
}

.exact-hair-clone.page-id-1153 :is(.story-grid, .collage, .spec-grid) > * {
  min-width: 0 !important;
}

/* Fluid Skin typography: scale smoothly between phones and wide screens
 * instead of jumping between fixed breakpoint sizes. */
.exact-hair-clone.page-id-1153 {
  --skin-display-size: clamp(2.25rem, 5.2vw, 4.875rem);
  --skin-section-size: clamp(2rem, 4vw, 4rem);
  --skin-card-size: clamp(1.45rem, 2.25vw, 2.25rem);
  --skin-body-size: clamp(1rem, .72rem + .48vw, 1.25rem);
  --skin-small-size: clamp(.78rem, .7rem + .2vw, .94rem);
}

.exact-hair-clone.page-id-1153 .hero-title h1 {
  font-size: var(--skin-display-size) !important;
  line-height: clamp(.98, .94 + .18vw, 1.06) !important;
  text-wrap: balance;
}

.exact-hair-clone.page-id-1153 :is(
  .statement h2,
  .section-head h2,
  .spec-intro h2,
  .final h2
) {
  max-width: min(100%, 18ch) !important;
  margin-inline: auto !important;
  font-size: var(--skin-section-size) !important;
  line-height: clamp(1, .96 + .18vw, 1.1) !important;
  letter-spacing: clamp(-.045em, -.035em + .15vw, -.015em) !important;
  text-align: center !important;
  text-wrap: balance;
}

.exact-hair-clone.page-id-1153 :is(
  .story-grid h3,
  .collage h3,
  .spec-grid h3,
  .extra-hair-grid h3
) {
  font-size: var(--skin-card-size) !important;
  line-height: clamp(1.08, 1.04 + .14vw, 1.18) !important;
  text-wrap: balance;
}

.exact-hair-clone.page-id-1153 :is(
  .body-copy,
  .story-grid p,
  .collage p,
  .spec-intro p,
  .spec-grid p,
  .extra-hair-grid p,
  .final p
) {
  font-size: var(--skin-body-size) !important;
  line-height: clamp(1.5, 1.42 + .28vw, 1.72) !important;
}

.exact-hair-clone.page-id-1153 :is(.eyebrow, .kicker, .float-label) {
  font-size: var(--skin-small-size) !important;
  line-height: 1.25 !important;
}

@media (max-width: 760px) {
  .exact-hair-clone.page-id-1153 .hair-exact-page {
    width: calc(100% - 24px) !important;
    padding-top: 72px !important;
  }

  .exact-hair-clone.page-id-1153 .hero-title {
    min-height: 250px !important;
    padding: 32px 18px !important;
  }

  .exact-hair-clone.page-id-1153 .hero-title h1 {
    width: 100% !important;
    max-width: 100% !important;
    letter-spacing: -.045em !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    text-wrap: balance;
  }

  .exact-hair-clone.page-id-1153 :is(.story-grid, .collage, .spec-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 420px) {
  .exact-hair-clone.page-id-1153 .hair-exact-page {
    width: calc(100% - 16px) !important;
  }

  .exact-hair-clone.page-id-1153 .hero-title {
    padding-inline: 14px !important;
  }

}

/* Final Skin mobile canvas guard: use viewport units because Elementor's
 * nested iframe can report an oversized percentage containing block. */
@media (max-width: 760px) {
  .exact-hair-clone.page-id-1153,
  .exact-hair-clone.page-id-1153 *,
  .exact-hair-clone.page-id-1153 *::before,
  .exact-hair-clone.page-id-1153 *::after {
    box-sizing: border-box !important;
  }

  .exact-hair-clone.page-id-1153 .page {
    width: var(--skin-frame-width, calc(100vw - 24px)) !important;
    min-width: 0 !important;
    max-width: var(--skin-frame-width, calc(100vw - 24px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .exact-hair-clone.page-id-1153 :is(
    .hero-title,
    .hero-card,
    .statement,
    .story-grid,
    .section-head,
    .collage,
    .spec-intro,
    .spec-grid,
    .extra-hair-grid,
    .final
  ) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: var(--skin-frame-width, calc(100vw - 24px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .exact-hair-clone.page-id-1153 .hero-title h1 {
    font-size: clamp(1.7rem, 7vw, 2.2rem) !important;
  }

  .exact-hair-clone.page-id-1153 :is(
    .statement .body-copy,
    .story-grid p,
    .collage p,
    .spec-intro p,
    .spec-grid p,
    .extra-hair-grid p,
    .final p
  ) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
  }

  /* Let the compact image-and-copy treatment card grow with longer content. */
  .exact-hair-clone:is(.page-id-1153, .page-id-51) .story-grid .community {
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .exact-hair-clone:is(.page-id-1153, .page-id-51) .story-grid .community > img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10;
    object-fit: cover !important;
  }

  .exact-hair-clone:is(.page-id-1153, .page-id-51) .story-grid .community .content {
    padding: 22px 20px 26px !important;
  }

  .exact-hair-clone:is(.page-id-1153, .page-id-51) .story-grid .community p {
    display: block !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
  }

  .exact-hair-clone:is(.page-id-1153, .page-id-51) .story-grid .plain-card {
    height: auto !important;
    min-height: 520px !important;
    padding: 44px 24px !important;
    justify-content: center !important;
    text-align: center !important;
    overflow: hidden !important;
  }

  .exact-hair-clone:is(.page-id-1153, .page-id-51) .story-grid .plain-card .eyebrow {
    position: static !important;
    flex: 0 0 auto !important;
    margin: 0 0 18px !important;
    transform: none !important;
  }

  .exact-hair-clone:is(.page-id-1153, .page-id-51) .story-grid .plain-card h3 {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 14ch !important;
    margin: 0 auto 24px !important;
    text-align: center !important;
  }

  .exact-hair-clone:is(.page-id-1153, .page-id-51) .story-grid .plain-card p {
    display: block !important;
    width: 100% !important;
    max-width: 31ch !important;
    margin: 0 auto !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    text-align: center !important;
    text-wrap: pretty;
  }

  /* Hair page: page-specific copy is longer than the master demo text. */
  .exact-hair-clone.page-id-51 :is(
    .story-grid .card p,
    .collage .info p,
    .spec-card .service-description
  ) {
    display: block !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
  }

  .exact-hair-clone.page-id-51 .story-grid .image-card {
    height: auto !important;
    min-height: 500px !important;
  }

  .exact-hair-clone.page-id-51 .collage .info {
    height: auto !important;
    min-height: 360px !important;
    padding-bottom: 32px !important;
  }

  .exact-hair-clone.page-id-51 .spec-grid .spec-card {
    height: auto !important;
    min-height: 520px !important;
  }
}

/* Skin Brightening card: keep the service copy legible over editorial art. */
.exact-hair-clone.page-id-1153 .spec-grid .spec-card:not(.right) {
  isolation: isolate;
}

.exact-hair-clone.page-id-1153 .spec-grid .spec-card:not(.right) > img {
  object-position: center 32% !important;
  transform: scale(1.01);
}

.exact-hair-clone.page-id-1153 .spec-grid .spec-card:not(.right)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(3, 25, 23, .72) 0%, rgba(4, 31, 29, .18) 30%, transparent 52%);
}

.exact-hair-clone.page-id-1153 .spec-grid .spec-card:not(.right) .copy {
  z-index: 2;
}

.exact-hair-clone.page-id-1153 .spec-grid .spec-card:not(.right) .copy :is(.label, h3, p, .bottom) {
  position: relative;
  z-index: 2;
  color: var(--vir-white, #fff) !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .3);
}

.exact-hair-clone.page-id-1153 .spec-grid .spec-card:not(.right) .copy .label {
  color: var(--vir-gold, #d4b56a) !important;
}

.exact-hair-clone.page-id-1153 .spec-grid .spec-card:not(.right) h3 {
  position: absolute !important;
  left: clamp(18px, 2.4vw, 34px);
  right: auto;
  bottom: clamp(18px, 2.4vw, 34px);
  max-width: min(76%, 560px);
  margin: 0 !important;
  padding: .48em .65em;
  border: 1px solid rgba(212, 181, 106, .42);
  border-radius: 14px;
  background: rgba(4, 31, 29, .9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  line-height: 1.02 !important;
}

@media (max-width: 600px) {
  .exact-hair-clone.page-id-1153 .spec-grid .spec-card:not(.right) > img {
    object-position: center 28% !important;
  }

  .exact-hair-clone.page-id-1153 .spec-grid .spec-card:not(.right)::after {
    background: linear-gradient(0deg, rgba(3, 25, 23, .78), rgba(4, 31, 29, .12) 42%, transparent 62%);
  }

  .exact-hair-clone.page-id-1153 .spec-grid .spec-card:not(.right) h3 {
    left: 16px;
    bottom: 16px;
    max-width: calc(100% - 32px);
    border-radius: 11px;
  }
}
.hair-universe-document .card{position:relative}
.hair-universe-document .hair-collage-embed{display:block;width:100%;height:100%;min-height:100%;border:0;background:#fff}
.hair-universe-document .virtue-card-link{position:absolute;inset:0;z-index:12;display:block;border-radius:inherit}
.hair-universe-document .virtue-card-link:focus-visible{outline:3px solid var(--vir-gold,#d4b56a);outline-offset:-5px}

/* Makeup cards contain longer, page-specific service copy. Let the mobile
 * content area grow instead of clipping it to the Hair card proportions. */
@media (max-width: 760px) {
  .exact-hair-clone.page-id-1727 .story-grid .card {
    height: auto !important;
    min-height: 0 !important;
  }

  .exact-hair-clone.page-id-1727 .story-grid .image-card {
    min-height: 420px !important;
  }

  .exact-hair-clone.page-id-1727 .story-grid .plain-card {
    padding: 30px 24px 34px !important;
  }

  .exact-hair-clone.page-id-1727 .story-grid .community {
    display: flex !important;
    min-height: 470px !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .exact-hair-clone.page-id-1727 .story-grid .community > img {
    width: 100% !important;
    height: 225px !important;
    flex: 0 0 225px !important;
    object-fit: cover !important;
  }

  .exact-hair-clone.page-id-1727 .story-grid .community .content {
    padding: 24px 24px 30px !important;
  }

  .exact-hair-clone.page-id-1727 .story-grid .card p {
    display: block !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
  }
}

/* Nails: chapter copy is longer than the source Hair cards. On phones the
 * inherited fixed card height and six-line clamp cut the paragraphs off.
 * Keep the same rounded chapter design, but let each card size to its copy. */
@media (max-width: 760px) {
  .exact-hair-clone.page-id-1659 .extra-hair-grid,
  .exact-hair-clone.page-id-1659 .story-grid {
    align-items: stretch !important;
  }

  .exact-hair-clone.page-id-1659 .extra-hair-grid .card,
  .exact-hair-clone.page-id-1659 .story-grid .card {
    height: auto !important;
    min-height: 0 !important;
  }

  .exact-hair-clone.page-id-1659 .extra-hair-grid .plain-card,
  .exact-hair-clone.page-id-1659 .story-grid .plain-card {
    padding: 34px 24px 38px !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
  }

  .exact-hair-clone.page-id-1659 .extra-hair-grid .plain-card .eyebrow,
  .exact-hair-clone.page-id-1659 .story-grid .plain-card .eyebrow {
    position: static !important;
    margin: 0 0 18px !important;
    transform: none !important;
  }

  .exact-hair-clone.page-id-1659 .extra-hair-grid .plain-card h3,
  .exact-hair-clone.page-id-1659 .story-grid .plain-card h3 {
    width: 100% !important;
    max-width: 14ch !important;
    margin: 0 auto 22px !important;
    text-align: center !important;
  }

  .exact-hair-clone.page-id-1659 .extra-hair-grid .plain-card p,
  .exact-hair-clone.page-id-1659 .story-grid .plain-card p {
    display: block !important;
    width: 100% !important;
    max-width: 31ch !important;
    max-height: none !important;
    margin: 0 auto !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    text-align: center !important;
    text-wrap: pretty;
  }
}