@charset "UTF-8";

/* ===== ПК: вертикальна картка (за замовчуванням) ===== */
.ldev-card-product {
    display:flex;
    flex-direction:column;
    height:100%;
    background:#fff;
    border:1px solid #ece7ef;
    border-radius:10px;
    overflow:hidden;
    font-family: 'Work Sans', Arial, sans-serif;
    transition: box-shadow .18s ease, transform .18s ease;
}
.ldev-card-product:hover {
    box-shadow: 0 8px 20px rgba(142,68,173,.12);
    transform: translateY(-1px);
}
.ldev-card-product-thumb { display:flex; flex-direction:column; height:100%; }

.ldev-card-product-image {
    position:relative;
    padding:14px;
    text-align:center;
    border-bottom:1px solid #f5f0f7;
}
.ldev-card-product-image img { max-width:100%; height:auto; }

.ldev-wishlist-icon {
    position:absolute;
    top:8px; right:8px;
    width:30px; height:30px;
    border-radius:50%;
    background:#fff;
    border:1px solid #ece7ef;
    color:var(--dp-primary);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    box-shadow:0 1px 4px rgba(0,0,0,.08);
    transition: background-color .15s ease;
    padding:0;
}
.ldev-wishlist-icon:hover { background:#faf2fa; }
.ldev-wishlist-icon i { font-size:14px; }

.ldev-card-product-title {
    padding:10px 14px 0;
    text-align:center;
}
.ldev-card-product-title h4 {
    font-family: 'Work Sans', Arial, sans-serif;
    font-size:15.5px;
    font-weight:600;
    line-height:1.4;
    margin:0;
}
.ldev-card-product-title h4 a { color:#2b2b2b; text-decoration:none; }
.ldev-card-product-title h4 a:hover { color:var(--dp-primary); }

.ldev-card-product-meta {
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:8px 14px 14px;
    flex:1 1 auto;
}

.ldev-card-product-price {
    font-size:15px;
    font-weight:700;
    color:#2b2b2b;
    margin:0 0 10px;
    text-align:center;
}
.ldev-card-product-price .price-new { color:var(--dp-primary); }
.ldev-card-product-price .price-old { color:#a9a9a9; text-decoration:line-through; font-weight:400; font-size:12.5px; margin-left:4px; }
/* однаковий вигляд карток у ряду: ціна (звичайна й акційна) одного розміру й на одній висоті, назва до 3 рядків */
body .ldev-card-product .ldev-card-product-price { display:flex !important; align-items:center; justify-content:center; gap:6px; height:24px; margin:0 0 10px !important; white-space:nowrap; font-size:16px !important; line-height:24px !important; }
body .ldev-card-product .ldev-card-product-price .price-new { font-size:16px !important; line-height:24px !important; font-weight:700 !important; }
body .ldev-card-product .ldev-card-product-price .price-old { margin:0 !important; font-size:12.5px !important; line-height:24px !important; font-weight:400 !important; }
@media (min-width: 768px) {
    body .ldev-card-product .ldev-card-product-title { min-height:70px; overflow:hidden; }
    body .ldev-card-product .ldev-card-product-title h4 { display:-webkit-box !important; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden !important; max-height:4.05em; line-height:1.35 !important; }
}

.ldev-card-product-qty {
    display:flex; align-items:stretch;
    border:1px solid #e2d9e6; border-radius:8px; overflow:hidden;
    margin-bottom:10px;
}
.ldev-qty-btn {
    width:28px; border:none; background:#faf5fc; color:var(--dp-primary);
    font-size:15px; line-height:1; cursor:pointer;
}
.ldev-qty-btn:hover { background:#f0e2f5; }
.ldev-qty-input {
    width:36px; border:none;
    border-left:1px solid #e2d9e6; border-right:1px solid #e2d9e6;
    text-align:center; font-size:13px;
}

.ldev-card-product-actions { margin-top:auto; width:100%; display:flex; justify-content:center; }

.ldev-buy-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    width:120px; height:38px;
    background:var(--dp-primary);
    color:#f3f3f3; border:none; border-radius:6px;
    font-size:13.5px; font-weight:600;
    cursor:pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
    transition: background-color .15s ease, box-shadow .15s ease;
}
.ldev-buy-btn:hover { background:var(--dp-primary-hover); box-shadow: 0 2px 6px rgba(0,0,0,.14); }

/* ===== МОБІЛЬНИЙ: перетворюємо на компактний рядок-список,
   1 в 1 як product_line ===== */
@media (max-width: 767px) {
    .ldev-card-product {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        height: auto;
        padding: 12px;
        gap: 12px;
    }
    .ldev-card-product-thumb {
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        align-items: center;
        gap: 12px;
        height: auto;
    }
    .ldev-card-product-image {
        flex: 0 0 64px;
        width: 64px; height: 64px;
        padding: 0;
        border-bottom: none;
        border-radius: 8px;
        background: #faf5fc;
        display: flex; align-items: center; justify-content: center;
    }
    .ldev-card-product-title {
        flex: 1 1 calc(100% - 76px);
        padding: 0;
        text-align: left;
    }
    .ldev-card-product-title h4 { text-align: left; }

    .ldev-card-product-meta {
        flex: 1 1 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border-top: none;
        padding: 8px 0 0;
        margin-top: 0;
        gap: 10px;
    }
    .ldev-card-product-qty { order: 1; margin-bottom: 0; }
    /* на телефоні стара ціна стає під новою, щоб кнопка «Купити» влазила в рядок */
    body .ldev-card-product .ldev-card-product-price { margin:0 !important; flex-direction:column; gap:0; height:auto; min-height:24px; line-height:1.2 !important; }
    body .ldev-card-product .ldev-card-product-price .price-new { line-height:1.2 !important; }
    body .ldev-card-product .ldev-card-product-price .price-old { font-size:11.5px !important; line-height:1.2 !important; }
    .ldev-card-product-price {
        order: 2;
        margin: 0;
        text-align: center;
        min-width: 68px;
        font-size: 15px;
    }
    .ldev-card-product-actions { order: 3; margin-top: 0; width: auto; }
    .ldev-buy-btn { padding: 9px 14px; width: auto; }
}