#top-bar a:link { color: var(--white); }
    #top-bar a:hover { color: var(--orange); text-decoration: none; }

#navigation-bar { }
#navigation-bar .logo-strap { font-size: small; font-weight: bold; margin-top: -9px; margin-left: 7px; }
.text-black { color: #000000; }
p.text-black { color: #000000; }
a.text-black { color: #000000; }
i.text-black { color: #000000; }
i.text-orange { color: var(--orange); }
.footer-logo img { width: 300px; }
.tww { font-size: 10px; text-transform: uppercase; }

.text-logo { font-family: 'Poppins', serif; font-weight: 700; }
.product-description { text-align: center; padding: 0 20px; }
.product-image { padding: 0 20px; }
.unavailable { font-weight: bold; color: red; }
.home-product-image img { width: 300px; }

/* Woodchip promo banner */
.woodchip-banner .banner-image {
    width: 100%;
    height: 100%;
    min-height: 320px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Use a path relative to this CSS file (css/ → ../img) to avoid issues with leading slash when served from subdirs */
    background-image: url('../img/woodchip-image.jpg');
}
.woodchip-banner .sale-kicker { font-weight: 800; }
.woodchip-banner .sale-price { font-size: 26px; }
.woodchip-banner .sale-price .strike { text-decoration: line-through; }
.woodchip-banner .sale-price .was { font-weight: 600; }

/* Equal heights on desktop */
@media (min-width: 768px) {
    /* Make columns flex containers and ensure they stretch to equal heights */
    .woodchip-banner .col-md-5,
    .woodchip-banner .col-md-7 { display: flex; align-items: stretch; height: 100%; }
    /* Ensure the row itself stretches its children */
    .woodchip-banner .row { align-items: stretch; }
    .woodchip-banner .banner-image { flex: 1 1 auto; }
    .woodchip-banner .text-side { display: flex; flex-direction: column; width: 100%; }
    .woodchip-banner .text-side .bg-secondary { flex: 1 1 auto; }
    .woodchip-banner .mulch-intro { font-size: 18px!important;}
}

@media (max-width: 991px) {
    .woodchip-banner .banner-image { min-height: 260px; }
}

/* Use a taller image and increase the min-height on desktop sizes */
@media (min-width: 992px) {
    .woodchip-banner .banner-image {
        background-image: url('../img/woodchip-image-desktop.jpg');
        min-height: 420px;
    }
    /* Guarantee a baseline height for both columns at desktop */
    .woodchip-banner .row { align-items: stretch; min-height: 420px; }
}

@media (max-width: 991px) {
    /* Stack the woodchip banner below 992px (override col-md widths) */
    .woodchip-banner .row { flex-direction: column; align-items: stretch; }
    .woodchip-banner .col-md-5,
    .woodchip-banner .col-md-7 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        display: block;
        height: auto;
    }
    /* Undo equal-height flexing for the stacked layout */
    .woodchip-banner .text-side { display: block; width: 100%; }
    .woodchip-banner .text-side .bg-secondary { flex: none; height: auto; }
    #top-bar { display: none; }
}

@media (max-width: 767px) {
    #footer-area { text-align: center; }
    #footer-area .footer-logo { margin-bottom: 20px; }
    /* Center text when stacked on mobile */
    .woodchip-banner .bg-primary,
    .woodchip-banner .bg-secondary { text-align: center; }
}