/**
 * Product Card — standalone, flat ruleset.
 *
 * Used by the [pillar_form_cards] shortcode. Self-contained: no dependency
 * on parent selectors. All design tokens defined locally on .product-cards
 * so the file can be enqueued anywhere without polluting :root.
 */

.pillar-counter {
    text-align: left;

    .pillar-counter__number-wrapper {
        display    : flex;
        align-items: baseline;
        line-height: 100px;
    }

    .pillar-counter__number,
    .pillar-counter__suffix {
        font-size  : 100px;
        line-height: 100px;
        color      : #175cff;
        font-weight: 700;
    }

    .pillar-counter__title {
        font-weight: 300;
        color      : rgb(27, 24, 32);
        font-size  : 20px;
        line-height: 32px;
        margin     : 16px 0 0 0;
    }
}

.product-cards {
    --pc-standard-0:    #101214;
    --pc-standard-700:  #9CA3AF;
    --pc-standard-1000: #E5E5E7;
    --pc-standard-1300: #F4F4F6;
    --pc-purple-bg:     #D5C5FF;
    --pc-purple-text:   #5C2693;
    --pc-font-brand:    'Paralucent', 'Geist', system-ui, sans-serif;
    --pc-font-ui:       'Geist', system-ui, sans-serif;

    display              : grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap                  : 20px;
    width                : 100%;
    box-sizing           : border-box;
    color                : var(--pc-standard-0);

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    /* A. Container */
    .product-card {
        display        : flex;
        flex-direction : column;
        background     : #fff;
        border         : 1px solid var(--pc-standard-1000);
        border-radius  : 20px;
        padding        : 32px;
        cursor         : pointer;
        transition     : border-color 0.15s ease;
        text-decoration: none;
        color          : inherit;
        height         : 100%;

        &:hover {
            border-color: var(--pc-standard-700);
        }

        /* B. Aspect tile */
        .product-card__tile {
            width        : 56px;
            height       : 56px;
            border-radius: 14px;
            background   : var(--pc-purple-bg);
            display      : grid;
            place-items  : center;
            margin-bottom: 24px;
            flex-shrink  : 0;

            svg {
                width          : 28px;
                height         : 28px;
                color          : var(--pc-purple-text);
                stroke         : currentColor;
                fill           : none;
                stroke-width   : 1.25;
                stroke-linecap : round;
                stroke-linejoin: round;
            }
        }

        /* C. Eyebrow */
        .product-card__eyebrow {
            font-family   : var(--pc-font-ui);
            font-weight   : 500;
            font-size     : 11px;
            line-height   : 1;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color         : var(--pc-standard-0);
            margin        : 0 0 12px;
        }

        /* D. Title */
        .product-card__title {
            font-family       : var(--pc-font-brand);
            font-weight       : 500;
            font-size         : 24px;
            line-height       : 1.2;
            color             : var(--pc-standard-0);
            letter-spacing    : -0.01em;
            margin            : 0 0 12px;
            display           : -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp        : 2;
            -webkit-box-orient: vertical;
            overflow          : hidden;
        }

        /* E. Short description */
        .product-card__desc {
            font-family       : var(--pc-font-ui);
            font-weight       : 400;
            font-size         : 14px;
            line-height       : 1.5;
            color             : var(--pc-standard-0);
            margin            : 0 0 24px;
            min-height        : 42px;
            display           : -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp        : 2;
            -webkit-box-orient: vertical;
            overflow          : hidden;
        }

        /* F. Divider */
        .product-card__divider {
            height    : 1px;
            background: var(--pc-standard-1000);
            border    : 0;
            margin    : 0 0 24px;
            width     : 100%;
        }

        /* G. Price */
        .product-card__price {
            font-family: var(--pc-font-brand);
            font-weight: 500;
            font-size  : 28px;
            line-height: 1;
            color      : var(--pc-standard-0);
            margin     : 0 0 24px;
        }

        .product-card__price-suffix {
            font-family: var(--pc-font-ui);
            font-weight: 400;
            font-size  : 12px;
            color      : var(--pc-standard-0);
            margin     : 0 0 24px;
        }

        /* H. CTA row */
        .product-card__cta {
            display    : flex;
            gap        : 8px;
            align-items: center;
            margin-top : auto;

            .product-card__cart-btn {
                flex           : 1;
                height         : 44px;
                background     : var(--pc-standard-0);
                color          : #fff;
                border         : none;
                border-radius  : 100px;
                font-family    : var(--pc-font-brand);
                font-weight    : 500;
                font-size      : 14px;
                cursor         : pointer;
                display        : inline-flex;
                align-items    : center;
                justify-content: center;
                gap            : 8px;
                transition     : opacity 0.15s ease, background 0.15s ease;

                &:hover {
                    opacity: 0.9;
                }

                &.product-card__cart-btn--in-cart {
                    background: var(--pc-standard-1300);
                    color     : var(--pc-standard-0);
                    border    : 1px solid var(--pc-standard-1000);

                    &:hover {
                        border-color: var(--pc-standard-700);
                        opacity     : 1;
                    }
                }

                svg {
                    width          : 14px;
                    height         : 14px;
                    stroke         : currentColor;
                    fill           : none;
                    stroke-width   : 1.5;
                    stroke-linecap : round;
                    stroke-linejoin: round;
                }
            }

            .product-card__details-btn {
                width          : 44px;
                height         : 44px;
                background     : transparent;
                border         : 1px solid var(--pc-standard-1000);
                border-radius  : 100px;
                cursor         : pointer;
                display        : inline-flex;
                align-items    : center;
                justify-content: center;
                transition     : border-color 0.15s ease;
                flex-shrink    : 0;

                &:hover {
                    border-color: var(--pc-standard-700);
                }

                svg {
                    width          : 16px;
                    height         : 16px;
                    color          : var(--pc-standard-0);
                    stroke         : currentColor;
                    fill           : none;
                    stroke-width   : 1.5;
                    stroke-linecap : round;
                    stroke-linejoin: round;
                }
            }
        }
    }

    /* Responsive */
    @media (max-width: 900px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    @media (max-width: 600px) {
        grid-template-columns: 1fr;
        gap                  : 16px;

        .product-card {
            padding      : 24px;
            border-radius: 16px;

            .product-card__title {
                font-size: 20px;
            }

            .product-card__price {
                font-size: 24px;
            }
        }
    }
}