/* ==========================================================================
   WoodMart Promo Banner
   Original styles + Herbal Help category banner overrides
   ========================================================================== */

.promo-banner {
    --button-space: 15px;
    --button-size: 28px;
    --content-width: var(--wd-max-width);
    --wd-otl-offset: calc(var(--wd-otl-width) * -1);
    position: relative;
    overflow: hidden;
    border-radius: var(--wd-brd-radius);
    transform: translate3d(0, 0, 0);
}

.promo-banner .banner-image :is(img, picture, video) {
    width: 100%;
    height: var(--wd-img-height);
    object-fit: cover;
    object-position: inherit;
}

.promo-banner .banner-image[style^="height"] :is(img, picture) {
    height: 100%;
}

.promo-banner .wrapper-content-banner {
    z-index: 2;
    display: flex;
    overflow: hidden;
    padding: 30px;
    border-radius: var(--wd-brd-radius);
    transform: translate3d(0, 0, 0);
}

.promo-banner .content-banner {
    --wd-tags-mb: 10px;
    position: relative;
    width: 100%;
    max-width: var(--content-width);
}

.promo-banner :is(.banner-subtitle, .banner-title, .banner-inner):not(:first-child) {
    margin-top: 7px;
}

.promo-banner .banner-title {
    display: block;
    margin-bottom: 0;
    line-height: 1.3;
}

.promo-banner .banner-inner p:first-child:empty {
    display: none;
}

.promo-banner .wd-countdown-timer {
    margin-top: 10px;
}

.promo-banner .banner-btn-wrapper {
    margin-top: var(--button-space);
}

.promo-banner.wd-with-link .wrapper-content-banner {
    pointer-events: none;
}

.promo-banner.wd-with-link:hover .btn {
    pointer-events: auto;
}

.wd-bg-position-top {
    background-position: center top;
    object-position: center top;
}

.wd-bg-position-bottom {
    background-position: center bottom;
    object-position: center bottom;
}

.wd-bg-position-left {
    background-position: left center;
    object-position: left center;
}

.wd-bg-position-right {
    background-position: right center;
    object-position: right center;
}

.wd-bg-position-center {
    background-position: center;
    object-position: center;
}

.banner-increased-padding .wrapper-content-banner {
    padding: 7%;
}

@media (max-width: 1024px) {
    .banner-subtitle:is(.wd-fontsize-s, .wd-fontsize-m) {
        font-size: 14px;
    }

    .banner-title:is(.wd-fontsize-xl, .wd-font-size-xxl) {
        font-size: 22px;
    }
}

@media (max-width: 768.98px) {
    .banner-btn-wrapper :is(.btn-size-default, .btn-size-large, .btn-size-extra-large) {
        padding: 5px 14px;
        min-height: 36px;
        font-size: 12px;
    }

    .banner-btn-wrapper .btn-style-link {
        padding: 0;
        min-height: unset;
    }
}

@media (max-width: 767.98px) {
    .promo-banner .banner-subtitle {
        font-size: 3vw;
    }

    .promo-banner .banner-title {
        font-size: 5vw;
    }
}


/* ==========================================================================
   HERBAL HELP — POPULAR CATEGORY BANNERS
   Add CSS class "hh-cat-banner" to each Promo Banner Elementor widget.
   Designed for: image/content on the left, readable live text on the right.
   ========================================================================== */

/* Soft light gradient behind the live text.
   Keeps the product image visible on the left and improves readability. */
.hh-cat-banner .promo-banner .wrapper-content-banner,
.promo-banner.hh-cat-banner .wrapper-content-banner {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 28%,
        rgba(255, 255, 255, 0.30) 43%,
        rgba(255, 255, 255, 0.78) 68%,
        rgba(255, 255, 255, 0.94) 100%
    );
}

/* Text block */
.hh-cat-banner .promo-banner .content-banner,
.promo-banner.hh-cat-banner .content-banner {
    max-width: 58%;
    margin-left: auto;
}

/* Category title */
.hh-cat-banner .promo-banner .banner-title,
.promo-banner.hh-cat-banner .banner-title {
    color: #172417;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.18;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.75);
}

/* Category description */
.hh-cat-banner .promo-banner .banner-inner,
.promo-banner.hh-cat-banner .banner-inner {
    color: #252525;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.42;
}

/* Remove editor-added paragraph spacing */
.hh-cat-banner .promo-banner .banner-inner p,
.promo-banner.hh-cat-banner .banner-inner p {
    margin: 0;
}

/* Button */
.hh-cat-banner .promo-banner .banner-btn-wrapper,
.promo-banner.hh-cat-banner .banner-btn-wrapper {
    margin-top: 14px;
}

.hh-cat-banner .promo-banner .wd-btn-text,
.promo-banner.hh-cat-banner .wd-btn-text {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
}


/* ==========================================================================
   HERBAL HELP — TABLET
   ========================================================================== */

@media (max-width: 1024px) {
    .hh-cat-banner .promo-banner .wrapper-content-banner,
    .promo-banner.hh-cat-banner .wrapper-content-banner {
        padding: 22px;
    }

    .hh-cat-banner .promo-banner .content-banner,
    .promo-banner.hh-cat-banner .content-banner {
        max-width: 60%;
    }

    .hh-cat-banner .promo-banner .banner-title,
    .promo-banner.hh-cat-banner .banner-title {
        font-size: 26px;
    }

    .hh-cat-banner .promo-banner .banner-inner,
    .promo-banner.hh-cat-banner .banner-inner {
        font-size: 17px;
    }
}


/* ==========================================================================
   HERBAL HELP — MOBILE
   Larger, clearer typography and tap targets for a 50+ audience.
   ========================================================================== */

@media (max-width: 767.98px) {
    .hh-cat-banner .promo-banner .wrapper-content-banner,
    .promo-banner.hh-cat-banner .wrapper-content-banner {
        padding: 18px;

        background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0) 16%,
            rgba(255, 255, 255, 0.48) 37%,
            rgba(255, 255, 255, 0.90) 64%,
            rgba(255, 255, 255, 0.97) 100%
        );
    }

    .hh-cat-banner .promo-banner .content-banner,
    .promo-banner.hh-cat-banner .content-banner {
        max-width: 62%;
        margin-left: auto;
    }

    /* Override WoodMart's default 5vw mobile title */
    .hh-cat-banner .promo-banner .banner-title,
    .promo-banner.hh-cat-banner .banner-title {
        font-size: 24px;
        font-weight: 700;
        line-height: 1.18;
    }

    .hh-cat-banner .promo-banner .banner-inner,
    .promo-banner.hh-cat-banner .banner-inner {
        font-size: 17px;
        font-weight: 500;
        line-height: 1.38;
    }

    .hh-cat-banner .promo-banner .banner-btn-wrapper,
    .promo-banner.hh-cat-banner .banner-btn-wrapper {
        margin-top: 13px;
    }

    /* Override WoodMart's small 12px / 36px mobile button */
    .hh-cat-banner .promo-banner .banner-btn-wrapper
    :is(.btn-size-default, .btn-size-large, .btn-size-extra-large),
    .promo-banner.hh-cat-banner .banner-btn-wrapper
    :is(.btn-size-default, .btn-size-large, .btn-size-extra-large) {
        min-height: 44px;
        padding: 8px 16px;
        font-size: 14px;
    }

    .hh-cat-banner .promo-banner .wd-btn-text,
    .promo-banner.hh-cat-banner .wd-btn-text {
        font-size: 14px;
        font-weight: 700;
    }
}