/* ============================================================================
 * flora-global-fixes-20260820.css
 * Сквозные правки по итогам тотального UI/UX-аудита 20.08.2026.
 * Подключается ГЛОБАЛЬНО и ПОСЛЕДНИМ (см. functions.php, flora-global-fixes),
 * чтобы перебивать родительскую тему Storefront и чужой CSS без !important.
 *
 * Здесь живут только СКВОЗНЫЕ правки — те, что касаются многих страниц сразу.
 * Правка одного компонента должна лежать в CSS этого компонента.
 * ==========================================================================*/


/* ----------------------------------------------------------------------------
 * 1. Подчёркивание Storefront на ссылках-кнопках и ссылках-карточках
 * ----------------------------------------------------------------------------
 * Родительская тема держит `.hentry .entry-content a { text-decoration: underline }`
 * со специфичностью 0,2,1. Любое наше `.какой-нибудь-btn { text-decoration:none }`
 * (0,1,0) под ним проигрывает, поэтому на КАЖДОЙ WP-странице внутри
 * .entry-content подчёркивались кнопки и карточки. Замер 19.08.2026 по 15
 * страницам: /cart/ — главная кнопка «Оформить заказ» (.fcr5__sticky-cta),
 * карточки кросс-села (.fcx-cardlink) и пустой корзины (.fcr5__empty-card);
 * /catalog-filter/ — 37 ссылок пагинации (.page-numbers); /aboutus/, /contact/,
 * /photo/, /packing/, /partners/, /video/, /landscape-designer/ — CTA и плитки.
 * Локальная заплатка на тот же случай уже была в catalog-filter.css, но
 * закрывала только классы .fcf-*.
 *
 * Специфичность ниже — 0,3,1, поэтому правило выигрывает независимо от порядка
 * подключения файлов.
 *
 * ВАЖНО: текстовые ссылки в прозе (оферта, правила, политика, статьи
 * агробиблиотеки) подчёркивание СОХРАНЯЮТ — это доступность, а не украшение.
 * Гасим строго ссылки-компоненты.
 */
.hentry .entry-content a.button,
.hentry .entry-content a.page-numbers,
.hentry .entry-content a[class*="-btn"],
.hentry .entry-content a[class*="btn-"],
.hentry .entry-content a[class*="-cta"],
.hentry .entry-content a[class*="cta-"],
.hentry .entry-content a[class*="-card"],
.hentry .entry-content a[class*="card-"],
.hentry .entry-content a[class*="cardlink"],
.hentry .entry-content a[class*="-tile"],
.hentry .entry-content a.fp-gallery-item,
.hentry .entry-content a.fau-photos-link,
.hentry .entry-content a.fv-watch-link,
.hentry .entry-content a.fc-req-link,
.hentry .entry-content a.fc-msg-mini,
.hentry .entry-content a.fcr5__empty-link,
.hentry .entry-content .fv-cta > a,
.hentry .entry-content .fcr5__sticky > a,
.hentry .entry-content a:has(> img),
.hentry .entry-content a:has(> picture),
.hentry .entry-content a:has(> figure),
.hentry .entry-content a.button:hover,
.hentry .entry-content a.page-numbers:hover,
.hentry .entry-content a[class*="-btn"]:hover,
.hentry .entry-content a[class*="btn-"]:hover,
.hentry .entry-content a[class*="-cta"]:hover,
.hentry .entry-content a[class*="cta-"]:hover,
.hentry .entry-content a[class*="-card"]:hover,
.hentry .entry-content a[class*="card-"]:hover,
.hentry .entry-content a[class*="cardlink"]:hover,
.hentry .entry-content a[class*="-tile"]:hover,
.hentry .entry-content a.fp-gallery-item:hover,
.hentry .entry-content a.fau-photos-link:hover,
.hentry .entry-content a.fv-watch-link:hover,
.hentry .entry-content a.fc-req-link:hover,
.hentry .entry-content a.fc-msg-mini:hover,
.hentry .entry-content a.fcr5__empty-link:hover,
.hentry .entry-content .fv-cta > a:hover,
.hentry .entry-content .fcr5__sticky > a:hover,
.hentry .entry-content a:has(> img):hover,
.hentry .entry-content a:has(> picture):hover,
.hentry .entry-content a:has(> figure):hover {
    text-decoration: none;
}


/* ----------------------------------------------------------------------------
 * 2. Русские слова рвутся посреди слова без дефиса
 * ----------------------------------------------------------------------------
 * Плитка подкатегории на iPhone 13 показывала «Профессиональны / е средства
 * защиты». Замер h2.woocommerce-loop-category__title: доступная ширина 142px,
 * слово «Профессиональные» требует 143px. При `overflow-wrap: break-word` и
 * `hyphens: manual` браузеру остаётся только разорвать слово без дефиса.
 * У документа стоит lang="ru-RU", поэтому `hyphens: auto` даёт правильный
 * русский перенос «Профессио-нальные».
 */
.woocommerce-loop-category__title,
.woocommerce-loop-product__title,
.flora-category-header-title {
    -webkit-hyphens: auto;
            hyphens: auto;
}

/* ----------------------------------------------------------------------------
 * 3. Таблицы в описании товара обрезаны справа и недостижимы
 * ----------------------------------------------------------------------------
 * У агрохимии и удобрений нормы расхода свёрстаны таблицей. Storefront даёт
 * `table { width: 100% }`, но таблица не умеет сжиматься уже своей min-content
 * ширины, поэтому на iPhone 13 она выходит за колонку описания: замер 20.08.2026
 * на /product/insektitsid-fitoverm-1/ — контейнер 352px, таблица 488px, правый
 * край 525 при экране 390. Документ при этом НЕ скроллится
 * (documentElement.scrollWidth = 390), то есть третья колонка «Расход рабочего
 * раствора» не просто срезана — до неё физически нельзя добраться. На
 * /product/udobrenie-osmocote-pro-3-4-mes-19-9-102mgote-osmokot-pro/ то же:
 * таблицы 486px и 499px. Для препарата защиты растений это потеря нормативной
 * части описания — дозировки и кратности обработок.
 *
 * Лечение: сделать саму таблицу блоком с собственной горизонтальной прокруткой.
 * Обёртку добавить нельзя (разметку описаний генерит контент), а display:block
 * оставляет строки анонимной табличной коробкой внутри — вёрстка колонок не
 * меняется, появляется только скролл.
 *
 * Скроллбар оформлен намеренно: у оформленного ::-webkit-scrollbar в мобильных
 * WebKit/Blink пропадает overlay-режим, и полоса видна постоянно — это и есть
 * подсказка, что таблицу можно листать. Появляется она только когда прокрутка
 * реально есть, поэтому узкие таблицы ничего не теряют.
 */
.flora-desc-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
}
.flora-desc-content table::-webkit-scrollbar {
    height: 6px;
}
.flora-desc-content table::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .06);
    border-radius: 3px;
}
.flora-desc-content table::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .3);
    border-radius: 3px;
}


/* ----------------------------------------------------------------------------
 * 3. Липкая шапка не работала на телефонах и планшетах
 * ----------------------------------------------------------------------------
 * Симптом: на ≤992px после прокрутки вниз шапка (меню, поиск, избранное,
 * корзина) уезжала вместе со страницей и НЕ возвращалась при прокрутке вверх —
 * вернуть её можно было только прокруткой в самое начало документа. На главной
 * это 4933px без единого элемента навигации на экране.
 *
 * Причина: `modern-header-v2-20260710.css` @media (max-width:992px) ставит
 * `html, body { overflow-x: hidden !important }`. `overflow-x` на <html> делает
 * его скролл-контейнером, и `position: sticky` у #masthead перестаёт работать
 * вовсе. На десктопе правило не применяется — там шапка липла нормально.
 * Собственный JS шапки при этом был исправен: класс `header-hidden` снимался
 * при скролле вверх и transform обнулялся — но элемент к тому моменту уже уехал
 * за пределы экрана вместе с документом.
 *
 * Замер до/после (iPhone 13, главная, прокрутка вниз ~1500px, затем вверх):
 *   было : top = -1056, шапки на экране нет
 *   стало: top = 0,     шапка на месте
 *
 * Клип от горизонтального переполнения остаётся на <body> — этого достаточно:
 * именно так работает десктоп. Проверено 20.08.2026 на 204 загрузках страниц
 * (58 URL × 3 устройства + 10 самых рискованных × 3): реального горизонтального
 * скролла нет ни на одной странице ни до, ни после правки.
 *
 * `!important` здесь вынужденный — перебиваем чужой `!important`. Правило живёт
 * в общем файле, а не в самом modern-header-*.css, потому что тот файл
 * датирован и версионируется отдельно; здесь правка видна вместе с её причиной.
 */
@media (max-width: 992px) {
    html {
        overflow-x: visible !important;
    }
}

/* ----------------------------------------------------------------------------
 * 4. Пикер месяца предзаказа: залоченный месяц нечитаем + рваная сетка чипов
 * ----------------------------------------------------------------------------
 * Компонент — плагин flora-preorder (assets/css/slot-picker-v2.css,
 * assets/js/slot-picker-v2.js). Правки лежат здесь, а не в плагине, потому что
 * гасящее правило приходит из РОДИТЕЛЬСКОЙ темы, и перебивать его должен файл,
 * который грузится последним.
 *
 * 4.1 Залоченный месяц (renderLocked: `button.fpp-chip.selected[disabled]`) —
 * единственный индикатор того, на какой месяц оформляется предзаказ. Storefront
 * держит `button:disabled { opacity: .5 !important }` (themes/storefront/style.css),
 * поэтому чип гаснет. Замер 20.08.2026 на /product/petuniya-cascadias-rose-01l-predzakaz/,
 * iPhone 13: color #fff, background #2e8b57, opacity .5, фон пикера #f5fbf4 →
 * эффективные цвета rgb(201,225,211) на rgb(146,195,166), контраст 1.44:1 —
 * «Апрель 2027» читается как бледно-зелёное пятно. Гасить тут нечего: месяц
 * зафиксирован корзиной, это не «недоступная», а окончательная опция.
 * !important здесь вынужденный — перебиваем чужой !important.
 *
 * 4.2 Базовый контраст выбранного чипа тоже не дотягивал: белый на #2e8b57 —
 * 4.25:1 при пороге WCAG AA 4.5:1. #2a7f4f даёт 4.95:1 и остаётся тем же
 * фирменным зелёным на глаз.
 *
 * 4.3 Раскладка. Чипы стояли flex-wrap'ом с шириной по тексту (95–130px), а
 * колонка пикера узкая (замер: .fpp-slots = 251px на iPhone 13, 181px на 320px,
 * 308px на десктопе) — пары складывались через одну, и 10 слотов у среза
 * занимали 7 строк: пикер 417px = 63% вьюпорта на iPhone 13 и 573px = 90% на
 * 320px, форма покупки уезжала за экран. Даём чипам одинаковую основу в
 * половину строки — получается ровная сетка 2×N (10 слотов → 5 строк).
 * Паддинг чипа с .9rem до .5rem: самый длинный ярлык «Сентябрь 2027» — 103px,
 * колонка на iPhone 13 — 121.5px, с прежним паддингом он бы не влез.
 * min-height 44px (тач-цель) не трогаем; на 320px длинный ярлык переносится
 * на две строки — это нормально, чип просто становится выше.
 */
.flora-preorder-picker .fpp-slots .fpp-chip:disabled,
.flora-preorder-picker .fpp-slots .fpp-chip[disabled] {
    opacity: 1 !important;
    cursor: default;
}
.flora-preorder-picker .fpp-slots .fpp-chip.selected {
    background: #2a7f4f;
    border-color: #2a7f4f;
    color: #fff;
}
.flora-preorder-picker .fpp-slots .fpp-chip {
    flex: 0 1 calc(50% - .25rem);
    max-width: 100%;
    padding-left: .5rem;
    padding-right: .5rem;
    justify-content: center;
    text-align: center;
    /* ровно половина min-height: в одну строку чип остаётся той же «таблеткой»,
     * в две (узкие экраны) не превращается в овал */
    border-radius: 22px;
}


/* ----------------------------------------------------------------------------
 * 5. Кнопка «В избранное» на телефоне оставалась без единого слова
 * ----------------------------------------------------------------------------
 * Плагин flora-wishlist прячет подпись на узких экранах:
 * `@media (max-width:480px){ .flora-wishlist-btn-text{display:none} }`
 * (assets/css/wishlist.css:990). Правило писалось под компактную иконку, но
 * span с подписью есть ТОЛЬКО у большой кнопки — и на карточке товара
 * (woocommerce/content-single-product.php), и в шорткоде плагина. Кнопка при
 * этом ширину не сокращает: замер 20.08.2026, iPhone 13,
 * /product/alissum-snow-princess-01l/ — box 285×42, внутри контур сердца 18×18
 * и невидимый span 0×0, button.innerText === ''. Получалась широкая пустая
 * розовая плашка без подписи и без доступного имени (aria-label у кнопки нет,
 * только title, который на тач-устройстве не показывается).
 * Возвращаем подпись — заодно возвращается и доступное имя кнопки.
 * (UI/UX-аудит 20.08.2026, F063 + F105)
 */
@media (max-width: 480px) {
    .flora-wishlist-btn .flora-wishlist-btn-text {
        display: inline;
    }
}


/* ----------------------------------------------------------------------------
 * 6. Незаполненное «избранное» рисовалось сплошным залитым сердцем
 * ----------------------------------------------------------------------------
 * Кнопка в карточке каталога (flora-wishlist.php:282) отдаёт `<i class="fas
 * fa-heart">` независимо от того, лежит товар в избранном или нет, поэтому у
 * всех 48 карточек /catalog-filter/ горело малиновое ЗАЛИТОЕ сердце — тот же
 * знак, которым обычно показывают «уже добавлено». Состояние «в избранном»
 * отличалось только фоном кружка, что читается слабее.
 *
 * Разметку плагина не трогаем — переключаем начертание глифа: в документе
 * зарегистрированы оба фейса, «Font Awesome 5 Free» 900 (solid) и
 * «Font Awesome 6 Free» 400 (regular). Незаполненному состоянию отдаём
 * regular — получается контурное сердце; `.in-wishlist` остаётся solid.
 * Проверено на живой карточке: до — сплошная заливка, после — контур.
 * (UI/UX-аудит 20.08.2026, F124)
 */
.flora-wishlist-btn-loop:not(.in-wishlist) i.fa-heart {
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
}