/* ============================================================
   Ohlashmari Lite — main.css
   Дизайн-токены — в :root. Акцент ТОЛЬКО через --qp-accent / --qp-accent-strong,
   хардкод оранжевого запрещён.
   Канон брейкпоинтов: 1100 / 1024(max)+1025(min) / 768 / 480.
   Правки вносить в исходные правила соответствующих секций, НЕ доклеивать в конец файла.
   ============================================================ */

/* ==========================================================================
   Шрифты — самохост woff2 (Google Fonts). ТОЛЬКО Montserrat на всём сайте
   (решение владельца 2026-06-13: от Roboto и Inter отказались).
   Montserrat — вариативный: ОДИН файл на сабсет покрывает все веса (font-weight: 100 900),
   фактически используются 400/500/600/900. Сабсеты cyrillic / cyrillic-ext / latin / latin-ext.
   unicode-range → браузер качает только нужный сабсет. fallback — Arial.
   ========================================================================== */

/* Montserrat (variable, weights 100–900) */
@font-face {
    font-family: "Montserrat";
    src: url("/wp-content/themes/ohlashmari-lite/assets/fonts/montserrat-cyrillic.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Montserrat";
    src: url("/wp-content/themes/ohlashmari-lite/assets/fonts/montserrat-cyrillic-ext.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: "Montserrat";
    src: url("/wp-content/themes/ohlashmari-lite/assets/fonts/montserrat-latin.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Montserrat";
    src: url("/wp-content/themes/ohlashmari-lite/assets/fonts/montserrat-latin-ext.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Design tokens — из Elementor kit ID 6 + аудит прода (docs/.../tokens.md).
   Тема СВЕТЛАЯ (белый фон, чёрный текст, оранжевый акцент) — инверсия quantum-lite.
   ========================================================================== */

:root {
    /* Цвета — ohlashmari (тема СВЕТЛАЯ, бьюти-бренд, акцент розовый).
       Черновик из аудита tokens.md; уточняется по ходу вёрстки (Этап 3). */
    --qp-bg: #ffffff;            /* фон сайта */
    --qp-surface: #ffffff;       /* карточки */
    --qp-surface-soft: #000000;  /* тёмные блоки (каталог/футер на проде чёрные) */
    --qp-text: #000000;          /* основной текст/заголовки */
    --qp-muted: #7a7a7a;         /* серый текст */
    --qp-line: #dddddd;          /* бордеры/разделители */
    --qp-accent: #ffa6ee;        /* бренд-розовый (логотип, 53 вхождения в проде) */
    --qp-accent-strong: #000000; /* hover кнопок = чёрный (контраст к розовому) */
    --qp-lilac: #e7d9f4;         /* сиреневая плашка hero (приближённо, уточнить по проду) */
    /* Типографика — решения владельца 2026-06-22:
       заголовки 25px / 600, текст 20px / 400, ТОЛЬКО Montserrat. */
    --qp-h-section: 25px;        /* заголовки секций */
    --qp-title-s: 20px;          /* подписи/названия элементов */
    --qp-text-l: 20px;           /* основной текст */
    --qp-text-m: 18px;
    --qp-text-s: 16px;
    --qp-section-gap: 80px;
    --qp-radius: 10px;           /* радиус (кнопки/карточки) — уточняется */
    --qp-radius-block: 10px;
    --qp-border: 1px solid var(--qp-line);
    --qp-shadow: 4px 5px 10px rgba(0, 0, 0, .37);
    --qp-shell: 1280px;          /* ширина контента — как quantum/ural (решение владельца) */
    --qp-font-fallback: Arial, sans-serif;
    --qp-font-primary: "Montserrat", var(--qp-font-fallback);
    --qp-font-body: var(--qp-font-primary);    /* ТОЛЬКО Montserrat на всём сайте */
    --qp-font-heading: var(--qp-font-primary);
    --qp-font-display: var(--qp-font-primary);
    --qp-font-weight-regular: 400;   /* основной текст */
    --qp-font-weight-medium: 500;
    --qp-font-weight-heading: 600;   /* заголовки */
    --qp-font-weight-bold: 900;
    /* Мессенджеры (иконки контактов) */
    --qp-telegram: #0088cc;
    --qp-vk: #0077ff;
}

/* ==========================================================================
   Base reset / elements
   ========================================================================== */

* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    background: var(--qp-bg);
    overflow-x: clip; /* iOS: исключаем горизонтальное «сползание» страницы */
}

/* overflow-x: clip (НЕ hidden!) — режет горизонтальное переполнение,
   но НЕ создаёт scroll-container, поэтому position:sticky продолжает работать
   (этапы /kompaniya/). hidden ломал бы sticky. */
body {
    margin: 0;
    overflow-x: clip;
    background: var(--qp-bg);
    color: var(--qp-text);
    font-family: var(--qp-font-body);
    font-size: var(--qp-text-l);              /* основной текст: 20px (решение владельца) */
    font-weight: var(--qp-font-weight-regular); /* 400 */
    line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--qp-font-heading);
    color: var(--qp-text);
    font-size: var(--qp-h-section);             /* заголовки: 25px (решение владельца) */
    font-weight: var(--qp-font-weight-heading); /* 600 */
    line-height: 1.2;
    margin: 0 0 .5em;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.qp-shell {
    /* Единый боковой гаттер 20px (40px суммарно) — согласовано с paylp/trener на мобайле. */
    width: min(100% - 40px, var(--qp-shell));
    margin-inline: auto;
}

/* ==========================================================================
   Buttons
   Эталон прода: bg accent, текст #fff, Montserrat 20px/500, radius 10px,
   padding 15px 40px, hover bg #000.
   ========================================================================== */

.qp-button,
.qp-button--primary,
.qp-button--card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 40px;
    border: none;
    border-radius: var(--qp-radius);
    background: var(--qp-accent);
    color: #fff;
    font-family: var(--qp-font-primary);
    font-size: var(--qp-text-l);
    font-weight: var(--qp-font-weight-medium);
    line-height: 1;
    text-align: center;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.qp-button:hover,
.qp-button:focus-visible,
.qp-button--primary:hover,
.qp-button--primary:focus-visible,
.qp-button--card:hover,
.qp-button--card:focus-visible {
    background: var(--qp-accent-strong);
    color: #fff;
}

.qp-button--card {
    width: 100%;
}

.qp-button--ghost {
    background: #fff;
    border: var(--qp-border);
    color: var(--qp-text);
}

.qp-button--ghost:hover,
.qp-button--ghost:focus-visible {
    background: var(--qp-accent);
    color: #fff;
}

/* Чёрная кнопка (вторая разновидность прода): bg #000, текст белый, hover → accent */


/* ==========================================================================
   Header
   ========================================================================== */

/* Плавающая шапка: фиксированная (sticky ломается из-за overflow-x:hidden на body),
   чуть шире контента (1360), скруглённая плашка с тенью, с отступом от верха. */
.qp-site-header {
    position: fixed;
    top: 12px;
    left: 0;
    right: 0;
    z-index: 8000;
}

.admin-bar .qp-site-header {
    top: 44px;
}

/* Компенсация фиксированной шапки — контент начинается ниже */
.qp-site-main {
    padding-top: 0;
}

/* Контент идёт ПОД плавающую шапку: фон первой секции — до самого верха (без белого
   зазора), а внутренний отступ держит контент ниже меню, чтобы оно не наезжало. */
.qp-site-main > section:first-child,
.qp-site-main > div > section:first-child {
    padding-top: 92px;
}
/* phone-mockup страницы (cert/bc) — фон заполняет экран; отступ нужен только колонке на мобайле (см. медиа). */

/* Чёрный плавающий бар (как quantum): логотип слева + кнопка МЕНЮ справа.
   Ширину/центрирование даёт класс .qp-shell на этом же элементе. */
.qp-site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 64px;
    padding: 0 18px 0 28px;
    background: #000;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .04), 0 8px 22px rgba(0, 0, 0, .55);
    transition: background .4s ease, box-shadow .4s ease, border-color .4s ease, backdrop-filter .4s ease;
}

/* Liquid glass при скролле — JS initHeaderGlass вешает .is-scrolled на [data-qp-header]. */
.qp-site-header.is-scrolled .qp-site-header__inner {
    background: rgba(10, 10, 10, .55);
    border-color: rgba(255, 255, 255, .16);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        0 0 0 1px rgba(255, 255, 255, .06),
        0 10px 30px rgba(0, 0, 0, .55);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .qp-site-header.is-scrolled .qp-site-header__inner { background: rgba(8, 8, 8, .92); }
}

/* ── Строка 1: 5 столбцов, равномерно распределены ────────────────────── */


.qp-site-header__brand {
    flex: 0 0 auto;
}

.qp-site-header__brand { flex: 0 0 auto; display: flex; align-items: center; }
.qp-site-header__brand img,
.qp-site-header .custom-logo {
    width: auto;
    max-height: 52px;
    display: block;
}

/* Кнопка «Бытовка на заказ» — контурная оранжевая, компактная, текст по центру */


/* Телефон с иконкой-трубкой */


/* Соцсети-кружки чуть меньше (≈вровень с иконкой MAX) */


/* «Написать в MAX» — иконка + текст */


/* ── Строка 2: меню main-menu ─────────────────────────────────────────── */


/* Кнопка «МЕНЮ» — контурная пилюля на чёрном баре (как прод). Видна на всех ширинах. */
.qp-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 30px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 10px;
    background: transparent;
    color: #fff;
    font-family: var(--qp-font-primary);
    font-size: var(--qp-text-s);
    font-weight: var(--qp-font-weight-medium);
    text-transform: uppercase;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.qp-menu-toggle:hover,
.qp-menu-toggle:focus-visible {
    background: #fff;
    color: #000;
}
/* Прод: кнопка «МЕНЮ» — только текст, без бургер-иконки. */
.qp-menu-toggle__icon { display: none; }

/* ==========================================================================
   Off-canvas menu
   Механизм main.js: снимается атрибут [hidden] → класс .is-open (открыт),
   .is-closing (анимация закрытия), [hidden] возвращается по завершении.
   На <html> вешается .qp-offcanvas-open (блок прокрутки).
   ========================================================================== */

.qp-offcanvas-open {
    overflow: hidden;
}

.qp-offcanvas[hidden] {
    display: none;
}

.qp-offcanvas {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: #000;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition:
        opacity .24s ease,
        visibility 0s linear .24s;
}

.qp-offcanvas.is-open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition:
        opacity .24s ease,
        visibility 0s linear 0s;
}

.qp-offcanvas.is-closing {
    visibility: visible;
}

.qp-offcanvas__panel {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: #000;
    opacity: 0;
    transform: translateY(-14px);
    transition:
        opacity .24s ease,
        transform .28s cubic-bezier(.22, 1, .36, 1);
}

.qp-offcanvas.is-open .qp-offcanvas__panel {
    opacity: 1;
    transform: translateY(0);
}

.qp-offcanvas__close {
    position: fixed;
    top: 22px;
    right: 22px;
    z-index: 1;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.qp-offcanvas__close-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 3px;
    border-radius: 999px;
    background: #fff;
    transform-origin: center;
}

.qp-offcanvas__close-line--first {
    transform: translate(-50%, -50%) rotate(45deg);
}

.qp-offcanvas__close-line--second {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.qp-offcanvas__content {
    display: grid;
    justify-items: start;
    align-content: center;
    width: min(100%, 560px);
    min-height: 100%;
    padding: 100px 48px 64px;
    opacity: 0;
    transform: translateX(-14px);
    transition:
        opacity .28s ease .04s,
        transform .32s cubic-bezier(.22, 1, .36, 1) .04s;
}

.qp-offcanvas.is-open .qp-offcanvas__content {
    opacity: 1;
    transform: translateX(0);
}

.qp-offcanvas-menu__list {
    display: grid;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qp-offcanvas-menu__list a {
    position: relative;
    display: inline-flex;
    width: fit-content;
    color: #fff;
    font-family: var(--qp-font-primary);
    font-size: clamp(19px, 2vw, 24px);
    font-weight: var(--qp-font-weight-medium);
    line-height: 1.1;
    transition: color .18s ease, transform .22s ease;
}

.qp-offcanvas-menu__list a:hover,
.qp-offcanvas-menu__list a:focus-visible {
    color: var(--qp-accent);
    transform: translateX(8px);
}

/* Активный пункт (текущая страница) — белая плашка с тёмным текстом (как на проде). */
.qp-offcanvas-menu__list .current-menu-item > a,
.qp-offcanvas-menu__list .current-menu-ancestor > a {
    background: #fff;
    color: var(--qp-text);
    padding: 8px 16px;
    border-radius: 10px;
}

.qp-offcanvas-menu__list .current-menu-item > a:hover,
.qp-offcanvas-menu__list .current-menu-item > a:focus-visible {
    color: var(--qp-text);
    transform: none;
}

/* ── Off-canvas: блоки под меню (кнопки, соцсети-строки, контакты) ──────── */
/* Содержимое off-canvas — на всю ширину панели (контент = столбец слева). */
.qp-offcanvas__content > .qp-offcanvas-menu,
.qp-offcanvas__actions,
.qp-offcanvas-socials{
    width: 100%;
}

/* Кнопки «Рассчитать цену» (оранжевая) + «Заказать звонок» (белая контурная) */
/* Кнопки «Личный кабинет» / «Главная» — светло-розовые пилюли по контенту (как на проде). */
.qp-offcanvas__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-top: 36px;
}

.qp-offcanvas__actions .qp-button {
    width: auto;
    text-transform: none;
    background: #efccdd;
    border: none;
    color: var(--qp-text);
    border-radius: 999px;
    padding: 12px 28px;
}

.qp-offcanvas__actions .qp-button:hover,
.qp-offcanvas__actions .qp-button:focus-visible {
    background: var(--qp-accent);
    color: var(--qp-text);
}


/* Соцсети — строки-кнопки в рамке на всю ширину: иконка в кружке слева + текст */
.qp-offcanvas__socials-title {
    margin: 28px 0 12px;
    font-size: var(--qp-text-l);
    font-weight: var(--qp-font-weight-heading);
}

/* Соцсети — компактные цветные плитки бренда (как на проде): TG голубой, VK синий. */
.qp-offcanvas-socials {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.qp-offcanvas-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border: none;
    border-radius: 18px;
    color: #fff;
    transition: transform .18s ease, filter .18s ease;
}

.qp-offcanvas-social:hover,
.qp-offcanvas-social:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.08);
    color: #fff;
}

.qp-offcanvas-social svg {
    width: 34px;
    height: 34px;
}

.qp-offcanvas-social--telegram { background: #2aabee; }
.qp-offcanvas-social--vk { background: #4a76a8; }

/* Off-canvas на ПК — весь контент по центру экрана (как на quantum). */
@media (min-width: 1025px) {
    .qp-offcanvas__content {
        width: 100%;
        justify-items: center;
        text-align: center;
        padding: 90px 32px 48px;
    }
    .qp-offcanvas-menu__list { justify-items: center; }
    .qp-offcanvas__actions { align-items: center; }
    .qp-offcanvas-socials { justify-content: center; }
    .qp-offcanvas__socials-title { text-align: center; }
}

/* Контакты — телефон + email с иконками */


@media (prefers-reduced-motion: reduce) {
    .qp-offcanvas,
    .qp-offcanvas__panel,
    .qp-offcanvas__content,
    .qp-offcanvas-menu__list a {
        transition: none;
    }
}

/* ==========================================================================
   Popup layer + form
   Механизм main.js: layer.hidden=false + popup.hidden=false (показ),
   обратно hidden=true (скрытие). На <html> — класс .qp-popup-open.
   ========================================================================== */

.qp-popup-open {
    overflow: hidden;
}

.qp-popup-layer[hidden],
.qp-popup[hidden],
.qp-popup-form__field[hidden] {
    display: none;
}

.qp-popup-layer {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(0, 0, 0, .78);
}

.qp-popup {
    width: min(100%, 700px);
}

.qp-popup__panel {
    position: relative;
    max-height: calc(100vh - 32px);
    overflow: auto;
    padding: 26px;
    border-radius: var(--qp-radius);
    background: #fff;
    color: var(--qp-text);
    box-shadow: var(--qp-shadow);
}

.qp-popup__panel h2 {
    margin: 0 40px 20px 0;
    color: var(--qp-text);
    font-family: var(--qp-font-primary);
    font-size: clamp(22px, 2.1vw, 28px);
    font-weight: var(--qp-font-weight-bold);
    line-height: 1.05;
}

.qp-popup__close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--qp-line);
    color: var(--qp-text);
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
}

.qp-popup-form {
    display: grid;
    gap: 11px;
}

.qp-popup-form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.qp-popup-form__field {
    display: grid;
    gap: 5px;
    color: var(--qp-text);
    font-size: 14px;
}

.qp-popup-form__field input,
.qp-popup-form__field textarea,
.qp-popup-form__field select {
    width: 100%;
    min-height: 44px;
    border: var(--qp-border);
    border-radius: var(--qp-radius);
    background: #fff;
    color: var(--qp-text);
    font: inherit;
    padding: 0 12px;
    outline: none;
}

.qp-popup-form__field textarea {
    min-height: 70px;
    resize: vertical;
    padding-top: 10px;
}

.qp-popup-form__field input:focus,
.qp-popup-form__field textarea:focus,
.qp-popup-form__field select:focus {
    border-color: var(--qp-accent);
}

.qp-popup-form__accept {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 12px;
    color: var(--qp-muted);
    font-size: 12px;
    line-height: 1.3;
}

.qp-popup-form__accept input {
    margin-top: 2px;
    accent-color: var(--qp-accent);
}

.qp-popup-form__accept a {
    color: var(--qp-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.qp-popup-form__accept a:hover,
.qp-popup-form__accept a:focus-visible {
    color: var(--qp-accent);
}

.qp-popup-form__error {
    min-height: 16px;
    margin: 0;
    color: #d32f2f;
    font-size: 12px;
}

.qp-popup-form__submit {
    min-height: 48px;
    border: 0;
    border-radius: var(--qp-radius);
    background: var(--qp-accent);
    color: #fff;
    cursor: pointer;
    font-family: var(--qp-font-primary);
    font-size: 17px;
    font-weight: var(--qp-font-weight-medium);
    transition: background-color .2s ease;
}

.qp-popup-form__submit:hover,
.qp-popup-form__submit:focus-visible {
    background: var(--qp-accent-strong);
}

.qp-popup-form__submit:disabled {
    cursor: wait;
    opacity: .72;
}

/* ==========================================================================
   Cookie consent
   Механизм main.js: banner.hidden=false + класс .is-visible (показ);
   снятие класса + hidden=true (скрытие).
   ========================================================================== */

.qp-cookie-consent[hidden],
.qp-cookie-consent__body[hidden] {
    display: none;   /* body[hidden] нужен явно: display:grid ниже перебивает нативный [hidden] */
}

.qp-cookie-consent {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9000;
    width: min(1000px, calc(100vw - 48px));
    color: #fff;
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity .2s ease,
        transform .22s cubic-bezier(.22, 1, .36, 1);
}

.qp-cookie-consent.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.qp-cookie-consent__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 18px 18px 18px 20px;
    border-radius: var(--qp-radius);
    background: var(--qp-surface-soft);
    box-shadow: var(--qp-shadow);
}

.qp-cookie-consent__body p {
    margin: 0;
    color: rgba(255, 255, 255, .9);
    font-size: 15px;
    line-height: 1.36;
}

.qp-cookie-consent__body a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.qp-cookie-consent__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 22px;
    border: 0;
    border-radius: var(--qp-radius);
    background: var(--qp-accent);
    color: #fff;
    cursor: pointer;
    font-family: var(--qp-font-primary);
    font-size: 16px;
    font-weight: var(--qp-font-weight-medium);
    line-height: 1;
    transition: background-color .2s ease;
}

.qp-cookie-consent__button:hover,
.qp-cookie-consent__button:focus-visible {
    background: var(--qp-accent-strong);
}

/* Кнопки в столбик: «Принять» (акцент) + «Отклонить» (текстовая, как на quantum). */
.qp-cookie-consent__buttons {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.qp-cookie-consent__decline {
    margin: 0;
    padding: 4px;
    border: 0;
    background: transparent;
    color: #fff;
    font-family: var(--qp-font-primary);
    font-size: 15px;
    font-weight: var(--qp-font-weight-medium);
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: color .18s ease;
}

.qp-cookie-consent__decline:hover,
.qp-cookie-consent__decline:focus-visible {
    color: rgba(255, 255, 255, .7);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Состояние «отказано»: одна колонка, кнопка «Понятно» справа. */
.qp-cookie-consent__body--rejected {
    grid-template-columns: minmax(0, 1fr) auto;
}

/* ==========================================================================
   Sections
   ========================================================================== */

.qp-section {
    padding: 44px 0;
}


/* ==========================================================================
   Product card
   ========================================================================== */

.qp-product-grid,
.products.qp-product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qp-product-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--qp-surface);
    border: var(--qp-border);
    border-radius: var(--qp-radius);
}

.qp-product-card__media {
    display: block;
    padding: 14px;
    background: #fff;
}

.qp-product-card__image,
.qp-product-card__media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--qp-radius);
}

.qp-product-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 18px;
}

.qp-product-card__title {
    min-height: 48px;
    color: var(--qp-text);
    font-family: var(--qp-font-primary);
    font-size: var(--qp-title-s);
    font-weight: 600;
    line-height: 1.2;
}

/* Специ как на проде: лейбл жирный чёрный, значение под ним серым (вертикально) */


/* Цена — под характеристиками, крупная жирная чёрная */
.qp-product-card__price {
    margin: 4px 0 24px;
    color: var(--qp-text);
    font-family: var(--qp-font-primary);
    font-size: 30px;
    font-weight: 600;
    line-height: 1.1;
}

.qp-product-card__actions {
    display: grid;
    gap: 12px;
    margin-top: auto;
}

/* ==========================================================================
   Каталог (archive-product: /shop/ + категории товаров)
   ========================================================================== */
.qp-catalog {
    padding: 36px 0 96px;
}

.qp-catalog__head {
    margin-bottom: 32px;
}

.qp-catalog__title {
    margin: 0;
    color: var(--qp-text);
    font-family: var(--qp-font-primary);
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 600;
    line-height: 1.1;
}

.qp-catalog__desc {
    margin-top: 14px;
    max-width: 720px;
    color: var(--qp-muted);
    font-size: var(--qp-text-m);
    line-height: 1.6;
}

/* ── Прайс-лист услуг (категория «Наращивание ресниц», term 72) ──────────────
   Восстановление прод-шаблона Elementor 12539 «Оплата ресниц»: страницу шлют
   клиентам после процедуры для онлайн-оплаты. Столбик: название процедуры →
   цена → кнопка «Оплатить», между позициями чёрный разделитель. Без фото. */
.qp-service-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 640px;
}

.qp-service-list__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 26px 0;
    border-bottom: 1px solid #000;
}

.qp-service-list__item:last-child {
    border-bottom: none;
}

.qp-service-list__name {
    margin: 0;
    color: var(--qp-text);
    font-family: var(--qp-font-primary);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.35;
    text-transform: none;
}

.qp-service-list__price {
    color: var(--qp-text);
    font-size: 19px;
    font-weight: 400;
    line-height: 1.2;
}

.qp-service-list__pay {
    min-width: 168px;
    text-align: center;
}

@media (max-width: 600px) {
    .qp-service-list__item {
        padding: 22px 0;
    }

    .qp-service-list__pay {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .qp-catalog {
        padding: 24px 0 64px;
    }
}

/* ==========================================================================
   Single product (страница товара)
   Светлая тема (инверсия dark-quantum): белый фон, чёрный текст, цена оранжевая.
   Слева — галерея (главное фото 4/3 + ряд миниатюр + лупа-зум + лайтбокс через
   data-qp-product-gallery, главное меняется по data-qp-gallery-thumb из main.js).
   Справа — инфо: h1 с разделителем, спеки dl «лейбл … значение», описание,
   крупная оранжевая цена, дисклеймер, 2 кнопки на всю ширину (попапы, БЕЗ корзины).
   ========================================================================== */

.qp-product-main {
    padding: 44px 0 54px;
}

.qp-product-main__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

/* ── Галерея ───────────────────────────────────────────────────────────── */
.qp-product-gallery {
    align-self: start;
    min-width: 0;
}

.qp-product-gallery__main {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    padding: 0;
    border: var(--qp-border);
    border-radius: var(--qp-radius);
    background: #fff;
    cursor: zoom-in;
}

.qp-product-gallery__main-img,
.qp-product-gallery__main img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.qp-product-gallery__main--empty {
    cursor: default;
}

/* Лупа-зум поверх главного фото в углу — кружок */
.qp-product-gallery__zoom {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    pointer-events: none;
    transition: background-color .2s ease;
}

.qp-product-gallery__main:hover .qp-product-gallery__zoom,
.qp-product-gallery__main:focus-visible .qp-product-gallery__zoom {
    background: var(--qp-accent);
}

/* Ряд миниатюр под главным фото — квадратные плитки */
.qp-product-gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.qp-product-gallery__thumb {
    display: block;
    overflow: hidden;
    padding: 0;
    border: var(--qp-border);
    border-radius: var(--qp-radius);
    background: #fff;
    cursor: pointer;
    transition: border-color .2s ease;
}

.qp-product-gallery__thumb:hover,
.qp-product-gallery__thumb:focus-visible {
    border-color: var(--qp-accent);
}

.qp-product-gallery__thumb.is-active {
    border-color: var(--qp-accent);
}

.qp-product-gallery__thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* ── Лайтбокс (полноэкранный просмотр фото; JS создаёт .qp-lightbox в body) ── */
.qp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 28px;
    background: rgba(0, 0, 0, .88);
}

html.qp-lightbox-open {
    overflow: hidden;
}

.qp-lightbox[hidden] {
    display: none;
}

.qp-lightbox__stage {
    position: relative;
    display: grid;
    place-items: center;
    width: min(1120px, 100%);
    max-height: calc(100vh - 96px);
}

.qp-lightbox__image {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 112px);
    object-fit: contain;
    background: #111;
}

.qp-lightbox__caption {
    width: min(1120px, 100%);
    min-height: 22px;
    margin-top: 14px;
    color: rgba(255, 255, 255, .82);
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
}

.qp-lightbox__close,
.qp-lightbox__nav {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(18, 18, 18, .72);
    color: #fff;
    cursor: pointer;
}

.qp-lightbox__close {
    top: 22px;
    right: 22px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 30px;
    line-height: 1;
}

.qp-lightbox__nav {
    top: 50%;
    width: 52px;
    height: 72px;
    margin-top: -36px;
    border-radius: var(--qp-radius);
    font-size: 42px;
    line-height: 1;
}

.qp-lightbox__nav--prev {
    left: 22px;
}

.qp-lightbox__nav--next {
    right: 22px;
}

.qp-lightbox__close:hover,
.qp-lightbox__close:focus-visible,
.qp-lightbox__nav:hover,
.qp-lightbox__nav:focus-visible {
    background: var(--qp-accent);
}

/* ── Инфо-колонка ──────────────────────────────────────────────────────── */
.qp-product-summary {
    align-self: start;
    min-width: 0;
}

.qp-product-summary__title {
    margin: 0 0 20px;
    padding-bottom: 20px;
    border-bottom: var(--qp-border);
    color: var(--qp-text);
    font-family: var(--qp-font-heading);
    font-size: clamp(28px, 2.4vw, 32px);
    font-weight: var(--qp-font-weight-medium);
    line-height: 1.15;
}

/* Спеки: строки «лейбл … значение» — лейбл #000 medium, значение серое курсивом */


/* Описание товара (post_content / short_description) */
.qp-product-summary__desc {
    margin: 0 0 24px;
    color: var(--qp-text);
    font-size: var(--qp-text-m);
    line-height: 1.6;
}

.qp-product-summary__desc > *:first-child {
    margin-top: 0;
}

.qp-product-summary__desc > *:last-child {
    margin-bottom: 0;
}

.qp-product-summary__desc p,
.qp-product-summary__desc ul,
.qp-product-summary__desc ol {
    margin: 0 0 14px;
}

/* Цена — крупная ОРАНЖЕВАЯ (отличие от чёрной цены в карточке каталога) */
.qp-product-summary__price {
    margin: 0 0 10px;
    color: var(--qp-accent);
    font-family: var(--qp-font-primary);
    font-size: clamp(30px, 2.6vw, 34px);
    font-weight: 700;
    line-height: 1.1;
}

.qp-product-summary__price .price,
.qp-product-summary__price p {
    margin: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

/* Старая цена при наличии (зачёркнутая) — серая, мельче */
.qp-product-summary__price del {
    margin-right: 10px;
    color: var(--qp-muted);
    font-size: .6em;
    font-weight: var(--qp-font-weight-regular);
}

.qp-product-summary__price ins {
    text-decoration: none;
}

/* Дисклеймер «Точную цену уточняйте...» — серый, мелкий */


/* Кнопки — на всю ширину, в столбик («Заказать» оранжевая / «Консультация» чёрная) */
.qp-product-summary__actions {
    display: grid;
    gap: 12px;
}

.qp-product-summary__actions .qp-button {
    width: 100%;
}

/* ==========================================================================
   Home page sections
   Десять секций front-page.php (PROD_AUDIT home-sections.md): hero с видео,
   каталог-карусель, карусель категорий, проекты, тёмная company-секция,
   доставка-фича, marquee (стили выше), безопасная доставка, FAQ, CTA.
   Светлая тема; акцент ТОЛЬКО через --qp-accent. Контейнер .qp-shell 1280.
   Сквозной вертикальный ритм секций — var(--qp-section-gap).
   ========================================================================== */

/* ── 1. Hero ───────────────────────────────────────────────────────────── */
.qp-hero {
    padding: 40px 0 var(--qp-section-gap);
}


/* Hero выровнен по левому краю (как на проде) */


.qp-hero__title {
    margin: 0 0 18px;
    font-family: var(--qp-font-heading);
    font-size: 30px;
    font-weight: var(--qp-font-weight-medium);
    line-height: 1.15;
    text-transform: uppercase;
}


.qp-hero__media {
    position: relative;
}

/* Две фичи в ОДНОЙ общей рамке с вертикальным разделителем по центру */


/* Разделитель между двумя фичами — той же толщины/цвета, что и рамка */


/* Две кнопки в ряд на всю ширину контейнера */


.qp-hero__cta {
    width: 100%;
    justify-content: center;
}

/* ── Home video (hero) — desktop/mobile варианты ───────────────────────── */
.qp-home-video {
    position: relative;
    overflow: hidden;
    border-radius: var(--qp-radius);
    background: #000;
}

.qp-home-video video {
    display: block;
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    background: #000;
}

/* Панель управления плеера — скрываем до старта (controls включает JS при play). */
.qp-home-video:not(.qp-home-video--playing) video::-webkit-media-controls,
.qp-home-video:not(.qp-home-video--playing) video::-webkit-media-controls-enclosure,
.qp-home-video:not(.qp-home-video--playing) video::-webkit-media-controls-panel,
.qp-home-video:not(.qp-home-video--playing) video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
    appearance: none;
}

/* Мобильный ролик 9:16 скрыт на desktop; парный desktop-ролик виден ≥1025 */


.qp-home-video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 110px;
    height: 110px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--qp-accent);
    box-shadow: 0 14px 38px rgba(0, 0, 0, .35);
    cursor: pointer;
    transform: translate(-50%, -50%);
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    transition: transform .2s ease, opacity .2s ease, background-color .2s ease;
}

.qp-home-video__play:hover,
.qp-home-video__play:focus-visible {
    background: var(--qp-accent-strong);
    transform: translate(-50%, -50%) scale(1.05);
}

.qp-home-video__play span {
    display: block;
    width: 0;
    height: 0;
    margin-left: 8px;
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent;
    border-left: 36px solid #fff;
}

.qp-home-video--playing .qp-home-video__play {
    opacity: 0;
    pointer-events: none;
}

/* ── 2. Каталог товаров ────────────────────────────────────────────────── */
/* Desktop: обычный грид по --qp-grid-columns-desktop (3 на главной).
   На планшете/мобиле этот же список превращается в горизонтальную карусель —
   см. медиа-запросы (прод: «3 кол desktop, слайдер на планшет/моб»). */
/* Каталог на главной: грид по переменным колонок (десктоп 3 → планшет 2 → мобайл 1). */


.qp-product-grid--carousel .qp-product-card {
    scroll-snap-align: start;
}

/* ==========================================================================
   Content / pages
   ========================================================================== */

.qp-content {
    max-width: 900px;
}

.qp-page {
    background: #fff;
    border: var(--qp-border);
    border-radius: var(--qp-radius);
    padding: 28px;
}

.qp-legal-page {
    padding: 32px 0 96px;
}

.qp-legal-page__article {
    max-width: 980px;
}

.qp-legal-page h1 {
    margin: 0 0 34px;
    color: var(--qp-text);
    font-family: var(--qp-font-primary);
    font-size: clamp(24px, 2.1vw, 34px);
    font-weight: var(--qp-font-weight-bold);
    line-height: 1.08;
}

.qp-legal-page__content {
    display: flow-root;
    color: var(--qp-muted);
    font-size: 18px;
    line-height: 1.62;
}

.qp-legal-page__content > *:first-child {
    margin-top: 0;
}

.qp-legal-page__content > *:last-child {
    margin-bottom: 0;
}

.qp-legal-page__content p,
.qp-legal-page__content ul,
.qp-legal-page__content ol {
    margin: 0 0 18px;
}

.qp-legal-page__content strong,
.qp-legal-page__content b {
    color: var(--qp-text);
    font-weight: var(--qp-font-weight-bold);
}

.qp-legal-page__content a {
    color: var(--qp-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Сканы юр-документов: вертикальный список листов на всю ширину статьи. */
.qp-legal-page__scans {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.qp-legal-page__scan-wrap {
    margin: 0;
}

.qp-legal-page__scan {
    display: block;
    width: 100%;
    height: auto;
    border: var(--qp-border);
    border-radius: var(--qp-radius);
    background: #fff;
}

@media (max-width: 600px) {
    .qp-legal-page__scans {
        gap: 18px;
    }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.qp-site-footer {
    padding: 48px 0;
    background: #fff;
    border-top: 1px solid var(--qp-line);
    color: var(--qp-text);
}

/* ── Строка 1: лого · график работы · кнопка ──────────────────────────── */
.qp-site-footer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}


/* ── Строка 2: телефон · email · соцсети · MAX ────────────────────────── */


.qp-footer-socials {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Брендовые плитки — как в off-canvas меню (.qp-offcanvas-social), компактнее под футер. */
.qp-footer-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    color: #fff;
    transition: transform .18s ease, filter .18s ease;
}

.qp-footer-social:hover,
.qp-footer-social:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.08);
    color: #fff;
}

.qp-footer-social svg {
    width: 26px;
    height: 26px;
}

.qp-footer-social--telegram {
    background: #2aabee;
}

.qp-footer-social--vk {
    background: #4a76a8;
}


/* ── Строка 3: меню (рамка) · юр-инфо (рамка) ─────────────────────────── */
.qp-site-footer__bottom {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 32px;
}

.qp-footer-nav{
    padding: 28px 32px;
    border: var(--qp-border);
    border-radius: var(--qp-radius);
}

.qp-footer-nav__list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qp-footer-nav__list a {
    color: var(--qp-text);
    font-size: var(--qp-text-m);
    transition: color .18s ease;
}

.qp-footer-nav__list a:hover,
.qp-footer-nav__list a:focus-visible {
    color: var(--qp-accent);
}

.qp-site-footer__requisites {
    display: grid;
    gap: 4px;
    font-style: normal;
    color: var(--qp-text);
    font-size: var(--qp-text-m);
}

.qp-site-footer__disclaimer {
    margin: 22px 0 0;
    color: var(--qp-text);
    font-size: var(--qp-text-m);
    line-height: 1.5;
}

/* ==========================================================================
   Responsive — канон брейкпоинтов: 1100 / 1024(max)+1025(min) / 768 / 480
   ========================================================================== */

@media (max-width: 1100px) {
    .qp-product-grid:not(.qp-product-grid--carousel),
    .products.qp-product-grid:not(.qp-product-grid--carousel) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* карусель категорий чуть уже */
    

    
}

@media (max-width: 1024px) {
    /* Компания: адрес+карта в 1 колонку */
    

    

    /* Single проекта: галерея+инфо в 1 колонку */
    

    /* Мобайл/планшет: строка 1 = лого + кнопка-бургер; остальное скрыто */
    

    

    /* Мобайл/планшет: оставляем плавающий glass-бар (как quantum), компактнее. */
    .qp-site-header {
        top: 8px;
    }

    .admin-bar .qp-site-header {
        top: 8px;
    }

    .qp-site-header__inner {
        min-height: 56px;
        padding: 0 12px 0 18px;
    }

    .qp-site-header__brand img,
    .qp-site-header .custom-logo {
        max-height: 40px;
    }

    .qp-menu-toggle {
        padding: 9px 20px;
    }

    /* Мобайл: контент под шапкой — отступ первой секции меньше (меню ниже). */
    .qp-site-main {
        padding-top: 0;
    }
    .qp-site-main > section:first-child,
    .qp-site-main > div > section:first-child {
        padding-top: 94px;
    }
    .qp-cert-scroll,
    .qp-bc-scroll {
        padding-top: 56px;
    }

    .qp-menu-toggle {
        display: inline-flex;
    }

    .qp-product-grid:not(.qp-product-grid--carousel),
    .products.qp-product-grid:not(.qp-product-grid--carousel) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Страница товара: галерея + инфо в одну колонку */
    .qp-product-main__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* Футер: строки 1-2 в колонку слева, строка 3 — одна колонка */
    .qp-site-footer__top{
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .qp-site-footer__bottom {
        grid-template-columns: 1fr;
    }

    /* Hero video: ≤1024 показываем вертикальный mobile-ролик, desktop прячем */
    

    

    

    /* Каталог: грид → горизонтальная карусель (прод: слайдер на планшет/моб).
       Селектор включает --dynamic, чтобы перебить grid-template-columns грида. */
    

    /* Тёмная company-секция и доставка-фича — в одну колонку */
    

    

    

    /* В одну колонку: разделитель горизонтальный, а не вертикальный */
    
}

@media (max-width: 768px) {
    /* Компания: этапы — иконка под текстом, меньше высота; фичи-3 → 1 колонка */
    
    
    
    
    
    

    .qp-section{
        padding: 28px 0;
    }

    /* Фильтр проектов: на узких экранах переносим (не сжимаем в кашу) */
    

    

    

    /* Футер на мобайле: меню и реквизиты — по ЛЕВОМУ краю (правка владельца
       2026-07-03; центрирование было ural-наследием). Соцсети/кредит — по центру. */
    .qp-site-footer__top{
        align-items: flex-start;
        text-align: left;
    }

    .qp-site-footer__bottom {
        text-align: center;
    }

    .qp-footer-socials {
        justify-content: center;
    }

    .qp-footer-nav__list {
        align-items: flex-start;
    }

    .qp-site-footer__requisites {
        justify-items: start;
    }

    .qp-button,
    .qp-button--primary,
    .qp-button--card {
        padding: 13px 28px;
        font-size: var(--qp-text-m);
    }

    .qp-popup__panel {
        padding: 20px;
    }

    /* Hero: фичи в столбик, кнопки на всю ширину */
    .qp-hero {
        padding: 24px 0 28px;
    }

    

    /* Кнопки hero — в столбик, каждая на всю ширину (контейнер — grid) */
    

    /* Кнопки category-hero — в столбик (контейнер — flex) */
    

    

    /* Фичи каталога: 2×2 → 1 колонка, разделители только горизонтальные */
    

    

    

    /* Страница товара: компактнее вертикальные отступы блока */
    .qp-product-main {
        padding: 28px 0 32px;
    }

    /* Карусели — карточка почти на всю ширину вьюпорта.
       Фиксированная ширина колонки (без min:0), иначе grid-auto-flow:column
       ужимает все плитки в ширину контейнера вместо горизонтального скролла. */
    

    

    /* Hero категории: ниже и компактнее на мобильных */
    

    /* Hero каталога/категорий/типов объекта: меньше боковых паддингов
       (с 80px), иначе блок съедает ширину на мобайле/планшете. */
    

    /* CTA-квиз: компактнее паддинги тёмного блока на мобильных */
    
}

@media (max-width: 480px) {
    /* Боковые отступы контента на мобайле — 20px с каждой стороны
       (единый гаттер со всеми страницами: paylp/trener/phone-mockup тоже 20px). */
    .qp-shell {
        width: min(100% - 40px, var(--qp-shell));
    }

    /* Hero каталога/категорий: ещё компактнее боковые паддинги на телефоне */
    

    /* Проекты: на мобайле — 1 колонка (на планшете остаётся 2) */
    

    .qp-product-grid:not(.qp-product-grid--carousel),
    .products.qp-product-grid:not(.qp-product-grid--carousel) {
        grid-template-columns: 1fr;
    }

    /* Страница товара: миниатюры по 4 в ряд — не мельчат на узких экранах */
    .qp-product-gallery__thumbs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .qp-lightbox {
        padding: 16px;
    }

    .qp-lightbox__stage,
    .qp-lightbox__image {
        max-height: calc(100vh - 92px);
    }

    .qp-lightbox__close {
        top: 12px;
        right: 12px;
    }

    .qp-lightbox__nav {
        width: 42px;
        height: 58px;
        margin-top: -29px;
        font-size: 34px;
    }

    .qp-lightbox__nav--prev {
        left: 12px;
    }

    .qp-lightbox__nav--next {
        right: 12px;
    }

    .qp-offcanvas__content {
        width: 100%;
        padding: 80px 26px 44px;
    }

    .qp-offcanvas-menu__list a {
        font-size: 24px;
    }

    .qp-cookie-consent {
        right: 12px;
        left: 12px;
        bottom: 12px;
        width: auto;
    }

    .qp-cookie-consent__body {
        grid-template-columns: 1fr;
    }

    /* Кнопки секций главной — на всю ширину для удобства тапа */
    

    .qp-home-video__play {
        width: 84px;
        height: 84px;
    }

    .qp-home-video__play span {
        border-top-width: 17px;
        border-bottom-width: 17px;
        border-left-width: 27px;
    }

    /* Карусель категорий: плитка ~85% вьюпорта (видна 1 + кусок следующей),
       название целиком (без обрезки), стрелки/свайп работают как на планшете */
    

    
}

/* ==========================================================================
   Страница «Спасибо» (универсальная: попапы + оформление заказа)
   Светлая тема: фон белый, текст чёрный.
   ========================================================================== */

.qp-thanks-page {
    padding: 80px 0;
}

.qp-thanks-card {
    max-width: 640px;
    margin-inline: auto;
    padding: 48px 40px;
    border: var(--qp-border);
    border-radius: var(--qp-radius);
    background: #fff;
    text-align: center;
}

.qp-thanks-card h1 {
    margin: 0 0 16px;
    color: var(--qp-text);
    font-size: var(--qp-h-section);
    font-weight: var(--qp-font-weight-medium);
    line-height: 1.2;
}

.qp-thanks-card p {
    margin: 0 0 12px;
    color: var(--qp-muted);
    font-size: var(--qp-text-m);
    line-height: 1.5;
}


.qp-thanks-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    padding: 15px 40px;
    border-radius: var(--qp-radius);
    background: var(--qp-accent);
    color: #fff;
    font-size: var(--qp-text-l);
    font-weight: var(--qp-font-weight-medium);
    line-height: 1;
    transition: background-color .2s ease;
}

.qp-thanks-button:hover,
.qp-thanks-button:focus-visible {
    background: var(--qp-accent-strong);
    color: #fff;
}

/* Фото на странице-благодарности (thank_you_page) */
.qp-thanks-card__figure {
    margin: 0 0 22px;
}

.qp-thanks-card__image {
    display: block;
    width: 100%;
    max-width: 360px;
    height: auto;
    margin-inline: auto;
    border-radius: var(--qp-radius);
}

/* Юр-ссылки под текстом (thank_you_page) */
.qp-thanks-card__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px;
    margin-top: 22px;
}

.qp-thanks-card__links a {
    color: var(--qp-muted);
    font-size: var(--qp-text-s);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .18s ease;
}

.qp-thanks-card__links a:hover,
.qp-thanks-card__links a:focus-visible {
    color: var(--qp-accent);
}

/* ==========================================================================
   WooCommerce-чекаут (светлая тема)
   ========================================================================== */


.qp-checkout-form {
    color: var(--qp-text);
}

.qp-checkout-form h3 {
    margin: 0 0 16px;
    color: var(--qp-text);
    font-size: var(--qp-title-s);
    font-weight: var(--qp-font-weight-medium);
    line-height: 1.2;
}

.qp-checkout-top-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 32px;
    align-items: start;
}

.qp-checkout-fields-card,
.qp-checkout-order,
.qp-checkout-notes {
    padding: 28px 26px;
    border: var(--qp-border);
    border-radius: var(--qp-radius);
    background: #fff;
}

/* Блок «Ваш заказ» (таблица + оплата) — во всю ширину под верхней сеткой полей. */
.qp-checkout-order {
    margin-top: 24px;
}

.qp-checkout-form .form-row {
    margin: 0 0 14px;
    padding: 0;
}

.qp-checkout-form .form-row:last-child {
    margin-bottom: 0;
}

.qp-checkout-form label {
    display: block;
    margin: 0 0 6px;
    color: var(--qp-text);
    font-size: var(--qp-text-s);
    font-weight: var(--qp-font-weight-medium);
    line-height: 1.2;
}

.qp-checkout-form abbr.required {
    color: var(--qp-accent);
    text-decoration: none;
}

.qp-checkout-form input.input-text,
.qp-checkout-form select,
.qp-checkout-form textarea {
    display: block;
    width: 100%;
    padding: 11px 14px;
    border: var(--qp-border);
    border-radius: var(--qp-radius);
    background: #fff;
    color: var(--qp-text);
    font-family: var(--qp-font-primary);
    font-size: var(--qp-text-s);
    line-height: 1.4;
    outline: none;
}

.qp-checkout-form textarea {
    min-height: 96px;
    resize: vertical;
}

.qp-checkout-form input.input-text:focus,
.qp-checkout-form select:focus,
.qp-checkout-form textarea:focus {
    border-color: var(--qp-accent);
}

.woocommerce-checkout-review-order-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 18px;
    color: var(--qp-text);
    font-size: var(--qp-text-s);
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    padding: 10px 12px;
    border-bottom: var(--qp-border);
    text-align: left;
    vertical-align: top;
}

.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td {
    font-weight: var(--qp-font-weight-medium);
}

.qp-checkout-form #place_order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 15px 40px;
    border: none;
    border-radius: var(--qp-radius);
    background: var(--qp-accent);
    color: #fff;
    font-family: var(--qp-font-primary);
    font-size: var(--qp-text-l);
    font-weight: var(--qp-font-weight-medium);
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease;
}

.qp-checkout-form #place_order:hover,
.qp-checkout-form #place_order:focus-visible {
    background: var(--qp-accent-strong);
}

/* Инфо об обработке ПД — выделенный блок: чёрный фон, белый текст, увеличенные отступы. */
.qp-checkout-form .woocommerce-privacy-policy-text {
    margin: 24px 0;
    padding: 18px 20px;
    background: #000;
    color: #fff;
    border-radius: var(--qp-radius);
    font-size: var(--qp-text-s);
    line-height: 1.6;
}

@media (max-width: 1024px) {
    .qp-checkout-top-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .qp-thanks-card {
        padding: 32px 20px;
    }

    .qp-checkout-fields-card,
    .qp-checkout-order,
    .qp-checkout-notes {
        padding: 20px 18px;
    }
}

/* ── Чекаут: заголовок billing «Платёжные реквизиты» скрыт; «Ваш заказ» показываем ── */
.qp-checkout-fields-card .woocommerce-billing-fields > h3,
.qp-checkout-fields-card h3 {
    display: none;
}

/* Telegram username — скрыт по умолчанию, показывается по выбору способа связи (JS) */
.qp-checkout-telegram {
    display: none;
}

.qp-checkout-telegram.is-visible {
    display: block;
}

/* Согласие/галочка как на попапах: ссылка подчёркнута, hover акцент */
#payment .woocommerce-terms-and-conditions-wrapper a {
    color: var(--qp-text);
    text-decoration: underline;
    transition: color .18s ease;
}

#payment .woocommerce-terms-and-conditions-wrapper a:hover {
    color: var(--qp-accent);
}

/* Ссылки в ПД-блоке (на чёрном фоне) — розовые, как кнопки по всему сайту. */
.qp-checkout-form .woocommerce-privacy-policy-text a,
#payment .woocommerce-privacy-policy-text a {
    color: var(--qp-accent);
    text-decoration: underline;
    transition: color .18s ease;
}

.qp-checkout-form .woocommerce-privacy-policy-text a:hover,
#payment .woocommerce-privacy-policy-text a:hover {
    color: var(--qp-accent-strong);
}

/* Текст акцепта ПД (чекбокс-согласие) — увеличенный межстрочный интервал. */
#payment .woocommerce-terms-and-conditions-wrapper,
#payment .woocommerce-terms-and-conditions-wrapper label,
#payment .validate-required label {
    line-height: 1.7;
}

/* (5) На чекауте убрать внешнюю рамку-карточку страницы и расширить контент на всю ширину shell. */
body.woocommerce-checkout .qp-content {
    max-width: none;
}

body.woocommerce-checkout .qp-page {
    border: 0;
    background: transparent;
    padding: 0;
    border-radius: 0;
}

#payment .woocommerce-form__input-checkbox,
#payment input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--qp-accent);
}

/* Отступ блока оплаты от таблицы заказа. */
.qp-checkout-order #payment {
    margin-top: 8px;
}

/* (1) Убрать строки «Подытог» и «Итого» — товар всегда один, корзины нет (оставляем только строку товара). */
.qp-checkout-order .woocommerce-checkout-review-order-table tfoot {
    display: none;
}

/* (3) Убрать маркеры-точки перед способами оплаты. */
#payment .wc_payment_methods {
    list-style: none;
    margin: 0;
    padding: 0;
}

#payment .wc_payment_methods li {
    list-style: none;
    margin-bottom: 22px;
}

#payment .wc_payment_methods li:last-child {
    margin-bottom: 0;
}

/* Название способа оплаты — в одной строке с радио-кнопкой (переопределяем block-label формы). */
#payment .wc_payment_methods li > input[type="radio"],
#payment .wc_payment_methods li > input.input-radio {
    vertical-align: middle;
    margin: 0 8px 0 0;
    transform: scale(1.08);          /* +8% к размеру радио-кнопки */
    transform-origin: center;
}

#payment .wc_payment_methods li > label {
    display: inline;                 /* inline, а не inline-block — длинный текст не сваливается на новую строку */
    margin: 0;
    vertical-align: middle;
    cursor: pointer;
}

/* (4) На мобайле — больше внешнего отступа сверху у кнопки «Подтвердить заказ». */
@media (max-width: 768px) {
    .qp-checkout-form #place_order {
        margin-top: 24px;
    }
}

/* Блок «Уже покупали? — войдите»: кнопка входа ЧЁРНАЯ (просьба владельца 2026-07-03 —
   дефолтная была незаметной, «не понятно куда нажимать»). */
.woocommerce-checkout .woocommerce-form-login__submit {
    display: inline-block;
    padding: 12px 34px;
    background: #000;
    color: #fff;
    border: none;
    border-radius: var(--qp-radius);
    font-family: var(--qp-font-primary);
    font-size: var(--qp-text-m);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background .18s ease;
}

.woocommerce-checkout .woocommerce-form-login__submit:hover,
.woocommerce-checkout .woocommerce-form-login__submit:focus-visible {
    background: #2b2b2b;
    color: #fff;
}

/* ==========================================================================
   Личный кабинет (my-account) — светлая тема ohlashmari.
   WC-дефолтные шаблоны (свои стили дёргали из woocommerce_enqueue_styles=[]) →
   стилизуем по классам .woocommerce-MyAccount-* / form-login / form-register / orders-table.
   ========================================================================== */
.qp-account-page {
    padding: 36px 0 96px;
}

.qp-account-page__content {
    min-width: 0;
}

.qp-account-page__head {
    margin-bottom: 28px;
}

.qp-account-page__head h1 {
    margin: 0;
    color: var(--qp-text);
    font-family: var(--qp-font-primary);
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 600;
    line-height: 1.1;
}

/* Логин/регистрация в две колонки на десктопе. */
.qp-account-page .woocommerce:where(.u-columns),
.qp-account-page .u-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.qp-account-page .u-column1,
.qp-account-page .u-column2,
.qp-account-page .woocommerce-MyAccount-content,
.qp-account-page .woocommerce-form-login,
.qp-account-page .woocommerce-form-register,
.qp-account-page .woocommerce-Address,
.qp-account-page .woocommerce-address-fields,
.qp-account-page .woocommerce-EditAccountForm {
    min-width: 0;
    padding: 24px;
    border: var(--qp-border);
    border-radius: var(--qp-radius);
    background: var(--qp-surface);
}

.qp-account-page h2,
.qp-account-page h3,
.qp-account-page legend {
    margin: 0 0 18px;
    color: var(--qp-text);
    font-family: var(--qp-font-primary);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.14;
}

.qp-account-page p,
.qp-account-page address {
    color: var(--qp-text);
    font-size: var(--qp-text-m);
    line-height: 1.5;
}

.qp-account-page a {
    color: var(--qp-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .18s ease;
}

.qp-account-page a:hover,
.qp-account-page a:focus-visible {
    color: var(--qp-text);
}

/* Навигация (вкладки кабинета). */
.qp-account-page .woocommerce-MyAccount-navigation {
    margin-bottom: 26px;
}

.qp-account-page .woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qp-account-page .woocommerce-MyAccount-navigation a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border: var(--qp-border);
    border-radius: var(--qp-radius);
    background: var(--qp-surface);
    color: var(--qp-text);
    font-size: var(--qp-text-s);
    line-height: 1;
    text-decoration: none;
}

.qp-account-page .woocommerce-MyAccount-navigation .is-active a,
.qp-account-page .woocommerce-MyAccount-navigation a:hover,
.qp-account-page .woocommerce-MyAccount-navigation a:focus-visible {
    border-color: var(--qp-accent);
    background: var(--qp-accent);
    color: #000;
}

/* Формы. */
.qp-account-page form {
    margin: 0;
}

.qp-account-page form .form-row {
    display: grid;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
}

.qp-account-page label {
    color: var(--qp-text);
    font-size: var(--qp-text-s);
    line-height: 1.25;
}

.qp-account-page input.input-text,
.qp-account-page input[type="text"],
.qp-account-page input[type="email"],
.qp-account-page input[type="password"],
.qp-account-page input[type="tel"],
.qp-account-page textarea,
.qp-account-page select {
    width: 100%;
    min-height: 44px;
    padding: 0 13px;
    border: var(--qp-border);
    border-radius: var(--qp-radius);
    background: #fff;
    color: var(--qp-text);
    font: inherit;
}

.qp-account-page textarea {
    min-height: 96px;
    padding-top: 12px;
}

.qp-account-page input:focus,
.qp-account-page textarea:focus,
.qp-account-page select:focus {
    border-color: var(--qp-accent);
    outline: none;
}

.qp-account-page .woocommerce-form__label-for-checkbox {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.qp-account-page .woocommerce-form__input-checkbox,
.qp-account-page input[type="checkbox"] {
    accent-color: var(--qp-accent);
}

.qp-account-page .button,
.qp-account-page button.button,
.qp-account-page input.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 24px;
    border: 1px solid var(--qp-accent);
    border-radius: var(--qp-radius);
    background: var(--qp-accent);
    color: #000;
    cursor: pointer;
    font-family: var(--qp-font-primary);
    font-size: var(--qp-text-s);
    font-weight: 600;
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}

.qp-account-page .button:hover,
.qp-account-page button.button:hover,
.qp-account-page input.button:hover {
    background: #000;
    border-color: #000;
    color: #fff;
}

/* Таблица заказов. */
.qp-account-page table.woocommerce-orders-table,
.qp-account-page table.shop_table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: var(--qp-text-s);
}

.qp-account-page table.woocommerce-orders-table th,
.qp-account-page table.shop_table th,
.qp-account-page table.woocommerce-orders-table td,
.qp-account-page table.shop_table td {
    padding: 12px 14px;
    border-bottom: var(--qp-border);
    text-align: left;
    vertical-align: middle;
}

.qp-account-page table.woocommerce-orders-table th,
.qp-account-page table.shop_table th {
    color: var(--qp-text);
    font-weight: 600;
}

.qp-account-page .woocommerce-orders-table__cell-order-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Уведомления WooCommerce. */
.qp-account-page .woocommerce-message,
.qp-account-page .woocommerce-info,
.qp-account-page .woocommerce-error {
    margin: 0 0 20px;
    padding: 14px 18px;
    border: var(--qp-border);
    border-radius: var(--qp-radius);
    background: #faf3fb;
    color: var(--qp-text);
    list-style: none;
}

.qp-account-page .woocommerce-error {
    border-color: #d9534f;
}

.qp-account-page .woocommerce-LostPassword {
    margin: 10px 0 0;
}

@media (max-width: 768px) {
    .qp-account-page {
        padding: 24px 0 64px;
    }

    .qp-account-page .woocommerce:where(.u-columns),
    .qp-account-page .u-columns {
        grid-template-columns: 1fr;
    }

    .qp-account-page table.woocommerce-orders-table,
    .qp-account-page table.shop_table {
        font-size: var(--qp-text-xs, 14px);
    }
}

/* ==========================================================================
   FRONT PAGE — ohlashmari (Этап 3): hero-визитка + offer-карточки.
   Паттерн секций 2–8 главной: медиа + заголовок/текст/кнопка. Контейнер 1280.
   ========================================================================== */
.qp-hero { padding-top: var(--qp-section-gap); }
.qp-hero__inner { display: flex; gap: 48px; align-items: center; }
.qp-hero__media { flex: 1 1 50%; min-width: 0; background: var(--qp-lilac); border-radius: var(--qp-radius-block); padding: 20px; } /* сиреневая плашка под фото (как прод) */
.qp-hero__img { width: 100%; height: auto; border-radius: var(--qp-radius-block); display: block; }
.qp-hero__content { flex: 1 1 50%; min-width: 0; }
.qp-hero__title { font-size: 40px; font-weight: var(--qp-font-weight-bold); text-transform: uppercase; margin: 0 0 16px; line-height: 1.1; }
.qp-hero__divider { display: block; width: 80px; height: 3px; background: var(--qp-accent); margin: 0 0 20px; }
.qp-hero__text { font-size: var(--qp-text-l); margin: 0 0 24px; }
.qp-hero__cta-label { font-weight: var(--qp-font-weight-heading); margin: 0 0 14px; }
.qp-hero__socials { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 22px; }
.qp-hero__social { color: var(--qp-accent); font-weight: var(--qp-font-weight-medium); }
.qp-hero__social:hover { color: var(--qp-text); }

.qp-offer { padding-top: var(--qp-section-gap); }
.qp-offer__inner { display: flex; gap: 48px; align-items: center; }
.qp-offer--reverse .qp-offer__inner { flex-direction: row-reverse; }
.qp-offer__media { flex: 0 0 48%; max-width: 48%; min-width: 0; }
/* Медиа карточек — единый размер: и фото, и видео на всю ширину колонки (одинаковые). */
.qp-offer__img,
.qp-offer__video { width: 100%; height: auto; border-radius: var(--qp-radius-block); display: block; }
.qp-offer__content { flex: 1 1 auto; min-width: 0; }
.qp-offer__eyebrow { display: block; font-size: var(--qp-text-s); color: var(--qp-text); font-weight: var(--qp-font-weight-bold); letter-spacing: .04em; margin: 0 0 8px; }
.qp-offer__title { text-transform: uppercase; margin: 0 0 16px; }
.qp-offer__text { font-size: var(--qp-text-l); margin: 0 0 24px; }

/* Секция «Визуал на заказ» — полноширокая розовая плашка (как прод). */
.qp-offer--visual { background: var(--qp-accent); margin-top: var(--qp-section-gap); padding-block: 56px; }
.qp-offer--visual .qp-offer-visual__intro { text-transform: uppercase; font-size: 34px; line-height: 1.15; font-weight: var(--qp-font-weight-bold); margin: 0 0 32px; }
@media (max-width: 768px) { .qp-offer--visual .qp-offer-visual__intro { font-size: 24px; } }

/* Кнопка-контур (как прод): прозрачный фон, чёрный текст + рамка; ховер — инверсия. */
.qp-button--outline-dark {
    background: transparent;
    color: #000;
    border: 1px solid #000;
}
.qp-button--outline-dark:hover,
.qp-button--outline-dark:focus-visible {
    background: #000;
    color: #fff;
    border-color: #000;
}

/* Кнопка-контур розовая: белый фон, чёрный текст, розовая рамка; ховер — заливка розовым. */
.qp-button--outline-pink {
    background: #fff;
    color: #000;
    border: 1px solid var(--qp-accent);
}
.qp-button--outline-pink:hover,
.qp-button--outline-pink:focus-visible {
    background: var(--qp-accent);
    color: #000;
    border-color: var(--qp-accent);
}

/* ==========================================================================
   СТРАНИЦА /lashes/ — нумерованный лендинг на розовом фоне (page 10133)
   ========================================================================== */
.qp-lashes { background: #f6cfe4; padding-bottom: var(--qp-section-gap); overflow-x: clip; }
.qp-lashes .qp-shell { position: relative; }

/* Hero */
.qp-lashes-hero { position: relative; padding-top: 24px; overflow: hidden; }
.qp-lashes-hero__inner { display: flex; gap: 40px; align-items: center; }
.qp-lashes-hero__media { flex: 0 0 34%; max-width: 34%; }
.qp-lashes-hero__img { width: 100%; height: auto; border-radius: var(--qp-radius-block); display: block; }
.qp-lashes-hero__content { flex: 1 1 auto; min-width: 0; }
.qp-lashes-hero__eyebrow { text-transform: uppercase; font-weight: 700; letter-spacing: .12em; margin: 0 0 32px; }
.qp-lashes-hero__title { font-size: 44px; text-transform: uppercase; line-height: 1.05; font-weight: 900; margin: 0 0 28px; }
.qp-lashes-hero__subtitle { font-size: var(--qp-text-l); font-weight: 400; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 36px; }
.qp-lashes-hero__text { font-weight: 400; margin: 0 0 18px; }
.qp-lashes-hero__addr { display: flex; flex-direction: column; gap: 8px; font-weight: 700; margin: 24px 0 32px; }
.qp-lashes-hero__actions { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.qp-lashes-hero__actions .qp-button { width: 100%; justify-content: center; text-align: center; }
/* Блок 05 (прайс): кнопки в столбик, как в hero (не в ряд). */
.qp-lashes-price__actions { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.qp-lashes-price__actions .qp-button { width: 100%; justify-content: center; text-align: center; }

/* Вертикальная подпись «о.ресницы.мари» справа */
.qp-lashes-hero__sidetext {
    position: absolute; top: 40%; right: -10px;
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-size: clamp(28px, 4vw, 64px); font-weight: var(--qp-font-weight-bold);
    color: rgba(255, 255, 255, .8); letter-spacing: .02em; pointer-events: none; user-select: none;
}

/* Нумерованные шаги 01/02 */
.qp-lashes-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px; align-items: start;
    padding-top: 56px;
}
.qp-lashes-step__num { font-size: clamp(120px, 16vw, 200px); font-weight: 900; line-height: .8; color: #111; letter-spacing: -.02em; }
.qp-lashes-step__text { padding-top: 12px; }
.qp-lashes-step__media { border-radius: var(--qp-radius-block); overflow: hidden; }
.qp-lashes-video { width: 100%; height: auto; display: block; border-radius: var(--qp-radius-block); }

/* Портрет с подписью «МАРИ» */
.qp-lashes-portrait {
    position: relative; aspect-ratio: 3 / 4; background-size: cover; background-position: center;
    display: flex; align-items: flex-end; padding: 18px;
}
.qp-lashes-portrait__label { color: #fff; font-size: clamp(28px, 4vw, 56px); font-weight: var(--qp-font-weight-bold); text-transform: uppercase; }

/* Блоки 03–06 */
.qp-lashes-block { padding-top: 64px; }
.qp-lashes-block__head { display: flex; flex-direction: column; align-items: flex-start; gap: 36px; margin-bottom: 44px; }
.qp-lashes-block__title { text-transform: uppercase; margin: 0; font-size: clamp(44px, 8vw, 60px); font-weight: 900; line-height: 1.05; }
.qp-lashes-block__title--compact { font-size: clamp(22px, 5vw, 34px); } /* длинный заголовок блока 05 — мельче */
.qp-lashes-block__sub { text-transform: uppercase; margin: 40px 0 20px; font-size: clamp(22px, 3.5vw, 30px); font-weight: 400; }

/* Галереи + лайтбокс (кнопка-айтем, data-qp-lightbox-item) */
.qp-lashes-gallery { display: grid; gap: 12px; }
.qp-lashes-gallery--3 { grid-template-columns: repeat(3, 1fr); }
.qp-lashes-gallery--5 { grid-template-columns: repeat(5, 1fr); } /* блок 04 «Мои работы» (правило потерялось при чистке CSS — восстановлено 2026-07-03) */


.qp-lashes-gallery__item { margin: 0; padding: 0; border: 0; background: none; cursor: pointer; display: block; border-radius: 8px; overflow: hidden; }
.qp-lashes-gallery__img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; transition: transform .3s ease; }
.qp-lashes-gallery__item:hover .qp-lashes-gallery__img,
.qp-lashes-gallery__item:focus-visible .qp-lashes-gallery__img { transform: scale(1.04); }

/* Прайс */
.qp-lashes-price__addr { font-weight: var(--qp-font-weight-regular); margin: 6px 0 0; }
.qp-lashes-price { display: flex; flex-direction: column; gap: 28px; max-width: 720px; }
.qp-lashes-price__list { list-style: none; margin: 0; padding: 0; }
.qp-lashes-price__row { display: flex; align-items: baseline; gap: 8px; padding: 10px 0; }
.qp-lashes-price__name { text-transform: uppercase; font-weight: var(--qp-font-weight-heading); white-space: nowrap; }
.qp-lashes-price__dots { flex: 1 1 auto; border-bottom: 1px dotted rgba(0, 0, 0, .35); transform: translateY(-4px); }
.qp-lashes-price__val { font-weight: var(--qp-font-weight-heading); white-space: nowrap; }
.qp-lashes-price__actions { display: flex; flex-wrap: wrap; gap: 14px; }

@media (max-width: 768px) {
    .qp-lashes-hero__inner { flex-direction: column; }
    .qp-lashes-hero__media { flex: 1 1 auto; max-width: 100%; width: 100%; }
    .qp-lashes-hero__title { font-size: 30px; }
    /* Мобайл: больше воздуха над цифрой блока (от контента сверху). */
    .qp-lashes-step { grid-template-columns: 1fr; gap: 16px; padding-top: 88px; }
    .qp-lashes-block { padding-top: 88px; }
    .qp-lashes-gallery--3,
    .qp-lashes-gallery--5 { grid-template-columns: repeat(2, 1fr); } /* мобайл: обе галереи 2 в ряд */
    .qp-lashes-hero__sidetext { display: none; }
}

/* ==========================================================================
   СТРАНИЦА /lash-base/ — курс (тёмная тема), page 12555
   ========================================================================== */
.qp-course { background: #0f0f0f; color: #fff; padding-bottom: var(--qp-section-gap); overflow-x: clip; }
.qp-course__img { width: 100%; height: auto; border-radius: var(--qp-radius-block); display: block; }
.qp-course__video { width: 100%; height: auto; border-radius: var(--qp-radius-block); display: block; }
.qp-course__p { font-size: var(--qp-text-l); margin: 0 0 18px; }
.qp-course__h3 { text-transform: uppercase; margin: 36px 0 12px; font-size: clamp(22px, 3vw, 30px); font-weight: 900; }
.qp-course-block { padding-top: 64px; }

/* Тёмная страница: все заголовки белые (перебиваем базовое h1-h6 { color:#000 }). */
.qp-course h1,
.qp-course h2,
.qp-course h3,
.qp-course h4 { color: #fff; }

/* Заголовок секции — белая плашка с чёрным текстом (как прод).
   Специфичность .qp-course .qp-course-band перебивает белый из правила выше. */
.qp-course .qp-course-band {
    background: #fff; color: #000; text-transform: uppercase; font-weight: 900;
    font-size: clamp(26px, 4vw, 40px); line-height: 1.1; margin: 0 0 44px; padding: 16px 24px; border-radius: 8px;
    position: relative; z-index: 2; /* плашка перекрывает декор (щёточки заезжают под неё) */
}

/* Hero */
.qp-course-hero { padding-top: 24px; }
/* Плашка «Базовый курс» — сплошной розовый (как кнопки), белый текст. */
.qp-course-hero__label {
    display: block; background: #fff; color: #000; text-transform: uppercase;
    font-size: var(--qp-text-l); font-weight: 900; padding: 12px 24px; border-radius: 8px; margin: 0 0 24px;
}
.qp-course-hero__label span { color: var(--qp-accent); }

/* Мобайл: плашки-заголовки с белым фоном (hero-label + бэнды секций) — по центру. */
@media (max-width: 768px) {
    .qp-course-hero__label,
    .qp-course .qp-course-band { text-align: center; }
}
.qp-course-hero__title { font-size: clamp(30px, 5vw, 56px); text-transform: uppercase; line-height: 1.05; margin: 0 0 28px; }
.qp-course-hero__media { max-width: 720px; margin: 0 0 28px; }
.qp-course-hero__lead { font-size: clamp(22px, 3vw, 30px); font-weight: 600; margin: 0 0 24px; }
.qp-course-hero__points { margin: 0; padding-left: 22px; font-size: var(--qp-text-l); display: flex; flex-direction: column; gap: 10px; }


/* В цифрах — розовая плашка (на ней текст тёмный — читаемо). */
.qp-course-stats { position: relative; margin-top: 64px; background: var(--qp-accent); color: #000; padding: 48px 0; }
/* Декор-пинцет: на стыке чёрного и розового, слегка повёрнут по часовой. */

.qp-course .qp-course-stats__title { color: #fff; text-transform: uppercase; font-weight: 900; font-size: clamp(24px, 3.5vw, 36px); margin: 0 0 32px; }
.qp-course-stats__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.qp-course-stat__num { display: block; font-size: clamp(40px, 6vw, 72px); font-weight: 900; line-height: 1; margin-bottom: 12px; }
.qp-course-stat p { margin: 0; font-size: var(--qp-text-m); }

/* Преподаватель */
/* Декор-щёточки ПРОХОДЯТ сквозь плашку «Преподаватель»: видны над и из-под неё (плашка z-index:2 поверх середины). */
.qp-course-teacher-section .qp-shell { position: relative; }
.qp-course-teacher__deco {
    position: absolute; top: -104px; left: 12px; z-index: 1;
    width: clamp(180px, 22vw, 280px); height: auto; display: block;
    transform: rotate(-6deg); transform-origin: center; pointer-events: none;
}
.qp-course-teacher { display: block; }
.qp-course-teacher__lead { font-size: clamp(22px, 3vw, 30px); font-weight: 600; text-transform: uppercase; margin: 0 0 24px; }
.qp-course-teacher__media { max-width: 760px; margin: 0 0 28px; }
.qp-course-teacher__media .qp-course__video { width: 100%; }
.qp-course-counters { display: flex; flex-wrap: wrap; gap: 48px; margin-top: 36px; justify-content: center; }
.qp-course-counter { text-align: center; }
.qp-course-counter__num { display: block; font-size: clamp(64px, 9vw, 110px); font-weight: 900; color: var(--qp-accent); line-height: 1; }
.qp-course-counter__label { text-transform: uppercase; font-size: var(--qp-text-m); }

/* Сплит (механики) */
.qp-course-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.qp-course-split__text { font-size: var(--qp-text-l); }
.qp-course-split__media { position: relative; max-width: 380px; margin: 0 auto; }
.qp-course-split__media .qp-course__video { width: 100%; max-width: none; margin: 0; }
/* Жёлтые соты наезжают на верхний правый угол видео (как прод). */
.qp-course-split__deco { position: absolute; top: -26px; right: -10px; width: clamp(80px, 14vw, 130px); height: auto; z-index: 2; pointer-events: none; }

/* Аккордеоны (нативный details) */
.qp-course-acc { border: 1px solid rgba(255, 255, 255, .2); border-radius: 8px; padding: 0 20px; margin: 16px 0; }
.qp-course-acc summary { cursor: pointer; padding: 16px 0; list-style: none; font-weight: 600; }
.qp-course-acc summary::-webkit-details-marker { display: none; }
.qp-course-acc summary::before { content: '▾'; margin-right: 12px; color: var(--qp-accent); }
.qp-course-acc[open] summary::before { content: '▴'; }
.qp-course-acc > p { margin: 0 0 16px; }

/* Способы прохождения — карточки планов */
.qp-course-plan { border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--qp-radius-block); padding: 32px; margin-bottom: 32px; }
.qp-course-plan__title { text-transform: uppercase; font-size: clamp(24px, 3.5vw, 36px); font-weight: 900; margin: 0 0 24px; }
.qp-course-plan__title span { color: var(--qp-accent); }
.qp-course-plan__top { display: grid; grid-template-columns: 360px 1fr; gap: 32px; align-items: start; }
.qp-course-plan__sub { text-transform: uppercase; font-weight: 900; margin: 32px 0 16px; font-size: clamp(20px, 2.6vw, 26px); }
.qp-course-tag { color: var(--qp-accent); font-weight: 600; margin: 0 0 6px; }
.qp-course-list { font-size: var(--qp-text-m); padding-left: 22px; display: flex; flex-direction: column; gap: 14px; }
.qp-course-buy { margin-top: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.qp-course-price { font-size: clamp(26px, 3.4vw, 36px); font-weight: 900; }
.qp-course-price s { color: var(--qp-muted); font-weight: 600; margin-right: 10px; }
.qp-course-buy__note { font-size: var(--qp-text-s); color: rgba(255, 255, 255, .6); margin: 0; }
.qp-course-buy__btn { min-width: 260px; text-align: center; justify-content: center; }

/* Дисклеймер */
.qp-course-disclaimer__body { font-size: var(--qp-text-s); color: rgba(255, 255, 255, .7); display: flex; flex-direction: column; gap: 12px; max-width: 900px; }
.qp-course-disclaimer__body b { color: #fff; }

@media (max-width: 768px) {
    .qp-course-stats__grid,
    .qp-course-teacher,
    .qp-course-split,
    .qp-course-plan__top { grid-template-columns: 1fr; gap: 24px; }
    .qp-course-plan { padding: 20px; }
    .qp-course-buy__btn { width: 100%; }
    .qp-course-hero__points { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   СТРАНИЦА /ai-ohlashmari-2/ — «ИИ с Мари» (тёмная navy-тема), page 12045
   ========================================================================== */
/* Фон: линейный градиент чёрный(40%)→синий #2962F2(100%) + чёрный оверлей 0.55 (решение владельца). */
.qp-ai {
    --qp-accent: #4676FF; /* акцент страницы ИИ — синий (кнопки/рамки/цены) */
    background:
        linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, .55)),
        linear-gradient(180deg, #000000 40%, #2962F2 100%);
    color: #fff;
    padding-bottom: var(--qp-section-gap);
    overflow-x: clip;
}
/* Кнопки на странице ИИ — во всю ширину содержимого. */
.qp-ai .qp-button { width: 100%; justify-content: center; text-align: center; }
.qp-ai .qp-ai-cta { flex-direction: column; align-items: stretch; gap: 16px; }
.qp-ai .qp-ai-price { text-align: center; }
.qp-ai h1, .qp-ai h2, .qp-ai h3 { color: #fff; }
.qp-ai__img { width: 100%; height: auto; border-radius: var(--qp-radius-block); display: block; }
.qp-ai__video { width: 100%; height: auto; border-radius: var(--qp-radius-block); display: block; }
.qp-ai-block { padding-top: 64px; }
.qp-ai-band { text-transform: uppercase; font-weight: 900; font-size: clamp(26px, 4vw, 44px); text-align: center; margin: 0 0 36px; }

/* Hero */
.qp-ai-hero { padding-top: 32px; text-align: center; }
.qp-ai-hero__title { font-size: clamp(40px, 7vw, 80px); text-transform: uppercase; margin: 0 0 16px; }
.qp-ai-hero__lead { font-size: clamp(20px, 3vw, 28px); margin: 0 auto 28px; max-width: 720px; }
.qp-ai-hero__media { max-width: 560px; margin: 0 auto 28px; }
.qp-ai-hero__text { font-size: var(--qp-text-l); margin: 0 auto 24px; max-width: 640px; }

/* Дуо-карточки (фото + видео с подписями) */
.qp-ai-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.qp-ai-card { margin: 0; }
.qp-ai-card figcaption { margin-top: 14px; font-size: var(--qp-text-l); text-align: center; }

/* Видео + фичи (icon-box списком) */
.qp-ai-split { display: grid; grid-template-columns: 380px 1fr; gap: 40px; align-items: center; }
.qp-ai-split__media { max-width: 380px; }
.qp-ai-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.qp-ai-features li { border-left: 3px solid var(--qp-accent); padding-left: 16px; }
.qp-ai-features b { display: block; text-transform: uppercase; font-size: var(--qp-text-l); }
.qp-ai-features span { color: rgba(255, 255, 255, .75); }

/* CTA «цена + Купить» */
.qp-ai-cta { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 36px; }
.qp-ai-price { font-size: clamp(26px, 3.4vw, 36px); font-weight: 900; }

/* Вступай */
.qp-ai-join { display: grid; grid-template-columns: 380px 1fr; gap: 40px; align-items: center; }
.qp-ai-join__media { max-width: 380px; }
.qp-ai-join__text { font-size: clamp(20px, 3vw, 28px); margin: 0 0 24px; }

@media (max-width: 768px) {
    .qp-ai-duo, .qp-ai-split, .qp-ai-join { grid-template-columns: 1fr; gap: 24px; }
    .qp-ai-split__media, .qp-ai-join__media { max-width: 100%; margin: 0 auto; }
    .qp-ai-cta { flex-direction: column; gap: 14px; }
}

/* Жёлтая кнопка (курс «Прочная сцепка» и др.) */
.qp-button--yellow { background: #e4e795; color: #000; border: 0; }
.qp-button--yellow:hover,
.qp-button--yellow:focus-visible { background: #d6da6e; color: #000; }

/* ==========================================================================
   СТРАНИЦА /lash-povyshenie-kvalifikacii/ — курс «Прочная сцепка» (светлая), page 12207
   ========================================================================== */
.qp-scepka { background: #000; color: #fff; padding-bottom: var(--qp-section-gap); overflow-x: clip; }
.qp-scepka__img { width: 100%; height: auto; border-radius: var(--qp-radius-block); display: block; }
.qp-scepka__video { width: 100%; height: auto; border-radius: var(--qp-radius-block); display: block; }
.qp-scepka__h3 { color: #fff; text-transform: uppercase; font-weight: 900; font-size: clamp(22px, 3vw, 30px); margin: 32px 0 14px; }
.qp-scepka__lead { font-size: clamp(20px, 2.6vw, 26px); font-weight: 700; margin: 0 0 12px; }
.qp-scepka__p { font-size: var(--qp-text-l); margin: 0 0 16px; }
.qp-scepka-block { padding-top: 56px; }
.qp-scepka .qp-button { width: 100%; justify-content: center; text-align: center; }

/* Фиолетовый pill-заголовок секции */
.qp-scepka-band {
    display: block; text-align: center; background: rgba(93, 111, 211, .58); color: #fff;
    text-transform: uppercase; font-weight: 900; font-size: clamp(22px, 3.4vw, 34px);
    padding: 16px 28px; border-radius: 30px; margin: 0 0 28px;
}
.qp-scepka-band--hero { font-size: clamp(20px, 3vw, 28px); margin-bottom: 20px; }

/* Hero */
.qp-scepka-hero { padding-top: 24px; }
.qp-scepka-hero__title { color: #fff; font-size: clamp(28px, 5vw, 48px); text-transform: uppercase; line-height: 1.1; margin: 0 0 18px; }
.qp-scepka-hero__text { font-size: var(--qp-text-l); margin: 0 0 24px; }
.qp-scepka-hero__media { max-width: 520px; margin: 0 0 24px; }

/* Боли (4 пункта) */
.qp-scepka-pains { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: var(--qp-text-l); }
.qp-scepka-pains li { padding-left: 24px; position: relative; }
.qp-scepka-pains li::before { content: '—'; position: absolute; left: 0; color: rgba(93, 111, 211, .9); font-weight: 900; }

/* Аккордеон (светлая тема) */
.qp-scepka-acc { border: 1px solid rgba(255, 255, 255, .22); border-radius: 12px; padding: 0 20px; margin: 0 0 24px; }
.qp-scepka-acc summary { cursor: pointer; padding: 16px 0; list-style: none; font-weight: 600; }
.qp-scepka-acc summary::-webkit-details-marker { display: none; }
.qp-scepka-acc summary::before { content: '▾'; margin-right: 10px; color: rgba(93, 111, 211, .9); }
.qp-scepka-acc[open] summary::before { content: '▴'; }
.qp-scepka-acc > p { margin: 0 0 16px; }

.qp-scepka-media { max-width: 520px; margin: 24px 0 0; }

/* Списки чек/крест */
.qp-scepka-list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 14px; font-size: var(--qp-text-l); }
.qp-scepka-list li { padding-left: 34px; position: relative; }
.qp-scepka-list--check li::before { content: '✓'; position: absolute; left: 0; color: #2ea44f; font-weight: 900; }
.qp-scepka-list--cross li::before { content: '✕'; position: absolute; left: 0; color: #d33; font-weight: 900; }

/* Цена + Купить */
.qp-scepka-buy { display: flex; flex-direction: column; align-items: stretch; gap: 16px; max-width: 560px; }
.qp-scepka-price { font-size: clamp(34px, 6vw, 64px); font-weight: 900; text-align: center; }
.qp-scepka-buy__note { font-size: var(--qp-text-s); color: rgba(255, 255, 255, .65); margin: 0; text-align: center; }

/* Дисклеймер */
.qp-scepka-disclaimer__body { font-size: var(--qp-text-s); color: rgba(255, 255, 255, .6); display: flex; flex-direction: column; gap: 12px; }
.qp-scepka-disclaimer__body b { color: #fff; }

/* ───────────────────────── /lash-effects/ — «Лэш-эффекты» ──────────────────── */
.qp-le { background: #FFA6EE7A; color: var(--qp-text); padding-bottom: var(--qp-section-gap); overflow-x: clip; }
.qp-le__img { width: 100%; height: auto; border-radius: 12px; display: block; }
.qp-le-card { background: rgba(241, 159, 243, .48); border-radius: 15px; padding: 28px 22px; }
.qp-le > section { margin-top: 28px; }

/* Hero */
.qp-le-hero { margin-top: 16px; }
.qp-le-hero__title { color: #000; font-size: clamp(34px, 8vw, 60px); font-weight: 900; text-transform: uppercase; line-height: 1.05; margin: 0 0 18px; }
.qp-le-hero__sub { background: #000; color: #fff; font-size: clamp(17px, 4.6vw, 22px); border-radius: 14px; padding: 16px 20px; margin: 0 0 22px; }
.qp-le-hero__media { margin: 0; }

/* Вопросы */
.qp-le-questions__list { list-style: none; margin: 0; padding: 0; }
.qp-le-questions__list li { font-size: clamp(22px, 5.4vw, 30px); font-weight: 500; color: #000; padding: 18px 0; border-bottom: 2px solid rgba(0, 0, 0, .28); }
.qp-le-questions__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.qp-le-questions__list li:first-child { padding-top: 0; }

/* Спешл / уголок — вводные секции на белом */
.qp-le-intro__title,
.qp-le-steps__title { color: #000; font-size: clamp(28px, 6.5vw, 40px); font-weight: 900; text-transform: uppercase; line-height: 1.1; margin: 0 0 16px; }
.qp-le-intro__lead { color: #333; font-size: var(--qp-text-l); margin: 0 0 22px; }
.qp-le-steps__lead { color: #333; font-size: var(--qp-text-l); font-weight: 500; margin: 0 0 22px; }
.qp-le-intro__media { max-width: 560px; }

/* Нумерованные карточки */
.qp-le-steps__grid { display: flex; flex-direction: column; gap: 24px; }
.qp-le-step { position: relative; overflow: hidden; }
.qp-le-step__num { display: block; font-size: clamp(48px, 12vw, 72px); font-weight: 900; color: #000; line-height: 1; margin: 0 0 12px; }
.qp-le-step__deco { position: absolute; top: 14px; right: -6px; width: 42%; max-width: 200px; height: auto; pointer-events: none; }
.qp-le-step__photo { margin: 0 0 16px; }
.qp-le-step__caption { color: #000; font-size: var(--qp-h); font-weight: 500; text-transform: uppercase; line-height: 1.15; margin: 0; }

/* Оффер «Набор» */
.qp-le-offer__title { color: #000; font-size: clamp(28px, 6.5vw, 40px); font-weight: 900; text-transform: uppercase; line-height: 1.1; margin: 0 0 16px; }
.qp-le-offer__sub { color: #000; font-size: clamp(20px, 4.6vw, 24px); font-weight: 700; margin: 0 0 18px; }
.qp-le-offer__note { background: rgba(255, 166, 238, .55); color: #000; font-size: var(--qp-text-s); border-radius: 12px; padding: 16px 18px; margin: 0 0 22px; }
.qp-le-offer__buy { display: flex; flex-direction: column; gap: 16px; margin: 0 0 22px; }
.qp-le-offer__price { color: #000; font-size: clamp(34px, 8vw, 48px); font-weight: 900; text-transform: uppercase; }
.qp-le .qp-button--yellow.qp-le-offer__btn { background: #fcffbb; width: 100%; justify-content: center; }
.qp-le .qp-button--yellow.qp-le-offer__btn:hover,
.qp-le .qp-button--yellow.qp-le-offer__btn:focus-visible { background: #f0f48a; }
.qp-le-offer__media { max-width: 560px; }

/* ═══════════════════════ /beauty-content/ — «Бьюти контент» ════════════════════
   Мобильная вёрстка story-блоков. На ПК — мокап смартфона по центру + размытый фон.
   ─────────────────────────────────────────────────────────────────────────────── */
.qp-bc {
    --bc-blue: #bed5f4;
    --bc-pink: #fa6ea0;
    --bc-ink: #1c2330;
    --bc-w: 412px;            /* ширина «экрана телефона» */
    background: var(--bc-blue); color: var(--bc-ink);
    font-family: var(--qp-font, 'Montserrat', sans-serif);
    overflow-x: clip;
}
.qp-bc-bg { display: none; }
/* «Экран телефона» — фиксированная узкая колонка, центрирована на ЛЮБОЙ ширине,
   чтобы контент никогда не упирался в край / скролл-бар. */
.qp-bc-scroll { display: flex; flex-direction: column; max-width: var(--bc-w); margin: 0 auto; }
.qp-bc-block { position: relative; padding: 32px 20px; }

/* Заголовки на этой странице — чёрные или белые (НЕ розовые). Розовый только декор. */

/* Блок 1 — Hero */
.qp-bc-hero { background: linear-gradient(180deg, #fff 0%, #eaf1fb 22%, var(--bc-blue) 46%); padding-top: 24px; text-align: center; }
.qp-bc-bubble-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 2px; }
.qp-bc-chaticon { position: relative; width: 50px; height: 38px; background: var(--bc-pink); border-radius: 16px 16px 16px 5px; flex: 0 0 auto; }
.qp-bc-chaticon::before { content: '♥'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 18px; }
.qp-bc-chaticon::after { content: ''; position: absolute; left: 8px; bottom: -7px; border: 8px solid transparent; border-top-color: var(--bc-pink); border-right: 0; }
.qp-bc-bubble-text { color: var(--bc-ink); font-weight: 700; font-size: clamp(17px, 4.6vw, 20px); }
.qp-bc-hero__title { color: var(--bc-ink); font-weight: 700; line-height: .9; margin: 0 0 16px; text-transform: none; }
.qp-bc-script { display: block; font-family: 'Caveat', cursive; color: var(--bc-ink); font-weight: 700; font-size: clamp(72px, 22vw, 100px); line-height: .82; }
.qp-bc-hero__title-sub { font-size: clamp(22px, 6vw, 30px); font-weight: 600; letter-spacing: .04em; }

.qp-bc-hero__collage { position: relative; height: 300px; margin: 0 -4px 14px; }
.qp-bc-hero__ph { position: absolute; border: 5px solid #fff; border-radius: 6px; box-shadow: 0 8px 22px rgba(0,0,0,.16); object-fit: cover; }
.qp-bc-hero__ph--1 { width: 46%; left: 4%; top: 18px; transform: rotate(-5deg); z-index: 1; }
.qp-bc-hero__ph--2 { width: 52%; right: 2%; top: 4px; transform: rotate(4deg); z-index: 2; }

.qp-bc-chat { display: flex; align-items: flex-start; gap: 10px; background: #fff; border-radius: 18px; padding: 14px 16px; margin: 18px 0; box-shadow: 0 6px 18px rgba(0,0,0,.08); text-align: left; }
.qp-bc-chat__avatar { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--bc-pink), #ffd0e6); }
.qp-bc-chat__text { margin: 0; font-size: 15px; line-height: 1.4; color: #333; }
.qp-bc-hero__claim { font-size: clamp(20px, 5.4vw, 26px); font-weight: 800; text-transform: uppercase; color: var(--bc-ink); margin: 22px 0 14px; }
.qp-bc-hero__lead { font-size: 18px; line-height: 1.45; color: var(--bc-ink); margin: 0 0 12px; }
.qp-bc-hero__hl { font-size: clamp(20px, 5.4vw, 26px); font-weight: 800; color: #fff; margin: 0; }

/* Общий заголовок секции (чёрный) */
.qp-bc-h2 { color: var(--bc-ink); font-size: clamp(22px, 5.6vw, 28px); font-weight: 800; line-height: 1.2; margin: 0 0 18px; }
.qp-bc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.qp-bc-list li { position: relative; padding-left: 22px; font-size: 17px; line-height: 1.4; color: var(--bc-ink); }
.qp-bc-list li::before { content: '•'; position: absolute; left: 4px; color: var(--bc-ink); font-weight: 700; }

/* Блок 2 — записка + конверт */
.qp-bc-b2__if { font-size: 19px; font-weight: 700; color: var(--bc-ink); margin: 0 0 14px; }
.qp-bc-note { position: relative; margin: 0 0 30px; padding-right: 40px; }
.qp-bc-note__text { background: #fff; color: #333; font-size: 15px; line-height: 1.5; border-radius: 4px; padding: 18px 20px; margin: 0; transform: rotate(-2deg); box-shadow: 0 8px 22px rgba(0,0,0,.1); max-width: 80%; }
.qp-bc-note__env { position: absolute; right: 0; bottom: -18px; width: 130px; height: auto; }

/* Блок 3 — круглое видео-отзыв + иллюстрация */
.qp-bc-b3 { padding-bottom: 0; }
.qp-bc-tvideo { margin: 0; text-align: center; }
.qp-bc-tvideo__cap { display: block; margin: 0 0 16px; }
.qp-bc-tvideo__name { display: block; color: var(--bc-ink); font-size: 16px; font-weight: 500; }
.qp-bc-tvideo__name b { font-weight: 800; }
.qp-bc-tvideo__quote { display: block; color: var(--bc-ink); font-size: 18px; font-weight: 700; margin-top: 4px; }
.qp-bc-tvideo__ring { position: relative; width: 260px; max-width: 78%; aspect-ratio: 1; margin: 0 auto; border-radius: 50%; padding: 5px; background: var(--bc-pink); box-shadow: 0 10px 30px rgba(250,110,160,.35); }
.qp-bc-tvideo__v { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; background: #000; cursor: pointer; }
.qp-bc-tvideo__play { position: absolute; inset: 5px; border: 0; border-radius: 50%; background: rgba(0,0,0,.18); cursor: pointer; display: grid; place-items: center; }
.qp-bc-tvideo__play::before { content: ''; width: 0; height: 0; margin-left: 6px; border-style: solid; border-width: 16px 0 16px 26px; border-color: transparent transparent transparent #fff; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.qp-bc-tvideo__ring.is-playing .qp-bc-tvideo__play { display: none; }
.qp-bc-b3__illo { display: block; width: 100%; height: auto; margin: 10px 0 0; }
.qp-bc-tvideo__quote--below { color: var(--bc-ink); font-size: 18px; font-weight: 700; text-align: center; margin: 16px 0 0; }

/* Чат-бабблы (in — слева/белый, out — справа/розовый) */
.qp-bc-msg { max-width: 86%; font-size: 15px; line-height: 1.42; padding: 12px 16px; border-radius: 18px; margin: 0 0 12px; box-shadow: 0 4px 14px rgba(0,0,0,.07); }
.qp-bc-msg--in { background: #fff; color: #333; border-bottom-left-radius: 5px; margin-right: auto; }


/* Блок 4 — сетка Reels (скриншот-контент) */
.qp-bc-b4__grid { display: block; width: 100%; height: auto; border-radius: 10px; margin: 8px 0 14px; }

/* Telegram-стиль бабла (с отправителем) */
.qp-bc-msg--tg { max-width: 100%; }
.qp-bc-msg__from { display: block; color: var(--bc-pink); font-weight: 700; font-size: 14px; }
.qp-bc-msg__sub { display: block; color: #888; font-size: 12px; margin-bottom: 6px; }

/* Блок 9 — сетка Reels справа */
.qp-bc-b9__grid { display: block; width: 70%; max-width: 280px; height: auto; border-radius: 10px; margin: 6px 0 18px auto; }

/* ── Переиспользуемые компоненты блоков beauty-content ───────────────────────── */
.qp-bc-strong { color: var(--bc-ink); font-size: clamp(18px, 4.8vw, 22px); font-weight: 800; line-height: 1.25; margin: 0 0 14px; }
.qp-bc-strike { text-decoration: line-through; text-decoration-color: var(--bc-pink); text-decoration-thickness: 2px; }
.qp-bc-center { text-align: center; }
.qp-bc-rowimg { display: block; width: 100%; height: auto; border-radius: 12px; margin: 6px 0 16px; }

/* Маркер «день» рукописным шрифтом */
.qp-bc-day { font-family: 'Caveat', cursive; color: var(--bc-pink); font-weight: 700; font-size: clamp(54px, 16vw, 78px); line-height: .9; text-align: center; margin: 18px 0 8px; }

/* Текст «формата» в пунктирной рамке */
.qp-bc-formatbox { color: var(--bc-ink); font-size: clamp(17px, 4.4vw, 20px); font-weight: 600; line-height: 1.3; text-align: center; border: 2px dashed rgba(250,110,160,.8); border-radius: 40px; padding: 22px 20px; margin: 18px 0; }

/* Бейдж «Группа набрана» (общий) */
.qp-bc-soldout { display: block; text-align: center; background: rgba(28,35,48,.9); color: #fff; font-weight: 700; font-size: 16px; border-radius: 30px; padding: 14px 22px; margin: 18px auto 0; max-width: 320px; }

/* Видео-блоки отзывов (общий фон) */
.qp-bc-tblock { text-align: center; }

/* Блок 19 — 3D-иллюстрация плёнки */
.qp-bc-b19__film { display: block; width: 64%; max-width: 240px; height: auto; margin: 6px 0 0 auto; }

/* Блок 23 — календарь */
.qp-bc-b23__head { text-align: center; }
.qp-bc-cal { background: #fff; border-radius: 16px; padding: 18px 16px; margin: 0 0 20px; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.qp-bc-cal__month { text-align: right; color: #d33a7a; font-weight: 800; font-size: 22px; margin: 0 0 12px; border-bottom: 1px solid #eee; padding-bottom: 8px; }
.qp-bc-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.qp-bc-cal__day { aspect-ratio: 1; display: grid; place-items: center; font-size: 15px; font-weight: 700; color: #1c2330; }
.qp-bc-cal__day.is-hot { color: #c43a76; background: radial-gradient(circle at 50% 45%, #ffc1dd 0 58%, transparent 60%); }

/* Блоки 29-35 — галерея скринов-отзывов */
.qp-bc-proofs__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.qp-bc-proofs__item { border: 0; padding: 0; background: none; cursor: pointer; border-radius: 10px; overflow: hidden; box-shadow: 0 6px 16px rgba(0,0,0,.1); }
.qp-bc-proofs__img { display: block; width: 100%; height: auto; }

/* Описательный текст — обычный вес, по левому краю (НЕ заголовок) */
.qp-bc-lead { color: var(--bc-ink); font-size: clamp(18px, 4.8vw, 22px); font-weight: 400; line-height: 1.4; text-align: left; margin: 0 0 18px; }

/* Блок 6 — оффер + цена */
.qp-bc-em { color: #fff; }
.qp-bc-b6__head { margin-bottom: 6px; }
.qp-bc-b6__chart { display: block; width: 62%; max-width: 230px; height: auto; margin: 8px auto 18px; }
.qp-bc-price { text-align: center; line-height: 1; }
.qp-bc-price__old { display: inline-block; position: relative; color: var(--bc-ink); font-family: 'Caveat', cursive; font-size: 40px; font-weight: 700; opacity: .85; }
.qp-bc-price__old::after { content: ''; position: absolute; left: -4px; right: -4px; top: 52%; height: 3px; background: var(--bc-pink); transform: rotate(-8deg); }
.qp-bc-price__new { display: block; color: var(--bc-pink); font-family: 'Caveat', cursive; font-weight: 700; font-size: clamp(64px, 18vw, 88px); line-height: .9; margin-top: 2px; }
.qp-bc-price__cur { font-size: .5em; }
.qp-bc-soldout { display: block; text-align: center; background: rgba(28,35,48,.9); color: #fff; font-weight: 700; font-size: 16px; border-radius: 30px; padding: 14px 22px; margin: 18px auto 0; max-width: 320px; }

/* Блок 7 — формат (заголовок в пунктирной рамке) + кошелёк */

.qp-bc-b7 .qp-bc-list { margin-top: 22px; }
.qp-bc-b7__wallet { display: block; width: 72%; max-width: 280px; height: auto; margin: 24px auto 0; }

/* ── ПК: мокап смартфона по центру, контент скролится внутри, фон размыт ───────── */
@media (min-width: 1024px) {
    .qp-bc { display: flex; justify-content: center; align-items: center; min-height: calc(100vh - 40px); padding: 24px 0; position: relative; isolation: isolate; }
    .qp-bc-bg {
        display: block; position: fixed; inset: -60px; z-index: 0;
        background:
            radial-gradient(60% 50% at 25% 20%, rgba(250,110,160,.55), transparent 60%),
            radial-gradient(70% 60% at 80% 80%, rgba(120,150,230,.6), transparent 60%),
            linear-gradient(160deg, #cfe0fb, #f6cfe4);
        filter: blur(48px) saturate(1.1); transform: scale(1.1);
    }
    .qp-bc-phone {
        position: relative; z-index: 1; width: var(--bc-w); max-width: 92vw;
        height: min(860px, 90vh); background: #0b0d12; border-radius: 52px;
        padding: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.4), 0 0 0 2px rgba(255,255,255,.08) inset;
    }
    .qp-bc-phone::before { /* динамик/камера-островок */
        content: ''; position: absolute; top: 24px; left: 50%; transform: translateX(-50%);
        width: 116px; height: 30px; background: #0b0d12; border-radius: 18px; z-index: 3;
    }
    .qp-bc-scroll {
        height: 100%; overflow-y: auto; overflow-x: hidden;
        border-radius: 40px; background: var(--bc-blue);
        scrollbar-width: none; overscroll-behavior: contain;
    }
    .qp-bc-scroll::-webkit-scrollbar { width: 0; height: 0; }
}

@media (max-width: 768px) {
    .qp-hero__inner,
    .qp-offer__inner,
    .qp-offer--reverse .qp-offer__inner { flex-direction: column; gap: 24px; }
    .qp-hero__media,
    .qp-offer__media { flex: 1 1 auto; max-width: 100%; width: 100%; }
    .qp-hero__title { font-size: 30px; }
}

/* ============================================================================
   МИНИ-ЛЕНДИНГИ ОПЛАТЫ — /pre-order/, /eyelash-extension/ (карточка по центру)
   ============================================================================ */
.qp-paylp { display: flex; justify-content: center; padding: 48px 20px 80px; }
.qp-paylp__card {
    width: 100%; max-width: 480px; background: #fff;
    border: var(--qp-border); border-radius: var(--qp-radius);
    padding: 32px 28px 36px; text-align: center;
    box-shadow: 0 20px 50px -30px rgba(0,0,0,.25);
}
.qp-paylp__img { width: 100%; max-width: 320px; height: auto; display: block; margin: 0 auto 24px; border-radius: var(--qp-radius); }
.qp-paylp__title { font-size: clamp(21px, 3vw, 27px); line-height: 1.25; margin: 0 0 16px; }
.qp-paylp__desc { font-size: 16px; line-height: 1.65; color: #555; text-align: left; margin: 0 0 22px; }
.qp-paylp__desc a { color: var(--qp-accent); }
.qp-paylp__price { font-size: 40px; font-weight: 700; color: var(--qp-accent); margin: 6px 0 24px; }
.qp-paylp__btn { display: inline-block; min-width: 220px; }
.qp-paylp__note { font-size: 13px; line-height: 1.55; color: #888; margin: 18px 0 0; }

/* ============================================================================
   /sertificates/ — «Сертификаты 1+1»: мобильные макеты-картинки стопкой в мокапе
   смартфона (как /beauty-content/). 6 картинок + 2 кнопки «Купить!» (товар 9298).
   ============================================================================ */
.qp-cert-bg { display: none; }
.qp-cert-scroll { display: flex; flex-direction: column; max-width: 460px; margin: 0 auto; background: #f3efe9; }
.qp-cert__sec { padding: 30px 20px; text-align: center; }
.qp-cert__sec--hero { padding-top: 36px; }
.qp-cert__sec--final { padding-bottom: 44px; }

.qp-cert__title { margin: 4px 0 22px; font-size: clamp(40px, 11vw, 54px); font-weight: 900; text-transform: uppercase; letter-spacing: .01em; color: #1a1a1a; line-height: .92; }
.qp-cert__title-script { display: block; font-family: 'Caveat', cursive; font-weight: 700; font-size: 56px; text-transform: none; letter-spacing: 0; color: var(--qp-accent); transform: rotate(-4deg); margin-bottom: -10px; }

.qp-cert__text { font-size: 17px; line-height: 1.6; color: #4a4a4a; font-weight: 500; margin: 0 0 18px; }
.qp-cert__text:last-child { margin-bottom: 0; }
.qp-cert__text--lead { font-size: 19px; color: #2a2a2a; }
.qp-cert__sub { font-size: 20px; font-weight: 700; color: #1a1a1a; margin: 10px 0 14px; }
.qp-cert__sub--lg { font-size: 24px; }

.qp-cert__photo { display: block; width: 100%; height: auto; border-radius: 16px; margin: 22px 0 6px; }

.qp-cert__list { list-style: none; margin: 4px 0 20px; padding: 0; text-align: left; display: inline-block; }
.qp-cert__list li { font-size: 17px; line-height: 1.55; color: #4a4a4a; font-weight: 500; margin: 0 0 12px; position: relative; padding-left: 18px; }
.qp-cert__list li::before { content: '·'; position: absolute; left: 4px; color: var(--qp-accent); font-weight: 700; }

.qp-cert__msg { display: inline-flex; align-items: flex-start; gap: 8px; margin: 6px 0 18px; text-align: left; }
.qp-cert__msg-ava { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 2px solid var(--qp-accent); }
.qp-cert__msg-bubble { background: #ececec; color: #333; border-radius: 16px; padding: 9px 14px; font-size: 14px; line-height: 1.4; max-width: 280px; }
.qp-cert__msg-heart { align-self: flex-end; font-size: 16px; }

.qp-cert__price { margin: 6px 0 14px; line-height: .9; }
.qp-cert__price-num { display: block; font-size: 72px; font-weight: 800; color: var(--qp-accent); letter-spacing: .02em; }
.qp-cert__price-cur { display: block; font-family: 'Caveat', cursive; font-weight: 700; font-size: 30px; color: #2a2a2a; transform: rotate(-4deg); }

.qp-cert__btn { display: block; width: calc(100% - 8px); max-width: 360px; margin: 22px auto 4px; text-align: center; }

@media (min-width: 1024px) {
    .qp-cert { display: flex; justify-content: center; align-items: center; min-height: calc(100vh - 40px); padding: 24px 0; position: relative; isolation: isolate; }
    .qp-cert-bg {
        display: block; position: fixed; inset: -60px; z-index: 0;
        background:
            radial-gradient(60% 50% at 25% 20%, rgba(250,110,160,.5), transparent 60%),
            radial-gradient(70% 60% at 80% 80%, rgba(120,150,230,.55), transparent 60%),
            linear-gradient(160deg, #cfe0fb, #f6cfe4);
        filter: blur(48px) saturate(1.1); transform: scale(1.1);
    }
    .qp-cert-phone {
        position: relative; z-index: 1; width: 460px; max-width: 92vw;
        height: min(860px, 90vh); background: #0b0d12; border-radius: 52px;
        padding: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.4), 0 0 0 2px rgba(255,255,255,.08) inset;
    }
    .qp-cert-phone::before {
        content: ''; position: absolute; top: 24px; left: 50%; transform: translateX(-50%);
        width: 116px; height: 30px; background: #0b0d12; border-radius: 18px; z-index: 3;
    }
    .qp-cert-scroll {
        height: 100%; overflow-y: auto; overflow-x: hidden;
        border-radius: 40px; background: #f3efe9;
        scrollbar-width: none; overscroll-behavior: contain;
    }
    .qp-cert-scroll::-webkit-scrollbar { width: 0; height: 0; }
}