/* Generated from homepage.css by npm run build:page-css. Edit the sources, then run it again. */
/* identity.css */
/* Shared identity styles, used by both page types. */
.home-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  text-decoration: none;
  color: inherit;
  gap: 12px;
}

.home-logo img {
  display: block;
  width: 180px;
  height: auto;
  max-height: 100px;
  object-fit: contain;
}

.home-logo.square img {
  width: 76px;
  height: 76px;
}

.home-logo.mark img {
  width: 52px;
  height: 52px;
}

.home-logo.mark span {
  font-size: 18px;
  font-weight: 500;
}

.home-logo {
  max-width: 100%;
}

.home-logo img {
  flex-shrink: 0;
}

.home-logo span {
  min-width: 0;
}

.home-logo.with-name {
  flex-direction: column;
  gap: 10px;
}

.home-logo.with-name span {
  font-size: 15.5px;
  font-weight: 500;
}

.home-logo.mark.with-name {
  flex-direction: row;
}

.home-logo.square.logo-left {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  text-align: left;
  gap: 12px;
}

.home-logo.square.logo-left img {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}

/* Keep the approved header rhythm explicit across local and hosted rendering. */
.home-logo.with-name span {
  line-height: 1.4;
}
/* fonts/poppins.css */
/* Poppins (OFL, see OFL.txt) as WOFF2 with every character but Devanagari: scripts/subset-fonts.py. */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/poppins-0.woff2?v=db54131c3c) format('woff2');
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-0107, U+010A-011B, U+011E-0123, U+0128-0131, U+0136-0137, U+0139-0148, U+014C-015B, U+015E-0165, U+0168-017E, U+018F, U+0192, U+01FC-01FD, U+0218-021B, U+0259, U+02BC, U+02C6-02C7, U+02C9, U+02D8-02DD, U+03C0, U+1E80-1E85, U+1EBC-1EBD, U+1EF2-1EF3, U+1EF8-1EF9, U+200C-200D, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20A8, U+20AC, U+20B9-20BA, U+20BD, U+2113, U+2122, U+2126, U+212E, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+25CC, U+FB01-FB02;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/poppins-1.woff2?v=051cfa4dbf) format('woff2');
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-0107, U+010A-011B, U+011E-0123, U+0128-0131, U+0136-0137, U+0139-0148, U+014C-015B, U+015E-0165, U+0168-017E, U+018F, U+0192, U+01FC-01FD, U+0218-021B, U+0259, U+02BC, U+02C6-02C7, U+02C9, U+02D8-02DD, U+03C0, U+1E80-1E85, U+1EBC-1EBD, U+1EF2-1EF3, U+1EF8-1EF9, U+200C-200D, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20A8, U+20AC, U+20B9-20BA, U+20BD, U+2113, U+2122, U+2126, U+212E, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+25CC, U+FB01-FB02;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/poppins-2.woff2?v=5dc849ec9f) format('woff2');
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-0107, U+010A-011B, U+011E-0123, U+0128-0131, U+0136-0137, U+0139-0148, U+014C-015B, U+015E-0165, U+0168-017E, U+018F, U+0192, U+01FC-01FD, U+0218-021B, U+0259, U+02BC, U+02C6-02C7, U+02C9, U+02D8-02DD, U+03C0, U+1E80-1E85, U+1EBC-1EBD, U+1EF2-1EF3, U+1EF8-1EF9, U+200C-200D, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20A8, U+20AC, U+20B9-20BA, U+20BD, U+2113, U+2122, U+2126, U+212E, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+25CC, U+FB01-FB02;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/poppins-3.woff2?v=b2c0d8df7b) format('woff2');
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-0107, U+010A-011B, U+011E-0123, U+0128-0131, U+0136-0137, U+0139-0148, U+014C-015B, U+015E-0165, U+0168-017E, U+018F, U+0192, U+01FC-01FD, U+0218-021B, U+0259, U+02BC, U+02C6-02C7, U+02C9, U+02D8-02DD, U+03C0, U+1E80-1E85, U+1EBC-1EBD, U+1EF2-1EF3, U+1EF8-1EF9, U+200C-200D, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20A8, U+20AC, U+20B9-20BA, U+20BD, U+2113, U+2122, U+2126, U+212E, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+25CC, U+FB01-FB02;
}
* {
  box-sizing: border-box;
}

html {
  background: #fff;
}

body {
  margin: 0;
  color: #111;
  font-family: Poppins, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--page-color, #fff);
  min-height: 100vh;
  padding: 50px 0 104px;
}

.homepage {
  max-width: 600px;
  margin: auto;
  position: relative;
}

.page-backdrop {
  position: fixed;
  inset: 0;
  background-image: var(--page-image);
  background-size: cover;
  background-position: center;
  pointer-events: none;
  z-index: 0;
}

.page-backdrop:after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, var(--page-overlay, 0));
}

.cover-image {
  height: 180px;
  margin-top: -50px;
  background: var(--page-image) center/cover no-repeat;
  border-radius: 0 0 16px 16px;
  margin-bottom: 22px;
}

.home-header {
  text-align: center;
  padding: 12px 18px 20px;
}

.home-header h1 {
  font-size: 18px;
  line-height: 1.3;
  margin: 18px 0 0;
  font-weight: 700;
}

/* Logo and name hidden ("Show salon name" off): the heading starts the header, no gap above it. */
.home-header > h1:first-child,
.home-header > p:first-child {
  margin-top: 0;
}

/* No header at all (logo, name and heading hidden): a small breath above the first block. */
.homepage > .blocks:first-child {
  padding-top: 12px;
}

.home-header p {
  font-size: 13px;
  color: #6e7379;
  margin: 8px auto 0;
  max-width: 390px;
}

.blocks {
  padding: 0 10px;
}

.promotion {
  margin: 0 0 11px;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 1440/823;
  background: #f3f4f5;
}

.promotion > a.image-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.promotion img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.promotion .promo-button {
  position: absolute;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  bottom: 9px;
  width: calc(100% - 4px);
  max-width: 355px;
  min-height: 36px;
  padding: 8px 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  color: white;
  background: var(--button-color);
  border-radius: 5px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 0.8;
  text-align: center;
}

.link-row {
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid #d6d6d6;
  text-decoration: none;
  position: relative;
}

.link-row + .promotion {
  margin-top: 18px;
}

.link-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: #7dafae;
  display: grid;
  place-items: center;
}

.link-icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.link-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.link-text {
  flex: 1;
  min-width: 0;
}

.link-text strong {
  display: block;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.link-text small {
  display: block;
  color: #757575;
  font-size: 12px;
  line-height: 1.6;
  margin-top: 5px;
}

.chevron {
  flex-shrink: 0;
  font-size: 30px;
  line-height: 1;
  text-align: center;
  font-family: Arial, sans-serif;
  font-weight: 700;
}

.home-booking {
  position: fixed;
  z-index: 10;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 6px 15px calc(21px + env(safe-area-inset-bottom));
  box-shadow:
    0 -1px 0 #ececec,
    0 -6px 18px rgba(0, 0, 0, 0.05);
  max-width: 600px;
  margin: auto;
}

.home-booking a {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #7185ab;
  color: white;
  border-radius: 5px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  margin-left: 52px;
  padding: 0 12px;
  position: relative;
}

.loading {
  position: relative;
}

.loader {
  display: none;
  width: 20px;
  height: 20px;
  border: 2px solid #d9e0ec;
  border-top-color: #7185ab;
  border-radius: 50%;
  position: absolute;
  right: 44px;
  top: 50%;
  margin-top: -10px;
  animation: spin 0.7s linear infinite;
  pointer-events: none;
}

.loading .loader {
  display: block;
}

.promo-button .loader,
.home-booking .loader {
  right: 10px;
  border-color: #ffffff66;
  border-top-color: white;
}

.image-link .loader {
  top: auto;
  bottom: 17px;
  right: 17px;
  background: #f5f7fb;
  box-shadow: 0 0 0 6px #f5f7fb;
}

.image-link.loading:after {
  visibility: hidden;
}

/* On a banner's button the spinner takes the arrow's place, beside the text. */
.promotion .promo-button .loader {
  position: static;
  flex: none;
  margin: 0;
}

.promotion .promo-button.loading > svg {
  display: none;
}

a:focus-visible {
  outline: 2px solid #7185ab;
  outline-offset: 3px;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.empty-preview {
  padding: 40px;
  text-align: center;
  color: #777;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 770px) {
  .home-header h1 {
    font-size: 16px;
    line-height: 1.4;
  }
  .promotion .promo-button {
    font-size: 16px;
  }
}

@media (max-width: 350px) {
  .link-text small {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loader {
    animation-duration: 1.8s;
  }
}

.home-header h1,
.home-header p,
.home-logo span,
.promo-button {
  overflow-wrap: anywhere;
}

/* Rounded navigation cards are the studio design, with FBH typography. */
.link-row {
  border: 1px solid #e7e9ec;
  border-radius: 12px;
  margin: 10px 0;
  padding: 20px 14px;
  min-height: 94px;
  box-shadow: 0 2px 8px rgba(25, 35, 45, 0.04);
}

.link-row.loading {
  border-radius: 12px;
}

.home-booking {
  border-radius: 0;
}

.preview-placeholder {
  border: 2px dashed #aebdd0;
  border-radius: 10px;
  background: rgba(247, 249, 252, 0.96);
  color: #667b98;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
  gap: 7px;
  margin: 10px 0;
  scroll-margin-bottom: 90px;
}

.placeholder-promotion {
  aspect-ratio: 1440/823;
}

.placeholder-button {
  min-height: 100px;
}

.preview-placeholder strong {
  font-size: 14px;
  font-weight: 500;
}

.preview-placeholder small {
  font-size: 11px;
  line-height: 1.6;
  max-width: 240px;
}

.placeholder-symbol {
  font-size: 24px;
  line-height: 1;
}

.link-row {
  background: var(--link-background, #fff);
  color: var(--link-ink, #111);
}

.link-row .link-text small {
  color: var(--link-muted, #757575);
}

.link-row .link-icon {
  color: var(--link-icon, #7dafae);
}

.booking-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.link-row.loading {
  background: var(--link-background, #f5f7fb);
}

.logo-placeholder {
  border: 2px dashed #aebdd0;
  background: rgba(247, 249, 252, 0.96);
  color: #667b98;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 6px;
  margin: 0 auto 12px;
}

.logo-placeholder.wide {
  width: 180px;
  height: 60px;
}

.logo-placeholder.square {
  width: 76px;
  height: 76px;
}

.logo-placeholder > span {
  font-size: 20px;
  line-height: 1;
}

.logo-placeholder small {
  font-size: 10px;
  line-height: 1.4;
}

.logo-placeholder.square.logo-left {
  margin-left: 0;
  margin-right: auto;
  width: 52px;
  height: 52px;
}

/* FBH mobile reference: navigation group, icon rhythm and banner controls. */
.chevron {
  width: 16px;
  height: 24px;
  display: grid;
  place-items: center;
}

.chevron svg {
  width: 12px;
  height: 24px;
  fill: currentColor;
}

.promo-button > svg {
  width: 20px;
  height: 16px;
  flex: none;
  fill: currentColor;
}

@media (max-width: 350px) {
  .link-text strong {
    font-size: 17px;
  }
}

.home-header p {
  line-height: 1.7;
}