/* ==========================================================================
   glass.css — "жидкое стекло": утилиты и общие компоненты.
   Подключается в base.html ПОСЛЕ {% block head %}, чтобы перекрывать инлайновые <style>
   дочерних шаблонов. Здесь же — стили компонентов, которые создаёт ui.js.
   Разделы: 1 Утилиты · 2 Кнопки · 3 Заголовки секций · 4 Проза (about/checkout/contacts)
            5 Toast · 6 Поиск каталога · 7 Анимации модалок · 8 Reveal/загрузка · 9 Print
   ========================================================================== */

/* ---------- 1. Утилиты ---------- */
.glass,
.card-glass {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    box-shadow: var(--glass-shadow);
}

.glass-strong {
    background: var(--glass-bg-strong);
}

/* Группа товара на карточке (рябина, яблоня, Миниатюрные…) — каталог и главная. */
.item_sort {
    display: inline-block;
    max-width: 100%;
    margin: 0 0 6px;
    padding: 2px 10px;
    border-radius: var(--r-pill);
    background: var(--c-container);
    color: var(--c-primary-dark);
    font: 600 .75rem/1.5 var(--font-sans);
    letter-spacing: .02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-glass {
    padding: var(--sp-2);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.card-glass:hover {
    transform: translateY(-3px);
    box-shadow: var(--glass-shadow-hover);
}

.text-accent {
    color: var(--c-warm-strong);
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    background: var(--c-container);
    color: var(--c-primary-dark);
    font-size: .85rem;
    font-weight: 600;
}

/* ---------- 2. Кнопки ---------- */
.btn-glass {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 22px;
    border: 1px solid var(--glass-border);
    border-radius: var(--r-pill);
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    color: var(--c-text);
    font: 600 .95rem/1.2 var(--font-sans);
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--glass-shadow);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur);
}

.btn-glass:hover {
    transform: translateY(-2px);
    box-shadow: var(--glass-shadow-hover);
    color: var(--c-text);
    text-decoration: none;
}

.btn-glass:active {
    transform: translateY(0) scale(.98);
}

.btn-glass--primary {
    border-color: transparent;
    background: var(--btn-primary-bg);
    color: var(--c-on-primary);
    box-shadow: var(--btn-primary-shadow);
}

.btn-glass--primary:hover {
    background: var(--btn-primary-bg-hover);
    color: var(--c-on-primary);
    box-shadow: var(--btn-primary-shadow-hover);
}

/* ---------- 3. Заголовки секций (index / about / checkout) ---------- */
.information-about-pitomnik > h3,
.hipe_home_board > h3,
.my_sorts_rouse_home_board > h3 {
    font: 700 clamp(1.5rem, 3vw, 2.25rem)/1.2 var(--font-sans);
    letter-spacing: -.01em;
    text-align: center;
    color: var(--c-text);
    padding: var(--sp-5) 0 var(--sp-3);
}

/* ---------- 4. Проза: about / checkout / contacts / о питомнике ---------- */
.wr-1 {
    font-family: var(--font-sans);
    font-size: 1.05rem;
    font-weight: 500;
    text-align: center;
    color: var(--c-text);
}

/* Ряд «фото + текст» (about.html: .ab-out, index.html: .cl).
   Раньше фото шло в натуральный размер (1920px) и вытесняло текст: на широком экране текст сжимался
   в узкую колонку, а при ≤1497px (adaptive.css: flex-wrap) падал под огромную картинку.
   Теперь обе колонки имеют собственную базу (flex-basis), фото ограничено по ширине и кадрируется,
   а при нехватке места (<~740px) ряд перестраивается в столбец. */
.ab-out,
.information-about-pitomnik .cl {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: stretch;
    align-items: stretch;
    gap: var(--sp-3);
    max-width: 1100px;
    margin: 0 auto var(--sp-3);
}

.ab-out > figure,
.information-about-pitomnik .cl > figure {
    flex: 1 1 340px;
    max-width: 520px;
    min-width: 0;
    margin: 0;
}

.ab-out > div,
.information-about-pitomnik .cl > div {
    flex: 1 1 380px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--sp-3) var(--sp-4);
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    box-shadow: var(--glass-shadow);
}

.ab-out p,
.information-about-pitomnik p {
    font-size: 1.05rem;
    font-style: normal;
    line-height: 1.75;
    max-width: none;
    padding: 0;
    text-align: left;
    white-space: normal;
    color: var(--c-text);
}

.wr-1 p {
    text-align: center;
}

.information-about-pitomnik p strong,
.ab-out p strong {
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
}

.ab-out img,
.information-about-pitomnik figure img,
.item_img {
    border-radius: var(--r-lg);
    box-shadow: var(--glass-shadow);
    border: 1px solid var(--glass-border);
    display: block;
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 100%;
    min-height: 260px;
    object-fit: cover;
}

/* блок с датами отправки в about.html */
.information-about-pitomnik > .wr-1 {
    max-width: 640px;
    margin: 0 auto var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    box-shadow: var(--glass-shadow);
}

.information-about-pitomnik > p {
    max-width: 900px;
    margin: var(--sp-3) auto;
    padding: var(--sp-2) var(--sp-3);
    text-align: center;
    background: var(--c-container);
    border-radius: var(--r-md);
}

/* Карта в контактах */
iframe {
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    box-shadow: var(--glass-shadow);
}

/* ---------- 5. Toast (создаётся ui.js) ---------- */
.toast-stack {
    position: fixed;
    left: 50%;
    bottom: var(--sp-3);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    width: min(92vw, 420px);
    transform: translateX(-50%);
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    border: 1px solid var(--glass-border);
    border-left: 4px solid var(--c-primary);
    border-radius: var(--r-md);
    box-shadow: var(--glass-shadow-hover);
    color: var(--c-text);
    font-size: .95rem;
    pointer-events: auto;
    animation: toast-in .35s var(--ease) both;
}

.toast--error {
    border-left-color: var(--c-warm);
}

.toast--error .toast__icon {
    color: var(--c-warm-strong);
}

.toast__icon {
    flex: none;
    font-weight: 800;
    color: var(--c-primary-dark);
}

.toast.is-leaving {
    animation: toast-out .25s ease-in both;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(16px) scale(.96); }
    to   { opacity: 1; transform: none; }
}

@keyframes toast-out {
    to { opacity: 0; transform: translateY(8px) scale(.96); }
}

/* ---------- 6. Поиск по каталогу (создаётся ui.js) ---------- */
.catalog-search {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    max-width: 520px;
    margin: 0 auto var(--sp-3);
    padding: 6px 8px 6px 18px;
    border-radius: var(--r-pill);
    /* z-index ниже, чем у .catalog-controls (style-products.css) — иначе перекрывает
       раскрытое выпадающее меню категорий (.dropdown-content), которое на мобильном
       становится position:fixed и должно быть поверх всего каталога. */
    position: relative;
    z-index: 1;
}

.catalog-search__input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--c-text);
    font: 500 1rem var(--font-sans);
    padding: 10px 0;
}

.catalog-search__input::placeholder {
    color: var(--c-muted);
}

.catalog-search:focus-within {
    box-shadow: 0 0 0 3px var(--c-primary-light), var(--glass-shadow);
}

.catalog-search__count {
    flex: none;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    background: var(--c-container);
    color: var(--c-primary-dark);
    font-size: .85rem;
    font-weight: 600;
}

/* карточка скрыта живым поиском (ui.js) — отдельный класс, чтобы не трогать логику фильтра .show */
.product.is-search-hidden {
    display: none !important;
}

.catalog-empty {
    width: 100%;
    padding: var(--sp-4);
    text-align: center;
    color: var(--c-muted);
}

/* ---------- 7. Анимации модальных окон (используются модалкой корзины, cart.css) ---------- */
@keyframes qv-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes glass-in {
    from { opacity: 0; transform: translateY(18px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
/* ---------- 8. Reveal / загрузка / бейдж корзины ---------- */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
}

.reveal.is-in {
    opacity: 1;
    transform: none;
}

.is-loading {
    position: relative;
    pointer-events: none;
    opacity: .75;
}

.is-loading::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: .6em;
    vertical-align: -.15em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.cart-bump {
    animation: cart-bump .5s var(--ease);
}

@keyframes cart-bump {
    30%  { transform: scale(1.25); }
    60%  { transform: scale(.95); }
    100% { transform: scale(1); }
}

/* ---------- 8a. Цена, скидка (include price.html) ---------- */
.price-block {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
}

.price-old {
    color: var(--c-muted);
    font-size: .85em;
    font-weight: 500;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--c-warm);
}

.price-new {
    color: var(--c-primary-dark);
    font-weight: 800;
}

.price-badge {
    align-self: center;
    padding: 2px 9px;
    border-radius: var(--r-pill);
    background: var(--c-warm-container);
    color: var(--c-warm-strong);
    font-size: .72em;
    font-weight: 800;
    line-height: 1.4;
}

/* Оптовая скидка ("скидка от N шт.") — отдельный, заметный акцент (цвет по запросу — #cd1dc6),
   чтобы не сливаться с пастельной плашкой обычной скидки. */
.price-badge--wholesale {
    background: #CD1DC6;
    color: var(--c-on-primary);
}

/* ---------- 8b. Счётчик количества вместо «В корзину» (cart-ui.js) ---------- */
.add_item[hidden] {
    display: none !important;
}

.qty-stepper {
    display: inline-flex;
    align-items: center;
    flex: 1 1 auto;
    justify-content: space-between;
    gap: 2px;
    min-height: 44px;
    padding: 3px;
    background: var(--btn-primary-bg);
    border-radius: var(--r-pill);
    box-shadow: var(--btn-primary-shadow);
    animation: qty-in .25s var(--ease) both;
}

.qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: var(--c-on-primary);
    font: 700 1.25rem/1 var(--font-sans);
    cursor: pointer;
    transition: background var(--dur), transform var(--dur) var(--ease);
}

.qty-btn:hover {
    background: rgba(255, 255, 255, .32);
}

.qty-btn:active {
    transform: scale(.92);
}

.qty-btn.is-trash:hover {
    background: var(--c-warm);
    color: #fff;
}

.qty-input {
    flex: 1 1 auto;
    width: 3.2ch;
    min-width: 40px;
    max-width: 90px;
    height: 38px;
    padding: 0 2px;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--c-on-primary);
    font: 800 1.05rem/1 var(--font-sans);
    text-align: center;
}

.qty-input:focus {
    outline: 0;
    background: rgba(255, 255, 255, .22);
}

.qty-stepper--lg {
    min-width: 180px;
    margin: 4px;
}

@keyframes qty-in {
    from { opacity: 0; transform: scale(.9); }
    to   { opacity: 1; transform: none; }
}
/* ---------- 9. Print ---------- */
@media print {
    body::before { display: none; }
    .glass, .card-glass, .toast, .ab-out > div {
        background: #fff !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
    }
}