@charset "utf-8";

/* Free flow BEAUTY — Brand Theme */
:root {
  --ff-rose: #D58B8B;
  --ff-rose-dark: #B87272;
  --ff-rose-deep: #9A6363;
  --ff-rose-light: #E8C4C4;
  --ff-rose-pale: #FAF4F4;
  --ff-rose-bg: #F5EBEB;
  --ff-black: #141414;
  --ff-charcoal: #2A2A2A;
  --ff-gray: #6B6B6B;
  --ff-white: #FFFFFF;
  --ff-header-offset: 85px;
  --ff-section-y: 2.75rem;
  --ff-section-y-sm: 2rem;
  --ff-content-max: 1200px;
  --ff-hero-max-h: min(85vh, 720px);
}

@media (min-width: 992px) {
  :root {
    --ff-section-y: 3rem;
  }
}

@media (max-width: 991px) {
  :root {
    --ff-header-offset: 64px;
    --ff-section-y: 2rem;
    --ff-section-y-sm: 1.5rem;
    --ff-hero-max-h: min(38vh, 340px);
    --ff-hero-max-h-portrait: min(62vh, 520px);
  }
}

/* Map legacy hermia color classes to brand */
.hermiaH1, .hermiaH2, .hermiaH3, .hermiaH4 { color: var(--ff-rose-deep) !important; }
.txtem, sup, li { color: var(--ff-rose-dark); }

a::after { background-color: var(--ff-rose); }
a:hover { color: var(--ff-rose-dark); }

.skintestForm { background: var(--ff-rose-bg) !important; }
.skintestSubTitle, .skintestSubTitle2,
form, input[type="text"], ::placeholder { color: var(--ff-rose-deep) !important; }
input[type=text]:focus { border-bottom-color: var(--ff-rose) !important; }

button, .svg {
  border-color: var(--ff-rose-dark) !important;
  background: var(--ff-rose-dark) !important;
}
.svg:hover { color: var(--ff-rose-pale) !important; }

.cursor::after { border-color: rgba(213, 139, 139, 0.45); }
::selection { background: var(--ff-rose-light); color: var(--ff-charcoal); }

#IntroLoader { background: var(--ff-rose-pale) !important; }

.medIntroInsImgLnk { color: var(--ff-rose-deep) !important; }

/* Header — global pink nav */
header {
  background: rgba(255,255,255,0.96) !important;
  border-bottom: 1px solid var(--ff-rose-light);
}

header nav ul li a { color: var(--ff-charcoal) !important; }
header nav ul li a:hover { color: var(--ff-rose-dark) !important; }
.menu-toggle { color: var(--ff-rose-dark) !important; }
header nav ul li.sub-menu:before,
header nav ul li.active.sub-menu:before {
  content: none !important;
  display: none !important;
}

@media (max-width: 991px) {
  header nav { background: var(--ff-rose-pale) !important; }
  header nav ul li.active ul { background: var(--ff-rose-bg) !important; }
}

/* Header logo sizing */
header .logo img.logo-img {
  width: auto;
  height: 52px;
  max-width: 180px;
  object-fit: contain;
}

header nav ul > li:first-child > a[href="index.html"] {
  font-weight: 500;
  color: var(--ff-rose-deep) !important;
  letter-spacing: 0.12em;
}

footer .footerLogo img.logo-img {
  height: 56px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}

.ff-footer .logo-img,
.ff-footer-logo-link img {
  height: 38px !important;
  max-width: 140px !important;
}

/* 療程頁 FAQ — 預約 CTA（indexHomeBtn 會清掉背景，需覆蓋） */
.ff-hbbubble-cta a.indexHomeBtn,
.ff-linearz-cta a.indexHomeBtn,
.ff-alltite-cta a.indexHomeBtn {
  display: inline-block !important;
  padding: 0.85rem 2.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--ff-white) !important;
  background: var(--ff-rose-dark) !important;
  border: 1px solid var(--ff-rose-dark);
  transition: background 0.3s, color 0.3s;
}

.ff-hbbubble-cta a.indexHomeBtn:hover,
.ff-linearz-cta a.indexHomeBtn:hover,
.ff-alltite-cta a.indexHomeBtn:hover {
  background: var(--ff-rose) !important;
  color: var(--ff-white) !important;
}

.footer { background: #EDEDED; }

.bx-wrapper .bx-pager.bx-default-pager a { background: var(--ff-rose) !important; }
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active { background: var(--ff-rose-light) !important; }