/* One content index grid; the category control filters the same three-column layout. */
.consultation-content [hidden] { display: none !important; }
.consultation-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.consultation-page .consultation-content > .section-head {
  grid-template-areas: "eyebrow eyebrow" "title search";
  grid-template-columns: minmax(252px, 1fr) minmax(420px, 640px);
  column-gap: clamp(32px, 4vw, 72px);
  row-gap: 28px;
  padding-bottom: clamp(28px, 3.2vw, 48px);
}
.consultation-page .consultation-content > .section-head h2 {
  font-size: clamp(48px, 4.5vw, 72px);
  line-height: 1.04;
}
.consultation-page .consultation-search {
  display: grid;
  grid-area: search;
  align-self: center;
  grid-template-columns: minmax(145px, 0.22fr) minmax(0, 1fr) auto;
  width: 100%; margin: 0;
  border: 1px solid rgba(24, 25, 24, 0.3);
  background: transparent;
}
.consultation-search-category { display: flex; min-width: 0; margin: 0; }
.consultation-search select,
.consultation-search input,
.consultation-search button {
  min-width: 0; min-height: 54px; margin: 0; border: 0; border-radius: 0;
  background: transparent; color: #181918; font: 14px/1.4 var(--sans);
}
.consultation-search select { width: 100%; padding: 12px 18px; cursor: pointer; }
.consultation-search-query {
  display: flex; min-width: 0; border-inline: 1px solid rgba(24, 25, 24, 0.2);
}
.consultation-search input { width: 100%; padding: 12px 20px; }
.consultation-search input::placeholder { color: #555754; opacity: 1; }
.consultation-search button { flex-shrink: 0; padding: 12px 22px; cursor: pointer; }
.consultation-search .consultation-search-reset { padding-inline: 12px; color: #555754; font-size: 12px; }
.consultation-search .consultation-search-submit { padding-inline: clamp(22px, 3vw, 48px); }
.consultation-search button:hover { background: #e4e5e1; }
.consultation-search :is(input, select, button):focus-visible {
  outline: 2px solid #555754; outline-offset: -4px;
}
.consultation-page .consultation-search-status {
  min-height: 20px; margin: 12px 0 26px; color: #555754; font: 12px/1.7 var(--sans);
}
.consultation-category-columns {
  display: grid; grid-template-columns: minmax(0, 1fr);
  align-items: start; gap: clamp(48px, 5vw, 80px);
}
.consultation-category { min-width: 0; scroll-margin-top: calc(var(--header-h) + 24px); }
.consultation-category-heading {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 15px; min-height: 104px; padding: 20px 0;
  border-top: 1px solid rgba(24, 25, 24, 0.3);
}
.consultation-category-count { color: #555754; font: 11px/1.5 var(--sans); white-space: nowrap; }
.consultation-category-heading h3 {
  margin: 0; color: #181918; font: 400 clamp(22px, 1.8vw, 28px)/1.35 var(--serif);
}
.consultation-category-heading p {
  margin: 6px 0 0; color: #555754; font: 9px/1.4 var(--sans);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.consultation-category-link {
  justify-self: end;
  color: #555754;
  font-size: 12px;
  white-space: nowrap;
}
.consultation-category-link:hover,
.consultation-category-link:focus-visible { color: #181918; }
.consultation-anchor { display: block; scroll-margin-top: calc(var(--header-h) + 24px); }
.consultation-page .consultation-category .consultation-grid {
  width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px clamp(18px, 2vw, 32px);
  margin: 0; border: 0; background: transparent;
}
.consultation-page .consultation-category .consultation-card {
  display: flex; flex-direction: column; min-height: 0;
  border-bottom: 1px solid rgba(24, 25, 24, 0.2);
}
.consultation-page .consultation-category .consultation-card > [data-consultation-card-date] { align-self: stretch; }
.consultation-page .consultation-category .consultation-card > .consultation-card-link { margin-inline: 18px; }
.consultation-page .consultation-category .consultation-card:is([data-consultation-topic="new"], [data-consultation-kind="knowledge"]) > .consultation-card-link { margin: 0; }
.consultation-page .consultation-category .consultation-card[data-consultation-topic="aroma-science"] > .consultation-card-link--image {
  display: block;
  width: 100%;
  margin: 0;
  color: inherit;
  line-height: 0;
}
.consultation-page .consultation-card[data-consultation-topic="aroma-science"] > .consultation-card-link--image:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}
.consultation-page .consultation-card[data-consultation-topic="aroma-science"] figure {
  aspect-ratio: 4 / 3;
  margin: 0;
  background: #e5e7e2;
}
.consultation-page .consultation-card[data-consultation-topic="aroma-science"] figure img,
.consultation-page .consultation-card[data-consultation-topic="aroma-science"] figure:hover img {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  filter: none !important;
  object-fit: cover !important;
  object-position: center;
  transform: none !important;
}
.consultation-page .consultation-card[data-consultation-topic="aroma-science"] > .consultation-card-link--image:hover img {
  transform: scale(1.018) !important;
}
.consultation-empty { padding: 48px 20px; border-block: 1px solid rgba(24, 25, 24, 0.2); text-align: center; }
.consultation-empty p { margin: 0 0 18px; color: #555754; font-size: 14px; line-height: 1.8; }
.consultation-empty button { padding: 8px; border: 0; background: transparent; color: #181918; cursor: pointer; font: inherit; }
.consultation-category-empty { padding: 36px 20px; border-block: 1px solid rgba(24, 25, 24, 0.2); }
.consultation-category-empty p { margin: 0; color: #555754; font: 14px/1.8 var(--serif); }
.consultation-content { scroll-margin-top: calc(var(--header-h) + 24px); }
/* The expanded multi-row index is taller than the observer threshold. Keep the
   index shell present so its cards can reveal independently as they enter. */
.consultation-page .consultation-content.reveal-item { opacity: 1; transform: none; }
@media (max-width: 980px) and (min-width: 761px) {
  .consultation-category-heading { gap: 9px; }
  .consultation-category-heading h3 { font-size: 22px; }
  .consultation-page .consultation-category .consultation-card :is(h3, h4) { font-size: 22px; }
}
@media (max-width: 760px) {
  .consultation-page .consultation-content > .section-head {
    grid-template-areas: "eyebrow" "title" "search";
    grid-template-columns: minmax(0, 1fr); gap: 24px;
    padding-bottom: 28px;
  }
  .consultation-page .consultation-content > .section-head h2 {
    margin: 0;
    font-size: clamp(36px, 10vw, 44px);
    line-height: 1.08;
  }
  .consultation-page .consultation-search { grid-template-columns: minmax(0, 1fr) auto; }
  .consultation-search-category { grid-column: 1 / -1; border-bottom: 1px solid rgba(24, 25, 24, 0.2); }
  .consultation-search-query { border-left: 0; }
  .consultation-search :is(input, select) { min-height: 50px; padding-inline: 14px; font-size: 16px; }
  .consultation-search .consultation-search-submit { padding-inline: 16px; }
  .consultation-category-columns { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .consultation-category-heading { min-height: 90px; }
  .consultation-category-heading h3 { font-size: 27px; }
  .consultation-category-link { grid-column: 2 / -1; justify-self: start; }
  .consultation-page .consultation-category .consultation-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* Xiaohongshu posts are supplied as complete 1080×1440 artworks. Keep the
   original 3:4 frame so the editorial copy at the top and bottom remains
   readable instead of being cropped into the card's square image window. */
.consultation-page .consultation-card[data-consultation-media="xiaohongshu"] figure {
  aspect-ratio: 3 / 4;
  background: #e4e5e1;
}

.consultation-page .consultation-card[data-consultation-media="xiaohongshu"] figure img,
.consultation-page .consultation-card[data-consultation-media="xiaohongshu"] figure:hover img {
  position: relative !important;
  inset: auto !important;
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center;
  transform: none !important;
}

/* Skincare notes use the supplied artwork's original colour treatment. */
.consultation-page .consultation-card[data-consultation-topic="care"] figure img,
.consultation-page .consultation-card[data-consultation-topic="care"] figure:hover img {
  filter: none !important;
}