html[data-community-page="directions"],
html[data-community-page="directions"] body,
html[data-community-page="directions"] .community-main,
html[data-community-page="directions"] .community-hero {
  background: #fdfbf7 !important;
}

/* Match page paper — beat #main-header community gray rules */
html[data-community-page="directions"] body.community-page #main-header,
html[data-community-page="directions"] body.community-page #main-header.global-site-header,
html[data-community-page="directions"] body.community-page .global-site-header {
  background: #fdfbf7 !important;
  color: #6b615b !important;
}

/* Compact text hero */
html[data-community-page="directions"] .community-hero {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 28px 24px 20px !important;
  text-align: center !important;
}

html[data-community-page="directions"] .community-hero .eyebrow {
  margin: 0 0 8px !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
}

html[data-community-page="directions"] .community-hero h1 {
  margin: 0 !important;
  font-size: 56px !important;
  line-height: 1.18 !important;
}

/* Content + map: map capped so it doesn't feel oversized */
html[data-community-page="directions"] .directions-detail {
  min-height: 0 !important;
  align-items: start !important;
  gap: 48px !important;
  padding-top: 28px !important;
  padding-bottom: 72px !important;
}

html[data-community-page="directions"] .directions-copy h2 {
  margin: 0 0 22px !important;
  font-size: 44px !important;
  line-height: 1.28 !important;
}

html[data-community-page="directions"] .directions-intro {
  margin: 0 0 28px !important;
}

html[data-community-page="directions"] .directions-copy dl {
  row-gap: 14px !important;
}

html[data-community-page="directions"] .directions-map,
html[data-community-page="directions"] .directions-map.beautyple-map-frame {
  position: relative !important;
  width: 100% !important;
  max-width: 560px !important;
  height: 420px !important;
  min-height: 420px !important;
  max-height: 420px !important;
  margin: 0 !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  align-self: end !important;
  justify-self: end !important;
}

html[data-community-page="directions"] .directions-map .beautyple-map,
html[data-community-page="directions"] .directions-map .beautyple-map-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}

html[data-community-page="directions"] .directions-map iframe.beautyple-gmap {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
}

/* Directions page: no Contact block (map already on page) */
html[data-community-page="directions"] .unified-contact,
html[data-community-page="directions"] .community-contact,
html[data-community-page="directions"] #contact {
  display: none !important;
}

html[data-community-page="directions"] .unified-contact .community-contact-map,
html[data-community-page="directions"] .unified-contact .beautyple-map,
html[data-community-page="directions"] .unified-contact iframe.community-contact-map {
  display: none !important;
}

@media (max-width: 900px) {
  html[data-community-page="directions"] .community-hero {
    padding: 24px 20px 18px !important;
  }

  html[data-community-page="directions"] .community-hero h1 {
    font-size: clamp(36px, 10vw, 48px) !important;
  }

  html[data-community-page="directions"] .directions-detail {
    gap: 36px !important;
    padding: 20px 0 56px !important;
  }

  html[data-community-page="directions"] .directions-map,
  html[data-community-page="directions"] .directions-map.beautyple-map-frame {
    max-width: none !important;
    height: 360px !important;
    min-height: 360px !important;
    max-height: 360px !important;
    margin: 0 !important;
    align-self: auto !important;
  }

  html[data-community-page="directions"] .directions-map .beautyple-map,
  html[data-community-page="directions"] .directions-map .beautyple-map-canvas {
    position: absolute !important;
    inset: 0 !important;
  }
}