main {
    overflow-x: hidden
}

.hgp-banner-section img {
    width: 100%;
    height: auto;
    border-radius: 1rem
}

#hgp-banner-section-carousel {
    border: 1px solid var(--light-border);
    border-radius: 1rem;
    overflow: hidden
}

#hgp-banner-section-carousel .carousel-inner {
    border-radius: 1rem 1rem 0 0
}

#hgp-banner-section-carousel .carousel-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    max-height: 400px
}

#hgp-banner-section-carousel .carousel-control-next,
#hgp-banner-section-carousel .carousel-control-prev {
    position: absolute;
    width: auto;
    height: auto;
    background: 0 0;
    opacity: 1
}

#hgp-banner-section-carousel .carousel-control-next-icon,
#hgp-banner-section-carousel .carousel-control-prev-icon {
    background-color: var(--brand-red);
    border-radius: 50%;
    padding: 1.2rem;
    background-size: 50% 50%
}

.carousel-controls-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1rem
}

.carousel-controls-container .carousel-indicators {
    position: static;
    margin: 0 1rem
}

.carousel-controls-container .carousel-indicators [data-bs-target] {
    background-color: var(--gray-medium)
}

.carousel-controls-container .carousel-indicators .active {
    background-color: var(--brand-red)
}

#hgp-description .section-title,
#hgp-parts .section-title {
    font-size: clamp(2rem, 1.5rem + 2vw, 3rem)
}

.product-part-card {
    border: 1px solid var(--light-border);
    border-radius: 16px;
    transition: .3s;
    background-color: var(--pure-white);
    box-shadow: var(--shadow-black-08);
    display: flex;
    flex-direction: column;
    height: 100%
}

.product-part-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-black-15)
}

.product-part-card img {
    height: 200px;
    object-fit: contain;
    padding: 1rem;
    width: 100%;
    border-radius: 16px 16px 0 0
}

.product-part-card .card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1
}

.product-part-card .card-title {
    font-weight: 700;
    color: var(--dark-text);
    font-size: clamp(1.4rem, 1.2rem + .5vw, 1.6rem);
    margin-bottom: .75rem
}

.product-part-card .part-detail-toggle {
    background-color: var(--brand-red);
    border-color: var(--brand-red);
    font-weight: 600;
    width: 100%;
    margin-top: auto;
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center
}

.product-part-card .part-detail-toggle:hover {
    opacity: .9
}

.product-part-card .part-detail-toggle .dropdown-icon-hgp {
    font-size: .8rem;
    transition: transform .3s;
    color: var(--white)
}

.product-part-card .part-detail-toggle[aria-expanded=true] .dropdown-icon-hgp {
    transform: rotate(180deg)
}

.product-part-card .collapse .card-body {
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--light-border);
    margin-top: .75rem;
    color: var(--dark-text)
}

.product-part-card .collapse .card-body strong {
    color: var(--brand-red)
}

.product-part-card .collapse .card-body .btn-outline-danger {
    border-color: var(--brand-red);
    color: var(--brand-red);
    font-weight: 600;
    transition: .3s
}

.product-part-card .collapse .card-body .btn-outline-danger:hover {
    background-color: var(--brand-red);
    color: var(--pure-white)
}