h1 {
    font-size: 1.2rem;
    margin: 0;
}

.prod {
    padding-bottom: 5rem;
}

#bot-frame .bot > .content {
    padding: 0;
}

header {
    /* position: sticky; */
    margin-bottom: 0;
}

#alter-sec {
    padding-top: .5rem;
}

.container-fluid:not(.thin) .breadcrumb,
.prod-nav,
section > * {
    max-width: 40rem;
    margin: 0 auto;
    /* margin: 0 1vw; */
    /* text-align: center; */
}

.prod-nav {
    position: sticky;
    top: 0;
    /* padding-right: .75rem; */
    z-index: 1;
    background: var(--color-back);
}

.has-more {
    position: fixed;
    bottom: 7rem;
    left: 3rem;
    color: white;
    font-size: 16px;
    background: #8081e5;
    width: 1.8em;
    height: 1.8em;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}



.dynColWrap {
    text-align: right;
}


.toggle-more-facts {
    display: block;
    margin: 2rem 0 0rem;
}

.show-more .toggle-more-facts ~ * {
    display: none;
}

#factors:not(.show-more) .toggle-more-facts i:before {
    content: "\f106";
}
/*#region Alter */



.prod .ed {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    margin: 1rem;
}

.prod .alter {
    box-sizing: border-box;
    position: relative;
}

    .prod .alter .prod-header {
        padding: .5rem 0 0;
    }

.prod .altr-name {
    /* display: inline-block; */
    /* width: 100%; */
    flex-direction: column;
}

.prod .card-body {
    padding: .5rem;
}

.prod .card-img {
    flex: 0 1 13rem;
    min-width: 5rem;
    width: unset;
    background: white;
    position: relative;
    display: block;
    text-align: center;
    /* padding: 2rem; */
}

.prod .alter > :last-child {
    /* flex: 1; */
}


.alter .buttons {
    display: flex;
    gap: 5px;
    justify-content: center;
    white-space: nowrap;
}




.add-favorite .fa {
    /*color: var(--color-pri);*/
}

.add-favorite span {
    margin-right: 3px;
}

.prod .alter .price {
    /* margin-bottom: 1rem; */
    color: var(--color-link);
    justify-content: start;
}

.prod .alter.top .price {
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    gap: 0.7rem;
    /* flex-direction: column; */
}

.prod .alter .score-box {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 1.2rem;
    margin: 0 1rem;
}

.prod .alter.top .price a {
    text-decoration: none;
}

.card-title {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .card-title button {
        padding: 0 5px;
    }

.dif.alter .score-box {
    margin: 0;
    right: .5rem;
    font-size: 0.9em;
}

.prod .alter img {
    max-width: 100%;
    max-height: 25vh;
}

/*#endregion */

/*#region alter-variants */

.alter-variants {
    margin-top: 1rem;
    display: flex;
    align-items: baseline;
    gap: .5rem;
    border-top: 1px solid var(--color-border);
    padding-top: 1rem;
}

    .alter-variants > label {
        color: gray;
        font-size: 14px;
    }

    .alter-variants .variants {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        flex: 1;
    }

        .alter-variants .variants > * {
            border: 1px solid var(--color-border);
            padding: 3px .5rem;
            font-size: 14px;
            border-radius: 3px;
            display: flex;
            /* margin-bottom:5px; */
            /* width:100%; */
            /* gap: .5rem; */
            justify-content: space-between;
            align-items: center;
        }

            .alter-variants .variants > * > :first-child {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                line-height: 1.3;
            }


        .alter-variants .variants a {
            text-decoration: none;
            color: black;
        }

        .alter-variants .variants > div:not(.active) {
            display: flex;
            align-items: baseline;
        }

            .alter-variants .variants > div:not(.active):hover {
                background: #eeeeff;
            }

        .alter-variants .variants > div.active {
            background: #eeeeff;
            /* color: white; */
        }

        .alter-variants .variants > div .btn {
            font-size: 12px;
            margin-left: -7px;
        }
/*#endregion */

/*#region prod-nav */
.prod-nav ul {
    display: flex;
    gap: 0;
    padding: 0;
    gap: 0;
    margin: 0;
    background: none;
    overflow-x: auto;
}

    .prod-nav ul::-webkit-scrollbar {
        display: none;
    }

    .prod-nav ul li {
        /*border-bottom: 1px solid var(--color-border);*/
    }

        .prod-nav ul li a {
            white-space: nowrap;
            text-decoration: none;
            color: black;
            font-size: 16px;
            display: block;
            padding: .75rem;
            display: flex;
            align-items: center;
            gap: 7px;
        }

            .prod-nav ul li a.active {
                border-bottom: 3px solid var(--color-primary);
                background: #eeeeff;
                color: var(--color-link);
            }

        .prod-nav ul li i {
            font-size: 0.8em;
            margin-top: 3px;
        }
/*#endregion */


/*#region Vendors */

.prod > section:nth-of-type(odd)#vendors .vendor {
    background: #fdfdff;
}

.v-list {
    /* padding: 0rem 1rem 1rem; */
}

    .v-list > * {
        display: grid;
        grid-template-columns: repeat( auto-fit, minmax(2rem, 1fr) );
        margin-bottom: 1rem;
        color: black;
        padding: .5rem 0;
        font-size: 1rem;
        /* background:gray; */
        align-items: center;
        justify-content: space-between;
        /* width: 18rem; */
        margin: .5rem auto;
        gap: 1rem;
    }

    .v-list > .v-header {
        font-weight: bold;
        line-height: 1;
        margin: 0;
        padding: 0;
    }

.vendor + .vendor {
    /* border-top: 1px solid var(--color-border); */
    padding-top: 1rem;
}

.vendor label {
    flex: 1;
}

.vendor .afflt {
    width: 6rem;
    width: 5.2rem;
    white-space: nowrap;
    color: var(--color-link);
}

.vendor .box {
    align-items: center;
}

    .vendor .box > div {
        padding: 0;
        margin: 0;
    }

.vendor-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: .5rem;
}

    .vendor-head .btn {
        height: 1.5em;
    }

.v-card-list .vendor {
    padding: .75rem 1rem;
    display: flex;
    margin-bottom: .75rem;
    gap: 0;
    background: #fdfdff;
    background: white;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #f0f0ff;
    padding-top: 1rem;
    border-radius: 8px;
}

    .v-card-list .vendor h4 {
        font-size: 1rem;
        margin: 0;
        line-height: 1.5;
    }

.vendor .variant + .variant {
    border-top: 1px solid #ecedff;
    padding-top: 0.5rem;
    margin-top: 1rem;
}


.vendor .min-price {
    font-size: 1.1rem;
    font-weight: bold;
    white-space: nowrap;
}

.variant-end {
    display: flex;
    align-items: center;
    gap: 2rem;
    /* text-align: left; */
}


.v-card-list .vendor .variant {
    display: flex;
    /* justify-content: space-between; */
    align-items: baseline;
    flex-wrap: wrap;
}

    .v-card-list .vendor .variant > .fill {
        flex: 1;
    }

    .v-card-list .vendor .variant .bottom {
        flex: 1 1 100%;
        display: flex;
        align-items: center;
        gap: 1rem;
        justify-content: space-between;
    }

        .v-card-list .vendor .variant .bottom .deal {
            margin: 0;
        }

.v-card-list .bottom .btn {
    white-space: nowrap;
}

.v-details {
    border-top: 1px solid var(--color-border);
    padding-top: .75rem;
    gap: 1rem;
}

.v-card-list .deal {
    display: flex;
    flex: unset;
    grid-template-columns: repeat(auto-fit,6.3rem);
    gap: .5rem;
    width: 100%;
}

    .v-card-list .deal.full {
        display: flex;
        gap: 1rem;
        padding: .5rem;
        background: #fcfcff;
        margin-top: .5rem;
        /* justify-content:space-between; */
    }

        .v-card-list .deal.full div {
            /* font-size: 14px; */
            display: flex;
            gap: .5rem;
            /* flex: 1 1 50%; */
            white-space: normal;
            align-content: baseline;
        }

    .v-card-list .deal > *{
        flex: 1 0 5rem;
    }

    .v-card-list .deal > .btns {
        white-space: nowrap;
    }

    .v-price div {
        font-weight: bold;
    }

.field,
.deal > div {
    line-height: 1;
}

    .field label,
    .deal > div label {
        font-size: 13px !important;
        color: #858585;
    }

.deal > .fill {
    /*set 3 columns of grid*/
    grid-column: span 3;
    flex: 1;
}
/*#endregion */
/*#region in-words */
.prod .in-words > div {
    display: inline-block;
}


.in-words > div > div span + span:before {
    content: ', ';
}

.in-words > div span + span:last-child:before {
    content: ' ו';
    font-weight: 500;
}

/*#endregion */


/*#region videos */
.videos-wrap {
    overflow: auto;
    white-space: nowrap;
}

.video-list {
    /* display: inline-block; */
    width: 100%;
    /* gap:1rem; */
}

    .video-list > * {
        width: 21rem;
        max-width: 80vw;
        display: inline-block;
        margin-left: 1rem;
        /*flex: 0 1 28rem;*/
        border: 1px solid black;
        position: relative;
        padding-bottom: 35%; /* 16:9 */
        height: 0;
        min-height: 10rem;
    }

    .video-list iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
/*#endregion */

/*#region what-think */

#what-think .question {
    margin-top: 1rem;
}
/*#endregion */


/*#region whats-next */

/*tags style*/
#whats-next ul {
    padding: 0;
    margin-top: 1rem;
    list-style: none;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

    #whats-next ul li {
        background: var(--color-accent-light);
        color: white;
        padding: 0.3rem 0.5rem;
        border-radius: 0.5rem;
        font-size: 0.9em;
    }

        #whats-next ul li a {
            display: flex;
            gap: 5px;
            text-decoration: none;
            align-items: center;
        }

            #whats-next ul li a i {
                font-size: 0.9em;
            }

            #whats-next ul li a span {
                text-decoration: underline;
            }

        #whats-next ul li:hover {
            background: var(--color-primary);
        }

            #whats-next ul li:hover a {
                color: white;
            }
/*#endregion */


.alter .buttons {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: var(--color-accent-light);
    box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.15);
    z-index: 3;
}


/*#region colors */
.colors {
    display: flex;
    gap: 2px;
    margin-top: 2px;
    width: 6rem;
    flex-wrap: wrap;
    justify-content: flex-start;
}

    .colors > * {
        display: inline-block;
        font-size: 14px;
        width: 1em;
        flex: 0 0 1em;
        height: 1em;
        border-radius: 100%;
        border: 1px solid var(--color-border);
    }

/* Specific styles for each color based on data-color */
[data-color="red"] {
    background-color: #E55981; /* toned-down red */
}

[data-color="blue"] {
    background-color: #4148df; /* using the original color */
}

[data-color="teal"] {
    background-color: #5D81E5; /* toned-down teal */
}

[data-color="green"] {
    background-color: #60E581; /* soft green */
}

[data-color="yellow"] {
    background-color: #EFE581; /* soft yellow */
}

[data-color="purple"] {
    background-color: #A081E5; /* soft purple */
}

[data-color="pink"] {
    background-color: #EF5DA8; /* using the original pink */
}

[data-color="cyan"] {
    background-color: #81E5E5; /* soft cyan */
}

[data-color="white"] {
    background-color: #ffffff;
}

[data-color="black"] {
    background-color: black;
}

[data-color="brown"] {
    background-color: #A58273; /* soft brown */
}

[data-color="orange"] {
    background-color: #E59A60; /* soft orange */
}

[data-color="gray"] {
    background-color: #cdcdcd; /* soft gray */
}

[data-color="gold"] {
    background-color: #E5C173; /* soft gold */
}

[data-color="silver"] {
    background-color: #bdbdbd; /* soft silver */
}

[data-color="rose gold"] {
    background-color: #EFA5C2; /* soft rose gold */
}

[data-color="beige"] {
    background-color: #F5E5DC; /* soft beige */
}

[data-color="titanium"] {
    background-color: #6D6D93; /* soft titanium */
}

[data-color="turquoise"] {
    background-color: #60D5E5; /* soft turquoise */
}

[data-color="peach"] {
    background-color: #F5A5A0; /* soft peach */
}

[data-color="bronze"] {
    background-color: #C18A60; /* soft bronze */
}

/*#endregion */

/*#region compare-to */

#compare-to .no-results {
    color: gray;
}

.compare-cards {
    overflow: auto;
    display: flex;
    gap: .5rem;
    /* margin-top:1rem; */
    padding: 1rem 0 0;
    align-items: flex-end;
}

    .compare-cards .card {
        flex: 0 0 11rem;
        padding: 0;
        gap: 0 !important;
        !;
        margin-bottom: .75rem;
        background: #fdfdff;
        background: white;
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
        border: 1px solid #f0f0ff;
        border-radius: 8px;
    }

        .compare-cards .card a {
            padding: 1rem .5rem;
        }

        .compare-cards .card,
        .compare-cards .card a {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 0.75rem;
            text-decoration: none;
        }

            .compare-cards .card .card-img {
                max-width: 100%;
                flex: unset;
            }

                .compare-cards .card .card-img img {
                    height: 8rem;
                }

            .compare-cards .card .price,
            .compare-cards .card h3 {
                font-size: 14px;
                text-align: center;
                color: black;
                /* margin: 0; */
                text-decoration: none !important;
            }

    .compare-cards .recomand {
        font-size: 13px !important;
    }


    .compare-cards .altr-name {
        justify-content: center;
        flex-direction: column;
    }

    .compare-cards .alter .score-box {
        font-size: 14px;
        bottom: -6px;
        top: unset;
        font-weight: 500;
        left: 20px;
        right: unset;
        margin: 0;
    }

        .compare-cards .alter .score-box .outer {
            height: unset;
            line-height: 2;
        }

    .compare-cards .score-box.rect .val:after {
        content: '';
    }

    .compare-cards .card .card-body {
        padding: 0;
    }

    .compare-cards .altr-variant {
        font-size: 0.9em;
    }

    .compare-cards .card-bottom {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 1rem;
    }

        .compare-cards .card-bottom .btn {
            padding: 3px 1rem;
            font-size: 14px;
        }


/*#endregion */
@media (max-width: 767px) {
    .alter .buttons > * {
        flex: 1 1 50%;
        margin: 0;
    }

    .alter .buttons .btn {
        padding: .5rem 7px;
        font-size: 16px;
        width: 100%;
        margin: 0;
        line-height: 1;
        white-space: nowrap;
    }

    .prod .alter.top {
        text-align: center;
        padding: 0;
        margin: 0 auto;
    }

    .prod .alter img {
        max-height: 32vh;
    }

    .prod .card.top .card-img {
        flex: 0 1 18rem;
        margin: 0 auto;
        display: inline-block;
        padding: 0;
    }


    .custom-radio label {
        font-size: 1rem;
    }

        .custom-radio label p {
            font-size: 0.9rem;
        }



    .has-more {
        left: 1rem;
        bottom: 5rem;
    }

    .main-techs {
        /* border-top: 1px solid var(--color-border); */
        /* margin-top: 1.5rem; */
        /* padding-top: 1rem; */
        margin-bottom: 1.5rem;
        justify-content: center;
    }

    .card-title {
        justify-content: center;
        gap: 5px;
        /* margin-top: 1rem; */
    }

        .card-title .altr-name {
            justify-content: center;
        }

    .prod .alter.top .price {
        justify-content: center;
        font-size: 20px;
    }


    .prod .alter.top .main-techs + .price {
        margin-top: 1rem;
    }

    .v-card-list .deal{
        flex-wrap:wrap;
    }

        .v-card-list .deal > .short {
           flex: 1 1 3rem;
        }

    .v-list > * {
        display: flex;
        flex-wrap: wrap;
    }


    .v-card-list .vendor .variant {
        flex-direction: column;
        gap: 1rem;
    }

        .v-card-list .vendor .variant > div {
            width: 100%;
        }


    .v-header {
        display: none;
    }

    .v-card-list .deal {
        grid-template-columns: repeat(auto-fit, calc(25% - 7px));
        font-size: 16px;
    }

        .v-card-list .deal.full {
            margin-bottom: 0;
            gap: .5rem;
            /* display: flex; */
        }

    .v-card-list .vendor > div.v-details {
        /* flex-direction: column; */
        /* gap: 1rem; */
        /* align-items: end; */
        justify-content: space-between;
        flex-wrap: wrap;
        padding-top: 0.25rem;
    }

    .v-card-list .variant {
        width: 100%;
        gap: 0.5rem 10px;
        flex: 1 1 100% !important;
        display: flex;
        flex-wrap: wrap;
    }

    .v-card-list .deal > .btns{
        flex: 0 0 40%;
    }

    .v-card-list .deal > .fill {
        flex: 1 1 100%;
    }

 


    .deal > div {
        /* flex: 1 1 calc(25% - 10px); */
        /* white-space: nowrap; */
        /* margin-top: .5rem; */
    }

    .v-details > .btn {
        order: 2;
    }

    .v-details > :last-child {
        order: 3;
    }

    section > * {
        margin: 0 auto;
    }

    .v-card-list .vendor {
        padding: .5rem;
    }

    .variant-end {
        justify-content: space-between;
        text-align: right;
    }

    .colors {
        justify-content: flex-start;
        gap: 8px;
    }

        .colors [data-color] {
            font-size: 16px;
        }

    .compare-cards::-webkit-scrollbar {
        display: none;
    }

    .compare-cards::after {
        content: "\f104";
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        position: absolute;
        font-size: 24px;
        top: 10rem;
        left: 1rem;
        transform: translate(-50%, -50%);
        color: white;
        background: var(--color-primary);
        width: 1.3em;
        height: 1.3em;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
    }

    .compare-cards .card .price,
    .compare-cards .altr-name {
        font-size: 16px;
    }



    .prod-nav ul {
        display: flex;
        gap: 0;
        padding: 0;
        gap: 0;
        margin: 0;
        background: none;
        overflow-x: auto;
        /*border-bottom: 1px solid var(--color-border);*/
        box-shadow: 0px 3px 3px 0px rgb(0 0 0 / 10%);
    }

    .alter-variants {
        flex-wrap: wrap;
        justify-content: normal;
        /* margin-bottom: 1rem; */
    }

        .alter-variants > label {
            /* flex: 1 1 100%; */
            text-align: right;
        }
}

@media (min-width: 768px) {


    .alter .buttons {
        /* display:none; */
    }


    .v-list {
        /* background:white; */
        padding: .25rem 1rem;
        border-radius: 8px;
        /* display: inline-block; */
        /* width: 27rem; */
        text-align: right;
        max-width: 100%;
        margin: 0 auto;
    }

    .prod .card-body {
        padding: .5rem 0;
        flex: unset;
    }

    .prod .alter.top > :last-child {
        display: flex;
        flex-direction: column;
    }

    .prod .alter.top .price {
        margin-top: 1rem;
    }

    .v-card-list .deal.full {
        margin-bottom: 0;
    }

    .v-card-list .vendor .variant .bottom {
        margin-top: 0.75rem;
    }

    .variant-end {
        flex-direction: column;
        gap: .5rem;
        align-items: flex-start;
    }
}

@media only screen and (min-width: 1280px) {
    .prod-nav,
    section > * {
        max-width: 40rem;
        margin: 0 auto;
        /* text-align: center; */
    }
}