/* Модуль «hint»: кнопка «Намекнуть» в карточке аромата и лист с открыткой-намёком.
   Лист лежит над карточкой аромата (у неё z-index 90) и под тостом (120). */

/* Общий ряд под кнопками покупки; модуль compare задаёт для него то же правило */
.pdp__extra { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 4px; }

/* Тихая кнопка: подпись капсом с линией, как у .link и соседней «Сравнить с…»;
   линия начинается после значка, поле нажатия больше видимой кнопки */
.hint-open, .hint__copy {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 0; border: 0; border-radius: 0; background: none; color: var(--ink);
  font: 500 .75rem/1 var(--f-text); letter-spacing: .24em; text-transform: uppercase;
}
.hint-open::before, .hint__copy::before { content: ""; position: absolute; inset: -10px -4px; }
.hint-open::after, .hint__copy::after {
  content: ""; position: absolute; left: 27px; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform-origin: left; transition: transform .6s var(--ease);
}
.hint-open:hover::after, .hint__copy:hover::after { transform: scaleX(.25); }
.hint-open .ico, .hint__copy .ico { width: 17px; height: 17px; }

/* ---------- Лист ---------- */
.hint {
  position: fixed; inset: 0; z-index: 110;
  display: grid; place-items: center; padding: 32px var(--gutter);
  visibility: hidden; transition: visibility 0s .8s;
}
.hint.is-open { visibility: visible; transition: visibility 0s; }
.hint__scrim { position: absolute; inset: 0; background: rgba(13, 13, 12, .48); opacity: 0; transition: opacity .5s var(--ease); }
.hint.is-open .hint__scrim { opacity: 1; }
.hint__panel {
  position: relative;
  width: min(1000px, 100%); max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); color: var(--ink);
  opacity: 0; transform: translateY(28px);
  transition: opacity .55s var(--ease), transform .8s var(--ease);
}
.hint.is-open .hint__panel { opacity: 1; transform: none; }
/* прокручивается тело листа, крестик остаётся на месте */
.hint__body {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  overflow-y: auto; overscroll-behavior: contain;
}
.hint__x { position: absolute; top: 14px; right: 14px; z-index: 2; width: 44px; height: 44px; background: rgba(243, 240, 234, .92); }

/* Превью: открытка как отпечаток на паспарту из «камня», с волосяной рамкой */
.hint__preview { display: grid; place-items: center; padding: clamp(32px, 4vw, 60px); background: var(--paper-2); }
.hint__frame { width: 100%; max-width: 380px; aspect-ratio: 4 / 5; background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.hint__card { width: 100%; height: 100%; opacity: 0; transition: opacity .6s var(--ease); }
.hint__card.is-drawn { opacity: 1; }
/* на невысоком экране лист прокручивается, а открытка остаётся в поле зрения */
@media (min-width: 761px) {
  .hint__frame { position: sticky; top: clamp(32px, 4vw, 60px); bottom: clamp(32px, 4vw, 60px); }
}

.hint__info { display: flex; flex-direction: column; min-width: 0; padding: clamp(40px, 4.4vw, 64px) clamp(28px, 4vw, 56px) clamp(32px, 3.6vw, 52px); }
.hint__eyebrow { padding-right: 48px; }
.hint__title {
  margin-top: 18px;
  font: 300 clamp(2.1rem, 2.9vw, 2.75rem)/1.04 var(--f-display); letter-spacing: -.02em; text-wrap: balance;
}
.hint__title em { font-style: italic; font-weight: 250; letter-spacing: -.014em; }
.hint__lead { margin-top: 18px; max-width: 26rem; font-size: 1rem; line-height: 1.6; color: var(--mute); text-wrap: pretty; }

.hint__actions { display: grid; gap: 10px; margin-top: 32px; }
.hint__actions .btn { width: 100%; }
.hint__actions .btn--line { border-color: var(--line-2); }
.hint__actions .btn--line:hover { border-color: var(--ink); }

/* Текст сообщения: курсив на волосяной линии слева, как факт в карточке аромата */
.hint__msgbox { display: grid; gap: 12px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); }
.hint__msghead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; }
.hint__label { color: var(--mute); }
.hint__copy { font-size: .75rem; letter-spacing: .22em; }
.hint__msg {
  display: block; width: 100%; min-height: 0; margin: 0; padding: 2px 0 2px 16px;
  border: 0; border-left: 1px solid var(--ink); border-radius: 0; background: none; color: var(--ink);
  font: italic 300 1rem/1.5 var(--f-display); letter-spacing: 0;
  resize: none; overflow: hidden; field-sizing: content;
}
.hint__msg:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 4px; }

/* Телефон: лист выезжает снизу на всю ширину */
@media (max-width: 760px) {
  .hint { place-items: end stretch; padding: 0; }
  .hint__panel {
    width: 100%; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px);
    opacity: 1; transform: translateY(104%); transition: transform .7s var(--ease);
  }
  .hint__body { grid-template-columns: minmax(0, 1fr); }
  .hint__x { top: 8px; right: 8px; }
  .hint__preview { padding: 40px 20px 28px; }
  .hint__frame { max-width: min(56vw, 250px); }
  .hint__info { padding: 28px 20px calc(30px + env(safe-area-inset-bottom, 0px)); }
  .hint__eyebrow { padding-right: 0; }
  .hint__title { margin-top: 14px; font-size: 2.05rem; }
  .hint__lead { margin-top: 14px; }
  .hint__actions { margin-top: 26px; }
  .hint__msgbox { margin-top: 28px; padding-top: 18px; }
}