@charset "UTF-8";

.stock-top, .stock-content, .stock-slider--item picture, .stock-slider--item picture img,
.stock-content--slider .products-slider--nav, .stock-content--page span.h4  { width: 100%; }

.stock-top { gap: 1.6rem; }

.stock-top a { margin-top: 0.7rem; }

.stock-content--slider { overflow: hidden; }

.stock-slider--wrapper {
    width: 1000rem;
    transition: all 0.5s linear;
}

.stock-slider--item { border-radius: 0.8rem; }
.stock-slider--item picture {
    overflow: hidden;
    border-radius: 0.8rem;
}
.stock-slider--item picture, .stock-slider--item picture img {
    object-fit: cover;
    border-radius: 0.8rem;
    transition: all 0.3s ease-in-out;
}
.stock-slider--item:hover picture img { transform: scale(1.1);}
.stock-item--label, .stock-item--label:hover {
    color: #202020;
    background-color: transparent;
    border-radius: 0.4rem;
    border: 0.1rem solid #202020;
}

.stock-slider--item span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stock-content--page {
    position: relative;
    padding: 1rem;
    border-radius: 0.8rem;
}

.stock-content--page picture, .stock-content--page picture img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.8rem;
    z-index: 1;
}

.stock-content--page span, .stock-content--page button { z-index: 2; }

.stock-content--page span.h4 { text-align: center; }

/* Desktop (Big screen less than 3k) Only */
@media (min-width: 1600px) {

    .stock { margin-top: 8rem; }

    .stock .wrapper { gap: 4rem; }

    .stock-content { gap: 2.4rem; }

    .stock-content--slider {
        width: 112.6rem;
        gap: 4rem;
    }

    .stock-slider--wrapper { gap: 2rem; }

    .stock-slider--item {
        width: 36.2rem;
        height: 40.4rem;
        gap: 0.8rem;
    }

    .stock-slider--item picture, .stock-slider--item picture img { max-height: 21.7rem; }

    .stock-slider--item span { -webkit-line-clamp: 3; }

    .stock-content--page {
        width: 36.5rem;
        height: 39.3rem;
        gap: 2.4rem;
    }
}


/* Desktop (All screens) */
@media (min-width: 1025px) {

    .stock-item--label {
        margin-top: 0.8rem;
        padding: 0.9rem 0.8rem;
    }

    .stock-slider--item span.h4 {
        -webkit-line-clamp: 2;
        margin-top: 0.8rem;
    }

    .stock-content--page button { padding: 1.4rem 3.2rem; }
}

/* Desktop (Small screen less than 1600px) Only  */
@media (min-width: 1025px) and (max-width: 1599px) {

    .stock { margin-top: 5.6rem; }

    .stock .wrapper { gap: 3.2rem; }

    .stock-content { gap: 1.6rem; }

    .stock-content--slider {
        width: 95.6rem;
        gap: 3.2rem;
    }

    .stock-slider--wrapper { gap: 1.6rem; }

    .stock-slider--item {
        width: 30.8rem;
        height: 38.5rem;
        gap: 0.8rem;
    }

    .stock-slider--item picture, .stock-slider--item picture img { max-height: 18.5rem; }

    .stock-slider--item span { -webkit-line-clamp: 4; }

    .stock-content--page {
        width: 30.8rem;
        height: 36rem;
        gap: 1.6rem;
    }
}

/* Desktop (All screens) + Tablet */
@media (min-width: 600px) {
}

/* Tablet Only */
@media (min-width: 600px) and (max-width: 1024px) {

    .stock { margin-top: 5.6rem; }

    .stock-content { gap: 1rem; }

    .stock-content--slider {
        width: 35.6rem;
        gap: 3.2rem;
    }

    .stock-slider--wrapper { gap: 2rem; }

    .stock-slider--item {
        width: 35.6rem;
        height: 35.4rem;
    }

    .stock-slider--item picture, .stock-slider--item picture img {
        width: 34rem;
        max-height: 19.9rem;
    }

    .stock-content--page {
        width: 35.4rem;
        height: 41.8rem;
    }
}

/* Tablet + Mobile */
@media (max-width: 1289px) {

    .stock .wrapper { gap: 2.4rem; }

    .stock-slider--item {
        gap: 0.8rem;
        padding: 0.8rem;
        border: 0.1rem solid #E3E3E8;
    }

    .stock-slider--item picture, .stock-slider--item picture img { order: 1; }

    .stock-item--label {
        margin-top: 1.6rem;
        padding: 0.4rem 0.8rem;
        order: 4;
        color: #FFFFFF;
        gap: 0.4rem;
        background-color: #202020;
    }

    .stock-item--label:before {
        display: block;
        content: '';
        width: 1.6rem;
        height: 1.6rem;
        background-image: url("../img/svg/fire.svg");
    }

    .stock-slider--item span {
        -webkit-line-clamp: 2;
        order: 3;
    }

    .stock-slider--item span.h4 {
        -webkit-line-clamp: 2;
        margin-top: 0.8rem;
        order: 2;
    }

    .stock-content--page {
        gap: 1.6rem;
        padding: 5rem;
    }

    .stock-content--page button { padding: 1.1rem 2.4rem; }

}

/* Mobile Only */
@media (max-width: 599px) {

    .stock { margin-top: 4.8rem; }

    .stock-content { gap: 2.4rem; }

    .stock-content--slider {
        width: 34.3rem;
        gap: 2.4rem;
    }

    .stock-slider--wrapper { gap: 0.8rem; }

    .stock-slider--item {
        width: 32.7rem;
        height: 33.9rem;
    }

    .stock-slider--item picture, .stock-slider--item picture img {
        width: 31.1rem;
        max-height: 18.4rem;
    }

    .stock-content--page {
        width: 34.3rem;
        height: 40rem;
    }

    .stock-content--slider .products-slider--nav { display: flex; }

    .stock-content--slider .products-slider--nav .products-nav--prev,
    .stock-content--slider .products-slider--nav .products-nav--next{ display: none; }
}