/* Beauty Clinique V0.6.1 | Global typography + spacing QA
   Applies LAST on Home, Treatments, Pricing and Contact.
   Keeps approved Hero/Find Your Care ratios and category crops unchanged.
*/
:root {
  --bc-brand-size: 28px;
  --bc-page-gutter: clamp(24px, 5.3vw, 96px);
  --bc-zh-ui: "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", "Arial Unicode MS", sans-serif;
}

/* Single wordmark across EN/ZH, Home, Treatments, Prices and Contact. */
:is(.brand, .bcx-brand, .bc-logo) {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: max-content;
  margin: 0;
  font-family: var(--serif);
  font-size: var(--bc-brand-size);
  font-weight: 500;
  line-height: .88;
  letter-spacing: .115em;
  color: var(--champagne);
  white-space: nowrap;
  font-synthesis: none;
}
:is(.brand, .bcx-brand, .bc-logo) > span {
  display: block;
}

/* Shared page gutters, without touching the approved 24px Desktop photo ribbon. */
:is(.bc-container, .bcx-wrap) {
  width: calc(100% - 2 * var(--bc-page-gutter));
  max-width: none;
  margin-inline: auto;
}
:is(.bc-header-row, .bcx-header-inner) {
  min-height: 88px;
}
:is(.bcx-header-inner, .bc-header-row, .site-header) { min-width: 0; }
:is(.bcx-header-inner, .bc-header-row) > * { min-width: 0; }

/* Real vector icons. Never rely on a font's Unicode arrow glyph. */
.bc-arrow {
  display: inline-block;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  color: inherit;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bc-arrow--long { width: 20px; height: 14px; }
:is(.hero-link, .featured-actions a, .outline-link, .bc-outline,
    .bc-link-line, .bcx-link, .bcx-back, .bcx-category-tile small,
    .bcx-hero-cta a, .bc-contact-buttons a, .bcx-consult a,
    .contact-info a, .bc-treatment-enquiry, .bc-guide-cta a) {
  align-items: center;
  gap: 8px;
}
:is(.hero-link, .featured-actions a, .outline-link, .bc-outline,
    .bc-link-line, .bcx-link, .bcx-back, .bcx-hero-cta a,
    .contact-info a, .bc-treatment-enquiry) { display: inline-flex; }
.bcx-category-tile small { display: inline-flex; }
.hero-link > .bc-arrow { color: var(--champagne); }
.care-heading-arrow .bc-arrow { width: 24px; height: 17px; display: block; }
.bc-price-teaser-arrow { display: inline-flex; align-items: center; justify-content: center; }
.bc-price-teaser-arrow .bc-arrow { width: 17px; height: 17px; }
.bc-treatment-enquiry .bc-arrow { width: 13px; height: 13px; }
.bcx-link .bc-arrow { width: 13px; height: 13px; }

/* Readability and card alignment across pages. */
:is(.bcx-category-tile, .bc-price-teaser, .bc-treatment-row, .bcx-price-row) { min-width: 0; }
:is(.bcx-price-row h3, .bc-treatment-name, .bcx-lead, .bc-lead) { overflow-wrap: break-word; }
.bcx-price-row > :last-child { min-width: 0; }
.bcx-category-tile small { line-height: 1.35; }

/* Chinese text: prefer native iOS PingFang, not a heavy, rigid CJK serif fallback.
   Latin Beauty Clinique logo ALWAYS remains the same serif as English. */
html[lang="zh-CN"] body { font-family: var(--bc-zh-ui); }
html[lang="zh-CN"] :is(
  .hero h1, .care-intro h2, .featured-section h2, .price-section h2,
  .consult-section h2, .contact-section h2, .bcx-intro h1,
  .bcx-contact-grid h2, .bcx-consult h2, .bcx-category-tile > span,
  .bcx-price-row h3, .bc-hero h1, .bc-list-top h1,
  .bc-section-heading h2, .bc-result-heading h2, .bc-contact-panel h2,
  .bc-price-teaser-name, .bc-info h3
) {
  font-family: var(--bc-zh-ui);
  font-weight: 500;
  letter-spacing: .025em;
  line-height: 1.28;
}
html[lang="zh-CN"] :is(.bcx-lead, .bc-hero .bc-lead, .hero-description,
  .care-description, .bc-intro, .bc-guide-cta p) {
  letter-spacing: .005em;
  line-height: 1.68;
}
html[lang="zh-CN"] .hero h1 { font-size: clamp(38px, 3.7vw, 58px); letter-spacing: .025em; }
html[lang="zh-CN"] .care-intro h2 { font-size: clamp(21px, 2.4vw, 27px); line-height: 1.12; }
html[lang="zh-CN"] .featured-section h2 { font-size: clamp(27px, 3.1vw, 38px); }
html[lang="zh-CN"] .consult-section h2 { font-size: clamp(25px, 2.8vw, 34px); }
html[lang="zh-CN"] .price-section h2 { font-size: clamp(25px, 3.1vw, 38px); }
html[lang="zh-CN"] .bcx-intro h1 { font-size: clamp(36px, 4.3vw, 64px); }
html[lang="zh-CN"] .bcx-category-tile > span { font-size: 22px; }
html[lang="zh-CN"] .bcx-price-row h3 { font-size: 21px; }
html[lang="zh-CN"] .bc-hero h1 { font-size: clamp(40px, 4.5vw, 64px); }
html[lang="zh-CN"] .bc-list-top h1 { font-size: clamp(36px, 4vw, 56px); }
html[lang="zh-CN"] .bc-section-heading h2 { font-size: clamp(28px, 3.2vw, 42px); }
html[lang="zh-CN"] .bc-result-heading h2 { font-size: 27px; }
html[lang="zh-CN"] .bc-price-teaser-name { font-size: 24px; }
html[lang="zh-CN"] .bc-contact-panel h2 { font-size: 35px; }

@media (min-width: 900px) {
  /* Home first-screen and 6-card ribbon: dimensions deliberately untouched. */
  :is(.featured-section, .price-section, .consult-section, .contact-section, .treatments-section) {
    padding-inline: var(--bc-page-gutter);
  }
}

@media (max-width: 899px) {
  :root { --bc-brand-size: 20px; --bc-page-gutter: 24px; }
  :is(.bc-header-row, .bcx-header-inner) { min-height: 74px; }
  :is(.hero, .care-section, .featured-section, .price-section,
      .consult-section, .contact-section, .treatments-section) {
    padding-left: var(--bc-page-gutter);
    padding-right: var(--bc-page-gutter);
  }
  /* Let small touch screens wrap navigation without cropping labels. */
  .bcx-right, .bc-header-right { min-width: 0; }
  .bcx-right { gap: 12px; }
  .bc-header-right { gap: 12px; }
  html[lang="zh-CN"] .hero h1 { font-size: clamp(25px, 7.1vw, 32px); line-height: 1.28; }
  html[lang="zh-CN"] .care-intro h2 { font-size: clamp(20px, 6.0vw, 25px); line-height: 1.15; }
  html[lang="zh-CN"] .featured-section h2 { font-size: clamp(20px, 5.6vw, 26px); }
  html[lang="zh-CN"] .consult-section h2 { font-size: clamp(21px, 6vw, 27px); }
  html[lang="zh-CN"] .price-section h2 { font-size: clamp(21px, 5.7vw, 27px); }
  html[lang="zh-CN"] .bcx-intro h1 { font-size: clamp(28px, 7.3vw, 40px); line-height: 1.25; }
  html[lang="zh-CN"] .bcx-category-tile > span { font-size: 18px; }
  html[lang="zh-CN"] .bcx-price-row h3 { font-size: 18px; }
  html[lang="zh-CN"] .bc-hero h1 { font-size: clamp(30px, 8vw, 40px); }
  html[lang="zh-CN"] .bc-list-top h1 { font-size: clamp(29px, 8vw, 40px); }
  html[lang="zh-CN"] .bc-section-heading h2 { font-size: clamp(26px, 7vw, 35px); }
  html[lang="zh-CN"] .bc-result-heading h2 { font-size: 24px; }
  html[lang="zh-CN"] .bc-price-teaser-name { font-size: 21px; }
  html[lang="zh-CN"] .bc-contact-panel h2 { font-size: 29px; }
  html[lang="zh-CN"] .care-card > span { font: 500 10px/1.3 var(--bc-zh-ui); white-space: nowrap; letter-spacing: 0; }
  /* Don't let long labels force out the six-card 3x2 grid. */
  .care-card > span { max-width: 100%; }
}
@media (max-width: 380px) {
  :root { --bc-page-gutter: 20px; }
}