/* ═══════════════════════════════════════════════════════════════════
   PRIMEPHONE.CZ — Custom CSS
   Платформа : Shoptet (шаблон Classic #11)
   Последнее обновление : Май 2026

   ОГЛАВЛЕНИЕ
   ──────────────────────────────────────────────────────────────────
   1.  ПЕРЕМЕННЫЕ И СБРОС
   2.  КАРТОЧКИ ТОВАРОВ
   3.  ФЛАГИ (БЕЙДЖИ)
   4.  ГЛАВНАЯ — заголовки секций
   5.  ГЛАВНАЯ — блок приветствия (PP-BENEFITS Bento)
   6.  ГЛАВНАЯ — benefit banner (Konkurenční výhody)
   7.  СТРАНИЦА ТОВАРА — цена, кнопка, наличие
   8.  СТРАНИЦА ТОВАРА — блок подарка и доверия
   9.  СТРАНИЦА ТОВАРА — детали (бейдж, типографика, вкладки, панель)
   10. НАВБАР — десктоп (пункты, выпадающее меню)
   11. ПОИСК — десктоп и мобилка
   12. КОРЗИНА (košík) — строки товаров, допродажи
   13. ОФОРМЛЕНИЕ ЗАКАЗА (krok 1) — доставка, оплата
   14. ХЕДЕР — мобильный Menu, адаптация
   15. МОБИЛЬНАЯ АДАПТАЦИЯ — общая
   ────────────────────────────────────────────────────────────productCardName──────
   Цвета:
     --color-navy   #103255   основной синий (логотип, кнопки)
     --color-sky    #15c8f9   голубой акцент (hover, подчёркивания)
     --color-green  #27ae60   зелёный (наличие, бесплатная доставка)
     --radius       10px      стандартное скругление
     --shadow       ...       стандартная тень карточки
═══════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════
   1. ПЕРЕМЕННЫЕ И СБРОС
══════════════════════════════════════════════════════════════════ */

:root {
    /* Цвета */
    --color-navy:  #103255;   /* Основной синий — кнопки, навбар, акценты  */
    --color-sky:   #15c8f9;   /* Голубой — hover, подчёркивания             */
    --color-green: #27ae60;   /* Зелёный — наличие, бесплатная доставка     */

    /* Короткие алиасы (используются в коде) */
    --b: var(--color-navy);
    --c: var(--color-sky);
    --g: var(--color-green);

    /* Размеры */
    --radius: 10px;            /* Стандартное скругление                     */
    --r: var(--radius);        /* Короткий алиас                             */

    /* Тени */
    --shadow: 0 4px 20px rgba(0, 0, 0, .08);
    --sh: var(--shadow);       /* Короткий алиас                             */
}

/* Сглаживание шрифтов на всех браузерах */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ══════════════════════════════════════════════════════════════════
   2. КАРТОЧКИ ТОВАРОВ
══════════════════════════════════════════════════════════════════ */

.products .p {
    border-radius: var(--r) !important;
    border: 1.5px solid #e8edf2 !important;
    overflow: hidden;
    transition: box-shadow .25s, border-color .25s, transform .2s !important;
    background: #fff !important;
}

.products .p:hover {
    box-shadow: 0 8px 28px rgba(16, 50, 85, .13) !important;
    border-color: #b8cde0 !important;
    transform: translateY(-3px) !important;
}

.products .p > a.image {
    background: #f7f9fb !important;
    padding: 14px !important;
    display: block;
    position: relative;
}

.products .p > a.image img {
    object-fit: contain !important;
    border-radius: 6px !important;
    transition: transform .3s !important;
}

.products .p:hover > a.image img {
    transform: scale(1.04) !important;
}

.products .p-in {
    padding: 12px !important;
}

/* Название товара */
.products .name,
.products .name span,
[data-testid="productCardName"] {
    display: block !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    line-height: 1.45 !important;
    overflow: visible !important;
    white-space: normal !important;
    max-height: none !important;
    line-clamp: unset !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    font-size: 13px !important;
}

@media (max-width: 767px) {
    .products .name,
    .products .name span,
    [data-testid="productCardName"] {
        font-size: 9px !important;
    }
}

.products .name:hover {
    color: var(--b) !important;
}

/* Цена */
.products .price-final strong {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #1a1a2e !important;
}

.products .price-standard span {
    font-size: 12px !important;
    color: #ffffff !important;
    text-decoration: line-through;
}

/* Кнопка "Do košíku" */
.products .btn-cart,
.products .add-to-cart-button {
    background: var(--b) !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    border: none !important;
    transition: background .15s !important;
    height: 42px !important;
    width: 100% !important;
}

.products .btn-cart:hover,
.products .add-to-cart-button:hover {
    background: var(--c) !important;
    color: #fff !important;
}

.products .availability span {
    font-size: 11px !important;
    font-weight: 700 !important;
}

.products .p-code {
    display: none !important;
}

.products .p-desc {
    font-size: 12px !important;
    color: #6b7280 !important;
    line-height: 1.4 !important;
}



/* ══════════════════════════════════════════════════════════════════
   3. ФЛАГИ (БЕЙДЖИ) — Akce, Novinka, Dárek, ZDARMA
══════════════════════════════════════════════════════════════════ */

.flag {
    border-radius: 5px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    text-transform: uppercase !important;
    letter-spacing: .03em !important;
}

.flag-action {
    background: #e74c3c !important;
    color: #fff !important;
}

.flag-new {
    background: var(--b) !important;
    color: #fff !important;
}

.flag-gift {
    background: #8b5cf6 !important;
    color: #fff !important;
}

.flag-freeshipping {
    background: var(--g) !important;
    color: #fff !important;
    font-size: 10px !important;
    padding: 3px 7px !important;
    border-radius: 5px !important;
}

.flag-discount .price-save {
    font-size: 11px !important;
    font-weight: 700 !important;
}



/* ══════════════════════════════════════════════════════════════════
   4. ГЛАВНАЯ — заголовки секций
══════════════════════════════════════════════════════════════════ */

.homepage-group-title {
    font-size: 21px !important;
    font-weight: 800 !important;
    color: #1a1a2e !important;
    border-bottom: 2px solid #e8edf2 !important;
    padding-bottom: 10px !important;
    margin-bottom: 16px !important;
    position: relative;
}

.homepage-group-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 44px;
    height: 2px;
    background: var(--c);
    border-radius: 2px;
}


/* ═══════════════════════════════════════════════════════
   БЛОК ПРИВЕТСТВИЯ (PP-BENEFITS) В СТИЛЕ APPLE BENTO
═══════════════════════════════════════════════════════ */

/* 1. Десктопная сетка (4 карточки в один ряд) */
.pp-benefits {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    margin: 40px 0 !important;
}

/* 2. Дизайн самой Bento-карточки */
.pp-benefit {
    background: #fbfbfd !important; /* Фирменный светло-серый фон Apple */
    border: 1px solid #e8edf2 !important;
    border-radius: 20px !important; /* Большие и мягкие скругления */
    padding: 24px 20px !important;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s, background 0.3s !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
}

/* Эффект при наведении (карточка "оживает" и белеет) */
.pp-benefit:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 35px rgba(16, 50, 85, 0.08) !important;
    background: #ffffff !important;
}

/* 3. Оформление текста */
.pp-benefit strong {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #1d1d1f !important; /* Темно-серый цвет заголовков Apple */
    margin-bottom: 8px !important;
    line-height: 1.2 !important;
}

.pp-benefit span {
    font-size: 13px !important;
    color: #86868b !important;
    line-height: 1.5 !important;
}

/* =========================================
   4. МАГИЯ: АВТО-ИКОНКИ (Без картинок)
========================================= */
.pp-benefit::before {
    content: '';
    display: block;
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
    border-radius: 12px;
    -webkit-mask-size: 24px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: 24px;
    mask-repeat: no-repeat;
    mask-position: center;
}

/* Карточка 1: Ověřená zařízení (Зеленый Щит) */
.pp-benefit:nth-child(1)::before {
    background-color: #27ae60 !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}

/* Карточка 2: Rychlé doručení (Оранжевая Молния) */
.pp-benefit:nth-child(2)::before {
    background-color: #f59e0b !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E");
}

/* Карточка 3: Garance a podpora (Голубой Спасательный круг/Поддержка) */
.pp-benefit:nth-child(3)::before {
    background-color: var(--c) !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cline x1='4.93' y1='4.93' x2='9.17' y2='9.17'/%3E%3Cline x1='14.83' y1='14.83' x2='19.07' y2='19.07'/%3E%3Cline x1='14.83' y1='9.17' x2='19.07' y2='4.93'/%3E%3Cline x1='14.83' y1='9.17' x2='18.36' y2='5.64'/%3E%3Cline x1='4.93' y1='19.07' x2='9.17' y2='14.83'/%3E%3C/svg%3E");
}

/* Карточка 4: Trade-in (Фиолетовые Стрелки обмена) */
.pp-benefit:nth-child(4)::before {
    background-color: #8b5cf6 !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='17 1 21 5 17 9'/%3E%3Cpath d='M3 11V9a4 4 0 0 1 4-4h14'/%3E%3Cpolyline points='7 23 3 19 7 15'/%3E%3Cpath d='M21 13v2a4 4 0 0 1-4 4H3'/%3E%3C/svg%3E");
}

/* =========================================
   5. АДАПТАЦИЯ ДЛЯ МОБИЛОК И ПЛАНШЕТОВ
========================================= */
@media (max-width: 991px) {
    .pp-benefits {
        grid-template-columns: repeat(2, 1fr) !important; /* На планшете 2 в ряд */
        gap: 12px !important;
        margin: 24px 0 !important;
    }
    
    .pp-benefit {
        padding: 16px 14px !important;
        border-radius: 16px !important;
    }
    
    .pp-benefit::before {
        width: 36px;
        height: 36px;
        margin-bottom: 12px;
        -webkit-mask-size: 20px;
        mask-size: 20px;
    }
    
    .pp-benefit strong {
        font-size: 14px !important;
    }
    
    .pp-benefit span {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }
}

@media (max-width: 480px) {
    .pp-benefits {
        grid-template-columns: 1fr !important; /* На телефоне 1 в ряд для удобства чтения */
    }
}


/* ═══════════════════════════════════════════════════════
   ФИКС: ПРЕМИАЛЬНЫЙ БЛОК ПРЕИМУЩЕСТВ (Без старых картинок)
═══════════════════════════════════════════════════════ */

/* 1. Прячем уродливые стандартные картинки Shoptet */
.benefitBanner__img {
    display: none !important;
}

/* 2. Делаем обертку для карточек (Flex-сетка) */
.benefitBanner {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 24px 0 !important;
}

/* 3. Дизайн отдельной карточки-преимущества */
.benefitBanner__item {
    flex: 1 1 calc(25% - 16px) !important; /* 4 в ряд на десктопе */
    background: #fff !important;
    border: 1.5px solid #e8edf2 !important;
    border-radius: 16px !important; /* Закругления Apple */
    padding: 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s !important;
    min-width: 220px !important; /* Чтобы на планшете переносились красиво */
}

/* Эффект парения при наведении */
.benefitBanner__item:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--sh) !important;
    border-color: #b8cde0 !important;
}

/* 4. Обертка для нашей новой векторной иконки */
.benefitBanner__picture {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f4f6f9 !important; /* Светло-серый фон */
    border: none !important;
    border-radius: 14px !important; /* Мягкий квадрат */
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    padding: 0 !important;
}

/* 5. Базовый шаблон для SVG-маски (чтобы красилось в твой цвет) */
.benefitBanner__picture::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background-color: var(--b) !important; /* Наш фирменный синий #103255 */
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

/* =========================================
   6. МАГИЯ: ВСТАВЛЯЕМ ВЕКТОРНЫЕ ИКОНКИ КОДОМ
========================================= */

/* Иконка 1: Гарантия (Щит с галочкой) */
.benefitBanner__item:nth-child(1) .benefitBanner__picture::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}

/* Иконка 2: Подарок (Коробка) */
.benefitBanner__item:nth-child(2) .benefitBanner__picture::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 12 20 22 4 22 4 12'/%3E%3Crect x='2' y='7' width='20' height='5'/%3E%3Cline x1='12' y1='22' x2='12' y2='7'/%3E%3Cpath d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z'/%3E%3Cpath d='M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/%3E%3C/svg%3E");
}

/* Иконка 3: 3000 мест (Пин на карте) */
.benefitBanner__item:nth-child(3) .benefitBanner__picture::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

/* Иконка 4: Доставка (Быстрый грузовик) */
.benefitBanner__item:nth-child(4) .benefitBanner__picture::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E");
}

/* 7. Оформление текстов */
.benefitBanner__content {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.benefitBanner__title {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #1a1a2e !important;
}

.benefitBanner__data {
    font-size: 12px !important;
    color: #6b7280 !important;
    line-height: 1.3 !important;
}



/* ══════════════════════════════════════════════════════════════════
   7. СТРАНИЦА ТОВАРА — цена, кнопка, наличие
══════════════════════════════════════════════════════════════════ */

.p-detail-inner .price-final-holder {
    font-size: 32px !important;
    font-weight: 900 !important;
    color: #1a1a2e !important;
    letter-spacing: -.5px !important;
}

.p-detail-inner .price-standard {
    font-size: 15px !important;
    color: #ffffff !important;
    text-decoration: line-through !important;
}

.p-detail-inner .availability span[style*="3c840f"] {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    font-weight: 700 !important;
    font-size: 13px !important;
    color: var(--g) !important;
    background: #edfbf4 !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    border: 1.5px solid #b2f0cf !important;
    margin-bottom: 14px !important;
}

.p-detail-inner .availability span[style*="3c840f"]::before {
    content: "●";
    font-size: 10px;
}


/* ── КНОПКА КУПИТЬ (Страница товара) ── */

.p-detail-inner .add-to-cart {
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: 20px !important;
}

.p-detail-inner .add-to-cart-button {
    height: 54px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    background: var(--b) !important;
    border-radius: var(--r) !important;
    border: none !important;
    letter-spacing: .01em !important;
    transition: background .15s !important;
}

.p-detail-inner .add-to-cart-button:hover {
    background: #0d2844 !important;
}



/* ══════════════════════════════════════════════════════════════════
   8. СТРАНИЦА ТОВАРА — блок подарка
══════════════════════════════════════════════════════════════════ */

.pp-gift {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: linear-gradient(135deg, #fffdf0, #fff8d6);
    border: 2px dashed #f5c842;
    border-radius: var(--r);
    padding: 16px 18px;
    margin: 16px 0;
}

.pp-gift-icon {
    font-size: 30px;
    flex-shrink: 0;
    line-height: 1;
}

.pp-gift-body strong {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: #7a5000;
    margin-bottom: 3px;
}

.pp-gift-body span {
    font-size: 12px;
    color: #9a6800;
    line-height: 1.45;
    display: block;
}



/*    8b. СТРАНИЦА ТОВАРА — блок доверия (pp-trust) */

.pp-trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 14px 0;
}

.pp-trust-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #f7f9fb;
    border: 1px solid #e8edf2;
    border-radius: 10px;
    padding: 11px 13px;
}

.pp-trust-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: #ffffff;
    border: 1px solid #e8edf2;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pp-trust-icon svg {
    width: 16px;
    height: 16px;
    color: #103255;
    stroke: #103255;
}

.pp-trust-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.pp-trust-text strong {
    font-size: 12px;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.3;
}

.pp-trust-text span {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.4;
}

/* На мобилке — одна колонка */
@media (max-width: 480px) {
    .pp-trust {
        grid-template-columns: 1fr;
    }
}



/*    8c. СТРАНИЦА ТОВАРА — кнопки действий (Tisk, Dotaz) */

.link-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px !important;
}

.link-icons a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    background: #f4f6f9;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px !important;
    font-weight: 600;
    color: #374151 !important;
    text-decoration: none !important;
    transition: all .15s;
}

.link-icons a:hover {
    background: var(--b);
    border-color: var(--b);
    color: #fff !important;
}



/* ══════════════════════════════════════════════════════════════════
   ФАЗА 2 — Задачи от Illi
══════════════════════════════════════════ */


/* ── ЗАДАЧА 3: Навбар категорий — крупнее, жирнее, без прыжка ── */

.navigation-in.menu .menu-level-1 > li > a {
    padding: 16px 14px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .02em !important;
    transition: color .15s !important;
}

.navigation-in.menu .menu-level-1 > li > a b {
    font-size: 14px !important;
    font-weight: 700 !important;
}

/* Hover — только смена цвета, без прыжков и подчёркиваний */
.navigation-in.menu .menu-level-1 > li > a:hover {
    color: var(--c) !important;
    background: rgba(255, 255, 255, .1) !important;
}

/* Убираем ::after подчёркивание вызывающее прыжок */
.navigation-in.menu .menu-level-1 > li > a::after {
    display: none !important;
}


/* ── ФИКС 1: Кнопка "Pokračovat" в чекауте — тёмно-синяя ── */

.btn-conversion {
    background: var(--b) !important;
    border-color: var(--b) !important;
    color: #fff !important;
}

.btn-conversion:hover {
    background: #0d2844 !important;
    border-color: #0d2844 !important;
}


/* ── ЗАДАЧА 5а: Выделение выбранной опции доставки/оплаты ── */

.ordering-process li:has(input[type=radio]:checked) {
    border: 2px solid var(--b) !important;
    border-radius: var(--r) !important;
    background: #e6f1fb !important;
}


/* ── ЗАДАЧА 5б: Баннер "Potřebujete pomoc?" — акцентный синий ── */

.helpline-box,
.ordering-process-contact-box {
    background: var(--b) !important;
    color: #fff !important;
    border-radius: var(--r) !important;
    padding: 14px 18px !important;
}

.helpline-box a,
.ordering-process-contact-box a {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}




/* ══════════════════════════════════════════════════════════════════
   ФИКС: Кнопка Menu — работает на всех мобильных разрешениях
══════════════════════════════════════════ */

/* Стилизация .menu-helper (планшет/средняя мобилка) */
@media (max-width: 991px) {
    .menu-helper {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #fff !important;
        border-radius: 10px !important;
        padding: 6px 14px !important;
        cursor: pointer !important;
        border: none !important;
        box-shadow: none !important;
    }

    .menu-helper > span {
        font-size: 13px !important;
        font-weight: 700 !important;
        color: var(--b) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.02em !important;
    }

    /* Скрываем дублированное меню внутри menu-helper */
    .menu-helper > .menu-level-1 {
        display: none !important;
    }
}

/* Стилизация .toggle-window (узкая мобилка <767px) */
@media (max-width: 767px) {
    .toggle-window[data-target="navigation"] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #fff !important;
        border-radius: 10px !important;
        padding: 6px 14px !important;
        max-width: 80px !important;
        overflow: hidden !important;
    }

    .toggle-window[data-target="navigation"] .icon-bar {
        display: none !important;
    }

    .toggle-window[data-target="navigation"]::before {
        content: 'Menu' !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        color: var(--b) !important;
    }
}


/* ── МОБИЛЬНАЯ АДАПТАЦИЯ ── */

@media (max-width: 991px) {
    .site-name a img {
        filter: brightness(0) invert(1);
        max-height: 36px;
    }

    .banners-row .next-to-carousel-banners,
    .banners-row .col-sm-4 {
        display: none !important;
    }

    .banners-row .col-sm-8 {
        width: 100% !important;
        padding: 0 10px !important;
    }

    #carousel,
    .carousel-inner,
    .carousel .item,
    .carousel .item img {
        border-radius: 16px !important;
        overflow: hidden !important;
    }

    .products-block {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .products-block .product {
        width: 100% !important;
        padding: 0 !important;
        float: none !important;
        margin: 0 !important;
    }

    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .pp-benefits {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .p-detail-inner .price-final-holder {
        font-size: 26px !important;
    }
}

@media (max-width: 480px) {
    .products .p-desc {
        display: none !important;
    }

    .pp-gift {
        padding: 12px 14px;
    }

    .pp-gift-icon {
        font-size: 24px;
    }
}




/* Скрытые элементы (pp-hero убран на главной) */

.pp-hero {
    display: none !important;
}


/* ══════════════════════════════════════════════════════════════════
   10. НАВБАР — десктоп (пункты меню, выпадающее меню)
══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════
   ВЫПАДАЮЩЕЕ МЕНЮ — обход JS Shoptet (opacity вместо display:none)
═══════════════════════════════════════════════════════ */
@media (min-width: 992px) {
    /* 1. Снимаем абсолютно все ограничения со всех оберток шапки */
    #header,
    .navigation-wrapper, 
    #navigation,
    .navigation-in,
    .navigation-in ul {
        overflow: visible !important;
    }

    /* 2. Родительский пункт меню - точка отсчета */
    .navigation-in.menu .menu-level-1 > li {
        position: relative !important;
    }

    /* 3. ЖЕСТКО УБИВАЕМ JS-анимацию Shoptet (slideDown) */
    .navigation-in.menu .menu-level-2 {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        z-index: 99999 !important; /* Всегда поверх всего сайта */
        background: #ffffff !important;
        min-width: 260px !important;
        box-shadow: 0 10px 30px rgba(16, 50, 85, 0.12) !important;
        border-radius: 12px !important;
        padding: 12px 0 !important;
        border: 1px solid #e8edf2 !important;
        
        /* Главный фикс против скриптов: мы запрещаем ему сворачиваться */
        display: block !important; 
        height: auto !important; 
        max-height: none !important;
        
        /* Прячем меню через прозрачность, а не через display: none */
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important; /* Чтобы не нажималось пока скрыто */
        transform: translateY(10px) !important; /* Легкий эффект выплывания снизу */
        transition: opacity 0.2s, transform 0.2s, visibility 0.2s !important;
    }

    /* 4. Показываем меню при наведении (Игнорируем классы .exp от Shoptet) */
    .navigation-in.menu .menu-level-1 > li:hover .menu-level-2,
    .navigation-in.menu .menu-level-1 > li.exp .menu-level-2 {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }

    /* 5. Дизайн ссылок внутри */
    .navigation-in.menu .menu-level-2 a.menu-image {
        display: none !important;
    }

    /* 6. Базовый дизайн пунктов меню второго уровня */
    .navigation-in.menu .menu-level-2 > li {
        display: block !important;
        width: 100% !important;
    }

    .navigation-in.menu .menu-level-2 > li > div > a {
        display: block !important;
        padding: 10px 20px !important;
        color: #374151 !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        border: none !important;
        background: transparent !important;
        transition: background 0.15s, color 0.15s !important;
        text-align: left !important;
        text-decoration: none !important;
    }

    /* 7. Hover для пунктов второго уровня */
    .navigation-in.menu .menu-level-2 > li > div > a:hover {
        background: #f4f6f9 !important;
        color: var(--b) !important;
    }

    /* 8. Оформление ТРЕТЬЕГО уровня (подкатегории вроде "iOS", "5G Telefony") */
    .navigation-in.menu .menu-level-3 {
        display: block !important;
        padding: 4px 20px 12px 30px !important; /* Сдвигаем чуть вправо для иерархии */
        margin: 0 !important;
    }

    .navigation-in.menu .menu-level-3 > li {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .navigation-in.menu .menu-level-3 > li > a {
        display: block !important;
        padding: 6px 0 !important;
        color: #6b7280 !important; /* Серый цвет для подкатегорий */
        font-size: 13px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        transition: color 0.15s !important;
    }

    .navigation-in.menu .menu-level-3 > li > a:hover {
        color: var(--c) !important; /* При наведении становятся голубыми */
    }

    /* Убираем запятые, которые Shoptet генерирует между ссылками */
    .navigation-in.menu .menu-level-3 {
        font-size: 0 !important; 
    }
}


/* ═══════════════════════════════════════════════════════
   ВЫПАДАЮЩЕЕ МЕНЮ — резервный блок (display:none подход)
═══════════════════════════════════════════════════════ */
@media (min-width: 992px) {
    /* 1. Отключаем "ножницы", чтобы меню могло выпадать за пределы шапки */
    .navigation-wrapper, 
    .navigation-in {
        overflow: visible !important;
    }

    /* 2. Делаем главные пункты "якорями" для выпадающего списка */
    .navigation-in.menu .menu-level-1 > li {
        position: relative !important;
    }

    /* 3. Жесткая фиксация самого выпадающего меню (Убираем обрезку и прятки за баннером) */
    .navigation-in.menu .menu-level-2 {
        position: absolute !important;
        top: 100% !important; /* Ровно под главным пунктом */
        left: 0 !important;
        z-index: 99999 !important; /* ВСЕГДА ВПЕРЕДИ контента и баннеров */
        background: #ffffff !important;
        min-width: 260px !important; /* Полный размер, чтобы текст не ломался */
        box-shadow: 0 10px 30px rgba(16, 50, 85, 0.12) !important; /* Красивая тень */
        border-radius: 12px !important; /* Скругления Apple */
        padding: 12px 0 !important;
        border: 1px solid #e8edf2 !important;
        display: none !important; /* Скрыто пока нет мышки */
        height: auto !important;
        transform: none !important;
    }

    /* 4. Показываем меню ровно и без анимаций-прыжков при наведении */
    .navigation-in.menu .menu-level-1 > li:hover .menu-level-2 {
        display: block !important;
    }

    /* 5. Фиксируем дизайн ссылок внутри (чтобы не дергались при наведении) */
    .navigation-in.menu .menu-level-2 > li > a {
        display: block !important;
        padding: 10px 20px !important; /* Замороженный отступ */
        color: #374151 !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        border: none !important;
        background: transparent !important;
        transition: background 0.15s, color 0.15s !important;
        text-align: left !important;
    }

    /* 6. Реакция на наведение (Hover) внутри меню */
    .navigation-in.menu .menu-level-2 > li > a:hover {
        background: #f4f6f9 !important; /* Легкий серый фон */
        color: var(--b) !important;     /* Наш фирменный синий */
        font-weight: 700 !important;
        padding: 10px 20px !important;  /* Отступ ТОЧНО такой же, чтобы не было прыжков */
    }
    
    /* Поднимаем ВСЮ шапку над контентом на ВСЕХ страницах */
    #header, .navigation-wrapper {
        position: relative !important;
        z-index: 999999 !important;
    }
}
/* ═══════════════════════════════════════════════════════
   ХЛЕБНЫЕ КРОШКИ — отступы и стиль (ЧТОБЫ НЕ ПРЯТАЛИСЬ ПОД МЕНЮ)
═══════════════════════════════════════════════════════ */
.breadcrumbs {
    margin-top: 20px !important; /* Отталкиваем крошки вниз от синей панели меню */
    margin-bottom: 15px !important; /* Даем воздух снизу перед товарами */
    position: relative !important;
    z-index: 10 !important; /* Вытаскиваем их на видимый слой */
}

/* Заодно делаем их чуть элегантнее (Apple-style) */
.breadcrumbs a, 
.breadcrumbs span {
    font-size: 13px !important;
    color: #6b7280 !important; /* Мягкий серый цвет */
    text-decoration: none !important;
    transition: color 0.15s !important;
}

.breadcrumbs a:hover {
    color: var(--b) !important; /* При наведении становятся фирменным синим */
}

.breadcrumbs .navigation-bullet {
    margin: 0 6px !important;
    color: #cbd5e1 !important; /* Светло-серые разделители */
}
/* ═══════════════════════════════════════════════════════
   11. ПОИСК ДЕСКТОП — поле + кнопка внутри (Эффект "Кнопка внутри")
═══════════════════════════════════════════════════════ */

.search-form fieldset {
    display: flex !important;
    gap: 0 !important;
    width: 100% !important;
    align-items: center !important;
    position: relative !important; /* Важно для наложения слоев */
}

/* 1. ПОЛЕ ВВОДА — теперь полностью круглое */
.search-form .query-input {
    background-color: #f5f5f7 !important;
    border: 1.5px solid transparent !important;
    border-radius: 24px !important; /* ЗАКРУГЛЯЕМ ВСЕ УГЛЫ */
    
    /* Делаем большой отступ справа (80px), чтобы текст не заходил под кнопку */
    padding: 0 90px 0 20px !important; 
    
    height: 44px !important;
    font-size: 15px !important;
    color: #1d1d1f !important;
    box-shadow: none !important;
    transition: all 0.25s ease !important;
    width: 100% !important;
}

/* Эффект фокуса теперь повторяет форму кнопки и не вылезает */
.search-form .query-input:focus {
    background-color: #ffffff !important;
    border-color: var(--c) !important;
    box-shadow: 0 0 0 4px rgba(21, 200, 249, 0.15) !important;
    outline: none !important;
}

/* 2. СИНЯЯ КНОПКА — заезжает внутрь инпута */
.search-form button[type="submit"] {
    background-color: var(--b) !important;
    color: #ffffff !important;
    border-radius: 24px !important; /* Полностью круглая */
    height: 44px !important;
    border: none !important;
    padding: 0 24px !important;
    font-weight: 700 !important;
    
    /* Сдвигаем кнопку влево, чтобы она перекрыла край инпута */
    margin-left: -80px !important; 
    
    position: relative !important;
    z-index: 2 !important; /* Ставим поверх инпута */
    flex-shrink: 0 !important;
}

.search-form button[type="submit"]:hover {
    background-color: var(--c) !important;
}
/* ═══════════════════════════════════════════════════════
   ХЕДЕР — убираем щель между лого и навбаром (ЩЕЛЬ) НАД МЕНЮ
═══════════════════════════════════════════════════════ */

/* Убираем нижние отступы у блока с логотипом и поиском */
.header-top {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

/* Убираем верхние рамки и отступы у самого синего меню */
#navigation {
    margin-top: 0 !important;
    border-top: none !important;
}
/* ═══════════════════════════════════════════════════════
   11b. ПОИСК МОБИЛКА — iOS style капсула — КНОПКА ВНУТРИ ПОЛЯ (iOS Style)
═══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    #header .search {
        background: #103255 !important; 
        padding: 12px 14px !important;
        border-radius: 0 0 20px 20px !important;
        border: none !important;
    }

    /* 1. Контейнер-рамка теперь жестко обрезает всё лишнее по краям */
    .search-form fieldset {
        display: flex !important;
        background-color: #f5f5f7 !important;
        border-radius: 24px !important; /* Общее закругление для всей группы */
        padding: 4px !important; 
        border: none !important;
        overflow: hidden !important; /* КЛЮЧЕВОЙ МОМЕНТ: обрезает эффекты инпута под кнопкой */
    }

    /* 2. Поле ввода — убираем закругления справа и свечение */
    .search-form .query-input {
        background-color: transparent !important;
        height: 48px !important; 
        border: none !important;
        border-radius: 20px 0 0 20px !important; /* Справа углы прямые */
        flex: 1 !important;
        padding: 0 16px !important;
        margin: 0 !important;
        font-size: 15px !important;
        color: #1d1d1f !important;
        box-shadow: none !important; /* Убираем тень, которая вылазит за кнопку */
    }
    
    .search-form .query-input:focus {
        outline: none !important;
        box-shadow: none !important; /* Гарантируем отсутствие свечения */
    }

    /* 3. Кнопка — идеально вписанная в правую часть капсулы */
    .search-form button[type="submit"] {
        background-color: var(--b) !important;
        color: #ffffff !important;
        border-radius: 20px !important; /* Полностью круглая кнопка внутри капсулы */
        height: 48px !important; 
        padding: 0 22px !important;
        font-weight: 700 !important;
        border: none !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
}
/* ═══════════════════════════════════════════════════════
   ПОИСК — выпадающий список (whisperer)
═══════════════════════════════════════════════════════ */

/* Родительский fieldset — разрешаем выпадение за пределы */
.search-form fieldset {
    overflow: visible !important;
    position: relative !important;
}

/* 1. Главная панель */
.search-whisperer.active {
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
    margin-top: 12px !important;
    padding: 10px !important;
    overflow: hidden !important;
}

/* 2. Категории и статьи */
.search-whisperer-document {
    border-radius: 10px !important;
    margin-bottom: 4px !important;
    padding: 8px 12px !important;
    transition: background 0.2s !important;
}

.search-whisperer-document:hover {
    background: rgba(0, 0, 0, 0.04) !important;
    text-decoration: none !important;
}

.search-whisperer-document span {
    font-weight: 600 !important;
    color: #1d1d1f !important;
}

/* 3. Список продуктов */
.search-whisperer-products {
    border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
}

/* 4. Карточка продукта */
.search-whisperer-products li {
    border-radius: 12px !important;
    padding: 8px !important;
    margin-bottom: 6px !important;
    transition: all 0.2s ease !important;
    border: none !important;
}

.search-whisperer-products li:hover {
    background: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    transform: scale(1.02) !important;
}

/* 5. Картинка товара */
.search-whisperer-image {
    background: #f5f5f7 !important;
    border-radius: 8px !important;
    padding: 4px !important;
}

/* 6. Тексты */
.search-whisperer-products .p-name {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1d1d1f !important;
}

.search-whisperer-products .price-final {
    color: var(--b) !important;
    font-weight: 800 !important;
}

/* 7. Кнопка "Показать все результаты" */
.btnShowAllResults,
[data-testid="btnShowAllResults"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f5f5f7 !important;
    color: var(--b) !important;
    padding: 12px !important;
    border-radius: 16px !important;
    text-decoration: none !important;
    margin-top: 10px !important;
    transition: all 0.2s ease !important;
    font-size: 0 !important;
    gap: 6px !important;
    border: 1px solid rgba(0, 0, 0, 0.03) !important;
}

.btnShowAllResults::before {
    content: "" !important;
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    background-color: var(--b) !important;
    box-shadow: 0 6px 0 var(--b), 0 -6px 0 var(--b) !important;
    margin: 6px 0 !important;
    border-radius: 2px !important;
}

.btnShowAllResults::after {
    content: "MENU" !important;
    display: block !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    color: var(--b) !important;
}

.btnShowAllResults:hover {
    background: #e8e8ed !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}
/* Поиск — скролл внутри попапа на мобилке */
.search-whisperer.active {
    max-height: 70vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* ═══════════════════════════════════════════════════════
   КОРЗИНА — выпадающий виджет при hover (десктоп) (ТОЛЬКО ДЛЯ ДЕСКТОПА)
═══════════════════════════════════════════════════════ */

@media (min-width: 992px) {
    /* 1. Снимаем обрезку с шапки, чтобы корзине было куда выпадать */
    #header, .header-top {
        overflow: visible !important;
    }

    /* 2. Родительский блок корзины — якорь для выпадающего окна */
    #cart, .site-name-cart {
        position: relative !important;
    }

    /* 3. Невидимый "мост", чтобы корзина не пропадала, когда ведешь мышку вниз */
    #cart::after, .site-name-cart::after {
        content: '';
        position: absolute;
        bottom: -25px; /* Перекрывает пустое пространство до плашки */
        right: 0;
        width: 100%;
        height: 25px;
        z-index: 999999;
    }

    /* 4. Сама выпадающая плашка корзины */
    .cart-widget, 
    #cart .dropdown-menu {
        position: absolute !important; 
        top: 100% !important; /* Строго вниз */
        right: 0 !important; /* Прижимаем к правому краю шапки */
        left: auto !important;
        z-index: 9999999 !important; /* Выше меню, выше баннеров, выше ВСЕГО */
        
        /* Дизайн */
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-radius: 16px !important;
        box-shadow: 0 20px 40px rgba(0,0,0,0.15) !important;
        border: 1px solid rgba(0,0,0,0.05) !important;
        margin-top: 15px !important;
        min-width: 320px !important; /* Чтобы товары не сжимались в узкую полоску */
        
        /* Подготовка к анимации (прячем по умолчанию) */
        display: block !important; /* Перебиваем JS Shoptet */
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important; /* Чтобы не нажималась сквозь другие элементы */
        transform: translateY(10px) !important; /* Сдвиг вниз для эффекта выплывания */
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s !important;
    }

    /* 5. МАГИЯ: Плавное появление при наведении на иконку ИЛИ на саму корзину */
    #cart:hover .cart-widget,
    #cart:hover .dropdown-menu,
    .site-name-cart:hover .cart-widget {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important; /* Делаем кликабельной */
        transform: translateY(0) !important; /* Выплывает на место */
    }
}

/* ═══════════════════════════════════════════════════════
   НАВБАР — скрываем 3-й уровень на десктопе
═══════════════════════════════════════════════════════ */

@media (min-width: 992px) {
    /* Прячем 3-й уровень только на компьютерах */
    .navigation-in.menu .menu-level-3 {
        display: none !important;
    }

    /* Убираем стрелочки только на компьютерах */
    .navigation-in.menu .menu-level-2 > li.has-third-level > a::after {
        display: none !important;
    }
}

 
 /*  12. КОРЗИНА (košík) — Apple-style дизайн
══════════════════════════════════════════ */

.in-kosik .content-inner {
    padding-top: 40px !important;
}

.in-krok-1 .content-inner,
.in-krok-2 .content-inner {
    padding-top: 40px !important;
}

/* Выравнивание колонок корзины по верху */
.in-kosik .cart-row {
    align-items: flex-start;
}

.in-kosik .sidebar-in-cart {
    position: sticky;
    top: 24px;
}

/* Шаги 1-2-3 — мягче и современнее */
.cart-header {
    background: #f7f9fb !important;
    border-radius: 12px !important;
    padding: 4px 2px !important;
    margin-bottom: 24px !important;
    border: 1px solid #e8edf2 !important;
}

.cart-header .step {
    font-size: 14px !important;
    font-weight: 600 !important;
}

.cart-header .step.active {
    color: var(--b) !important;
}

/* Таблица корзины — убираем жёсткие линии */
.cart-table {
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
}

/* ═══════════════════════════════════════════════════════
   КОРЗИНА — строка товара как капсула с hover (БЕЗ ВНУТРЕННИХ ЛИНИЙ)
═══════════════════════════════════════════════════════ */

/* Сама строка */
.cart-table tr.removeable {
    background: #fff !important;
    transition: box-shadow 0.25s, transform 0.15s !important;
}

/* Общие правила для всех ячеек в строке */
.cart-table tr.removeable td {
    border: none !important; /* Убираем все стандартные линии Shoptet */
    border-top: 1px solid #e8edf2 !important;    /* Верхняя граница капсулы */
    border-bottom: 1px solid #e8edf2 !important; /* Нижня граница капсулы */
    padding: 16px 12px !important;
    background: #fff !important;
}

/* Левый край капсулы (только для первой ячейки) */
.cart-table tr.removeable td:first-child {
    border-left: 1px solid #e8edf2 !important;
    border-radius: 12px 0 0 12px !important;
}

/* Правый край капсулы (только для последней ячейки) */
.cart-table tr.removeable td:last-child {
    border-right: 1px solid #e8edf2 !important;
    border-radius: 0 12px 12px 0 !important;
}

/* Эффект при наведении на всю "капсулу" */
.cart-table tr.removeable:hover {
    box-shadow: 0 6px 24px rgba(16, 50, 85, 0.12) !important;
    transform: translateY(-2px) !important;
}

.cart-table tr.removeable:hover td {
    border-color: #b8cde0 !important;
}

/* Изображение товара в корзине */
.cart-p-image img {
    border-radius: 10px !important;
    border: 1px solid #e8edf2 !important;
}

/* Название товара */
.cart-table .p-name a.main-link {
    font-weight: 600 !important;
    color: #1a1a2e !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    transition: color 0.15s !important;
}
.cart-table .p-name a.main-link:hover {
    color: var(--b) !important;
}

/* Цена — крупнее и жирнее */
.cart-table .price-final {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #1a1a2e !important;
}

/* Количество — скругления */
.cart-table .quantity {
    border-radius: 10px !important;
    border: 1.5px solid #e8edf2 !important;
    overflow: hidden !important;
}

.cart-table .quantity input.amount {
    font-weight: 700 !important;
    font-size: 14px !important;
}

.cart-table .quantity .increase,
.cart-table .quantity .decrease {
    background: #f7f9fb !important;
    border: none !important;
    transition: background 0.15s !important;
}

.cart-table .quantity .increase:hover,
.cart-table .quantity .decrease:hover {
    background: #e8f0f8 !important;
}

/* Кнопка удаления — мягкая */
.cart-table .remove-item {
    opacity: 0.4 !important;
    transition: opacity 0.15s !important;
}

.cart-table tr.removeable:hover .remove-item {
    opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════
   КОРЗИНА ДЕСКТОП — капсула: товар + допродажи склеены
   Только от 992px
═══════════════════════════════════════════════════════ */
@media (min-width: 992px) {

    /* 1. ГЛАВНЫЙ ТОВАР: Убираем нижние скругления, чтобы "склеить" с допродажами */
    .cart-table tr.removeable td {
        border-bottom: none !important; /* Убираем разделитель между ними */
        border-radius: 0 !important;   /* Сбрасываем скругления */
    }
    
    .cart-table tr.removeable td:first-child {
        border-radius: 16px 0 0 0 !important; /* Скругление только сверху-слева */
    }
    
    .cart-table tr.removeable td:last-child {
        border-radius: 0 16px 0 0 !important; /* Скругление только сверху-справа */
    }

    /* 2. СТРОКА ДОПРОДАЖ: Делаем её нижней частью капсулы */
    .cart-table tr.related td[colspan="6"] {
        background: #fff !important;           /* Белый фон как у главной капсулы */
        border-left: 1.5px solid #e8edf2 !important;
        border-right: 1.5px solid #e8edf2 !important;
        border-bottom: 1.5px solid #e8edf2 !important;
        border-radius: 0 0 16px 16px !important; /* Скругляем низ капсулы */
        padding: 0 24px 20px 88px !important;    /* 88px — отступ вправо, чтобы быть под текстом */
        display: flex !important;
        flex-direction: column !important;     /* Товары строго друг под другом */
        gap: 8px !important;
        box-sizing: border-box !important;      /* Фикс вылета по ширине */
        width: 100% !important;
    }

    /* 3. ГОРИЗОНТАЛЬНАЯ ПОЛОСКА ДОПРОДАЖИ */
    .cart-related-product {
        display: flex !important;
        flex-direction: row !important;        /* Строго в ряд */
        align-items: center !important;
        justify-content: space-between !important;
        background: #f8fafc !important;        /* Легкий серый фон для контраста внутри */
        border: 1px solid #edf2f7 !important;
        border-radius: 10px !important;
        padding: 6px 16px !important;
        margin: 0 !important;                  /* Убираем внешние отступы */
        transition: all 0.2s ease !important;
    }

    .cart-related-product:hover {
        background: #f1f5f9 !important;
        border-color: #cbd5e1 !important;
    }

    /* Скрываем лишнее для чистоты */
    .cart-related-img, 
    .cart-related-availability {
        display: none !important;
    }

    /* 4. ТЕКСТ И КНОПКА ВНУТРИ ПОЛОСКИ */
    .cart-related-info {
        flex: 1 !important;
        margin: 0 !important;
    }

    .cart-related-name {
        font-size: 12px !important;            /* Уменьшаем текст */
        font-weight: 600 !important;
        color: #334155 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 450px !important;           /* Чтобы не распирало капсулу */
    }

    .cart-related-button {
        display: flex !important;
        align-items: center !important;
        gap: 20px !important;
        width: auto !important;
    }

    .cart-related-button .price-final {
        font-size: 13px !important;
        font-weight: 700 !important;
    }

    .cart-related-button .btn-conversion {
        height: 30px !important;               /* Совсем компактная кнопка */
        line-height: 30px !important;
        padding: 0 12px !important;
        font-size: 11px !important;
        border-radius: 6px !important;
        min-width: 90px !important;
    }
}

/* ═══════════════════════════════════════════════════════
   13. ОФОРМЛЕНИЕ ЗАКАЗА (krok 1) — капсулы доставки/оплаты + ТЕКСТ ВМЕСТО ТОЧКИ + ЗЕЛЕНАЯ КНОПКА
═══════════════════════════════════════════════════════ */

/* 1. Эффект капсулы */
.in-krok-1 .shipping-billing-table .radio-wrapper {
    background: #fff !important;
    border: 1px solid #e8edf2 !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    margin-bottom: 10px !important;
    display: block !important;
    transition: all 0.2s ease-in-out !important;
    position: relative !important;
}

/* Эффект при наведении и активном состоянии */
.in-krok-1 .shipping-billing-table .radio-wrapper:hover {
    border-color: #b8cde0 !important;
    box-shadow: 0 4px 15px rgba(16, 50, 85, 0.08) !important;
}

.in-krok-1 .shipping-billing-table .radio-wrapper.active {
    border-color: #103255 !important;
    background: #f8fbff !important;
    box-shadow: 0 4px 12px rgba(16, 50, 85, 0.1) !important;
}

/* 2. ПОЛНОСТЬЮ УБИВАЕМ СТАНДАРТНЫЕ КРУЖКИ SHOPTET */
.in-krok-1 .shipping-billing-table .radio-wrapper input[type="radio"],
.in-krok-1 .shipping-billing-table .radio-wrapper label::before,
.in-krok-1 .shipping-billing-table .radio-wrapper label::after {
    display: none !important;
    content: none !important;
}

/* 3. Убираем стандартные отступы Shoptet, которые он делал для кружков */
.in-krok-1 .shipping-billing-table .radio-wrapper label {
    display: block !important;
    width: 100% !important;
    cursor: pointer !important;
    padding: 0 !important; /* Убираем сдвиг влево */
    margin: 0 !important;
    border: none !important;
}

/* 4. Распределяем элементы в строке: Плашка - Текст - Цена */
.in-krok-1 .shipping-billing-table .radio-wrapper .payment-info {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.in-krok-1 .shipping-billing-table .radio-wrapper .payment-shipping-price {
    margin-left: auto !important; /* Отталкиваем цену в самый правый край */
    text-align: right !important;
}

/* 5. СОЗДАЕМ ТЕКСТОВЫЕ ПЛАШКИ (вешаем их на .payment-info) */
.in-krok-1 .shipping-billing-table .radio-wrapper .payment-info::before {
    content: 'Nevybráno';
    display: inline-block !important;
    background: #e2e8f0 !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    margin-right: 15px !important; /* Расстояние от плашки до названия "Kurýr..." */
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important; /* Запрещаем плашке сжиматься */
}

/* Плашка когда вариант ВЫБРАН (активен) */
.in-krok-1 .shipping-billing-table .radio-wrapper.active .payment-info::before {
    content: 'Vybráno' !important;
    background: #103255 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(16, 50, 85, 0.25) !important;
}

/* 6. ЗЕЛЕНАЯ КНОПКА ПОМОЩИ */
.in-krok-1 .toggle-contacts {
    background-color: #22c55e !important;
    border-color: #22c55e !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25) !important;
}

.in-krok-1 .toggle-contacts:hover {
    background-color: #16a34a !important;
    border-color: #16a34a !important;
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.35) !important;
    transform: translateY(-2px) !important;
}

.in-krok-1 .toggle-contacts span {
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 1.1em !important;
} 

/* Мобилка — плашка и текст в ряд */
@media (max-width: 767px) {
    .in-krok-1 .shipping-billing-table .radio-wrapper .payment-info {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }

    .in-krok-1 .shipping-billing-table .radio-wrapper .payment-info .shipping-billing-name {
        white-space: nowrap !important;
    }

    .in-krok-1 .shipping-billing-table .radio-wrapper .payment-info::before {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .in-krok-1 .shipping-billing-table .radio-wrapper .payment-shipping-price {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
}
/* ═══════════════════════════════════════════════════════
   ZDARMA — позиционирование
═══════════════════════════════════════════════════════ */

/* Десктоп — ZDARMA по центру справа */
.in-krok-1 .shipping-billing-table .radio-wrapper label {
    display: flex !important;
    align-items: center !important;
}

.in-krok-1 .shipping-billing-table .radio-wrapper .payment-shipping-price {
    margin-left: auto !important;
    align-self: center !important;
}

/* Мобилка — ZDARMA в правый верхний угол */
@media (max-width: 767px) {
    .in-krok-1 .shipping-billing-table .radio-wrapper label {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        padding-right: 0 !important;
        position: static !important;
    }

    .in-krok-1 .shipping-billing-table .radio-wrapper .payment-info {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        width: auto !important;
    }

    .in-krok-1 .shipping-billing-table .radio-wrapper .payment-info .shipping-billing-name {
        white-space: nowrap !important;
    }

    .in-krok-1 .shipping-billing-table .radio-wrapper .payment-shipping-price {
        grid-column: 2 !important;
        grid-row: 1 !important;
        position: static !important;
        margin-left: 12px !important;
        align-self: center !important;
        white-space: nowrap !important;
    }

    /* Sublabel на второй строке на всю ширину */
    .in-krok-1 .shipping-billing-table .radio-wrapper .sublabel {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        margin-top: 6px !important;
        padding-left: 4px !important;
    }

    /* Скрываем question tooltip на мобилке чтобы не мешал */
    .in-krok-1 .shipping-billing-table .radio-wrapper .show-tooltip.question-tooltip {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════
   "Zvolte odběrné místo" — отступ от знака вопроса
═══════════════════════════════════════════════════════ */
.in-krok-1 .sublabel.personal-collection-choose-branch {
    display: block !important;
    margin-top: 8px !important;
    margin-left: 0 !important;
    padding-left: 4px !important;
}

.in-krok-1 .payment-info .show-tooltip.question-tooltip {
    margin-right: 12px !important;
}

/* Зеленая кнопка для krok-2 */
.in-krok-2 .toggle-contacts {
    background-color: #22c55e !important;
    border-color: #22c55e !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25) !important;
}

.in-krok-2 .toggle-contacts:hover {
    background-color: #16a34a !important;
    border-color: #16a34a !important;
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.35) !important;
    transform: translateY(-2px) !important;
}

.in-krok-2 .toggle-contacts span {
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 1.1em !important;
}
/* ═══════════════════════════════════════════════════════
   14. ХЕДЕР — иконка меню в чекауте (мобилка) (в заказе на мобильных)
═══════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    /* Используем !important, чтобы гарантированно переопределить системный стиль */
    :where(.header-background-dark) .ordering-process .responsive-tools > a[data-target="navigation"]::before,
    :where(.header-background-dark) .ordering-process .responsive-tools > a[data-target="navigation"]:hover::before {
        background-color: #ffffff !important;
    }
}
/* ═══════════════════════════════════════════════════════
   ФИКС: Серый цвет для старой цены и текста скидки
═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   ЦЕНА — старая цена серым цветом в p-final-price-wrapper
═══════════════════════════════════════════════════════ */

.p-final-price-wrapper .price-save > span, 
.p-final-price-wrapper .price-standard > span {
    color: #9ca3af !important; /* Серый цвет */
}
/* ═══════════════════════════════════════════════════════
   КОРЗИНА — связанные товары (upsell блок)
═══════════════════════════════════════════════════════ */

/* Убираем лишние рамки у строки-контейнера */
.cart-table tr.related td {
    padding: 0 12px 16px !important;
    border: none !important;
    background: transparent !important;
}

/* Сетка для связанных товаров (чтобы они не были в одну узкую колонку) */
.cart-table tr.related td[colspan="6"] {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* 2 товара в ряд на десктопе */
    gap: 12px !important;
}

/* Дизайн самой карточки допродажи */
.cart-related-product {
    background: #fdfdfd !important;
    border: 1.5px solid #e8edf2 !important;
    border-radius: 16px !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important; /* Картинка сверху, текст снизу */
    justify-content: space-between !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.cart-related-product:hover {
    border-color: #b8cde0 !important;
    box-shadow: 0 8px 24px rgba(16, 50, 85, 0.08) !important;
    transform: translateY(-2px) !important;
}

/* Верхняя часть карточки (картинка + название + наличие) */
.cart-related-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    margin-bottom: 16px !important;
}

/* Картинка товара */
.cart-related-info .cart-related-img {
    background: #f7f9fb !important;
    border-radius: 12px !important;
    padding: 12px !important;
    margin-bottom: 12px !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

.cart-related-info .cart-related-img img {
    max-width: 80px !important;
    height: auto !important;
    object-fit: contain !important;
    mix-blend-mode: multiply !important;
}

/* Название товара */
.cart-related-name {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
}

.cart-related-name:hover {
    color: var(--b) !important;
}

/* Наличие (Skladem) */
.cart-related-availability span {
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* Нижняя часть карточки (Цена + Кнопка) */
.cart-related-button {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding-top: 12px !important;
    border-top: 1px solid #e8edf2 !important;
}

/* Цена */
.cart-related-button .price-final {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #1a1a2e !important;
    margin: 0 !important;
}

/* Кнопка "В корзину" */
.cart-related-button .btn-conversion {
    background: var(--b) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 8px 16px !important;
    transition: background 0.2s ease !important;
}

.cart-related-button .btn-conversion:hover {
    background: var(--c) !important;
}

/* ── Адаптация для мобилок ── */
@media (max-width: 767px) {
    .cart-table tr.related td[colspan="6"] {
        grid-template-columns: 1fr !important; /* 1 товар в ряд на телефоне */
    }
    
    .cart-related-product {
        flex-direction: row !important; /* Возвращаем горизонтальный вид для экономии места */
        align-items: center !important;
    }
    
    .cart-related-info {
        flex-direction: row !important;
        text-align: left !important;
        margin-bottom: 0 !important;
        flex: 1 !important;
    }
    
    .cart-related-info .cart-related-img {
        width: auto !important;
        margin-right: 12px !important;
        margin-bottom: 0 !important;
        padding: 8px !important;
    }
    
    .cart-related-info .cart-related-img img {
        max-width: 50px !important;
    }
    
    .cart-related-button {
        flex-direction: column !important;
        border-top: none !important;
        padding-top: 0 !important;
        width: auto !important;
        align-items: flex-end !important;
        gap: 8px !important;
    }
}
/* ═══════════════════════════════════════════════════════
   15. МОБИЛКА — benefit banner: сетка 2х2, иконки-пилюли
═══════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    /* 1. Отлепляем карусель от меню бара */
    .banners-row {
        margin-top: 16px !important; 
        margin-bottom: 16px !important;
    }

    /* 2. Убираем лишние пустоты у блока преимуществ */
    .benefitBanner {
        margin: 12px 0 24px 0 !important;
        gap: 12px !important;
    }

    /* 3. Превращаем 4 длинных блока в компактную сетку 2x2 */
    .benefitBanner__item {
        flex: 1 1 calc(50% - 12px) !important; 
        min-width: 130px !important; 
        padding: 20px 10px 16px !important;
        flex-direction: column !important; /* Иконка сверху, текст снизу */
        text-align: center !important;
        gap: 12px !important;
    }

    /* 4. НОВОЕ: Прямоугольный 3D-фон для иконки (Пилюля) */
    .benefitBanner__item .benefitBanner__picture {
        width: 76px !important;      /* Делаем прямоугольным (шире) */
        height: 48px !important;     /* Высота меньше ширины */
        border-radius: 16px !important; /* Мягкие углы Apple */
        background: linear-gradient(135deg, #f4f6f9 0%, #e2e8f0 100%) !important; /* Объемный серый градиент */
        box-shadow: 0 6px 12px rgba(16, 50, 85, 0.06), inset 0 2px 4px rgba(255, 255, 255, 0.9) !important; /* Эффект объема */
        margin-bottom: 2px !important;
        transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }

    /* 5. НОВОЕ: Увеличиваем саму иконку внутри пилюли */
    .benefitBanner__item .benefitBanner__picture::before {
        width: 28px !important;      /* Было 24px, стало крупнее */
        height: 28px !important;
        transition: all 0.3s ease !important;
    }

    /* 6. НОВОЕ: Классный эффект при касании (Тапе) на телефоне */
    .benefitBanner__item:active .benefitBanner__picture {
        transform: translateY(-4px) scale(1.05) !important; /* Подпрыгивает */
        background: linear-gradient(135deg, var(--c) 0%, var(--b) 100%) !important; /* Заливается сине-голубым */
        box-shadow: 0 8px 16px rgba(21, 200, 249, 0.25) !important; /* Голубое свечение */
    }

    .benefitBanner__item:active .benefitBanner__picture::before {
        background-color: #ffffff !important; /* Сама иконка становится белой */
    }

    /* 7. Центрируем контент внутри карточки */
    .benefitBanner__content {
        align-items: center !important;
        gap: 4px !important;
    }

    /* 8. Аккуратные шрифты для телефона */
    .benefitBanner__title {
        font-size: 13px !important;
        line-height: 1.25 !important;
    }

    .benefitBanner__data {
        font-size: 11px !important;
    }
}
/* КОРЗИНА МОБИЛКА — капсульная карточка товара */
/* ═══════════════════════════════════════════════════════
   ФИКС КОРЗИНЫ (МОБИЛКА): ФОТО И НАЗВАНИЕ В ОДИН РЯД
═══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* 1. Делаем капсулу товара FLEX-контейнером */
    .cart-table tr.removeable {
        display: flex !important;
        flex-wrap: wrap !important; /* Разрешаем элементам падать на новые строки */
        align-items: flex-start !important;
        position: relative !important;
        padding: 16px !important;
        border: 1.5px solid #e8edf2 !important;
        border-radius: 16px !important;
        margin-bottom: 16px !important;
    }

    /* Сбрасываем стили ячеек */
    .cart-table tr.removeable td {
        display: block !important;
        border: none !important;
        padding: 0 !important;
        text-align: left !important;
    }

    /* 2. КАРТИНКА (строго слева, фиксированная ширина) */
    .cart-table tr.removeable td.cart-p-image {
        width: 80px !important;
        flex-shrink: 0 !important; /* Запрещаем картинке сжиматься */
        margin-right: 16px !important; /* Воздух между фото и текстом */
        margin-bottom: 16px !important;
        float: none !important; /* Убиваем старый глючный флоат */
    }

    /* 3. НАЗВАНИЕ ТОВАРА (занимает всё свободное место справа от картинки) */
    .cart-table tr.removeable td.p-name {
        flex: 1 !important; /* Магия: растягиваем на весь остаток ширины */
        width: auto !important;
        min-width: 0 !important; /* КРИТИЧНО: позволяет длинному тексту переноситься, а не ломать контейнер */
        margin: 0 !important;
        padding-right: 32px !important; /* Запас места под крестик удаления */
        margin-bottom: 16px !important;
    }

    /* Настройка самого текста внутри (переносы) */
    .cart-table .p-name a.main-link {
        display: block !important;
        word-wrap: break-word !important;
        word-break: break-word !important; /* Принудительно ломаем длиннющие слова без пробелов */
        white-space: normal !important;
        line-height: 1.4 !important;
    }

    /* 4. КРЕСТИК УДАЛЕНИЯ (прибит в правый верхний угол) */
    .cart-table tr.removeable td.p-total form.inline {
        position: absolute !important;
        top: 16px !important;
        right: 16px !important;
        margin: 0 !important;
        z-index: 10 !important;
    }

    /* 5. Остальные элементы (цена, количество) падают на 100% ширины под фото и текст */
    .cart-table tr.removeable td.p-availability,
    .cart-table tr.removeable td.p-quantity,
    .cart-table tr.removeable td.p-price,
    .cart-table tr.removeable td.p-total {
        width: 100% !important; /* Принудительно на новую строку */
        /* Твои предыдущие flex-настройки (выравнивание вправо и т.д.) продолжают работать здесь */
    }
}/* ═══════════════════════════════════════════════════════
   ДЕСТОП-ФИКС: ЕДИНАЯ КАПСУЛА + ДОПРОДАЖИ (ОБНОВЛЕНО)
═══════════════════════════════════════════════════════ */
@media (min-width: 992px) {

    /* 1. ЖЕСТКАЯ ФИКСАЦИЯ ТАБЛИЦЫ */
    .cart-table {
        table-layout: fixed !important;
        width: 100% !important;
        border-collapse: separate !important;
        border-spacing: 0 16px !important; 
    }

    /* 2. ГЛАВНЫЙ ТОВАР: Открываем низ */
    .cart-table tr.removeable td {
        border-bottom: none !important;
        border-radius: 0 !important;
    }
    .cart-table tr.removeable td:first-child {
        border-radius: 16px 0 0 0 !important;
    }
    .cart-table tr.removeable td:last-child {
        border-radius: 0 16px 0 0 !important;
    }
    .cart-table tr.removeable:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* 3. КНОПКА ОТКРЫТИЯ/ЗАКРЫТИЯ (Для JS) */
    .cart-table .show-related {
        display: inline-block !important;
        font-size: 12px !important;
        color: var(--b) !important;
        background: #e8f0f8 !important;
        padding: 4px 14px !important;
        border-radius: 20px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        margin-top: 6px !important;
        transition: background 0.15s !important;
        cursor: pointer !important;        
        pointer-events: auto !important;   
    }
    .cart-table .show-related:hover {
        background: #d0e2f3 !important;
    }
    /* ═══════════════════════════════════════════════════════
       ЛОГИКА ОТКРЫТИЯ И ЗАКРЫТИЯ (Связано с нашим JS) 
    ═══════════════════════════════════════════════════════ */
    .cart-table tr.related {
        display: none !important; /* По умолчанию скрыто */
    }
    
    .cart-table tr.related.prime-open {
        display: table-row !important; /* Открывается, когда JS добавляет класс */
    }

    /* 4. ОБОЛОЧКА ДОПРОДАЖ */
    .cart-table tr.related td[colspan="6"] {
        display: table-cell !important;
        background: #fff !important;
        border-left: 1.5px solid #e8edf2 !important;
        border-right: 1.5px solid #e8edf2 !important;
        border-bottom: 1.5px solid #e8edf2 !important;
        border-radius: 0 0 16px 16px !important;
        padding: 0 20px 16px 88px !important; 
        box-sizing: border-box !important;
    }

    /* 5. ПОЛОСКИ ДОПРОДАЖ (Фикс: убрана жесткая высота, увеличены отступы) */
    .cart-related-product {
        display: flex !important;
        flex-direction: row !important; 
        align-items: center !important;
        justify-content: space-between !important;
        background: #f8fafc !important;
        border: 1px solid #edf2f7 !important;
        border-radius: 8px !important;  
        padding: 8px 14px !important;   /* Внутренний воздух, чтобы кнопка и цена не торчали */
        margin-bottom: 6px !important;  
        width: 100% !important;
        min-height: 52px !important;    /* Мягкое ограничение высоты */
        box-sizing: border-box !important;
        transition: background 0.2s, border-color 0.2s !important;
    }
    
    .cart-related-product:last-child {
        margin-bottom: 0 !important;
    }

    .cart-related-product:hover {
        background: #f1f5f9 !important;
        border-color: #cbd5e1 !important;
    }

    /* 6. ФОТКА (Сделали крупнее, чтобы было видно) */
    .cart-related-img {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 50px !important;         /* Увеличили с 24px до 36px */
        height: 50px !important;
        margin-right: 14px !important;
        background: #fff !important;
        border-radius: 6px !important;
        border: 1px solid #f4f6f9 !important;
        flex-shrink: 0 !important;
    }

    .cart-related-img img {
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
    }

    .cart-related-availability {
        display: none !important;
    }

    /* 7. НАЗВАНИЕ ТОВАРА */
    .cart-related-info {
        flex: 1 !important;
        display: flex !important;
        flex-direction: row !important; 
        align-items: center !important;
        min-width: 0 !important; 
    }

    .cart-related-name {
        font-size: 12px !important;     /* Чуть-чуть увеличили текст */
        font-weight: 500 !important;
        color: #334155 !important;
        text-decoration: none !important;
        white-space: nowrap !important; 
        overflow: hidden !important;
        text-overflow: ellipsis !important; 
        display: block !important;
        flex: 1 !important; 
    }

    /* 8. БЛОК ЦЕНА + КНОПКА (Фикс вылета) */
    .cart-related-button {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 16px !important; 
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        flex-shrink: 0 !important;
    }

    .cart-related-button .price-final {
        font-size: 13px !important; 
        font-weight: 700 !important;
        color: #1a1a2e !important;
        margin: 0 !important;
        line-height: 1 !important;      /* Чтобы системные отступы шрифта не ломали высоту */
    }

    /* 9. КНОПКА "DO KOŠÍKU" (Сделали пропорционально) */
    .cart-related-button .btn-conversion {
        height: 28px !important;        /* Нормальная высота */
        line-height: 28px !important;
        padding: 0 12px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        border-radius: 6px !important;
        min-width: 80px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.02em !important;
        background: #e8f0f8 !important;
        color: var(--b) !important;
        border: none !important;
        margin: 0 !important;
    }
    
    .cart-related-button .btn-conversion:hover {
        background: var(--b) !important;
        color: #fff !important;
    }

    .cart-related-button form {
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
    }
}
/* ═══════════════════════════════════════════════════════


/* ══════════════════════════════════════════════════════════════════
   9. СТРАНИЦА ТОВАРА — детали
      (бейдж нового/б.у., типографика, вкладки, правая панель)
══════════════════════════════════════════════════════════════════ */
 /*  9a. Бейдж состояния — "Nové" / "Použité" с tooltip гарантии
═══════════════════════════════════════════════════════ */
.p-detail-inner-header {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
}

/* Сам квадратный бейдж */
.prime-condition-badge {
    position: relative !important;
    background: var(--b) !important; /* Твой фирменный синий */
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 6px 14px !important;
    border-radius: 6px !important; /* Аккуратный почти квадрат */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: help !important; /* Курсор с вопросиком */
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    box-shadow: 0 4px 12px rgba(16, 50, 85, 0.15) !important;
    z-index: 10 !important;
}

.prime-condition-badge:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(16, 50, 85, 0.25) !important;
}

/* Всплывашка гарантии (Tooltip) */
.prime-warranty-tooltip {
    position: absolute !important;
    bottom: 130% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(10px) !important;
    background: #1a1a2e !important;
    color: #fff !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1) !important;
    pointer-events: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Хвостик всплывашки */
.prime-warranty-tooltip::after {
    content: '' !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    margin-left: -5px !important;
    border-width: 5px !important;
    border-style: solid !important;
    border-color: #1a1a2e transparent transparent transparent !important;
}

/* Показываем всплывашку при наведении */
.prime-condition-badge:hover .prime-warranty-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
}

/* ═══════════════════════════════════════════════════════
   9b. Типографика — заголовок, цена, убираем системные рамки
═══════════════════════════════════════════════════════ */
/* Убиваем все системные серые линии, рамки и фоны */
.product-desc-top-line, 
.product-desc-bottom-line, 
.p-detail-info,
.add-to-cart-wrapper,
.p-detail-inner .box {
    border: none !important;
    background: transparent !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-shadow: none !important;
}

/* Заголовок товара - мощный и современный */
.p-detail-inner-header h1 {
    font-size: 26px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    color: #1a1a2e !important;
    margin: 0 !important;
}

/* Цена - самый крупный акцент на странице */
.p-final-price-wrapper .price-final-holder {
    font-size: 38px !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
    color: #1a1a2e !important;
    display: block !important;
    margin-bottom: 4px !important;
}

/* Скрываем системную таблицу гарантии (инфа теперь в бейдже) */
.zaruka-wrap {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════
   9c. Вкладки товара — Popis/Podobné/Diskuze (Apple text style)
═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   9d. Правая панель — серый фон, скругления, воздух
═══════════════════════════════════════════════════════ */

/* 1. Превращаем всю правую колонку в единый блок с фирменным фоном */
.p-detail-inner .p-info-wrapper {
    background: #f7f9fb !important;
    border-radius: 24px !important;
    padding: 32px !important;
    border: 1px solid #e8edf2 !important; /* Тонкая рамка для четкости */
    box-shadow: none !important;
    position: relative !important;
}

/* 2. БЕЙДЖ СОСТОЯНИЯ (Отодвигаем его от заголовка) */
.p-detail-inner-header .prime-condition-badge {
    margin-bottom: 16px !important; /* Чтобы он не прилипал к названию H1 */
    align-self: flex-start !important; /* Прижимаем к левому краю */
}

/* ═══════════════════════════════════════════════════════
   9e. Блок доверия (pp-trust) внутри правой панели
═══════════════════════════════════════════════════════ */

/* 3. Оформляем блок доверия как вложенную белую карточку */
.p-detail-inner .pp-trust {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 24px !important;
    margin: 24px 0 32px 0 !important; /* Отступы сверху и снизу */
    border: 1px solid #e8edf2 !important;
    box-shadow: 0 4px 12px rgba(16, 50, 85, 0.02) !important; /* Едва заметная тень для глубины */
}

/* 4. Настраиваем список внутри блока */
.p-detail-inner .pp-trust ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important; /* Воздух между пунктами */
}

/* 5. Дизайн каждого пункта (строки) */
.p-detail-inner .pp-trust li {
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: #475569 !important; /* Мягкий серый цвет текста */
    display: flex !important;
    align-items: flex-start !important; 
    gap: 12px !important; /* Расстояние от галочки до текста */
}

/* 6. Зеленая галочка (✔) */
.p-detail-inner .pp-trust li b {
    color: #22c55e !important; /* Ярко-зеленый цвет успеха */
    font-size: 14px !important;
    margin-top: 2px !important; /* Идеальное выравнивание с первой строкой текста */
    display: inline-block !important;
    flex-shrink: 0 !important; /* Чтобы галочка не сжималась, если текст длинный */
}

/* 7. Жирный текст внутри преимуществ */
.p-detail-inner .pp-trust li strong {
    color: #1a1a2e !important;
    font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════
   АДАПТАЦИЯ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ
═══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* На телефонах делаем отступы меньше, чтобы сэкономить место */
    .p-detail-inner .p-info-wrapper {
        padding: 20px !important;
        border-radius: 16px !important;
        margin-top: 16px !important;
    }
    
    .p-detail-inner .pp-trust {
        padding: 16px !important;
        border-radius: 12px !important;
    }
    
    .p-detail-inner .pp-trust li {
        font-size: 13px !important;
    }
}
/* ═══════════════════════════════════════════════════════
   ВЕРТИКАЛЬНАЯ КАПСУЛА КОЛИЧЕСТВА (ЛОГИКА DEVTOOLS + СТИЛЬ)
═══════════════════════════════════════════════════════ */

/* 1. Отклеиваем блок от кнопки "В корзину" */
.p-detail-inner .add-to-cart {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important; 
    align-items: center !important;
}

/* 2. ГЛАВНАЯ КАПСУЛА (По совету DevTools: display: flex) */
.p-detail-inner .quantity {
    display: flex !important;
    flex-direction: column !important; /* Направляем сверху вниз */
    flex-wrap: wrap !important; /* МАГИЯ: Заставляем элементы переноситься в новую колонку */
    width: 120px !important; /* Как просил DevTools */
    height: 52px !important; /* Как просил DevTools */
    background-color: #ffffff !important;
    border: 1.5px solid #e8edf2 !important; 
    border-radius: 26px !important; /* Оставляем наши красивые закругления */
    overflow: hidden !important; /* Срезаем углы у кнопок */
    box-sizing: border-box !important;
    padding: 0 !important; 
    position: relative !important;
}

/* 3. УБИВАЕМ ТУЛТИПЫ (Чтобы не ломали Flexbox) */
.p-detail-inner .quantity .increase-tooltip,
.p-detail-inner .quantity .decrease-tooltip {
    display: none !important;
}

/* 4. ПОЛЕ С ЦИФРОЙ (Левая колонка) */
.p-detail-inner .quantity label {
    width: calc(100% - 36px) !important; /* Оставляем 36px для кнопок */
    height: 100% !important; /* Занимает всю высоту 52px */
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
}

.p-detail-inner .quantity input.amount {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    border: none !important;
    text-align: center !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #1a1a2e !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    -moz-appearance: textfield !important;
}

.p-detail-inner .quantity input.amount:focus {
    outline: none !important;
    background: #f8fbff !important;
}

.p-detail-inner .quantity input.amount::-webkit-outer-spin-button,
.p-detail-inner .quantity input.amount::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* 5. КНОПКИ ПЛЮС И МИНУС (Правая колонка) */
.p-detail-inner .quantity .increase,
.p-detail-inner .quantity .decrease {
    position: static !important; /* СНИМАЕМ ABSOLUTE (Как сказал DevTools) */
    width: 36px !important; /* Ширина правой колонки */
    height: 50% !important; /* Ровно половина высоты по совету DevTools */
    background: #f4f6f9 !important; 
    border: none !important;
    border-left: 1.5px solid #e8edf2 !important; 
    border-radius: 0 !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: background 0.15s !important;
}

.p-detail-inner .quantity .increase {
    border-bottom: 1px solid #e8edf2 !important; 
}

.p-detail-inner .quantity .increase:active,
.p-detail-inner .quantity .decrease:active {
    background: #e2e8f0 !important;
}

/* 6. УБИВАЕМ СТАРЫЕ ИКОНКИ SHOPTET */
.p-detail-inner .quantity .increase__sign, 
.p-detail-inner .quantity .decrease__sign,
.p-detail-inner .quantity .increase::before, 
.p-detail-inner .quantity .decrease::before {
    display: none !important;
    content: none !important;
}

/* 7. РИСУЕМ НАШИ ГЕОМЕТРИЧЕСКИЕ ТРЕУГОЛЬНИКИ */
.p-detail-inner .quantity .increase::after {
    content: '' !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 5px solid transparent !important;
    border-right: 5px solid transparent !important;
    border-bottom: 7px solid var(--b) !important; 
    transition: transform 0.15s ease !important;
    pointer-events: none !important; 
}

.p-detail-inner .quantity .decrease::after {
    content: '' !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 5px solid transparent !important;
    border-right: 5px solid transparent !important;
    border-top: 7px solid var(--b) !important; 
    transition: transform 0.15s ease !important;
    pointer-events: none !important; 
}

.p-detail-inner .quantity .increase:active::after {
    transform: translateY(-1px) !important;
}
.p-detail-inner .quantity .decrease:active::after {
    transform: translateY(1px) !important;
}

/* 8. КНОПКА "В КОРЗИНУ" */
.p-detail-inner .add-to-cart-button {
    flex: 1 !important; 
    min-width: 150px !important;
    margin: 0 !important; 
    height: 52px !important; 
}
.p-gift {
    background-color: #ffffff !important;
    border: 1px solid #e1e1e1 !important;
    border-radius: 12px !important;
    padding: 15px !important;
    margin-top: 10px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    display: flex !important;
    align-items: center !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* Эффект при наведении на подарок */
.p-gift:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1) !important;
}

.p-gift-name {
    margin-left: 15px !important;
    font-weight: 600 !important;
    color: #1a1a2e !important;
}


/* Контейнер аккордеона */
.apple-accordion-container {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  border-top: 1px solid #d2d2d7;
  margin: 20px 0;
  width: 100%;
}

.apple-accordion-item {
  border-bottom: 1px solid #d2d2d7;
  background: #fff;
}

/* Заголовок (кнопка) */
.apple-accordion-header {
  width: 100%;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 19px;
  font-weight: 600;
  color: #1d1d1f;
  text-align: left;
  transition: color 0.3s ease;
  outline: none;
}

.apple-accordion-header:hover {
  color: #0066cc;
}

/* Иконка Плюс/Крестик */
.apple-accordion-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  margin-right: 10px;
}

.apple-accordion-icon::before,
.apple-accordion-icon::after {
  content: '';
  position: absolute;
  background-color: #86868b;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.apple-accordion-icon::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

.apple-accordion-icon::after {
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}

.apple-accordion-item.is-open .apple-accordion-icon {
  transform: rotate(45deg);
}

/* Контент — анимация через JS-высоту, не max-height: 3000px */
.apple-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

/* padding переехал на inner чтобы не ломал анимацию */
.apple-accordion-inner {
  padding-bottom: 24px;
  font-size: 17px;
  line-height: 1.6;
  color: #424245;
}

/* Скрываем старые табы Shoptet */
#p-detail-tabs,
.tab-content,
.shp-tabs-holder > ul,
.navigation-btn,
.hidden-links {
  display: none !important;
}

/* Делаем основной контейнер табов белым */
.shp-tabs-holder {
    background-color: #ffffff !important;
}

/* Убеждаемся, что вся строка с табами тоже белая */
.shp-tabs-row {
    background-color: #ffffff !important;
}

/* Сами элементы аккордеона */
.apple-accordion-item {
    background-color: #ffffff !important;
}
/* Основной стиль кнопки */
a.btn.btn-default[data-testid="buttonBackToShop"] {
    /* Стеклянный эффект (как в вашем коде) */
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    
    /* Рамка и скругление */
    border-radius: 12px !important; /* Чуть меньше, чем у списка, для лучшего вида */
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    
    /* Тень и текст */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
    color: #333 !important; /* Темный текст для читаемости на светлом фоне */
    font-weight: 500 !important;
    text-transform: none !important;
    
    /* Размеры и отступы */
    padding: 12px 24px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

/* Эффект при наведении */
a.btn.btn-default[data-testid="buttonBackToShop"]:hover {
    background: rgba(255, 255, 255, 1) !important; /* Становится белее */
    transform: translateY(-2px) !important;      /* Слегка приподнимается */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2) !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
}

/* Эффект при нажатии */
a.btn.btn-default[data-testid="buttonBackToShop"]:active {
    transform: translateY(0px) !important;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1) !important;
}/* Основной стиль кнопки */
a.btn.btn-default[data-testid="buttonBackToShop"] {
    /* Стеклянный эффект (как в вашем коде) */
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    
    /* Рамка и скругление */
    border-radius: 12px !important; /* Чуть меньше, чем у списка, для лучшего вида */
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    
    /* Тень и текст */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
    color: #333 !important; /* Темный текст для читаемости на светлом фоне */
    font-weight: 500 !important;
    text-transform: none !important;
    
    /* Размеры и отступы */
    padding: 12px 24px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

/* Эффект при наведении */
a.btn.btn-default[data-testid="buttonBackToShop"]:hover {
    background: rgba(255, 255, 255, 1) !important; /* Становится белее */
    transform: translateY(-2px) !important;      /* Слегка приподнимается */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2) !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
}

/* Эффект при нажатии */
a.btn.btn-default[data-testid="buttonBackToShop"]:active {
    transform: translateY(0px) !important;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1) !important;
}