/**
 * Bukado — Картка товару
 * Файл: catalog/view/theme/default/stylesheet/bukado-card.css
 *
 * ЄДИНЕ місце, де живе вигляд картки. Використовується на:
 * головній, у каталозі, в автора, у видавництва, у пошуку, у знижках.
 * Змінюєш тут — міняється всюди.
 *
 * Іконки типу книги вставлені як SVG прямо в CSS (нижче, блок «ТИП КНИГИ»).
 */

/* ================================================================
   СІТКА
   Невидима сітка: однакові відступи, вирівнювання по ВЕРХУ обкладинок.
   Низ карток може бути різний — це нормально.
   ================================================================ */
.bukado-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 36px;
    align-items: start;
}

/* ================================================================
   КАРТКА — без рамки й тла; тінь лише при наведенні
   ================================================================ */
.bukado-card {
    position: relative;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    overflow: visible;            /* пілюлі виходять за край */
    text-decoration: none;
    transition: box-shadow .18s ease;
}

.bukado-card:hover {
    box-shadow: 0 1px 6px rgba(0, 0, 0, .14);
}

/* ================================================================
   ОБКЛАДИНКА — природні пропорції (різна висота в різних книг)
   ================================================================ */
.bukado-card__cover {
    position: relative;
    width: 100%;
    overflow: visible;
}

.bukado-card__cover img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.bukado-card__cover-ph {
    display: block;
    width: 100%;
    padding-bottom: 145%;
    border-radius: 10px;
    background: linear-gradient(160deg, #e8ddd0 0%, #cfc3b2 100%);
}

/* ================================================================
   ПІЛЮЛІ — осідлують нижній край обкладинки.
   Рейтинг центрується у вільному місці ЛІВОРУЧ від серця,
   тому вони НІКОЛИ не накладаються, хоч які великі числа.
   ================================================================ */
.bukado-card__pills {
    position: absolute;
    left: 0;
    right: -18px;                 /* серце звисає за правий край */
    bottom: 0;
    transform: translateY(50%);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    z-index: 3;
}

.bukado-card__rating,
.bukado-card__fav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border-radius: 100px;
    padding: 5px 10px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .14);
    line-height: 1;
    white-space: nowrap;
}

.bukado-card__rating { margin: 0 auto; }   /* центрування у вільному місці */
.bukado-card__fav    { flex-shrink: 0; border: none; font: inherit; cursor: pointer; }

.bukado-card__num {
    font-size: 11px;
    color: #9a9384;
    transition: color .15s;
}

/* — зірочки — */
.bukado-card__stars { display: inline-flex; gap: 1px; }

.bukado-card__stars svg {
    width: 12px;
    height: 12px;
    display: block;
}

.bukado-card__stars .st-on  { fill: #f2b100; }
.bukado-card__stars .st-off { fill: #dcd7cd; }

/* — серце — */
.bukado-card__fav svg {
    width: 14px;
    height: 14px;
    display: block;
    fill: none;
    stroke: #4a4a4a;
    stroke-width: 1.6;
    transition: fill .15s, stroke .15s;
}

.bukado-card__fav:hover svg      { stroke: #047a36; }
.bukado-card__fav:hover .bukado-card__num { color: #047a36; }
.bukado-card__fav.is-on svg      { fill: #047a36; stroke: #047a36; }
.bukado-card__fav.is-on .bukado-card__num { color: #047a36; }

/* ================================================================
   ТІЛО — фіксовані відступи, однакові на КОЖНІЙ картці
   ================================================================ */
.bukado-card__body {
    padding: 22px 8px 16px;       /* 22px згори — місце під пілюлі */
    display: flex;
    flex-direction: column;
}

.bukado-card__title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 15px;
    line-height: 1.32;
    color: #1f1f1f;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .15s;
}

.bukado-card__title:hover { color: #047a36; text-decoration: none; }

.bukado-card__author {
    margin-top: 9px;
    font-size: 13px;
    color: #8a8880;
    text-decoration: none;
    align-self: flex-start;
    transition: color .15s;
}

.bukado-card__author:hover { color: #047a36; text-decoration: none; }

/* ================================================================
   НИЗ: [іконка типу] ......... [ціна][Купити]
   Фіксована відстань від автора — однакова на всіх товарах.
   ================================================================ */
.bukado-card__foot {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* — ТИП КНИГИ: іконка + тултіп — */
.bukado-card__type {
    position: relative;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
}

.bukado-card__type--ebook {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23283443' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.5' y='3' width='11' height='18' rx='2.5'/%3E%3Crect x='9' y='6' width='6' height='10' rx='0.8'/%3E%3Cpath d='M10.5 18.5h3'/%3E%3C/svg%3E");
}

.bukado-card__type--audio {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23283443' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15v-3a6 6 0 0 1 12 0v3'/%3E%3Crect x='4' y='15' width='4' height='6' rx='1.5'/%3E%3Crect x='16' y='15' width='4' height='6' rx='1.5'/%3E%3C/svg%3E");
}

.bukado-card__type--paper {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23283443' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9a1.5 1.5 0 0 1 1.5 -1.5H17v11a.5 .5 0 0 1 -.5 .5H8.5A1.5 1.5 0 0 1 7 18.5z'/%3E%3Cpath d='M9.5 7.5V5.5a.5 .5 0 0 1 .5 -.5h6.5a.5 .5 0 0 1 .5 .5v2'/%3E%3C/svg%3E");
}

/* тултіп над іконкою */
.bukado-card__type::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: -4px;
    background: #083216;
    color: #fff;
    font-family: sans-serif;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    padding: 5px 9px;
    border-radius: 7px;
    opacity: 0;
    transform: translateY(-3px);
    pointer-events: none;
    transition: opacity .15s, transform .15s;
    z-index: 6;
}

.bukado-card__type::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 4px);
    left: 6px;
    border: 4px solid transparent;
    border-top-color: #083216;
    opacity: 0;
    transition: opacity .15s;
    z-index: 6;
}

.bukado-card__type:hover::after,
.bukado-card__type:hover::before { opacity: 1; transform: translateY(0); }

/* — ціна — */
.bukado-card__prices {
    margin-left: auto;
    text-align: right;
    line-height: 1.2;
}

.bukado-card__price {
    font-family: Georgia, serif;
    font-size: 15px;
    color: #047a36;
    white-space: nowrap;
}

.bukado-card__price.is-sale { color: #e8462d; }

.bukado-card__price-old {
    display: block;
    font-family: Georgia, serif;
    font-size: 12px;
    color: #b3ada2;
    text-decoration: line-through;
}

/* — кнопка «Купити» — */
.bukado-card__buy {
    background: #047a36;
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: 7px 13px;
    font-family: sans-serif;
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .18s;
}

.bukado-card__buy:hover { background: #083216; }

/* стан «У кошику» — без зеленої заливки, зелений текст, зелена рамка */
.bukado-card__buy.is-in-cart {
    background: #fff;
    color: #047a36;
    border: 1.5px solid #047a36;
    padding: 5.5px 11.5px; /* компенсуємо товщину рамки, щоб розмір не стрибнув */
}
.bukado-card__buy.is-in-cart:hover {
    background: #e9f1ea;
}

/* — статус замість ціни (немає в наявності / очікується) — */
.bukado-card__status {
    margin-left: auto;
    font-family: sans-serif;
    font-size: 13px;
    color: #047a36;
    white-space: nowrap;
}

/* ================================================================
   TOAST
   ================================================================ */
.bukado-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(18px);
    background: #083216;
    color: #e7f3ea;
    padding: 10px 18px;
    border-radius: 100px;
    font-family: sans-serif;
    font-size: 13px;
    opacity: 0;
    transition: opacity .2s, transform .2s;
    z-index: 9999;
    pointer-events: none;
}

.bukado-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ================================================================
   МОБІЛЬНЕ
   ================================================================ */
@media (max-width: 767px) {
    .bukado-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
    .bukado-card__title  { font-size: 14px; }
    .bukado-card__author { font-size: 12px; }
}