/*
 * Inline <style> rules from products.php, kept page-scoped exactly as they were
 * there. Loaded only by the page that owns them.
 *
 * Regenerate with: node tools/php-port/extract-css.mjs
 */

/* ===== Product cards (scoped) ===== */
        /* Grid so every card is the SAME height, across all rows */
        .products-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; grid-auto-rows: 1fr; }

.products-grid > div { width: 100%; max-width: none; padding: 0; margin: 0 !important; flex: none; }

@media (max-width: 767px) { .products-grid { grid-template-columns: 1fr; } }

.product-card {
            position: relative;
            height: 100%;
            display: flex;
            flex-direction: column;
            padding: 36px 32px 28px;
            /* Solid, opaque panel — reads as a real card against the black page */
            background: #171a23;
            background-image: linear-gradient(158deg, #1d212c 0%, #15171e 62%);
            border: 1px solid rgba(255,255,255,0.09);
            border-radius: 20px;
            box-shadow: 0 12px 30px rgba(0,0,0,0.45);
            transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease;
            overflow: hidden;
        }

/* soft accent glow in the corner behind the logo */
        .product-card::before {
            content: '';
            position: absolute; top: -70px; right: -70px;
            width: 190px; height: 190px; border-radius: 50%;
            background: radial-gradient(circle, rgba(250,78,78,0.16), transparent 70%);
            pointer-events: none;
        }

a.product-card-link { text-decoration: none; display: block; height: 100%; }

a.product-card-link:hover .product-card {
            border-color: rgba(250,78,78,0.55);
            transform: translateY(-6px);
            box-shadow: 0 22px 46px rgba(0,0,0,0.6);
        }

/* logo/icon in the top corner — solid accent tile */
        .product-logo {
            position: absolute; top: 28px; right: 28px;
            width: 56px; height: 56px; border-radius: 16px;
            background: linear-gradient(145deg, #ff6a5e, #e03e3e);
            box-shadow: 0 10px 22px rgba(250,78,78,0.35);
            display: flex; align-items: center; justify-content: center;
            color: #fff; font-size: 23px;
            transition: transform .35s ease;
        }

a.product-card-link:hover .product-logo { transform: scale(1.06) rotate(-4deg); }

.product-name { color: #fff; font-size: 27px; font-weight: 700; margin: 0 0 6px; padding-right: 76px; line-height: 1.2; }

.product-kicker { display: block; color: #ff7a70; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 18px; padding-right: 76px; }

.product-tagline { color: rgba(255,255,255,0.66); font-size: 15px; line-height: 1.75; margin: 0 0 22px; }

.product-features { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 8px; }

.product-features li {
            background: rgba(255,255,255,0.06);
            color: rgba(255,255,255,0.86);
            border: 1px solid rgba(255,255,255,0.11);
            border-radius: 8px;
            padding: 6px 13px; font-size: 13px; font-weight: 500;
        }

.product-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.09); }

.product-cta { display: inline-flex; align-items: center; gap: 9px; color: #fff; font-weight: 700; font-size: 15px; }

.product-cta i { color: var(--accent-color); transition: transform .3s ease; }

a.product-card-link:hover .product-cta i { transform: translateX(5px); }

@media (max-width: 575px) {
            .product-card { padding: 28px 22px 24px; }
            .product-logo { top: 22px; right: 22px; width: 48px; height: 48px; font-size: 20px; }
            .product-name { font-size: 23px; padding-right: 62px; }
            .product-kicker { padding-right: 62px; }
        }