/* =============================================================
   COMPONENT / PRODUCT-CARD
   
   Карточка товара в списке (сетка каталога, сопутствующие,
   результаты поиска) + сетка, в которой эти карточки живут.
   ============================================================= */

/* ---------------------------------------------------------
   СЕТКА ТОВАРОВ
   --------------------------------------------------------- */

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--space-2);
    /* 8px — минимальный воздух */
    padding: 0;
    margin: 0;
    list-style: none;
}

/* ---------------------------------------------------------
   КАРТОЧКА
   --------------------------------------------------------- */

.product-card {
    position: relative;
    padding: var(--space-4);
    /* 16px — внутри больше, чем снаружи */
    transition: background-color var(--duration-fast) var(--ease-default);
}

.product-card:hover,
.product-card:focus {
    background-color: var(--bg-page);
}

/* Внутренняя обёртка — flex-колонка с медиа сверху */
.product {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* ---------------------------------------------------------
   МЕДИА
   --------------------------------------------------------- */

.product-media {
    position: relative;
    padding-top: 100%;
    /* квадратное соотношение через пропорцию */
}

.product-link {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: darken;
}

/* ---------------------------------------------------------
   БЕЙДЖИ — накладываются на картинку
   --------------------------------------------------------- */

.product-badge {
    position: absolute;
    top: 0;
    left: 0;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-weight: var(--fw-medium);
    z-index: var(--z-raised);
}

.product-badge.recommended {
    background-color: var(--teal-500);
    color: white;
}

.product-badge.novelty {
    background-color: var(--green-500);
    color: white;
}

.product-card .product-discount {
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--brand);
    color: white;
    padding: .125rem var(--space-2);
    border-radius: var(--radius-sm);
    font-weight: var(--fw-medium);
    z-index: var(--z-raised);
}

/* ---------------------------------------------------------
   КОНТЕНТ КАРТОЧКИ
   --------------------------------------------------------- */

.product-content {
    flex-grow: 1;
    text-align: center;
    padding: 10px 0;
}

h2.product-title {
    margin: 0 0 var(--space-2);
    font-size: .9rem;
    font-weight: var(--fw-regular);
}

.product-title-link {
    color: inherit;
    text-decoration: none;
}

.product-prefix {
    display: block;
}

/* ---------------------------------------------------------
   ЦЕНЫ
   --------------------------------------------------------- */

.price-current {
    font-size: 1.1rem;
    font-weight: var(--fw-bold);
}

.price-old {
    margin-right: var(--space-2);
}

/* ---------------------------------------------------------
   НАЛИЧИЕ
   --------------------------------------------------------- */

.in-stock {
    color: var(--green-700);
}

.out-of-stock {
    padding: var(--space-2);
    text-align: center;
    color: var(--red-700);
}

/* ---------------------------------------------------------
   ДЕЙСТВИЯ (кнопка "в корзину" / "оформить")
   --------------------------------------------------------- */

.product-actions {
    place-self: center;
    padding: var(--space-3) 0;
}

/* ---------------------------------------------------------
   КНОПКА "В КОРЗИНУ"
   Была в site.css как .add-to-cart, встречается в обоих местах.
   Переносим сюда — карточка и страница товара обе её используют.
   --------------------------------------------------------- */

.add-to-cart {
    position: relative;
    white-space: nowrap;
    transition: background-color var(--duration-slow) var(--ease-default);
}

/* Товар уже в корзине — зелёная кнопка */
.add-to-cart.in-cart {
    background-color: var(--green-700) !important;
    color: white !important;
    cursor: pointer;
}

.add-to-cart:disabled {
    background-color: var(--bg-surface-alt);
    color: var(--text-secondary);
    cursor: not-allowed;
    opacity: .7;
}