/**
 * Category hero height reduction (~50%)
 * Target: category listing pages only (body#category.template-product_list)
 * No impact on homepage, CMS, product pages, or other banners.
 */

/* Desktop: reduce min-height from 450px to 225px */
body#category.template-product_list #category_header {
    min-height: 225px;
}

/* Reduce text overlay padding: 4rem → 2rem */
body#category.template-product_list #category_header .card-header {
    padding-top: 3rem;
    padding-bottom: 1.5rem;
}

/* Slightly reduce title size for balance */
body#category.template-product_list #category_header .head_title {
    font-size: 1.75rem;
    margin-bottom: 0.25rem;
}

/* Mobile/tablet: reduce from 300px to 160px */
@media (max-width: 991.98px) {
    body#category.template-product_list #category_header {
        min-height: 160px;
    }
    body#category.template-product_list #category_header .card-header {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    body#category.template-product_list #category_header .head_title {
        font-size: 1.25rem;
    }
}

/* Small phones: keep minimum readable height */
@media (max-width: 575.98px) {
    body#category.template-product_list #category_header {
        min-height: 130px;
    }
    body#category.template-product_list #category_header .card-header {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
}

/* Green dot pseudo-element alignment */
body#category.template-product_list #category_header .head_title::after {
    bottom: 0rem;
}

/* ============================================
   Landing pages hero — same height reduction
   ============================================ */

/* Desktop: reduce min-height from 450px to 225px */
#landing_header {
    min-height: 225px;
}

/* Reduce text overlay padding */
#landing_header .card-header {
    padding-top: 3rem;
    padding-bottom: 1.5rem;
}

/* Slightly reduce title size */
#landing_header .card-header .card-body .head_title {
    font-size: 2rem;
}
#landing_header .card-header .card-body .head_title small {
    font-size: 1rem;
}

/* Landing green dot */
#landing_header .head_title::after {
    bottom: 0rem;
}

/* Mobile/tablet */
@media (max-width: 991.98px) {
    #landing_header {
        min-height: 160px;
    }
    #landing_header .card-header {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    #landing_header .card-header .card-body .head_title {
        font-size: 1.5rem;
    }
}

/* Small phones */
@media (max-width: 575.98px) {
    #landing_header {
        min-height: 130px;
    }
    #landing_header .card-header {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
}