/* ==========================================================================
   MegaPets 2.0 — Product Card Information Block

   File:
   components/product/product-card/blocks/information/information.css

   Responsibility:
   - Product sales information layout
   - Sold count
   - Stock count
   - Price
   ========================================================================== */

/* ==========================================================================
   SALES INFORMATION
   ========================================================================== */

.product-card-sales {
    margin:
        var(--mp-product-card-sales-top-space)
        0
        var(--mp-product-card-sales-bottom-space);
}

.product-card-sales-list {
    display: flex;
    flex-direction: column;
    gap: var(--mp-product-card-row-gap);
    margin: 0;
}

.product-card-sales-row {
    display: grid;
    grid-template-columns:
        minmax(var(--mp-product-card-info-left-min), var(--mp-product-card-info-left))
        minmax(0, 1fr);
    align-items: baseline;
    gap: 8px;
    min-height: var(--mp-product-card-row-min-height);
    margin: 0;
    padding: 0;
    line-height: var(--mp-product-card-row-line-height);
}

.product-card-sales-label,
.product-card-sales-value {
    font-family: var(--mp-product-card-text-font);
    font-size: var(--mp-product-card-sales-size);
    line-height: var(--mp-product-card-row-line-height);
    font-weight: var(--mp-product-card-font-weight-medium);
    color: var(--mp-product-card-sales-text-color);
}

.product-card-sales-value {
    text-align: right;
    white-space: nowrap;
}

.product-card-sales-value .number {
    color: var(--mp-product-card-sales-text-color);
    font-weight: var(--mp-product-card-font-weight-regular);
}

.product-card-sales-value .unit {
    color: var(--mp-product-card-sales-text-color);
    font-weight: var(--mp-product-card-font-weight-medium);
}

.product-card-sales-value .product-card-sales-number,
.product-card-sales-label .product-card-sales-number {
    color: var(--mp-color-gold-dark);
}

.product-card-sales-price {
    align-self: start;
    margin-top: 0;
    padding-top: 0;
    font-family: var(--mp-product-card-title-font);
    font-size: var(--mp-product-card-price-size);
    line-height: 1;
    font-weight: var(--mp-product-card-font-weight-regular);
    letter-spacing: .2px;
    color: var(--mp-product-card-price-color);
    text-align: right;
    white-space: nowrap;
}

/* ==========================================================================
   PRICE ROW
   ========================================================================== */

.product-card-sales-row:has(.product-card-sales-price) {
    align-items: start;
}

.product-card-sales-row:has(.product-card-sales-price) .product-card-sales-label {
    line-height: var(--mp-product-card-row-line-height);
    padding-top: 0;
}

/* ==========================================================================
   INFORMATION RESPONSIVE
   ========================================================================== */

@media (max-width: 480px) {
    .product-card-sales-row {
        grid-template-columns:
            minmax(var(--mp-product-card-info-left-min-mobile), var(--mp-product-card-info-left-mobile))
            minmax(0, 1fr);
        gap: 7px;
    }

    .product-card-sales-price {
        font-size: var(--mp-product-card-price-mobile-size);
    }
}