/* Homepage hero - reduce the tall Slider Revolution gray area */
.home .mkd-slider {
    background: #f5f5f5;
}

.home .mkd-slider .mkd-slider-inner {
    overflow: visible;
}

.home .mkd-eh-item-content.mkd-eh-custom-152531,
.home .mkd-eh-item-content.mkd-eh-custom-458659,
.home .mkd-eh-item-content.mkd-eh-custom-121342 {
    padding-bottom: 56px !important;
}

@media only screen and (min-width: 1025px) {
    .home .hero-main,
    .home .hero-main sr7-adjuster,
    .home .hero-main sr7-content,
    .home .hero-main sr7-slide,
    .home .hero-main sr7-module-bg,
    .home .hero-main sr7-module-shadow,
    .home .mkd-slider sr7-module,
    .home .mkd-slider sr7-content,
    .home .mkd-slider sr7-slide,
    .home .mkd-slider sr7-module-bg,
    .home .mkd-slider sr7-module-shadow,
    .home .mkd-slider rs-module-wrap,
    .home .mkd-slider rs-module,
    .home .mkd-slider rs-slides,
    .home .mkd-slider rs-slide {
        --mkd-rv-hero-height: clamp(500px, 62vh, 660px);
        height: clamp(500px, 62vh, 660px) !important;
        max-height: clamp(500px, 62vh, 660px) !important;
    }
}

@media only screen and (max-width: 1440px) and (min-width: 1025px) {
    .home .hero-mute-btn {
        top: auto !important;
        right: 32px !important;
        bottom: 32px !important;
        left: auto !important;
        transform: none !important;
    }
}

/* Short-laptop note overlap fix — spans the whole short-height laptop range
   (1025-1600 wide, <900 tall), covering BOTH the 1025-1440 and 1441-1600
   height blocks below. On these viewports SR7's default layer tops let the red
   promo note (two stacked paragraphs, both .hero-brand-note) drop onto the
   bottom-pinned title/CTA. SR7 owns each layer's inline `top`, so a `bottom`
   anchor can't move them (and would collapse the two paragraphs together) — a
   `transform` is the only lever SR7 doesn't revert, and it shifts both
   paragraphs up as a group, preserving their spacing. -130px clears the title
   across the whole range (verified via headless Chrome at widths 1025-1483).
   Tall desktops keep a taller hero and never overlap, so are excluded. */
@media only screen and (min-width: 1025px) and (max-width: 1600px) and (max-height: 900px) {
    .home .hero-brand-note,
    .home .hero-brand-contact {
        transform: translateY(-130px) !important;
    }
}

@media only screen and (min-width: 1025px) and (max-width: 1440px) and (max-height: 900px) {
    .home .hero-main,
    .home .hero-main sr7-adjuster,
    .home .hero-main sr7-content,
    .home .hero-main sr7-slide,
    .home .hero-main sr7-module-bg,
    .home .hero-main sr7-module-shadow,
    .home .mkd-slider sr7-module,
    .home .mkd-slider sr7-content,
    .home .mkd-slider sr7-slide,
    .home .mkd-slider sr7-module-bg,
    .home .mkd-slider sr7-module-shadow,
    .home .mkd-slider rs-module-wrap,
    .home .mkd-slider rs-module,
    .home .mkd-slider rs-slides,
    .home .mkd-slider rs-slide {
        --mkd-rv-hero-height: clamp(460px, 58vh, 560px);
        height: clamp(460px, 58vh, 560px) !important;
        max-height: clamp(460px, 58vh, 560px) !important;
    }

    .home .hero-brand-title {
        top: auto !important;
        bottom: 94px !important;
        transform: none !important;
    }

    .home .hero-brand-cta {
        top: auto !important;
        bottom: 34px !important;
        transform: none !important;
    }

    .home .hero-mute-btn {
        top: auto !important;
        right: 28px !important;
        bottom: 28px !important;
        left: auto !important;
        transform: none !important;
    }
}

@media only screen and (min-width: 1441px) {
    .home .hero-main,
    .home .hero-main sr7-adjuster,
    .home .hero-main sr7-content,
    .home .hero-main sr7-slide,
    .home .hero-main sr7-module-bg,
    .home .hero-main sr7-module-shadow,
    .home .mkd-slider sr7-module,
    .home .mkd-slider sr7-content,
    .home .mkd-slider sr7-slide,
    .home .mkd-slider sr7-module-bg,
    .home .mkd-slider sr7-module-shadow,
    .home .mkd-slider rs-module-wrap,
    .home .mkd-slider rs-module,
    .home .mkd-slider rs-slides,
    .home .mkd-slider rs-slide {
        --mkd-rv-hero-height: 660px;
        height: 660px !important;
        max-height: 660px !important;
    }

    .home .hero-mute-btn {
        top: auto !important;
        right: 40px !important;
        bottom: 40px !important;
        left: auto !important;
        width: 60px !important;
        min-width: 60px !important;
        height: 60px !important;
        min-height: 60px !important;
        line-height: 60px !important;
        transform: none !important;
    }
}

@media only screen and (min-width: 1441px) and (max-width: 1600px) and (max-device-width: 1600px) and (max-height: 900px) {
    .home .hero-main,
    .home .hero-main sr7-adjuster,
    .home .hero-main sr7-content,
    .home .hero-main sr7-slide,
    .home .hero-main sr7-module-bg,
    .home .hero-main sr7-module-shadow,
    .home .mkd-slider sr7-module,
    .home .mkd-slider sr7-content,
    .home .mkd-slider sr7-slide,
    .home .mkd-slider sr7-module-bg,
    .home .mkd-slider sr7-module-shadow,
    .home .mkd-slider rs-module-wrap,
    .home .mkd-slider rs-module,
    .home .mkd-slider rs-slides,
    .home .mkd-slider rs-slide {
        --mkd-rv-hero-height: clamp(460px, 58vh, 560px);
        height: clamp(460px, 58vh, 560px) !important;
        max-height: clamp(460px, 58vh, 560px) !important;
    }

    .home .hero-brand-title {
        top: auto !important;
        bottom: 94px !important;
        transform: none !important;
    }

    .home .hero-brand-cta {
        top: auto !important;
        bottom: 34px !important;
        transform: none !important;
    }

    .home .hero-mute-btn {
        top: auto !important;
        right: 28px !important;
        bottom: 28px !important;
        left: auto !important;
        transform: none !important;
    }
}

@media only screen and (max-width: 1024px) and (min-width: 681px) {
    .home .mkd-eh-item-content.mkd-eh-custom-152531,
    .home .mkd-eh-item-content.mkd-eh-custom-458659,
    .home .mkd-eh-item-content.mkd-eh-custom-121342 {
        padding: 0 60px 32px !important;
    }

    .home .hero-main,
    .home .hero-main sr7-adjuster,
    .home .hero-main sr7-content,
    .home .hero-main sr7-slide,
    .home .hero-main sr7-module-bg,
    .home .hero-main sr7-module-shadow,
    .home .mkd-slider sr7-module,
    .home .mkd-slider sr7-content,
    .home .mkd-slider sr7-slide,
    .home .mkd-slider sr7-module-bg,
    .home .mkd-slider sr7-module-shadow,
    .home .mkd-slider rs-module-wrap,
    .home .mkd-slider rs-module,
    .home .mkd-slider rs-slides,
    .home .mkd-slider rs-slide {
        --mkd-rv-hero-height: clamp(400px, 52vw, 440px);
        height: clamp(400px, 52vw, 440px) !important;
        max-height: 440px !important;
    }

    .home .hero-mute-btn {
        top: auto !important;
        right: 28px !important;
        bottom: 28px !important;
        left: auto !important;
        width: 54px !important;
        min-width: 54px !important;
        height: 54px !important;
        min-height: 54px !important;
        line-height: 54px !important;
        transform: none !important;
    }
}

@media only screen and (max-width: 680px) {
    .home .mkd-eh-item-content.mkd-eh-custom-152531,
    .home .mkd-eh-item-content.mkd-eh-custom-458659,
    .home .mkd-eh-item-content.mkd-eh-custom-121342 {
        padding: 0 20px 24px !important;
    }

    .home .hero-main,
    .home .hero-main sr7-adjuster,
    .home .hero-main sr7-content,
    .home .hero-main sr7-slide,
    .home .hero-main sr7-module-bg,
    .home .hero-main sr7-module-shadow,
    .home .mkd-slider sr7-module,
    .home .mkd-slider sr7-content,
    .home .mkd-slider sr7-slide,
    .home .mkd-slider sr7-module-bg,
    .home .mkd-slider sr7-module-shadow,
    .home .mkd-slider rs-module-wrap,
    .home .mkd-slider rs-module,
    .home .mkd-slider rs-slides,
    .home .mkd-slider rs-slide {
        --mkd-rv-hero-height: clamp(280px, 78vw, 340px);
        height: clamp(280px, 78vw, 340px) !important;
        max-height: 340px !important;
    }

    .home .hero-mute-btn {
        top: auto !important;
        right: 18px !important;
        bottom: 18px !important;
        left: auto !important;
        width: 48px !important;
        min-width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        line-height: 48px !important;
        transform: none !important;
    }

    .home #vol-button {
        font-size: 20px !important;
        line-height: 48px !important;
    }
}

@media only screen and (max-width: 480px) {
    .home .hero-main,
    .home .hero-main sr7-adjuster,
    .home .hero-main sr7-content,
    .home .hero-main sr7-slide,
    .home .hero-main sr7-module-bg,
    .home .hero-main sr7-module-shadow,
    .home .mkd-slider sr7-module,
    .home .mkd-slider sr7-content,
    .home .mkd-slider sr7-slide,
    .home .mkd-slider sr7-module-bg,
    .home .mkd-slider sr7-module-shadow,
    .home .mkd-slider rs-module-wrap,
    .home .mkd-slider rs-module,
    .home .mkd-slider rs-slides,
    .home .mkd-slider rs-slide {
        --mkd-rv-hero-height: clamp(250px, 74vw, 300px);
        height: clamp(250px, 74vw, 300px) !important;
        max-height: 300px !important;
    }
}

/* Video bg (slide 13): fit the 16:9 YouTube video inside the hero box instead
 * of zoom-cropping it ("cover"), at every breakpoint.
 *
 * SR7 renders the YouTube player as an <iframe class="sr7-media"> (the iframe IS
 * the .sr7-media element — there is no <sr7-media> wrapper around it), and it
 * leaves the iframe's ancestors (sr7-mask + the slidebg sr7-bg layer) locked at
 * the slide's *grid* height (~700px) regardless of the real hero height. Two
 * problems result: (1) the video box overflows taller than the other slides,
 * and (2) SR7 oversizes the iframe to "cover" that 700px box, cropping the 16:9
 * video.
 *
 * Fix: clamp the mask and the slidebg layer to the actual slide height on a
 * black background, then size the iframe to match the hero box exactly (reset
 * SR7's inline cover width/height/transform). YouTube's own player then
 * letterboxes/pillarboxes the video within that box, so non-16:9 hero areas get
 * black bars instead of a cropped/zoomed video. */
.home .hero-video-bg sr7-mask,
.home .hero-video-bg .sr7-layer[data-subtype="slidebg"] {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background-color: #000 !important;
}

.home .hero-video-bg .sr7-media,
.home .hero-video-bg iframe.sr7-media,
.home .hero-video-bg sr7-media iframe {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    transform: none !important;
    opacity: 1 !important;
}

/* Mobile/tablet: anchor slide 13 to the viewport width so its bg fills the
 * correct visible area (SR7 otherwise sizes it from its configured grid). */
@media only screen and (max-width: 1024px) {
    .home .hero-video-bg {
        width: 100vw !important;
        left: 0 !important;
    }
}

.home .hero-mute-btn {
    z-index: 90 !important;
    cursor: pointer;
}

.home #vol-button {
    display: block;
    width: 100%;
    height: 100%;
    line-height: inherit !important;
    text-align: center;
    pointer-events: none;
}

/* WooCommerce category grid - keep category tiles aligned with Depot products */
.home .mkd-child-category-nav {
    margin: 0 0 32px;
    padding-left: max(0px, calc((100% / 3 - 300px) / 2));
}

.home .mkd-child-category-nav-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px 34px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home .mkd-child-category-nav-item {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #c8102e; /* fire-red accent, matches call-widget */
    font: inherit;
    font-size: 14px; /* one step above the 13px black category label below */
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.4;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s ease;
}

.home .mkd-child-category-nav-item:hover,
.home .mkd-child-category-nav-item:focus-visible,
.home .mkd-child-category-nav-item.is-active {
    color: #a60d26; /* darker fire-red on hover/active, matches call-widget */
}

.home .mkd-child-category-nav-item:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 4px;
}

.home .mkd-child-category-nav-selects {
    display: none;
    gap: 10px;
}

.home .mkd-child-category-nav-select-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.home .mkd-child-category-cols-wrap {
    position: relative;
    flex: 0 0 130px;
}

.home .mkd-child-category-nav-select-wrap:after,
.home .mkd-child-category-cols-wrap:after {
    position: absolute;
    top: 50%;
    right: 18px;
    width: 0;
    height: 0;
    border-top: 5px solid #080808;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    content: "";
    pointer-events: none;
    transform: translateY(-50%);
}

.home .mkd-child-category-nav-select,
.home .mkd-child-category-cols-select {
    width: 100%;
    height: 46px;
    padding: 0 42px 0 16px;
    border: 1px solid #e1e1e1;
    border-radius: 0;
    background: #fff;
    color: #080808;
    font: inherit;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 46px;
    text-transform: uppercase;
    appearance: none;
}

.home .mkd-child-category-nav-select:focus,
.home .mkd-child-category-cols-select:focus {
    border-color: #080808;
    outline: none;
}

@media only screen and (max-width: 1024px) and (min-width: 681px) {
    .home div.woocommerce.columns-3 > .products > .product-category {
        width: 33.33333%;
    }
}

@media only screen and (max-width: 680px) {
    .home .mkd-child-category-nav {
        margin-top: 28px;
        margin-bottom: 24px;
        padding-left: 0;
    }

    .home .mkd-child-category-nav-list {
        display: none;
    }

    .home .mkd-child-category-nav-selects {
        display: flex;
    }

    .home div.woocommerce.columns-3 > .products > .product-category {
        width: 50%;
    }

    .home div.woocommerce.columns-3 > .products[data-mkd-child-cols="3"] > .product-category {
        width: 33.33333%;
    }

    .home .products[data-mkd-child-cols="3"] > .product-category .woocommerce-loop-category__title {
        font-size: 11px;
    }

}

/* Featured Articles slider - align Visual Composer output with Depot styling */
.home .wpb_posts_slider {
    width: 100vw;
    max-width: none;
    margin: 10px 0 0 calc(50% - 50vw);
    padding: 56px 0 70px;
    background: #f5f5f5;
    text-align: left;
}

.home .wpb_posts_slider > .wpb_wrapper {
    width: min(1120px, calc(100vw - 60px));
    margin: 0 auto;
}

.home .wpb_posts_slider .wpb_posts_slider_heading {
    margin: 0 0 28px;
    color: #080808;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.16em;
    line-height: 1.4;
    text-align: center;
    text-transform: uppercase;
}

.home .wpb_posts_slider .wpb_gallery_slides {
    border: none;
    box-shadow: none;
    height: 320px !important;
    margin: 0;
    overflow: visible;
}

.home .wpb_posts_slider .slides,
.home .wpb_posts_slider .slides > li {
    height: 320px !important;
    margin: 0;
}

.home .wpb_posts_slider .slides > li {
    align-items: center;
    gap: 42px;
    min-height: 260px;
}

.home .wpb_posts_slider .slides > li.flex-active-slide,
.home .wpb_posts_slider .slides > li:first-child {
    display: flex !important;
}

.home .wpb_posts_slider .slides > li > a.link_image {
    display: block;
    flex: 0 0 260px;
    width: 260px;
    height: 260px;
    background: #fff;
    overflow: hidden;
}

.home .wpb_posts_slider .slides > li > a.link_image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home .wpb_posts_slider .flex-caption {
    position: static;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    background: transparent;
    color: #4a4a4a;
    text-shadow: none;
}

.home .wpb_posts_slider .post-title {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.45;
    text-transform: uppercase;
}

.home .wpb_posts_slider .post-title a {
    color: #080808;
    text-decoration: none;
    transition: color 0.2s ease;
}

.home .wpb_posts_slider .post-title a:hover {
    color: #c00;
}

.home .wpb_posts_slider .flex-caption p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #4a4a4a;
    font-size: 14px;
    line-height: 1.7;
    -webkit-box-orient: vertical;
    line-clamp: 5;
    -webkit-line-clamp: 5;
}

.home .wpb_posts_slider .flex-direction-nav a {
    width: 34px;
    height: 34px;
    margin-top: -17px;
    border: 1px solid #ddd;
    background: #fff;
    color: #080808;
    line-height: 32px;
    text-align: center;
    text-shadow: none;
    opacity: 1;
}

.home .wpb_posts_slider .flex-direction-nav a:before {
    color: inherit;
    font-size: 18px;
    line-height: 32px;
}

.home .wpb_posts_slider .flex-control-nav {
    bottom: -28px;
}

.home .wpb_posts_slider .flex-control-paging li a {
    width: 7px;
    height: 7px;
    background: #d6d6d6;
    box-shadow: none;
}

.home .wpb_posts_slider .flex-control-paging li a.flex-active {
    background: #080808;
}

@media only screen and (max-width: 680px) {
    .home .wpb_posts_slider .wpb_gallery_slides,
    .home .wpb_posts_slider .slides,
    .home .wpb_posts_slider .slides > li {
        height: 540px !important;
    }

    .home .wpb_posts_slider .slides > li,
    .home .wpb_posts_slider .slides > li.flex-active-slide,
    .home .wpb_posts_slider .slides > li:first-child {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        min-height: 0;
    }

    .home .wpb_posts_slider .slides > li > a.link_image {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        height: 240px;
        margin: 0 0 18px;
    }

    .home .wpb_posts_slider .flex-caption {
        display: block;
        width: 100%;
        padding: 0 16px 20px;
        text-align: center;
        box-sizing: border-box;
    }

    .home .wpb_posts_slider .post-title {
        font-size: 14px;
        line-height: 1.35;
    }

    .home .wpb_posts_slider .flex-caption p {
        max-width: 260px;
        margin: 0 auto;
        line-clamp: 4;
        -webkit-line-clamp: 4;
    }
}