/* =========================================================
   HUBBLEHUT PRODUCTS
   Uses the exact homepage offering/card template.
========================================================= */

.products-page {
    padding-top: 95px;
    padding-bottom: 95px;
    min-height: calc(100vh - 150px);
}

/* Match homepage heading exactly, but make the main title white. */
.products-page .hh-section-heading h2,
.products-page .hh-section-heading h1 {
    color: #ffffff !important;
}

.products-page .hh-section-heading p {
    color: #dbeafe !important;
}

/* Keep the exact homepage 4-column card geometry adapted to 2 products. */
.products-page .hh-product-grid {
    grid-template-columns: repeat(2, 1fr);
}

/* Both product tiles intentionally use the same treatment as the homepage AI Lens tile. */
.products-page .hh-offering-card,
.products-page .hh-offering-card.hh-featured {
    background: linear-gradient(145deg, #071829, #0d5ca8) !important;
    border-color: #0d5ca8 !important;
    color: #ffffff !important;
}

.products-page .hh-offering-card h3,
.products-page .hh-offering-card p {
    color: #ffffff !important;
}

.products-page .hh-offering-number,
.products-page .hh-card-link,
.products-page .hh-ai-badge {
    color: #55e6d6 !important;
}

.products-page .hh-ai-badge {
    background: rgba(85, 230, 214, .15) !important;
}

.products-page .hh-offering-card p {
    color: rgba(255, 255, 255, .88) !important;
}

/* Home link in the Products page navigation — text only. */
.products-home-btn {
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.products-home-btn:hover {
    background: transparent !important;
    color: #55e6d6 !important;
}

@media (max-width: 1000px) {
    .products-page .hh-product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .products-page {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .products-page .hh-product-grid {
        grid-template-columns: 1fr;
    }
}