/*
 * Карточка товара магазина (template-parts/product-card.php)
 *
 * Используется:
 *  - страница магазина (tpl_shop-page-item.php -> template-parts/product-category-slider.php)
 *  - страницы категорий/таксономий (woocommerce/content-product.php) для физических товаров
 *  - блок «Покупают вместе» на странице товара
 *
 * Виртуальные товары (сертификаты, билеты) в категориях выводятся старой
 * широкой карточкой — её стили лежат в css/woo.css.
 */

a.added_to_cart.wc-forward {
    display: none;
}

.product-card {
    padding-bottom: 51px;
    position: relative;
}

.product-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.product-card__img {
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    position: relative;
    aspect-ratio: 1 / 1;
    background-color: #f2f2f2;
}

.product-card__excerpt {
    color: #BCBCBC;
    font-size: 14px;
    margin: 12px 0 6px;
}

.product-card__title {
    display: flex;
    margin-bottom: 12px;
    height: 48px;
    align-items: center;
}

.product-card__title a {
    color: #000000;
    min-height: 40px;
    font-family: Akrobat;
    font-size: 18px;
    font-weight: 600;
    line-height: 20px;
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.is-on_sale {
    position: absolute;
    top: 0;
    right: 0;
    color: #FFFFFF;
    padding: 4px 8px;
    background-color: #C99315;
}

/* Кнопка «в корзину» с ценой */
.icon-cart {
    display: flex;
    align-items: center;
}

/*
 * Кнопка карточки скрыта под .product-card: у .custom_add_to_cart в css/woo.css
 * своя зелёная кнопка списка сертификатов (width/padding/font-size с !important),
 * поэтому правила карточки усилены по весу.
 */
.product-card .buy-btn {
    display: flex;
    width: fit-content !important;
    min-width: 0;
    max-width: none;
    justify-content: center;
    align-items: center;
    padding: 12px 14px !important;
    background: #F5F5F5;
    gap: 6px;
    color: #0A0A0A;
    font-size: 16px !important;
    text-align: center;
    text-decoration: none;
}

.product-card .buy-btn del {
    order: 1;
    color: #BCBCBC;
    display: flex;
}

.product-card .buy-btn del bdi {
    color: #BCBCBC;
}

.product-card .buy-btn ins {
    background: transparent;
    display: flex;
}

.product-card .buy-btn.woocommerce-Price-amount bdi,
.product-card .buy-btn .woocommerce-Price-amount bdi {
    font-size: 16px;
}

.product-card .buy-btn span.woocommerce-Price-amount.amount {
    font-weight: bold;
    font-size: 16px;
    line-height: 17px;
    letter-spacing: 0%;
    vertical-align: middle;
    text-transform: uppercase;
    color: #0A0A0A;
}

/* .custom_add_to_cart:focus в woo.css перекрашивает кнопку в зелёный */
.product-card .buy-btn:focus {
    background: #F5F5F5;
    color: #0A0A0A;
}

.product-card .buy-btn.in-cart,
.product-card .buy-btn.in-cart:focus {
    background: #045F40;
    color: #fff;
}

.product-card .buy-btn.in-cart .woocommerce-Price-amount.amount {
    color: #fff;
}

/* Попап количества */
.qty-popup {
    display: none;
    position: absolute;
    bottom: 8px;
    left: 0;
    border-radius: 12px;
    background: #E5E5E5;
}

.product-card.is-in-cart:hover .qty-popup,
.product-card.is-in-cart.is-quantity-open .qty-popup {
    display: flex;
    gap: 0;
}

.qty-popup .minus,
.qty-popup .plus {
    border: none;
    background: transparent;
    outline: none;
    position: relative;
    height: 36px;
}

.qty-popup .minus {
    margin-right: 4px;
}

.qty-popup button.minus:active {
    border-radius: 13px 0 0 13px;
}

.qty-popup button.plus:active {
    border-radius: 0 13px 13px 0;
}

.qty-popup .minus:before {
    content: '';
    position: absolute;
    width: 12px;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    height: 1.5px;
    background-color: #525252;
    border-radius: 2px;
}

.qty-popup .plus:before,
.qty-popup .plus:after {
    content: '';
    position: absolute;
    width: 12px;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    height: 1.5px;
    background-color: #525252;
    border-radius: 2px;
}

.qty-popup .plus:after {
    transform: translateX(-50%) translateY(-50%) rotate(90deg);
}

.qty-popup .plus:hover::before,
.qty-popup .plus:hover::after,
.qty-popup .minus:hover::before {
    background-color: #BB9962;
}

.qty-popup input[type="number"] {
    border: none;
    position: relative;
    background: transparent;
    width: 15px;
    font-family: 'Akrobat';
    font-weight: 900;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0%;
    vertical-align: middle;
    color: #525252;
    padding: 0;
}

.qty-popup input[type="number"]:after {
    content: "шт";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #555;
    pointer-events: none;
}

.qty-popup input[type="number"]::-webkit-inner-spin-button,
.qty-popup input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.num-name {
    display: flex;
    align-items: center;
    font-weight: 700;
}

.arrow-popup {
    position: absolute;
    top: -19px;
    left: 15px;
}

/*
 * Сетка карточек в списке товаров категории (woocommerce/taxonomy-product_cat.php,
 * woocommerce/archive-product.php). Виртуальные товары остаются на всю ширину,
 * физические выстраиваются в сетку.
 */
.products.products--taiga {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}

.products.products--taiga>li.product {
    width: 100%;
}

.products.products--taiga>li.product.product--shop-card {
    width: calc(25% - 22.5px);
    background: transparent;
    padding: 0;
}

.products.products--taiga>li.product.product--shop-card .product-card {
    height: 100%;
}

@media (max-width: 990px) {
    .product-card__img {
        height: auto;
    }

    .product-card {
        max-width: 220px;
        margin: auto;
    }

    .products.products--taiga>li.product.product--shop-card {
        width: calc(33.333% - 20px);
    }
}

@media (max-width: 565px) {
    .product-card .buy-btn {
        width: 100% !important;
    }

    .products.products--taiga>li.product.product--shop-card {
        width: calc(50% - 15px);
    }
}

@media (max-width: 375px) {
    .product-card__title a {
        font-size: 16px;
    }

    .product-card .buy-btn {
        padding: 12px 11px !important;
    }
}