/* Keep the white header transition in step with the entrance animations. */
.site-header {
  transition: background-color .4s ease, color .3s ease, border-color .3s ease,
    box-shadow .4s ease, backdrop-filter .4s ease;
}

/* Three consecutive image slices share one height, scale and horizontal position. */
:is(.home-banner,.menu-concern-section) .continuous-portrait-list {
  gap: 0;
  overflow: hidden;
  border-radius: var(--radius-column) 0 var(--radius-column) 0;
}
:is(.home-banner,.menu-concern-section) .continuous-portrait-list > .concern-item,
:is(.home-banner,.menu-concern-section) .continuous-portrait-list > .concern-item .concern-toggle {
  border-radius: 0;
}
:is(.home-banner,.menu-concern-section) .continuous-portrait-list > .concern-item {
  position: relative;
  border-bottom: 0;
}
:is(.home-banner,.menu-concern-section) .continuous-portrait-list > .concern-item:not(:last-child) .concern-toggle::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: rgb(255 255 255 / .3);
  z-index: 4;
  pointer-events: none;
}
:is(.home-banner,.menu-concern-section) .continuous-portrait-list .concern-toggle {
  height: var(--continuous-row-height, 160px);
}
@media (min-width: 768px) {
  :is(.home-banner,.menu-concern-section) .continuous-portrait-list .concern-toggle > .concern-background.concern-person {
    right: 0;
  }
}
@media (max-width: 767px) {
  :is(.home-banner,.menu-concern-section) .continuous-portrait-list .concern-toggle {
    height: var(--continuous-row-height, 130px);
  }
}

/* Contact artwork and touch dialog close controls. */
.pricing-page .price-group-note {
  margin: 0;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  background: #fafafa;
  color: #555;
  font-size: 14px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
.pricing-page .price-item-body > p + p { margin-top: 6px; }
.pricing-page .price-quantity { font-size: .85em; }
.pricing-page .price-item .price-item-note { margin-top: 8px; color: #666; font-size: 13px; }
.pricing-page .price-group-heading {
  position: sticky;
  top: var(--price-header-offset);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 16px;
  background: #333;
  color: #fff;
}
.pricing-page .price-group-heading h2 { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.price-all-categories {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 13px;
  border: 1px solid rgb(255 255 255 / .55);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  visibility: hidden;
  pointer-events: none;
}
.price-group-heading.is-pinned .price-all-categories { visibility: visible; pointer-events: auto; }
.price-all-categories:hover { background: rgb(255 255 255 / .13); }
.price-all-categories:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.price-filter-options a[aria-current="location"] { background: var(--gold); border-color: var(--gold); color: #fff; }
.hair-area-guide { margin-top: 30px; scroll-margin-top: calc(var(--price-header-offset) + var(--price-sticky-height, 0px) + 16px); }
.hair-area-guide h3 { margin: 0 0 20px; font-size: 22px; }
.hair-area-guide figure { margin: 0; }
.hair-area-guide figure a { display: block; width: min(100%, 900px); margin-inline: auto; }
.hair-area-guide figure img { display: block; width: 100%; height: auto; }
.hair-area-guide figcaption { margin: 12px 0 24px; text-align: center; font-size: 13px; color: #666; }
.hair-area-details { border: 1px solid var(--line); border-radius: 12px; }
.hair-area-details summary { padding: 18px 20px; cursor: pointer; font-size: 15px; }
.hair-area-details[open] summary { border-bottom: 1px solid var(--line); }
.hair-area-tables { padding: 0 20px 24px; }
.hair-area-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; }
.hair-area-table caption { padding: 24px 0 12px; font-size: 18px; text-align: left; font-weight: 500; }
.hair-area-table th,.hair-area-table td { padding: 12px; border: 1px solid var(--line); vertical-align: top; text-align: left; overflow-wrap: anywhere; }
.hair-area-table th { font-weight: 500; }
.hair-area-table th:first-child { width: 30%; }
.hair-area-table thead { background: #f6f6f6; }
.hair-area-ss caption { color: #a88600; }
.hair-area-s caption { color: #b65863; }
.hair-area-l caption { color: #505fb9; }
@media (max-width: 767px) {
  .pricing-page .price-group-note { padding: 12px 14px; font-size: 12px; }
  .pricing-page .price-quantity { display: block; }
  .pricing-page .price-group-heading { gap: 4px; padding-right: 10px; }
  .pricing-page .price-group-heading h2 { padding-right: 8px; }
  .price-all-categories { padding-inline: 10px; font-size: 11px; }
  .hair-area-guide h3 { font-size: 19px; }
  .hair-area-details summary { padding: 15px 14px; font-size: 14px; }
  .hair-area-tables { padding: 0 10px 16px; }
  .hair-area-table { font-size: 12px; }
  .hair-area-table th,.hair-area-table td { padding: 9px 8px; }
}
.contact-section .contact-watermark {
  display: block;
  width: min(580px, 80vw);
  max-width: none;
  height: auto;
  opacity: .13;
}
@media (max-width: 767px) {
  .contact-section .contact-watermark { width: 360px; }
  .reservation-dialog .reservation-close,
  .price-filter-dialog .price-filter-close {
    border: 0;
    outline: none;
    box-shadow: none;
  }
  .reservation-dialog .reservation-close { border: 1px solid rgb(255 255 255 / .8); }
  .reservation-dialog .reservation-close:focus-visible { background: rgb(255 255 255 / .15); }
  .price-filter-dialog .price-filter-close:focus-visible { background: #eee; color: #333; }
  .reservation-dialog .reservation-wechat,
  .wechat-dialog .wechat-close {
    outline: none;
    box-shadow: none;
  }
  .wechat-dialog .wechat-close {
    border: 0;
    align-items: center;
    line-height: 20px;
  }
  .wechat-dialog .wechat-close span {
    position: relative;
    display: block;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    font-size: 0;
    line-height: 0;
  }
  .wechat-dialog .wechat-close span::before,
  .wechat-dialog .wechat-close span::after {
    content: '';
    position: absolute;
    left: 2px;
    top: calc(50% - .75px);
    width: 16px;
    height: 1.5px;
    background: currentColor;
    transform: rotate(45deg);
  }
  .wechat-dialog .wechat-close span::after { transform: rotate(-45deg); }
  .wechat-dialog .wechat-close,
  .wechat-dialog .wechat-close:hover,
  .wechat-dialog .wechat-close:focus,
  .wechat-dialog .wechat-close:active { background: transparent; }
  .reservation-dialog .reservation-wechat:hover,
  .reservation-dialog .reservation-wechat:focus,
  .reservation-dialog .reservation-wechat:active {
    background: var(--gold);
    border-color: var(--gold);
  }
  .wechat-dialog .wechat-save,
  .wechat-dialog .wechat-save:hover,
  .wechat-dialog .wechat-save:focus,
  .wechat-dialog .wechat-save:active {
    text-decoration: none;
    background: transparent;
    align-items: center;
    gap: 8px;
    line-height: 1.5;
  }
  .wechat-dialog .wechat-save :is(svg, img) { display: block; flex-shrink: 0; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-header { transition: none; }
}