html { font-size: 12px; }

:root {
    --bs-body-font-size: .9rem;  /* Overwrite this variable */
    --bs-nav-link-color: rgb(0, 0, 0, 0.0);
    font-size: var(--bs-body-font-size);
}
/* Media query for small screens */
@media (max-width: 320px) {
    .image_box {
        min-height: 150px;
    }
    .item-name {
        min-height: 35px;
    }
}

/* Media query for medium screens */
@media (min-width: 321px) and (max-width: 640px) {
    .image_box {
        min-height: 200px;
    }
    .item-name {
        min-height: 40px;
    }
}

/* Media query for large screens */
@media (min-width: 641px) {
    .image_box {
        min-height: 250px;
    }
    .item-name {
        min-height: 50px;
    }
}
body { color:#000000;}
.nav-link { color: #000000}

.wep-slide-over.wep-slide-over-top {
    z-index: 15000 !important;
}

.image_area {
    position: relative;
}
@media screen and (max-width: 767px) {
    .qv_actions {
        display:none;
    }
}

@media screen and (min-width: 768px) {
    .qv_actions {
        position: absolute;

        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        opacity: 0;

        /*-webkit-transition: opacity .7s ease;
        transition: opacity .7s ease;*/
    }

    .qv_actions > .button_actions {
        width: 67%;
        margin: auto;
        display: inline-block;
        vertical-align: middle;
    }

    .qv_actions > .button_actions > [class*="btn"]:not(:first-child) {
        margin-top: 7px;
    }

    .qv_actions::after {
        content: "";
        display: inline-block;
        vertical-align: middle;
        height: 100%;
    }

    .quick_view:hover {
        background-color: #000000;
        color: white;
    }

    .image_area:hover .qv_actions {
        opacity: 1;
        display: contents;
        /*-webkit-transition: opacity .1s ease;*/
        /*transition: opacity .1s ease;*/
        /*-webkit-transition: -webkit-transform .1s ease;*/
        /*transition: transform .1s ease;*/

        -webkit-transform: translateY(0%);
        -ms-transform: translateY(0%);
        transform: translateY(0%);
    }

    .image_area:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0);
    }

    .image_area .qv_actions [class*="btn"] {
        margin: 3px;
    }

    .border2:hover {
        box-shadow: 5px 5px 5px 5px #ccc;
        -moz-box-shadow: 5px 5px 5px 5px #ccc;
        -webkit-box-shadow: 5px 5px 5px 5px #ccc;

        background: linear-gradient(to bottom, #FFFFFF, #FFFFFF);
    }
}

.in_stock_btn {
    background-color: #693075;
    border-color: #693075;
    color: white;
}
.oos_stock_btn {
    background-color: red !important;
    border-color: red !important;
    color: white !important;
}

.in_stock_btn_light {
    background-color: #8b3e9b;
    border-color: #693075;
    color: white;
}
.oos_stock_btn_light {
    background-color: #911313 !important;
    border-color: red !important;
    color: white !important;
}

/* Category / manufacturer / advanced search breadcrumbs (align with filter grid) */
:root {
    --hp-brand: #823e8b;
    --hp-brand-dark: #693075;
}

.ais-InstantSearch > .hp-page-breadcrumb-wrap {
    flex: 0 0 100%;
    max-width: 100%;
}

.ais-InstantSearch .hp-page-breadcrumb,
.hp-product-breadcrumb-wrap .hp-page-breadcrumb {
    padding-left: 0;
    padding-right: 0;
}

.hp-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0;
    font-size: clamp(0.875rem, 2.2vw + 0.5rem, 1.0625rem);
    font-weight: 500;
    line-height: 1.4;
}

.hp-breadcrumb .breadcrumb-item {
    display: flex;
    align-items: center;
}

.hp-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: #9ca3af;
    font-weight: 400;
    padding-right: 0.4rem;
    padding-left: 0.4rem;
}

.hp-breadcrumb .breadcrumb-item a {
    color: #5c5c5c;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease;
}

.hp-breadcrumb .breadcrumb-item a:hover,
.hp-breadcrumb .breadcrumb-item a:focus {
    color: var(--hp-brand);
    text-decoration: underline;
}

.hp-breadcrumb .breadcrumb-item.active {
    color: #424242;
    font-weight: 600;
}

.hp-product-breadcrumb-wrap {
    padding-bottom: 0.25rem;
}

@media (min-width: 768px) {
    .hp-breadcrumb {
        font-size: clamp(0.9375rem, 1.1vw + 0.65rem, 1.125rem);
    }

    .hp-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
}

@media (min-width: 1200px) {
    .hp-breadcrumb {
        font-size: 1.125rem;
    }
}