/* Container */
.related-swiper {
    width: 100%;
}

    .related-swiper .swiper-wrapper {
        align-items: stretch;
    }

    /* IMPORTANT: let Swiper control widths; do NOT force width:100% on slides */
    .related-swiper .swiper-slide {
        display: flex;
        flex: 0 0 auto;
        height: auto;
        box-sizing: border-box;
        width: 300px !important;
    }

    /* Card */
    .related-swiper .product-card {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        width: auto;
        max-width: 100%;
        padding: 12px;
        border: 1px solid rgba(0,0,0,.08);
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,.06);
    }

    /* Image */
    .related-swiper .product-thumb {
        display: block;
        margin: 0 0 10px;
    }

        .related-swiper .product-thumb img {
            display: block;
            width: 100%;
            height: auto;
            aspect-ratio: 4/3;
            object-fit: contain;
            background: #f7f7f7;
            border-radius: 6px;
        }

    /* Text/CTA */
    .related-swiper .product-title {
        font-size: .95rem;
        line-height: 1.35;
        margin: 6px 0 8px;
        text-align: center;
        min-height: 2.7em;
    }

    .related-swiper .product-buttons {
        margin-top: auto;
        text-align: center;
    }

        .related-swiper .product-buttons .btn {
            white-space: nowrap;
        }


/* Set a CSS var so you can tweak width later without touching JS */
.related-swiper {
    --slide-w: 300px;
}

    /* Make sure wrapper is a single left-aligned row */
    .related-swiper .swiper-wrapper {
        display: flex; /* Swiper sets this anyway—just being explicit */
        flex-direction: row;
        flex-wrap: nowrap; /* no wrapping to next line */
        justify-content: flex-start;
        align-items: stretch;
    }

    /* Each slide uses the CSS width (Swiper won’t override in 'auto' mode) */
    .related-swiper .swiper-slide {
        flex: 0 0 var(--slide-w);
        width: var(--slide-w);
        height: auto;
        box-sizing: border-box;
    }

    /* Your card can stay as-is; these guardrails keep it tidy */
    .related-swiper .product-card {
        display: flex;
        flex-direction: column;
        width: auto;
        max-width: 100%;
    }


/* optional: responsive slide widths via media queries */
@media (max-width: 575.98px) {
    .related-swiper {
        --slide-w: 85vw;
    }
}
/* one big card on phones */
@media (min-width: 576px) and (max-width: 767.98px) {
    .related-swiper {
        --slide-w: 48%;
    }
}
/* ~2-up */
@media (min-width: 768px) and (max-width: 991.98px) {
    .related-swiper {
        --slide-w: 31%;
    }
}
/* ~3-up */
@media (min-width: 992px) {
    .related-swiper {
        --slide-w: 23%;
    }
}
/* ~4-up */
/* Make Owl hero taller on mobile */
@media (max-width: 767px) {

    /* If your hero section is #vl-hero */
    #vl-hero {
        min-height: 78vh; /* tweak: 70–90vh */
        padding: 0 !important; /* optional: remove vertical padding fighting your height */
    }

        /* Force Owl wrapper + stage to inherit that height */
        #vl-hero .hero-carousel-wrap,
        #vl-hero .hero-container,
        #vl-hero .owl-carousel,
        #vl-hero .owl-stage-outer,
        #vl-hero .owl-stage,
        #vl-hero .owl-item {
            height: 78vh; /* match the vh above */
            min-height: 78vh;
        }

        /* Make each slide fill the available height */
        #vl-hero .slide {
            height: 100%;
            min-height: 100%;
            display: flex;
            flex-direction: column; /* stack on mobile */
            justify-content: center; /* vertically center content */
            gap: 14px;
            padding: 18px 16px; /* breathing room */
        }

        /* Keep the image visible and not tiny */
        #vl-hero .slide-media {
            flex: 0 0 auto;
        }

            #vl-hero .slide-media img {
                width: 100%;
                height: auto;
                max-height: 32vh; /* tweak: 28–40vh */
                object-fit: contain;
                display: block;
                margin: 0 auto;
            }

        /* Let copy take space and wrap cleanly */
        #vl-hero .slide-copy {
            flex: 1 1 auto;
        }
}

/* =========================
   HARD RESET USING CSS BUILT-IN
========================= */

select {
    all: unset; /* wipes all browser + framework styles */

    box-sizing: border-box;
    display: block;
    width: 100%;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;
    color: #333;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 14px 42px 14px 16px;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* custom dropdown arrow */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='%23666' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    height: 58px !important;
}

    /* =========================
   FOCUS STATE
========================= */

    select:focus {
        border-color: #a8cf45;
        box-shadow: 0 0 0 3px rgba(168,207,69,.2);
    }

    /* =========================
   OPTION COLORS
========================= */

    select option {
        color: #222;
        background: #fff;
    }

    /* =========================
   DISABLED
========================= */

    select:disabled {
        background: #f5f5f5;
        color: #999;
        cursor: not-allowed;
    }

/* =========================
   MOBILE FIX
========================= */

@media (max-width:768px) {

    select {
        font-size: 16px; /* prevents iOS zoom */
    }
}