/* ============================================================
   Bishofit Recs — блок «Разом з товаром купують» на картці товару.

   ОФОРМЛЕННЯ (погоджене з власником, редакція 3).
   Раніше вся секція була залита зеленим — на картці товару це
   виявилось забагато кольору, блок «навантажував око». Тепер
   фірмовий градієнт лишився ТІЛЬКИ в шапці: він і далі показує,
   що це окрема секція, а самі товари стоять на білому, як у
   великих магазинах. Кольором працюють ціна, бейдж і кнопка —
   тобто саме те, на що покупець має дивитись.

   • шапка — фірмовий зелений градієнт (як герої сторінок);
   • тіло — біле, товари розділені волосяними лініями;
   • ціна як у картці товару: нова, перекреслена стара, бейдж;
   • кнопка «Купити» з рідною іконкою кошика сайту;
   • мобільний — карусель в один товар зі стрілками й крапками.

   Всі селектори під префіксом .bshrec — верстку теми не чіпаємо.
   ============================================================ */

/* overflow: hidden тут НЕМАЄ навмисно: воно обрізало б тінь картки
   при наведенні по краях блока. Заокруглення шапки задане їй самій. */
.bshrec {
    border: 1px solid #E4EBD8;
    border-radius: 14px;
    background: #fff;
    /* Верхній відступ нульовий: блок купівлі-доставки над нами має
       власний нижній, і два разом давали завелику дірку. */
    margin: 0 0 20px;
}

/* ---------- Шапка ---------- */

.bshrec__head {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 13px 13px 0 0;   /* 14px мінус рамка блока */
    background: linear-gradient(135deg, #274D1B 0%, #3E6B1E 55%, #6A9D13 100%);
}

/* Декоративні кола — той самий прийом, що в героях сторінок.
   Тепер вони живуть у шапці, бо тіло блока біле. */
.bshrec__head::before,
.bshrec__head::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(255, 255, 255, .08);
}

.bshrec__head::before { width: 160px; height: 160px; right: -40px; top: -110px; }
.bshrec__head::after  { width: 110px; height: 110px; right: 120px; bottom: -80px; background: rgba(255, 255, 255, .06); }

/* Іконка перед заголовком: у світлому квадраті, щоб читалась і на
   темному краї градієнта, і на світлому. */
.bshrec__ico {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.bshrec__ico svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bshrec__ico svg.bshrec__ico--solid { fill: currentColor; stroke: none; }

.bshrec__title {
    position: relative;
    z-index: 1;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: .2px;
    color: #fff !important;
}

.bshrec__auto {
    position: relative;
    z-index: 1;
    flex: 1;
    text-align: right;
    font-size: 11.5px;
    color: rgba(255, 255, 255, .75);
}

/* ---------- Стрілки каруселі (тільки мобільний) ---------- */

.bshrec__nav { display: none; }

.bshrec__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid rgba(255, 255, 255, .4) !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .14) !important;
    color: #fff !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.bshrec__arrow:active { background: rgba(255, 255, 255, .3) !important; }

.bshrec__arrow svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Сітка товарів ---------- */

.bshrec__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

/* Картка — не посилання, а контейнер: усередині і посилання-накладка,
   і форма додавання в кошик (форму не можна вкладати в <a>).
   Рамок і тіней немає: товари розділені волосяною лінією, цього
   досить, а зайві контури і були половиною тієї «важкості». */
.bshrec__card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
    background: #fff;
    border-radius: 10px;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.bshrec__card + .bshrec__card { border-left: 1px solid #EAEEE4; }

/* ---------- Наведення (десктоп) ----------

   Раніше картка просто міняла колір фону — на великому екрані це
   виглядало як підсвічений прямокутник, а не як «жива» картка.
   Тепер чотири маленькі рухи разом: картка підводиться на 3px і
   отримує м'яку тінь, фото наближається у своїй рамці, назва
   зеленіє, кнопка темнішає. Кожен окремо майже непомітний — саме
   тому разом вони не виглядають атракціоном.

   Умова (hover: hover) обов'язкова: на тач-екранах наведення не
   існує, і без неї ефект «залипав» би на картці після дотику,
   поки покупець не тицьне кудись іще. */
@media (hover: hover) and (pointer: fine) {
    .bshrec__card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 22px rgba(34, 48, 27, .13);
        border-left-color: transparent;
        z-index: 2;
    }

    .bshrec__card:hover .bshrec__img img,
    .bshrec__card:hover .bshrec__pic { transform: scale(1.1); }

    .bshrec__card:hover .bshrec__name { color: #3E6B1E; }

    .bshrec__card:hover .bshrec__buy {
        background: #4E7E0E !important;
        transform: translateY(-1px);
    }
}

/* Хто вимкнув анімацію в системі (а це часто люди, яким від руху
   на екрані стає зле) — той бачить статичну картку. */
@media (prefers-reduced-motion: reduce) {
    .bshrec__card,
    .bshrec__card .bshrec__img img,
    .bshrec__card .bshrec__pic,
    .bshrec__card .bshrec__name,
    .bshrec__card .bshrec__buy { transition: none !important; }

    .bshrec__card:hover,
    .bshrec__card:hover .bshrec__img img,
    .bshrec__card:hover .bshrec__pic,
    .bshrec__card:hover .bshrec__buy { transform: none !important; }
}

/* Посилання-накладка: клікабельна вся картка, крім кнопки */
.bshrec__link {
    position: absolute;
    inset: 0;
    z-index: 1;
    text-indent: -9999px;
    overflow: hidden;
    border: 0 !important;
}

.bshrec__img {
    flex: 0 0 70px;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;      /* щоб зум при наведенні не вилазив за рамку */
    border-radius: 8px;
}

.bshrec__img img,
.bshrec__pic {
    max-width: 70px !important;
    max-height: 70px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}

.bshrec__body { flex: 1; min-width: 0; }

.bshrec__name {
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.35;
    color: #22301B;
    margin-bottom: 9px;
    transition: color .2s ease;
}

/* ---------- Ціни й кнопка ---------- */

/* Кнопка стоїть праворуч від ціни. Місця вистачає: контент картки
   товару на цьому сайті ~1360px, тобто колонка виходить ~430px —
   міряно на живій сторінці, а не «на око». */
.bshrec__row {
    position: relative;
    z-index: 2;             /* вище за посилання-накладку */
    display: flex;
    align-items: center;
    gap: 12px;
}

.bshrec__prices {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    pointer-events: none;   /* клік по цінах веде на товар */
}

.bshrec__now { font-size: 17px; font-weight: 800; line-height: 1; color: #22301B; }
.bshrec__now--sale { color: #D82C2F; }
.bshrec__old { font-size: 12.5px; color: #AEB6A4; text-decoration: line-through; }

.bshrec__badge {
    background: linear-gradient(135deg, #F0433F, #C21F3A);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    padding: 4px 7px;
    border-radius: 7px;
}

.bshrec__form { flex: 0 0 auto; margin: 0 !important; }

.bshrec__buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #5E9412 !important;
    color: #fff !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    padding: 9px 15px !important;
    border-radius: 9px !important;
    border: 0 !important;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none !important;
    transition: background .2s ease, transform .2s ease;
}

.bshrec__buy:hover { background: #4E7E0E !important; color: #fff !important; }

/* Іконка кошика. Обгортка .bfcv2-buy-icon навмисна: модуль
   bishofit_category перемальовує саме такі іконки під вибраний
   у налаштуваннях стиль (bshico-cartN) — тож іконка в блоці
   завжди збігатиметься з рештою сайту. Вбудований шлях — cart1,
   він і лишиться, якщо той модуль вимкнено. */
.bshrec__buy .bfcv2-buy-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

.bshrec__buy svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Крапки-індикатор (тільки мобільний) ---------- */

.bshrec__dots { display: none; }

.bshrec__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #D8E1CB;
    transition: width .2s ease, background .2s ease;
}

.bshrec__dot.is-active {
    width: 18px;
    border-radius: 3px;
    background: #5E9412;
}

/* ---------- Мобільний ---------- */

@media (max-width: 767px) {
    /* Відступ зверху потрібен саме тут: на мобільному блок іде одразу
       за таблицею характеристик, і без нього вони злипались. */
    .bshrec { margin: 18px 0 16px; border-radius: 12px; }

    .bshrec__head { padding: 10px 12px; }
    .bshrec__title { font-size: 15px !important; }
    .bshrec__auto { display: none; }

    .bshrec__nav {
        display: flex;
        gap: 8px;
        margin-left: auto;
        position: relative;
        z-index: 1;
    }

    /* КАРУСЕЛЬ. Замість сітки — горизонтальна стрічка з прилипанням:
       браузер сам довертає картку до краю, гортання пальцем нативне.
       Смугу прокрутки ховаємо — її роль виконують крапки. */
    .bshrec__grid {
        display: flex;
        grid-template-columns: none;
        gap: 0;
        padding: 4px 0 0;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .bshrec__grid::-webkit-scrollbar { display: none; }

    .bshrec__card {
        flex: 0 0 100%;
        box-sizing: border-box;
        scroll-snap-align: start;
        align-items: center;
        padding: 10px 12px 12px;
    }

    /* У стрічці кожна картка — окремий «слайд», лінія між ними
       не потрібна: сусіда все одно не видно. */
    .bshrec__card + .bshrec__card { border-left: 0; }

    .bshrec__img { flex-basis: 56px; width: 56px; height: 56px; }
    .bshrec__img img, .bshrec__pic { max-width: 56px !important; max-height: 56px !important; }
    .bshrec__name { font-size: 12px; line-height: 1.3; margin-bottom: 7px; }

    .bshrec__row { gap: 8px; }

    .bshrec__now { font-size: 15px; }
    .bshrec__old { font-size: 11.5px; }
    .bshrec__badge { font-size: 10px; padding: 3px 6px; }
    .bshrec__buy { font-size: 12px !important; padding: 8px 12px !important; gap: 5px; }
    .bshrec__buy .bfcv2-buy-icon, .bshrec__buy svg { width: 14px; height: 14px; flex-basis: 14px; }

    .bshrec__dots {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 2px 0 10px;
    }
}

/* ---------- Фікси під стилі теми ---------- */
.bshrec a { border-bottom: 0 !important; }
.bshrec ul, .bshrec li { margin: 0 !important; list-style: none !important; }
.bshrec p { margin: 0 !important; }