/*** HERO PRODUCTS   ***/

    .products-hero {
        background: #13233f;
        padding: 70px 0 60px;
    }

    .products-hero-text {
        color: #ffffff;
    }

    .products-hero-text h1 {
        color: #ffffff;
        margin: 0 0 24px;
        line-height: 1.1;
    }

    .products-hero-intro {
        font-size: 1.25rem;
        line-height: 1.7;
        margin: 0 0 20px;
        color: #ffffff;
    }

    .products-hero-tagline {
        font-size: 1.05rem;
        line-height: 1.7;
        margin: 0;
        color: rgba(255, 255, 255, 0.85);
        font-style: italic;
    }

    .products-hero-content {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        align-items: center;
        gap: 50px;
        width: 100%;
    }

    .products-hero-text,
    .products-hero-image-wrapper {
        min-width: 0;
    }

    .affiliate-disclosure {
        max-width: 700px;
        margin: 40px auto;
        padding: 18px 24px;
        background: #f8f9fa;
        border-left: 4px solid var(--primary);
        border-radius: 8px;
        text-align: left;
        font-size: 0.9rem;
        color: #555;
    }

    .affiliate-disclosure strong {
        display: block;
        margin-bottom: 8px;
        color: var(--primary);
    }

    /*** Navigation ***/
    .product-navigation {
        padding: 30px 0 60px;
    }

    .product-navigation h2 {
        text-align: center;
        margin-bottom: 35px;
    }

    .category-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-top: 35px;
    }

    .category-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        text-align: center;
        text-decoration: none;

        background: var(--secondary);
        color: var(--white);

        padding: 24px 20px;
        min-height: 100px;

        border-radius: 10px;
        box-shadow: var(--shadow-md);

        transition: all 0.25s ease;
    }

    .category-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-lg);
    }

    .category-icon {
        font-size: 2.2rem;
        color: var(--secondary);   /* your green */
        margin-bottom: 18px;
    }

    .category-card h3 {
        margin: 0 0 10px;
        color: white;
        font-size: 1.35rem;
    }

    .category-card p {
        margin: 0;
        color: rgba(255,255,255,.8);
        font-size: .95rem;
    }

    .category-card:hover {
        background: var(--primary);
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
        color: var(--white);
    }

    .category-card:hover .category-icon {
        color: var(--primary);
    }

    .products-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 30px;
        margin-top: 40px;
    }

    .product-card {
        background: var(--white);
        padding: 30px;
        border-radius: 10px;
        box-shadow: var(--shadow-md);
        display: flex;
        flex-direction: column;
    }

    .product-card h3 {
        margin-bottom: 10px;
    }

    .product-tag {
        color: var(--primary);
        font-weight: 600;
        margin-bottom: 15px;
    }

    .product-image {
        height: 180px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 25px;
    }

    .product-image img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    .product-description {
        margin-bottom: 20px;
    }

    .product-features {
        margin: 0 0 20px 20px;
    }

    .product-features li {
        margin-bottom: 8px;
    }

    .product-best-for {
        margin-top: auto;
        margin-bottom: 25px;
    }

    .section-divider {
        width: 120px;
        height: 3px;
        background: var(--primary);
        margin: 70px auto 20px;
        border-radius: 3px;
    }

    .advice-box {
        background: #f8f9fa;
        border-left: 4px solid var(--accent);
        padding: 25px 30px;
        margin-top: 40px;
        border-radius: 8px;
        text-align: justify;
    }

    .advice-box h3 {
        margin-top: 0;
        margin-bottom: 12px;
        color: var(--primary);
        text-align: center;
    }

    .product-tag.value i {
    color: var(--secondary)      
    }

    .product-tag.recommended i {
        color: var(--secondary); 
    }

    .product-tag.premium i {
        color: #f4b400;
    }

    .price-guide {
        margin-top: 15px;
        color: var(--text-light);
        font-size: 0.95rem;
    }

    .price-guide strong {
        color: var(--text-dark);
    }

    .price-band {
        color: var(--accent);
        font-weight: 700;
        letter-spacing: 1px;
    }

    .price-guide-key {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px 22px;

        margin: 18px auto 0;
        color: var(--text-light);
        font-size: 0.9rem;
    }

    .price-guide-key > span:first-child strong {
        color: var(--text-dark);
    }

    .price-guide-key span:not(:first-child) strong {
        color: var(--accent);
        margin-right: 4px;
    }