#how-it-works {
    background-color: var(--bs-primary-bg-subtle);
}

#how-it-works .features-number {
    color: var(--bs-primary);
    opacity: 1;
}

#about-us {
    background-color: var(--bs-primary-bg-subtle);
}

/* How it works & About us — section illustrations at 70% width (30% smaller) */
#how-it-works img.img-fluid,
#about-us img.img-fluid {
    width: 70%;
    max-width: 70%;
}

#for-business {
    background-color: var(--bs-white);
}

/* Hero CTA on green background — white outline, matching pre-scroll navbar auth button */
.hero-section .btn-hero-find-services {
    --bs-btn-color:                 #fff;
    --bs-btn-border-color:          #fff;
    --bs-btn-bg:                    transparent;
    --bs-btn-focus-shadow-rgb:      255, 255, 255;
    --bs-btn-disabled-color:        rgba(255, 255, 255, 0.5);
    --bs-btn-disabled-border-color: rgba(255, 255, 255, 0.5);
}

.hero-section .btn-hero-find-services:hover,
.hero-section .btn-hero-find-services:focus-visible {
    color:            var(--bv-color-text) !important;
    background-color: #fff !important;
    border-color:     #fff !important;
}

/* Landing bullet icons — brand primary (#689f38) */
.page-landing .mdi-circle-medium {
    color: var(--bv-color-primary);
}

/* About section — list your business: primary green outline; hover solid primary + white text */
#about-us .btn-list-your-business {
    --bs-btn-color: var(--bv-color-primary);
    --bs-btn-border-color: var(--bv-color-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bv-color-primary);
    --bs-btn-hover-border-color: var(--bv-color-primary);
    --bs-btn-focus-shadow-rgb: 104, 159, 56;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bv-color-primary);
    --bs-btn-active-border-color: var(--bv-color-primary);
}

/* Skote bootstrap.min.css sets .btn:hover { color: #757575 } — override for this CTA */
#about-us .btn-list-your-business:hover,
#about-us .btn-list-your-business:focus-visible,
#about-us .btn-list-your-business:active {
    color: #fff;
    background-color: var(--bv-color-primary);
    border-color: var(--bv-color-primary);
}

#faqs {
    background-color: var(--bs-white);
}

#faqs .nav-pills .nav-link.active,
#faqs .nav-pills .show > .nav-link {
    background-color: var(--bs-primary) !important;
}
#faqs .nav-pills .nav-link:not(.active):hover {
    color: var(--bs-primary);
}

.store-logo-thumb {
    width: 6rem;
    height: 6rem;
    object-fit: contain;
}

/*
 * Reserve carousel vertical space before Owl initializes.
 * Owl hides .owl-carousel with display:none until .owl-loaded; without a
 * min-height the featured/timeline sections collapse to zero and push the
 * rest of the page down on init. Heights match one content row plus nav.
 */
#stores-grid {
    min-height: 22.5rem;
}

#timeline-carousel {
    min-height: 14rem;
}

@media (min-width: 576px) {
    #stores-grid {
        min-height: 22.5rem;
    }

    #timeline-carousel {
        min-height: 14rem;
    }
}

@media (min-width: 768px) {
    #stores-grid {
        min-height: 22.5rem;
    }

    #timeline-carousel {
        min-height: 14rem;
    }
}

@media (min-width: 992px) {
    #stores-grid {
        min-height: 22.5rem;
    }

    #timeline-carousel {
        min-height: 14rem;
    }
}

/* Equal-height featured store cards.
 *
 * Owl Carousel sets the slot width on `.owl-item`, and the inner `.item` and
 * `.team-box` inherit that width as block-level elements. We must NOT change
 * `.item` (or its anchor child) to `display: flex`: doing so makes the flex
 * container shrink to content width inside the owl slot, narrowing the card.
 *
 * Equal heights come from a fixed-size logo (`.store-logo-thumb`) and a
 * fixed-height title slot below, so siblings render at the same height
 * regardless of name length. Names that fit in fewer lines are vertically
 * centered inside the slot; longer names clamp to 5 lines.
 */
#stores-grid .team-box .card-body .mt-3 {
    min-height: 8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#stores-grid .team-box .card-body h5 {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.25rem;
}

/* Landing page carousel navigation -- unified brand-green arrows */
.page-landing .navs-carousel .owl-nav button {
    background-color: var(--bv-color-primary) !important;
    color: #fff !important;
    width: 2.5rem;
    height: 2.5rem;
    line-height: 1 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.page-landing .navs-carousel .owl-nav button:hover,
.page-landing .navs-carousel .owl-nav button:focus {
    background-color: var(--bv-green-700) !important;
    outline: none;
}

#stores-grid.navs-carousel .owl-nav .carousel-control-prev-icon,
#stores-grid.navs-carousel .owl-nav .carousel-control-next-icon {
    width: 1.25rem;
    height: 1.25rem;
}