/* HPC_APPEARANCE — всплывашка после копирования промокода (copy-nudge.js).
   Подключается только при включённой опции на вкладке «Внешний вид».
   Окно — по центру экрана поверх затемнения: внизу экрана его не замечали и
   спокойно проходили мимо. Само окно несёт класс hpc-section: на него
   действуют инлайновые переменные кнопки (--hpc-btn-*) и токены coupons.css,
   поэтому кнопка в окне выглядит ровно как на карточке — свои правила для неё
   не нужны. Живёт в body, а не в секции: у секций content-visibility:auto, и
   fixed внутри них режется по границе секции. */
.hpc-nudge-wrap {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, .42);
    animation: hpc-nudge-in .2s ease-out;
}
.hpc-nudge {
    position: relative;
    width: min(420px, 100%);
    box-sizing: border-box;
    padding: 20px 44px 20px 20px;
    background: #f8f5e6;
    color: #222;
    border: 1px solid #e3d8c7;
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
    font-size: 16px;
    line-height: 1.45;
    text-align: center;
}
/* Текст не выделяется: копирование из окна не должно считаться копированием кода. */
.hpc-nudge p { margin: 0 0 14px; user-select: none; -webkit-user-select: none; }
/* Кнопка крупнее карточной: это единственное действие на экране. */
.hpc-nudge .hpc-btn {
    width: min(280px, 100%);
    padding: .7rem 1rem;
    font-size: 1rem;
}
/* Крестик — зона нажатия 44×44: промах рядом с ним закрывает окно, а не
   уводит на iHerb. Скрытой зоны вокруг крестика нет нарочно.

   Оформление темы снимается во ВСЕХ состояниях, а не только в обычном. Тема
   (Kadence) красит любую button:hover заливкой ссылки и вешает тень
   (--global-palette-btn-bg-hover + box-shadow 15px 25px). Правило
   `.hpc-nudge-x:hover { color }` перебивало только цвет, поэтому под курсором
   вся зона нажатия вспыхивала синим квадратом 44×44 — почти треть окна. */
.hpc-nudge-x {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    border-radius: 50%;
    background: none;
    box-shadow: none;
    color: #666;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: color .15s;
}
.hpc-nudge-x:hover,
.hpc-nudge-x:focus,
.hpc-nudge-x:active {
    background: none;
    box-shadow: none;
    color: #222;
}
/* Ответ на наведение — кружок 28×28 внутри зоны нажатия, а не вся зона.
   Под курсором видно, куда жать, но подсветка не спорит с кнопкой «Перейти». */
.hpc-nudge-x::after {
    content: "";
    position: absolute;
    inset: 8px;
    z-index: -1;
    border-radius: 50%;
    background: transparent;
    transition: background-color .15s;
}
.hpc-nudge-x:hover::after { background: rgba(0, 0, 0, .06); }
/* Обводка — только для клавиатуры: мышью её не видно, Tab'ом видно, куда попал
   фокус. Тема на :focus рисует ту же заливку с тенью, её снимаем выше. */
.hpc-nudge-x:focus { outline: none; }
.hpc-nudge-x:focus-visible {
    outline: 2px solid #2f6fbf;
    outline-offset: -8px;
}

/* Режим «всё окно — кнопка» (галка на вкладке, по умолчанию выключена):
   ссылкой становится тело окна. Это ЯВНАЯ кнопка, а не скрытая зона: курсор,
   подсветка кнопки при наведении на любую точку окна и подпись под ней говорят,
   что нажимать можно везде. Крестик остаётся снаружи ссылки. */
.hpc-nudge-wide { padding: 0; }
.hpc-nudge-link {
    display: block;
    padding: 20px 44px 20px 20px;
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.hpc-nudge-link:hover,
.hpc-nudge-link:focus { color: inherit; text-decoration: none; }
/* Та же подсветка, что у .hpc-btn:hover в coupons.css, — но от наведения на
   всё окно, а не только на кнопку. */
.hpc-nudge-link:hover .hpc-btn,
.hpc-nudge-link:focus .hpc-btn {
    color: var(--hpc-btn-fg-hover, var(--global-palette9, #ffffff));
    /* Фолбэк темнее, чем в coupons.css: светлый янтарь #e8902a с белым текстом
       даёт 2,48:1 при норме 4,5:1 — на наведении кнопка становилась ЧИТАЕМЕЕ
       НЕ, а хуже. #b45309 — тот же янтарь из PRESETS, 5,02:1. Фолбэк работает
       только при пресете «белая»: с любым другим переменная задана. */
    background: var(--hpc-btn-bg-hover, #b45309);
    border-color: var(--hpc-btn-border-hover, var(--global-palette7, #EDF2F7));
    box-shadow: var(--hpc-btn-shadow-hover, 2px 2px 3px 0 rgba(0, 0, 0, .4));
}
.hpc-nudge-hint {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.3;
    color: #666;
}
@keyframes hpc-nudge-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .hpc-nudge-wrap { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   РЕЖИМ ТАЛОНА (nudge_chip)

   В прежнем окне за глаз спорили код и кнопка, и выигрывал код: кнопка —
   клон карточной, а при пресете «белая» это #fff на кремовом, 1,09:1 при
   норме 3:1 по WCAG 1.4.11. Здесь спор снят — самое крупное пятно окна и
   есть то, что нажимают. Кнопка под талоном остаётся: она называет выгоду
   словами, талон называет код.

   Цвета талона свои, а НЕ --hpc-btn-*: иначе пресет «белая» сделал бы
   невидимым и его. Зелёный #2e7d32 с белым — 5,13:1, на кремовом — 4,69:1.
   ═══════════════════════════════════════════════════════════════════════ */
.hpc-nudge-chip-mode {
    /* Кегль кода считается от ШИРИНЫ ОКНА, а не от окна браузера: vw здесь
       врёт — на узкой плашке в широком окне код вылезал за край. */
    container-type: inline-size;
    /* Сверху 50px, а не 24: талон тянется в ширину вслед за длинным кодом, и
       при обычном отступе он заехал бы под крестик (44×44 в правом верхнем). */
    padding: 50px 20px 20px;
}
.hpc-nudge-chip {
    display: inline-flex;
    /* Явно: глобального сброса в coupons.css нет, и без этого min-block-size
       складывался с padding — талон выходил 72px вместо заданных 48. */
    box-sizing: border-box;
    align-items: center;
    gap: 12px;
    max-inline-size: 100%;
    min-block-size: 48px;
    padding: 11px 17px;
    background: #fffdf5;
    color: #222;
    border: 1.5px dashed #c9b998;
    border-radius: 10px;
    font: 700 clamp(18px, 7cqi, 30px)/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .04em;
    overflow-wrap: anywhere;   /* код длиннее любого разумного не порвёт окно */
    text-decoration: none;
    cursor: pointer;
    transition: background .18s ease-out, border-color .18s ease-out,
                box-shadow .18s ease-out, transform .18s ease-out;
}
/* Талон обязан ВЫГЛЯДЕТЬ нажимаемым: иначе это скрытая зона нажатия, а её
   Google называет «unexpected click areas» — см. описание nudge_wide.
   Это НАВЕДЕНИЕ мышью, и только оно. */
.hpc-nudge-chip:hover {
    background: #fff;
    color: #222;
    border-style: solid;
    border-color: #2e7d32;
    box-shadow: 0 3px 0 rgba(46, 125, 50, .22);
    transform: translateY(-1px);
}
.hpc-nudge-chip:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(46, 125, 50, .22); }
/* Фокус с клавиатуры — ТОЛЬКО кольцо, без заливки и подъёма.
   Копирование с клавиатуры (Ctrl+C) оставляет режим ввода клавиатурным, и
   :focus-visible срабатывал сразу на открытии: талон показывал подсветку
   нажатия вместо себя, пунктирный билет никто не видел. Кольцо роль фокуса
   выполняет, а вид талона не подменяет. */
.hpc-nudge-chip:focus-visible { outline: 3px solid #1d2327; outline-offset: 3px; }
/* Значок копирования мельче кода и приглушён: он МЕТИТ талон, а не спорит с
   ним за вес. На наведении подхватывает цвет рамки. */
.hpc-nudge-chip .hpc-nudge-ico {
    inline-size: .6em;
    block-size: .6em;
    color: #8a8a8a;
    transition: color .18s ease-out;
}
.hpc-nudge-chip:hover .hpc-nudge-ico { color: #2e7d32; }

/* Статус — своей строкой, а не рядом с кодом: в одну строку подпись отъедает
   у кода вес, а код здесь обязан оставаться самым крупным. #5a5a5a на
   кремовом — 6,30:1. */
.hpc-nudge-chip-mode .hpc-nudge-done {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1;
    color: #5a5a5a;
    user-select: none;
    -webkit-user-select: none;
}
.hpc-nudge-chip-mode .hpc-nudge-done .hpc-nudge-ico {
    inline-size: 13px;
    block-size: 13px;
    color: #2e7d32;
}
/* Селектор нарочно из четырёх классов: coupons.css держит `.hpc-section
   .hpc-btn.center { display:block }` (три класса), а порядок подключения двух
   файлов не закреплён — слабее не перебьёт. Flex нужен, чтобы стрелка встала
   ровно рядом с подписью, а не села на базовую линию. */
.hpc-nudge.hpc-nudge-chip-mode .hpc-btn.center {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-block-size: 48px;   /* норма 44×44 для основного действия перекрыта */
    margin-top: 16px;
    margin-inline: auto;
    /* Фолбэки, а не жёсткие цвета: выбранный пресет задаёт --hpc-btn-*, и они
       побеждают. Фолбэк срабатывает только на пресете «как сейчас — белая», где
       inline_css() не печатает ничего, и кнопка выходила #fff на кремовом —
       1,09:1 при норме 3:1 по WCAG 1.4.11. В окне это единственное словесное
       действие, невидимым оно быть не может. #2e7d32 с белым — 5,13:1. */
    background: var(--hpc-btn-bg, #2e7d32);
    border-color: var(--hpc-btn-border, #2e7d32);
    color: var(--hpc-btn-fg, #ffffff);
}
/* Наведение: фолбэк тоже свой. Родной #e8902a из coupons.css с белым текстом
   даёт 2,48:1 — кнопка на наведении становилась хуже, а не лучше. */
.hpc-nudge.hpc-nudge-chip-mode .hpc-btn.center:hover,
.hpc-nudge.hpc-nudge-chip-mode .hpc-btn.center:focus {
    background: var(--hpc-btn-bg-hover, #1b5e20);
    border-color: var(--hpc-btn-border-hover, #1b5e20);
    color: var(--hpc-btn-fg-hover, #ffffff);
}
.hpc-nudge-chip-mode .hpc-btn .hpc-nudge-ico { inline-size: 19px; block-size: 19px; margin-inline-start: 7px; }
/* Подпись под кнопкой: значок на кнопке — стрелка, а стрелка адреса не
   обещает, поэтому адрес стоит словами. */
.hpc-nudge-chip-mode .hpc-nudge-payoff {
    margin: 9px 0 0;
    font-size: 13px;
    line-height: 1.35;
    color: #5a5a5a;
}
/* Крестик тише: глиф тоньше и мельче, зона нажатия те же 44×44 — промах рядом
   закрывает окно, а не уводит на iHerb. #8a8a8a — ПОЛ: 3,16:1 при норме 3:1
   для графики. Ниже крестик уже не тихий, а спрятанный, а спрятанный крестик
   наказывают жёстче заметного — закрывают вкладку целиком. */
.hpc-nudge-chip-mode .hpc-nudge-x {
    color: #8a8a8a;
    font-size: 0;
    line-height: 0;
}
/* Значок ставится от коробки самой кнопки — тем же способом, что и подсветка
   под курсором. В потоке сетки его двигал сосед: текстовый «×» внутри кнопки
   (здесь он невидим, font-size: 0) — это тоже элемент сетки, и значок уезжал
   в верхнюю половину. Кружок при этом оставался по центру, и крестик выглядел
   косо. */
.hpc-nudge-chip-mode .hpc-nudge-x::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    inline-size: 16px;
    block-size: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center/contain no-repeat;
}
.hpc-nudge-chip-mode .hpc-nudge-x:hover,
.hpc-nudge-chip-mode .hpc-nudge-x:focus,
.hpc-nudge-chip-mode .hpc-nudge-x:active {
    background: none;
    box-shadow: none;
    color: #222;
}

/* Общее для значков окна. */
.hpc-nudge .hpc-nudge-ico {
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}
@media (prefers-reduced-motion: reduce) {
    .hpc-nudge-chip { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ОКНО ОЖИДАНИЯ: код скопировали, а акция ещё не началась.

   Тот же талон, что в обычном окне, но приглушённый и НЕнажимаемый: вести
   отсюда некуда, и всё, что обещает действие — курсор-палец, подъём на
   наведении, значок копии, — здесь было бы обманом. Кнопки нет вовсе: код в
   корзине не сработает, и отправлять туда человека нашими руками нельзя.
   ═══════════════════════════════════════════════════════════════════════ */
.hpc-nudge-soon .hpc-nudge-chip-off {
    color: #6b6b6b;                 /* на кремовом — 5,74:1 */
    border-color: #d5d5d5;
    cursor: default;
}
/* Талон здесь не ссылка, но правила наведения общей части нашли бы его по
   классу hpc-nudge-chip — гасим их явно, иначе он подпрыгивал бы впустую. */
.hpc-nudge-soon .hpc-nudge-chip-off:hover,
.hpc-nudge-soon .hpc-nudge-chip-off:active {
    background: #fffdf5;
    color: #6b6b6b;
    border-style: dashed;
    border-color: #d5d5d5;
    box-shadow: none;
    transform: none;
}
/* Главная фраза окна — «код ещё не работает». Она же метка диалога
   (aria-labelledby), поэтому стоит сразу под талоном и набрана крупнее
   пояснения. #1d2327 на белом — 15,8:1. */
.hpc-nudge-soon-title {
    margin: 12px 0 0;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.35;
    color: #1d2327;
}
/* Время до начала. Значение тикает раз в секунду вместе с карточкой, поэтому
   цифры табличные: иначе строка дёргалась бы на каждом пересчёте. */
.hpc-nudge-wait {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.3;
    color: #5a5a5a;
}
.hpc-nudge-wait-label { margin-inline-end: 6px; }
.hpc-nudge-wait-value {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #1d2327;
}
.hpc-nudge-soon .hpc-nudge-hint { margin-top: 12px; }