/* ==========================================================================
   MegaPets 2.0 — Product Card Component

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

   Responsibility:
   - Product Card shell
   - Product Card base layout
   - Shared Product Card variables
   - Shared Product Card states
   ========================================================================== */

/* ==========================================================================
   VARIABLES
   ========================================================================== */

:root {
    /* COLORS */
    --mp-product-card-text-main-color:
        var(--mp-color-dark);
    --mp-product-card-text-muted-color:
        var(--mp-color-brown-chocolate);
    --mp-product-card-sales-text-color:
        var(--mp-color-brown-chocolate);
    --mp-product-card-price-color:
        var(--mp-color-dark);
    --mp-product-card-attributes-text-color:
        var(--mp-color-grey);
    --mp-product-card-attributes-text-hover-color:
        var(--mp-color-gold-dark);
    --mp-product-card-text-disabled-color: #c7c1ba;

    --mp-product-card-background-color:
        var(--mp-color-surface);
    --mp-product-card-photo-background-color: #f3f3f3;
    --mp-product-card-icon-light-color: #fdf9f2;

    --mp-product-card-border-color: rgba(0, 0, 0, .05);
    --mp-product-card-photo-inner-border-color: rgba(111, 103, 94, .035);

    /* TYPOGRAPHY */
    --mp-font-sans: "Manrope", Arial, sans-serif;
    --mp-font-serif: Georgia, "Times New Roman", serif;
    --mp-font-quote: "Source Serif 4", Georgia, serif;

    --mp-product-card-text-font: var(--mp-font-sans);
    --mp-product-card-title-font: var(--mp-font-serif);
    --mp-product-card-quote-font: var(--mp-font-quote);
    --mp-product-title-transform: uppercase;

    --mp-product-card-title-size: 18px;
    --mp-product-card-subtitle-size: 10px;
    --mp-product-card-quote-size: var(--mp-quote-font-size);
    --mp-product-card-spec-size: 12.5px;
    --mp-product-card-sales-size: 12px;
    --mp-product-card-price-size: 24px;
    --mp-product-card-price-mobile-size: 23px;
    --mp-product-card-quantity-button-size: 20px;
    --mp-product-card-quantity-button-mobile-size: 19px;
    --mp-product-card-quantity-value-size: 15px;

    --mp-product-card-title-line-height: 1.12;
    --mp-product-card-quote-line-height: 1.65;
    --mp-product-card-row-line-height: 1.18;

    --mp-product-card-font-weight-regular: 400;
    --mp-product-card-font-weight-medium: 500;
    --mp-product-card-font-weight-semibold: 600;

    /* SPACING */
    --mp-product-card-side-space: 24px;
    --mp-product-card-side-space-mobile: 22px;
    --mp-product-card-body-top-space: 8px;
    --mp-product-card-body-top-space-mobile: 7px;
    --mp-product-card-body-bottom-space: 24px;
    --mp-product-card-body-bottom-space-mobile: 22px;

    --mp-product-card-row-gap: 4px;
    --mp-product-card-line-space: 11px;
    --mp-product-card-quote-bottom-space: 0;
    --mp-product-card-specs-bottom-space: 0;
    --mp-product-card-sales-top-space: 0;
    --mp-product-card-sales-bottom-space: 15px;

    --mp-product-card-media-dots-top-space: 8px;
    --mp-product-card-spec-arrow-gap: 5px;

    /* SIZES / GRID */
    --mp-product-card-max-width: 380px;
    --mp-product-card-media-ratio: 3 / 2;

    --mp-product-card-info-left: 42%;
    --mp-product-card-info-left-mobile: 39%;
    --mp-product-card-info-left-min: 92px;
    --mp-product-card-info-left-min-mobile: 82px;
    --mp-product-card-spec-label-width: 35%;
    --mp-product-card-spec-label-width-mobile: 35%;
    --mp-product-card-arrow-column-width: 10px;

    --mp-product-card-spec-arrow-size: 16px;
    --mp-product-card-row-min-height: 16px;

    --mp-product-card-buy-height: 43px;
    --mp-product-card-cart-icon-size: 22px;

    /* RADII */
    /*
     * Product Card uses the shared MegaPets radius system.
     * Local aliases are kept because all Product Card blocks already use
     * these variables and should remain independent from implementation
     * details of the global design system.
     */
    --mp-product-card-radius: var(--mp-radius);
    --mp-product-card-control-radius: var(--mp-radius);
    --mp-product-card-round-radius: var(--mp-radius-pill);

    /* SHADOWS */
    --mp-product-card-shadow: 0 10px 32px rgba(0, 0, 0, .08);
    --mp-product-card-hover-shadow: 0 18px 42px rgba(0, 0, 0, .11), 0 6px 14px rgba(0, 0, 0, .055);
    --mp-product-card-mobile-active-shadow: 0 1px 5px rgba(42, 34, 27, .05);
    --mp-product-card-photo-inner-shadow: inset 0 0 0 1px var(--mp-product-card-photo-inner-border-color);

    /* DECORATIVE LINES */
    /*
     * Product Card uses the shared MegaPets decorative divider-line token.
     * Line length and spacing remain local to Product Card.
     */
    --mp-product-card-line-height: var(--mp-decorative-line-height);
    --mp-product-card-short-line-width: 38px;
    --mp-product-card-line-gradient: var(--mp-decorative-divider-line);

    /* BUY */
    --mp-product-card-buy-frame-light-color: color-mix(
        in srgb,
        var(--mp-color-decorative-line) 50%,
        transparent
    );
    --mp-product-card-buy-frame-mid-color:
        var(--mp-color-action-primary-alpha-26);
    --mp-product-card-buy-frame-dark-color:
        var(--mp-color-action-primary-alpha-32);

    /* ANIMATION */
    --mp-product-card-speed-fast: .18s;
    --mp-product-card-speed-normal: .30s;
    --mp-product-card-speed-slow: .42s;
    --mp-product-card-ease: cubic-bezier(.22, 1, .36, 1);

    /* Z-INDEX */
    --mp-product-card-media-contour-z: 5;
    --mp-product-card-buy-content-z: 1;
    --mp-product-card-buy-frame-z: 3;
}

/* ==========================================================================
   BASE
   ========================================================================== */

.product-card-shell,
.product-card-shell * {
    box-sizing: border-box;
}

.product-card-shell {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
    max-width: var(--mp-product-card-max-width);
}

.product-card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    width: 100%;
    max-width: var(--mp-product-card-max-width);
    background: var(--mp-product-card-background-color);
    border: 1px solid var(--mp-product-card-border-color);
    border-radius: var(--mp-product-card-radius);
    overflow: hidden;
    box-shadow: var(--mp-product-card-shadow);
    color: var(--mp-product-card-text-main-color);
    font-family: var(--mp-product-card-text-font);
    transition:
        box-shadow var(--mp-product-card-speed-normal) var(--mp-product-card-ease),
        border-color var(--mp-product-card-speed-normal) ease;
}

.product-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    padding:
        var(--mp-product-card-body-top-space)
        var(--mp-product-card-side-space)
        var(--mp-product-card-body-bottom-space);
}

/*
 * Keep sales information and purchase controls aligned at the bottom of
 * every card in the same catalog row. Any difference caused by a missing or
 * wrapped attribute becomes calm, reserved space above this block.
 */
.product-card-information-inner {
    margin-top: auto;
}

/* ==========================================================================
   STATES
   ========================================================================== */

.product-card.is-active {
    border-color: var(--mp-color-border-interactive);
    box-shadow: var(--mp-product-card-hover-shadow);
}

@media (hover: hover) and (pointer: fine) {
    .product-card:hover,
    .product-card.is-active {
        border-color: var(--mp-color-border-interactive);
        box-shadow: var(--mp-product-card-hover-shadow);
    }
}

@media (hover: none) and (pointer: coarse) {
    .product-card:active,
    .product-card.is-active {
        border-color: var(--mp-color-border-interactive);
        box-shadow: var(--mp-product-card-hover-shadow);
    }
}

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

@media (max-width: 480px) {
    .product-card-body {
        padding:
            var(--mp-product-card-body-top-space-mobile)
            var(--mp-product-card-side-space-mobile)
            var(--mp-product-card-body-bottom-space-mobile);
    }
}

/* ==========================================================================
   WOOCOMMERCE LOOP INTEGRATION
   ========================================================================== */

/**
 * MegaPets renders the complete content of every WooCommerce loop item.
 * This fallback prevents a theme or extension from displaying an additional
 * legacy image, title, price or add-to-cart button beside the MegaPets card.
 */
.woocommerce ul.products li.product > *:not(.product-card-shell) {
    display: none !important;
}

.woocommerce ul.products {
    align-items: stretch;
}

.woocommerce ul.products li.product {
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

.woocommerce ul.products li.product > .product-card-shell {
    display: flex;
    flex: 1 1 auto;
    margin-right: auto;
    margin-left: auto;
}