/* Selected direction: full-bleed editorial index grid, preserving the nine real content entries. */
.consultation-page .consultation-content {
  padding: clamp(52px, 4.2vw, 64px) clamp(24px, 2.4vw, 40px) clamp(88px, 9vw, 138px);
  background: #fafaf8;
}

.consultation-page .consultation-content > .section-head {
  display: grid;
  max-width: none;
  grid-template-areas:
    "eyebrow eyebrow"
    "title note";
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.48fr);
  column-gap: clamp(54px, 8vw, 132px);
  row-gap: clamp(28px, 2.8vw, 42px);
  align-items: start;
  margin: 0;
}

.consultation-page .consultation-content > .section-head .eyebrow {
  display: grid;
  grid-area: eyebrow;
  grid-template-columns: max-content minmax(72px, 1fr);
  gap: clamp(16px, 1.8vw, 28px);
  align-items: center;
  margin: 0;
}

.consultation-page .consultation-content > .section-head .eyebrow::after {
  border-top: 1px solid rgba(24, 25, 24, 0.22);
  content: "";
}

.consultation-page .consultation-content > .section-head h2 {
  grid-area: title;
  max-width: none;
  margin: 0;
  font-size: clamp(60px, 5.7vw, 86px);
  letter-spacing: 0.01em;
  line-height: 0.96;
}

.consultation-page .consultation-content > .section-head > p:last-child {
  grid-area: note;
  align-self: center;
  justify-self: stretch;
  max-width: 30em;
  margin: 0;
  padding: 2px 0 2px clamp(24px, 3vw, 46px);
  border-left: 1px solid rgba(24, 25, 24, 0.22);
  color: #555754;
  font-size: 13px;
  line-height: 1.9;
}

.consultation-page .consultation-topic-rail {
  display: grid;
  width: 100%;
  max-width: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: clamp(38px, 3.8vw, 54px) 0 0;
  border-top: 1px solid rgba(24, 25, 24, 0.24);
  border-bottom: 1px solid rgba(24, 25, 24, 0.24);
}

.consultation-page .consultation-topic-rail a {
  display: grid;
  min-height: 104px;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  padding: 16px clamp(18px, 2vw, 30px);
  border-right: 1px solid rgba(24, 25, 24, 0.18);
  color: #181918;
  text-decoration: none;
  transition: background-color 220ms ease;
}

.consultation-page .consultation-topic-rail a:last-child {
  border-right: 0;
}

.consultation-page .consultation-topic-rail a:hover,
.consultation-page .consultation-topic-rail a:focus-visible {
  background: #e4e5e1;
}

.consultation-page .consultation-topic-rail a:focus-visible {
  outline: 1px solid #555754;
  outline-offset: 3px;
}

.consultation-page .consultation-topic-rail span {
  grid-row: 1 / span 2;
  padding-top: 4px;
  color: #777a76;
  font: 11px/1 var(--sans);
  letter-spacing: 0.12em;
}

.consultation-page .consultation-topic-rail strong {
  font-family: var(--serif);
  font-size: clamp(21px, 1.75vw, 27px);
  font-weight: 400;
  line-height: 1.12;
}

.consultation-page .consultation-topic-rail small {
  margin-top: 6px;
  color: #777a76;
  font: 9px/1.3 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.consultation-page .consultation-grid {
  display: grid;
  width: 100%;
  max-width: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  border-right: 1px solid rgba(24, 25, 24, 0.18);
  border-bottom: 1px solid rgba(24, 25, 24, 0.18);
  border-left: 1px solid rgba(24, 25, 24, 0.18);
  background: rgba(24, 25, 24, 0.18);
}

.consultation-page .consultation-card {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 100%;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 0;
  padding: 0;
  border: 0;
  background: #fafaf8;
}

.consultation-page .consultation-card figure {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #d3d5d1;
}

.consultation-page .consultation-card figure img {
  width: 100%;
  height: 100%;
  filter: grayscale(1) contrast(1.025);
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.consultation-page .consultation-card:hover figure img {
  transform: scale(1.014);
}

.consultation-page .consultation-media-code {
  position: absolute;
  top: clamp(14px, 1.5vw, 22px);
  left: clamp(14px, 1.5vw, 22px);
  z-index: 2;
  color: rgba(24, 25, 24, 0.58);
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.15em;
  line-height: 1.55;
}

.consultation-page .consultation-media-code b {
  font-family: var(--serif);
  font-size: clamp(24px, 2.25vw, 34px);
  font-weight: 400;
  letter-spacing: 0;
}

.consultation-page .consultation-card[data-consultation-kind="product"] figure {
  aspect-ratio: 4 / 5;
  background: #e4e5e1;
}

.consultation-page .consultation-card[data-consultation-kind="product"] figure::after,
.consultation-page .consultation-card[data-consultation-kind="knowledge"] figure::after {
  display: none;
  content: none;
}

.consultation-page .consultation-card[data-consultation-kind="product"] .consultation-media-code {
  color: rgba(24, 25, 24, 0.58);
}

.consultation-page .consultation-card[data-consultation-kind="product"] figure img,
.consultation-page .consultation-card[data-consultation-kind="product"]:hover figure img {
  position: relative;
  z-index: 1;
  display: block;
  width: 50%;
  height: 72%;
  margin: 17% auto 0;
  filter: drop-shadow(0 18px 18px rgba(24, 25, 24, 0.14));
  object-fit: contain;
  transform: none;
}

/* Match the restrained visible packshot scale used by the product directory.
   Each source cutout has different transparent bounds, so these corrections
   align the visible bottle and jar rather than their raw image canvases. */
.consultation-page .consultation-card[data-consultation-card="new-01"] figure img {
  width: 50%;
}

.consultation-page .consultation-card[data-consultation-card="new-02"] figure img {
  width: 54%;
  height: 70%;
  margin-top: 19%;
}

.consultation-page .consultation-card[data-consultation-card="new-03"] figure img {
  width: 70%;
  height: 60%;
  margin-top: 25%;
}

/* New-release cards keep one clear caption only: the verified product name.
   Published product and knowledge URLs use an accessible full-card link. */
.consultation-page .consultation-card[data-consultation-topic="new"] {
  grid-template-rows: auto minmax(82px, auto);
}

.consultation-page .consultation-card[data-consultation-topic="new"] h3 {
  display: flex;
  min-height: 82px;
  align-items: center;
  padding: 18px clamp(14px, 1.45vw, 22px) 20px;
  font-size: clamp(20px, 1.55vw, 25px);
  line-height: 1.28;
}

.consultation-page .consultation-card[data-consultation-topic="new"] > .consultation-card-link,
.consultation-page .consultation-card[data-consultation-kind="knowledge"] > .consultation-card-link {
  position: absolute;
  inset: 0;
  z-index: 5;
  min-height: 0;
  margin: 0;
  color: transparent;
  font-size: 0;
  justify-self: stretch;
}

.consultation-page .consultation-card[data-consultation-topic="new"] > .consultation-card-link::after,
.consultation-page .consultation-card[data-consultation-kind="knowledge"] > .consultation-card-link::after {
  display: none;
  content: none;
}

.consultation-page .consultation-card[data-consultation-topic="new"] > .consultation-card-link:focus-visible,
.consultation-page .consultation-card[data-consultation-kind="knowledge"] > .consultation-card-link:focus-visible {
  outline: 1px solid #181918;
  outline-offset: -5px;
}

.consultation-page .consultation-card[data-consultation-kind="knowledge"] figure {
  background: #e4e5e1;
}

.consultation-page .consultation-card[data-consultation-kind="knowledge"] figure img {
  object-position: center;
}

.consultation-page .consultation-card > span {
  margin: 0;
  padding: 14px clamp(14px, 1.45vw, 22px) 0;
  color: #777a76;
  font-size: 10px;
  letter-spacing: 0.08em;
}

.consultation-page .consultation-card h3 {
  margin: 0;
  padding: 6px clamp(14px, 1.45vw, 22px) 0;
  border: 0;
  font-family: var(--serif);
  font-size: clamp(23px, 1.85vw, 30px);
  font-weight: 400;
  line-height: 1.16;
}

.consultation-page .consultation-card > [data-consultation-card-summary] {
  margin: 0;
  padding: 10px clamp(14px, 1.45vw, 22px) 18px;
  color: #555754;
  font-size: 12px;
  line-height: 1.72;
}

.consultation-page .consultation-card > [data-consultation-card-date] {
  align-self: end;
  margin: 0;
  padding: 11px clamp(14px, 1.45vw, 22px) 12px;
  border-top: 1px solid rgba(24, 25, 24, 0.14);
  color: #777a76;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-align: right;
}

.consultation-page .consultation-card[id] {
  scroll-margin-top: calc(var(--header-h) + 34px);
}

@media (max-width: 980px) {
  .consultation-page .consultation-content {
    padding-inline: 24px;
  }

  .consultation-page .consultation-content > .section-head {
    grid-template-columns: minmax(0, 0.9fr) minmax(260px, 0.56fr);
    column-gap: 38px;
  }

  .consultation-page .consultation-topic-rail a {
    grid-template-columns: 28px minmax(0, 1fr);
    padding-inline: 16px;
  }

  .consultation-page .consultation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .consultation-page .consultation-card h3 {
    font-size: clamp(23px, 2.8vw, 28px);
  }
}

@media (max-width: 760px) {
  .consultation-page .consultation-content {
    padding: 60px 18px 84px;
  }

  .consultation-page .consultation-content > .section-head {
    display: grid;
    grid-template-areas:
      "eyebrow"
      "title"
      "note";
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  .consultation-page .consultation-content > .section-head h2 {
    margin-top: 28px;
    font-size: clamp(42px, 12vw, 52px);
  }

  .consultation-page .consultation-content > .section-head > p:last-child {
    max-width: 31em;
    margin: 26px 0 0 18%;
    padding: 0 0 0 16px;
    font-size: 13px;
    line-height: 1.8;
  }

  .consultation-page .consultation-topic-rail {
    width: calc(100% + 36px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 36px -18px 0;
  }

  .consultation-page .consultation-topic-rail a {
    min-height: 84px;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    padding: 14px 7px;
    text-align: center;
  }

  .consultation-page .consultation-topic-rail span {
    display: none;
  }

  .consultation-page .consultation-topic-rail strong {
    font-size: 16px;
    white-space: nowrap;
  }

  .consultation-page .consultation-topic-rail small {
    max-width: 11em;
    margin-inline: auto;
    font-size: 7px;
    letter-spacing: 0.07em;
  }

  .consultation-page .consultation-grid {
    width: calc(100% + 36px);
    grid-template-columns: 1fr;
    margin-inline: -18px;
    border-right: 0;
    border-left: 0;
  }

  .consultation-page .consultation-card figure,
  .consultation-page .consultation-card[data-consultation-kind="product"] figure {
    aspect-ratio: 4 / 3;
  }

  .consultation-page .consultation-card[data-consultation-kind="product"] figure img,
  .consultation-page .consultation-card[data-consultation-kind="product"]:hover figure img {
    width: 34%;
    height: 68%;
    margin-top: 12%;
  }

  .consultation-page .consultation-card[data-consultation-card="new-01"] figure img {
    width: 20%;
    height: 72%;
    margin-top: 10.5%;
  }

  .consultation-page .consultation-card[data-consultation-card="new-02"] figure img {
    width: 34%;
    height: 68%;
    margin-top: 12%;
  }

  .consultation-page .consultation-card[data-consultation-card="new-03"] figure img {
    width: 47%;
    height: 58%;
    margin-top: 16%;
  }

  .consultation-page .consultation-card[data-consultation-topic="new"] {
    grid-template-rows: auto auto;
  }

  .consultation-page .consultation-card[data-consultation-topic="new"] h3 {
    min-height: 0;
    padding: 18px 18px 21px;
    font-size: clamp(22px, 6.2vw, 27px);
  }

  .consultation-page .consultation-card > span {
    padding: 16px 18px 0;
  }

  .consultation-page .consultation-card h3 {
    padding: 7px 18px 0;
    font-size: clamp(25px, 7vw, 31px);
  }

  .consultation-page .consultation-card > [data-consultation-card-summary] {
    padding: 11px 18px 20px;
    font-size: 12px;
  }

  .consultation-page .consultation-card > [data-consultation-card-date] {
    padding: 12px 18px 13px;
  }
}

/* Keep the handoff from the nine-card index to the related links editorial,
   but remove the stacked bottom/top padding that made the boundary feel empty. */
.consultation-page .consultation-content {
  padding-bottom: clamp(40px, 3vw, 48px);
}

.consultation-page .consultation-next {
  padding-top: clamp(48px, 4vw, 64px);
  padding-bottom: clamp(64px, 6vw, 96px);
}

.consultation-page .consultation-next > .section-head {
  margin-bottom: clamp(28px, 3vw, 40px);
}