:root{
    --headerHeight:3rem;

    --color-body:rgb(245, 245, 245);
    --color-btn1:rgb(0, 0, 0);
    --color-text:rgb(78, 78, 78);
    --color-linkAlt:rgb(0, 66, 144);
    --color-link:rgb(0, 90, 214);
    --fontFamMono: "Roboto Mono", monospace;

    --fontFamSans: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --fontFamMono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;

    --fontFamMain: var(--fontFamSans);
}


html{
	font-family:var(--fontFamMain);
    font-optical-sizing: auto;
    font-style: normal;
    overflow-y:scroll;
    min-width: 480px;
    scroll-behavior: smooth;
    background-color: var(--color-body);
}


body{
    color:var(--color-text);
    background-color: var(--color-body);

	overscroll-behavior-y: none;
    position: relative;
    margin:0;

    bakground:transparent;

    font-size:12pt;
    font-optical-sizing: auto;
    font-style: normal;
    line-height: 1.5;
    z-index: 1;
}




/* Misc setup
** ----------------------------------- */


a{
    color:var(--color-link);
    text-decoration: none;
    text-decoration-thickness: .025em;
    text-underline-offset: .125em;
}
a:hover{ color:var(--link-alt);}

p{ margin-bottom:1em; }
p:last-child{
    margin-bottom: 0;
}
u{
    text-underline-offset:.2em;
}




/* Button
** ----------------------------------- */
.btn{
    cursor: pointer;
    outline: 0;
    display: inline-block;
    line-height: 1.5;
    text-align: center;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375em .75em;
}
.btn.dtl{
    background-color: #000;
    font-size:.75em;
    color:#fff;
}


.btn:hover {
}


/* _____________________________________________________________________________________

    Site structure
_____________________________________________________________________________________ */

#siteFrame{
    max-width:1280px;
    margin:0 auto;

}




section.page-content{
    padding:0 2rem;
}


.product-section-divider{
    position: sticky;
    top:0;
    padding:.25em 1em;
    background-color: rgb(0, 0, 0);
    color: var(--color-body);
    border-bottom:1px solid rgba(0,0,0,0.2);
    z-index:5;

}

.collection-descr{
    max-width: 88ch;
    padding: 1.5em 2em;
    font-size:.8em;
    background: #fff;
    border:1px solid #bbb;
    border-top:none;
    transform: rotate(-.75deg);
    transform-origin: top left;
    border-radius: 0 0 2em 2em;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}


.product-list{
    --gap:1em;
    --cols:2;
    margin:2em 0 4em;

    display:flex;
    flex-flow:row wrap;
    --bordColor:#bbb;
    gap:var(--gap);
}

.product-list > li{
    overflow: hidden;
    flex:0 0 calc(100% / var(--cols) - ( (var(--cols) - 1) * var(--gap) / 2 )   );
    display: flex;
    flex-flow:row nowrap;
    align-items: stretch;
}

.product-list > li .img-preview{
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #fff;
    width:100%;
    aspect-ratio: 1 / 1; /* Width will automatically become 100px */
    overflow: hidden;


    flex:0 0 15em;
    aspect-ratio: 1 / 1; /* Width will automatically become 100px */
    border:1px solid var(--bordColor);
    border-radius: 0;



}
.product-list > li .img-preview img{
    opacity:0;
    display: block;
    width:100%;
    transition: .25s opacity, .5s transform;
}

.product-list > li .img-preview:hover img{
    opacity:1;
    transform:scale(1.05);
}

.product-list > li .preview{
    background-color: #fff;

    border:1px solid var(--bordColor);
    border-left:none;
    display: flex;
    flex-direction:column;
    justify-content: flex-start;

    flex:10 0 0;


}
.product-list > li .preview h3{
    margin:1rem 1rem .5rem;
    font-weight:700;
}
.product-list > li .preview .descr{
    font-size:.75em;
    flex:1 1 auto;
    margin:0 1rem;
    line-height: 1.7
}

.product-list > li .preview .descr .read-more{
    white-space: nowrap;
}

.product-list > li .preview a.btns{
    margin-top:.5em;
    padding:.5em 1em;
    background:#fff;
    color:#000;
    display: flex;
    flex-flow:row wrap;
    justify-content: space-between;
    align-items: center;
    gap:.25em 1em;
    border-top:1px dashed var(--bordColor);
}
.product-list > li .preview .btns:hover{
    filter:invert();
    border-color:transparent;
}
.product-list > li .preview .btns:hover .prc-range span{
    color:#000;
}

.product-list > li .preview .btns > span{
    font-size:.75em;
}
.product-list > li .preview .btns .prc-range{
    font-size:.9em;
}
.product-list > li .preview .btns .prc-range span{
font-weight:800;
color:rgb(0, 162, 84)
}
.product-list > li .preview .btns .prc-range small{
    font-size:.75em;
}


/* _____________________________________________________________________________________

    Responsive Breakpoints
_____________________________________________________________________________________ */
@media (max-width: 1276px) {

    .product-list > li .img-preview{
        flex:0 0 10em;
        padding-top:10em;
        aspect-ratio: 1 / 2;
    }

    .product-list > li .img-preview img{
        opacity:1;
        border-top:1px solid var(--bordColor);
    }
    .product-list > li .img-preview:hover img{
        transform:initial;
    }


}

@media (max-width: 1024px) {

    .product-list li {
        flex:0 0 100%;
    }

    .product-list > li .img-preview{
        overflow: hidden;
        flex:0 0 15em;
        aspect-ratio: 1 / 1;
        border:1px solid var(--bordColor);
        border-radius: 0;
    }

    .product-list > li .img-preview img{
        opacity:0;
        transition: .25s opacity, .5s transform;
    }

    .product-list > li .img-preview:hover img{
        opacity:1;
        transform:scale(1.05);
    }


}
@media (max-width: 880px) {

    .product-list li {
        flex:0 0 100%;
    }


}

@media (max-width: 767px) {

    .product-list > li .img-preview{
        flex:0 0 10em;
        padding-top:10em;
        aspect-ratio: 1 / 2;
    }

    .product-list > li .img-preview img{
        opacity:1;
        border-top:1px solid var(--bordColor);
    }
    .product-list > li .img-preview:hover img{
        transform:initial;
    }

}


@media (max-width: 480px) {



    section.page-content{
        padding:0 .5rem;
    }

}