/* Beauty Clinique | Treatment Photography V1.2
   Only category artwork layout; does not touch global Header, Footer or Home.
*/
.bcx-category-hero .bcx-category-visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #1A2029;
  min-height: 330px;
}
.bcx-category-hero .bcx-category-visual .bcx-category-photo {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 899px) {
  .bcx-category-hero .bcx-category-visual { min-height: 240px; }
}
@media (max-width: 480px) {
  .bcx-category-hero .bcx-category-visual { min-height: 205px; }
}


/* BEAUTY CLINIQUE · Treatment Detail Template V1.3
   Scoped to category detail pages. Does not change Home, Catalog or Site Chrome.
   Photography retains approved campaign artwork and canonical brand colors.
*/
body[data-page="category"] .bcx-category-hero .bcx-category-visual {
  border: 1px solid rgba(195,169,143,.16);
  background-color: #1A2029;
}
body[data-page="category"] .bcx-category-photo {
  object-fit: cover;
  object-position: center 45%;
}
body[data-page="category"] .bcx-category-hero .bcx-lead {
  line-height: 1.75;
  max-width: 610px;
  text-wrap: pretty;
}
body[data-page="category"] .bcx-prices { max-width: 1080px; }
body[data-page="category"] .bc-detail-item {
  align-items: center;
  grid-template-columns: minmax(0,1fr) minmax(132px,auto);
  column-gap: 28px;
  padding-block: 23px;
}
body[data-page="category"] .bc-detail-item-info { min-width: 0; }
body[data-page="category"] .bc-detail-name {
  margin: 0;
  overflow-wrap: break-word;
  font-family: var(--serif, "Cormorant Garamond", Georgia, serif);
  font-size: clamp(24px, 2.3vw, 31px);
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: .005em;
}
body[data-page="category"] .bc-detail-note {
  margin: 9px 0 0;
  max-width: 65ch;
  color: #74695D;
  line-height: 1.55;
}
body[data-page="category"] .bc-detail-item-action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
  min-width: 132px;
  text-align: right;
}
body[data-page="category"] .bc-detail-amount {
  color: #1A2029;
  font-family: var(--sans, "DM Sans", Arial, sans-serif);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: .015em;
  white-space: nowrap;
}
body[data-page="category"] .bc-detail-package {
  color: #8D7760;
  font-family: var(--sans, "DM Sans", Arial, sans-serif);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: .13em;
}
body[data-page="category"] .bc-detail-enquire {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  margin: 0;
  padding-bottom: 4px;
  white-space: nowrap;
  color: #816D59;
  font-family: var(--sans, "DM Sans", Arial, sans-serif);
  font-size: 10px;
  letter-spacing: .1em;
}
body[data-page="category"] .bc-detail-arrow {
  display: block;
  flex: none;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html[lang="zh-CN"] body[data-page="category"] .bc-detail-name {
  font-family: var(--bc-shell-zh, "PingFang SC", "Hiragino Sans GB", sans-serif);
  font-weight: 500;
  letter-spacing: .005em;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.45;
}
html[lang="zh-CN"] body[data-page="category"] .bc-detail-enquire { letter-spacing: .02em; }
@media (max-width: 899px) {
  body[data-page="category"] .bcx-category-hero .bcx-category-visual { min-height: 235px; }
  body[data-page="category"] .bcx-category-hero .bcx-lead { font-size: 13px; }
  body[data-page="category"] .bc-detail-item { padding-block: 19px; column-gap: 16px; }
  body[data-page="category"] .bc-detail-name { font-size: 24px; }
  html[lang="zh-CN"] body[data-page="category"] .bc-detail-name { font-size: 18px; }
}
@media (max-width: 480px) {
  body[data-page="category"] .bcx-category-hero .bcx-category-visual { min-height: 205px; }
  body[data-page="category"] .bc-detail-item {
    grid-template-columns: minmax(0,1fr) auto;
    column-gap: 14px;
    padding-block: 18px;
  }
  body[data-page="category"] .bc-detail-item-action { min-width: 98px; gap: 6px; }
  body[data-page="category"] .bc-detail-name { font-size: 22px; }
  body[data-page="category"] .bc-detail-amount { font-size: 13px; }
  body[data-page="category"] .bc-detail-note { font-size: 11px; }
  body[data-page="category"] .bc-detail-enquire { font-size: 9px; }
  html[lang="zh-CN"] body[data-page="category"] .bc-detail-name { font-size: 17px; }
}