/* Всплывающее объявление главной — вёрстка, общая для трёх витрин.
   ===========================================================================
   ГЛАВНОЕ ПРАВИЛО ЭТОГО ФАЙЛА: здесь нет ни одного своего шрифта и ни одного
   своего цвета. Шрифт окно наследует у страницы, всё остальное берёт из
   переменных --ann-*, которые задаёт сама витрина своими токенами. Иначе
   окно читается как чужая рекламная вставка, а не часть магазина — на этом
   первый заход и сгорел.

   Один файл на все витрины намеренно: конвейеры стилей у них разные
   (Account Factory собирает свой CSS сборщиком, ingriafarm и Getman Store
   подключают готовые файлы отсюда), и это единственное место, которое видят
   все три без тройного копирования разметки.

   Поведение окна — resources/js/modules/announcement.js,
   разметка — resources/views/partials/_announcement.blade.php.
   ======================================================================== */

/* Скрытое окно должно исчезать, а не просто становиться прозрачным: у
   .af-ann своё display, и оно перебивает атрибут hidden из стилей браузера.
   Ровно тот же приём, что у cookie-баннера (.af-cookie[hidden]). */
.af-ann[hidden] { display: none; }

/* То же внутри окна: у кнопки и подвала своё display (inline-flex, flex),
   и оно перебило бы hidden. Предпросмотр прячет так пустые узлы, пока
   владелец не напечатал в них текст. */
.af-ann [hidden] { display: none; }

.af-ann {
    /* По умолчанию — карточка снизу: на телефоне окно посреди экрана Google
       считает навязчивым и понижает страницу в мобильной выдаче. */
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1200;
    display: flex;
    justify-content: center;
    padding: 0 16px 16px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .3s ease, transform .45s var(--ann-ease, cubic-bezier(.32,.72,0,1));
    pointer-events: none;
    font: inherit;
}

.af-ann.is-shown { opacity: 1; transform: translateY(0); }

/* Клики ловит САМА карточка, а не полоса вокруг неё. Иначе окно «по центру
   снизу» растягивается на всю ширину экрана и невидимой лентой съедает
   клики по товарам за собой (проверено: элемент под курсором в 60 px слева
   от карточки оказывался самим окном). */
.af-ann.is-shown .af-ann__card { pointer-events: auto; }



.af-ann__card {
    position: relative;
    display: grid;
    gap: 16px;
    width: min(100%, var(--ann-w, 470px));
    padding: 18px 20px 18px;
    padding-right: 54px;
    border-radius: var(--ann-radius, 18px);
    border: 1px solid var(--ann-border, rgba(0,0,0,.12));
    background: var(--ann-bg, #fff);
    color: var(--ann-fg, inherit);
    box-shadow: var(--ann-shadow, 0 24px 60px -28px rgba(0,0,0,.55));
    /* Стекло: страница за окном видна размытой. Рецепт берём у той же
       витрины (её шапки, её стеклянных панелей) — своего стекла здесь нет,
       как нет своих шрифтов и цветов. Витрина без стекла переменную не
       задаёт, и окно остаётся плотным. */
    -webkit-backdrop-filter: var(--ann-backdrop, none);
    backdrop-filter: var(--ann-backdrop, none);
}

/* Полупрозрачный фон держится только на размытии. Браузер без размытия или
   человек, отключивший прозрачность в системе, получил бы читаемость хуже —
   им плотный фон той же витрины. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .af-ann__card { background: var(--ann-bg-solid, var(--ann-bg, #fff)); }
}

@media (prefers-reduced-transparency: reduce) {
    .af-ann__card {
        background: var(--ann-bg-solid, var(--ann-bg, #fff));
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* ─── Конструктор окна ───────────────────────────────────────────────────
   Размеры именованные: за каждым стоит проверенная вёрстка. Потолок всегда
   100 % ширины экрана — она главнее выбранного размера, иначе на телефоне
   окно упёрлось бы в край. */
.af-ann--size-compact { --ann-w: 380px; }
.af-ann--size-normal  { --ann-w: 470px; }
.af-ann--size-wide    { --ann-w: 620px; }

/* Картинка: маленькая сбоку, крупная сбоку, во всю ширину сверху, никакой. */
.af-ann--pic-none .af-ann__pic { display: none; }
.af-ann--pic-thumb.af-ann__card--with-pic  { grid-template-columns: minmax(0, 96px)  minmax(0, 1fr); align-items: center; }
.af-ann--pic-large.af-ann__card--with-pic  { grid-template-columns: minmax(0, 150px) minmax(0, 1fr); align-items: center; }
.af-ann--pic-banner.af-ann__card--with-pic { grid-template-columns: minmax(0, 1fr); }
.af-ann--pic-banner .af-ann__pic { aspect-ratio: 16 / 9; }

/* На узком экране широкая картинка сбоку съедает текст — уводим её наверх. */
@media (max-width: 559px) {
    .af-ann--pic-large.af-ann__card--with-pic { grid-template-columns: minmax(0, 1fr); }
    .af-ann--pic-large .af-ann__pic { aspect-ratio: 16 / 9; }
}

/* Размер текста — одним шагом по всем трём строкам сразу: пропорции
   заголовка, описания и цены подобраны, ломать их по отдельности нельзя. */
.af-ann--text-large .af-ann__title { font-size: 1.3125rem; }
.af-ann--text-large .af-ann__body  { font-size: .9375rem; }
.af-ann--text-large .af-ann__price { font-size: 1.75rem; }

.af-ann__pic {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: calc(var(--ann-radius, 18px) - 7px);
    background: var(--ann-chip-bg, rgba(127,127,127,.12));
}

.af-ann__text { min-width: 0; }

/* Подпись-повод: тихая строка со светящейся точкой в акценте витрины. */
.af-ann__eyebrow {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8125rem;
    color: var(--ann-muted, inherit);
}

.af-ann__dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--ann-accent, currentColor);
    box-shadow: 0 0 0 3px var(--ann-accent-halo, transparent);
    flex: none;
}

/* Заголовок — дисплейным шрифтом витрины, как её собственные заголовки. */
.af-ann__title {
    margin: 8px 0 0;
    font-family: var(--ann-font-display, inherit);
    font-weight: var(--ann-title-weight, 700);
    font-size: 1.0625rem;
    line-height: 1.25;
    letter-spacing: var(--ann-title-tracking, normal);
    overflow-wrap: anywhere;
}

/* Характеристики товара: название в каталоге уже разложено точками, и здесь
   эти части становятся отдельными метками — читается как спецификация, а не
   как одна длинная строка. */
.af-ann__facts {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.af-ann__facts li {
    font-size: .75rem;
    line-height: 1;
    padding: 6px 9px;
    border-radius: var(--ann-chip-radius, 999px);
    border: 1px solid var(--ann-chip-border, rgba(127,127,127,.28));
    background: var(--ann-chip-bg, transparent);
    color: var(--ann-chip-fg, inherit);
}

.af-ann__body {
    margin: 10px 0 0;
    font-size: .875rem;
    line-height: 1.4;
    color: var(--ann-muted, inherit);
    overflow-wrap: anywhere;
}

.af-ann__foot {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

/* Цена набирается ровно так же, как в карточках каталога рядом. */
.af-ann__price {
    margin: 0;
    font-family: var(--ann-font-display, inherit);
    font-weight: var(--ann-price-weight, 600);
    font-size: 1.5rem;
    letter-spacing: var(--ann-title-tracking, normal);
    color: var(--ann-price-fg, inherit);
    white-space: nowrap;
}

/* Кнопка — копия основной кнопки витрины: форма, вес, тень. */
.af-ann__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--ann-btn-min-h, 44px);
    padding: 0 22px;
    border-radius: var(--ann-btn-radius, 999px);
    background: var(--ann-btn-bg, currentColor);
    color: var(--ann-btn-fg, #fff);
    box-shadow: var(--ann-btn-shadow, none);
    font-weight: var(--ann-btn-weight, 700);
    /* Регистр, кегль и разрядка тоже берутся у витрины: у Getman Store
       собственные кнопки набраны прописными в 12,5 px с разрядкой, и без
       этих трёх переменных окно выдавало себя чужой кнопкой. */
    font-size: var(--ann-btn-size, .9rem);
    letter-spacing: var(--ann-btn-tracking, normal);
    text-transform: var(--ann-btn-transform, none);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .35s var(--ann-ease, ease), filter .35s var(--ann-ease, ease);
}

.af-ann__cta:hover { transform: translateY(-1px); filter: brightness(1.06); }
.af-ann__cta:active { transform: scale(.97); }

/* Крестик — пальцевая цель, не декоративные 16 px. */
.af-ann__close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    opacity: .45;
    transition: opacity .15s ease;
}

.af-ann__close:hover,
.af-ann__close:focus-visible { opacity: 1; }

/* С планшета и шире у окна появляется место на экране. На телефоне ЛЮБОЙ
   вариант остаётся карточкой снизу: окно посреди экрана на входе Google
   считает навязчивым и понижает страницу в мобильной выдаче. */
@media (min-width: 768px) {
    /* Угол — и умолчание, и явный выбор. Варианты ниже записаны двумя
       классами намеренно: при равной силе селекторов победил бы просто
       тот, что ниже по файлу, а это ломается от любой перестановки. */
    /* Растянуто на всю ширину (left: 0), хотя карточка жмётся вправо.
       Так у полосы ОПРЕДЕЛЁННАЯ ширина, и «100 %» внутри карточки есть от
       чего считать. С left: auto полоса ужималась по содержимому, и широкое
       окно не могло стать шире своего текста: вместо 620 px выходило 501. */
    .af-ann {
        inset: auto 0 24px 0;
        padding: 0 24px;
        justify-content: flex-end;
    }

    .af-ann.af-ann--pos-bottom {
        inset: auto 0 24px 0;
        justify-content: center;
    }

    /* Посреди экрана — с затемнением позади, иначе окно висит в воздухе.
       Затемнение своей переменной: светлая витрина вправе его ослабить. */
    .af-ann.af-ann--pos-center {
        inset: 0;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background: var(--ann-scrim, rgb(0 0 0 / .45));
    }

    /* Окно посреди экрана — модальное: затемнение перехватывает всё, что за
       ним. Правило живёт ЗДЕСЬ, рядом с затемнением: на телефоне положение
       превращается в карточку снизу без затемнения, и перехват оставил бы по
       бокам карточки невидимые полосы, съедающие касания (было до 25.09.2026:
       касание в 6 px левее карточки на 390 px попадало в само окно). */
    .af-ann.af-ann--pos-center.is-shown { pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .af-ann { transition: opacity .2s ease; transform: none; }
    .af-ann.is-shown { transform: none; }
    .af-ann__cta { transition: none; }
}

/* ─── Предпросмотр «объявление крупно» ──────────────────────────────────────
   Только окно — по центру, в натуральную величину, на фоне самой витрины.
   Страницу прячем видимостью, а не display: видимость окно может вернуть
   себе, будучи потомком спрятанного, и каркас у всех трёх витрин разный —
   искать, чей ребёнок окно, не нужно. Метку af-ann-focus ставит разметка
   окна только в режиме предпросмотра, у покупателя её не бывает. */
html.af-ann-focus,
html.af-ann-focus body { overflow: hidden; }

html.af-ann-focus body { visibility: hidden; }

/* Спрятанная страница не должна крутить анимации: бегущая строка, фон,
   маскот продолжали работать невидимыми и грузили компьютер владельца.
   Окно своих анимаций не имеет (у него переходы), его пауза не трогает. */
html.af-ann-focus body *,
html.af-ann-focus body *::before,
html.af-ann-focus body *::after { animation-play-state: paused !important; }

html.af-ann-focus .af-ann[data-announcement] {
    visibility: visible;
    inset: 0;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: none;
}