.product-list {list-style:none;}
.product-list:not(.full) {--gap:15px;--columns:6;display:flex;flex-wrap:wrap;gap:2em var(--gap);}

.product-list-item:not(.full) {
    font-size:clamp(.9rem,1.3cqw,1.125rem);
    flex:0 0 auto;
    width:calc((100% / var(--columns)) - var(--gap) + (var(--gap) / var(--columns)));
    &:has(>footer) {display:grid;grid-template-rows:1fr auto;}
    &>a {display:flex;flex-direction:column;gap:.3em;height:100%;}
    header {flex-grow:1;}
    footer {display:flex;gap:.5em;align-items:center;justify-content: space-between}
    button.shop-button {padding:3px;aspect-ratio:1;height:40px;grid-template-columns:auto;}
    &:not(:hover) button.shop-button {opacity:0;}
}

.product-list-item {font-size:clamp(10px, 1.2vw, 1em);box-sizing:border-box;transition:box-shadow .1s;}
.product-list-item img {width:100%;height:100%;object-fit:scale-down;}
.product-list-item figure {aspect-ratio:1;position:relative;z-index:0;overflow:hidden;border:1px solid #e6e6e6;border-radius:10px;}
.product-list-item figure.no-image {background:#e4e4e4 url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiIGZpbGw9IiNmZmYiPjxwYXRoIGQ9Ik0yMDAtMTIwcS0zMyAwLTU2LjUtMjMuNVQxMjAtMjAwdi01NjBxMC0zMyAyMy41LTU2LjVUMjAwLTg0MGg1NjBxMzMgMCA1Ni41IDIzLjVUODQwLTc2MHY1NjBxMCAzMy0yMy41IDU2LjVUNzYwLTEyMEgyMDBabTQwLTMzNyAxNjAtMTYwIDE2MCAxNjAgMTYwLTE2MCA0MCA0MHYtMTgzSDIwMHYyNjNsNDAgNDBabS00MCAyNTdoNTYwdi0yNjRsLTQwLTQwLTE2MCAxNjAtMTYwLTE2MC0xNjAgMTYwLTQwLTQwdjE4NFptMCAwdi0yNjQgODAtMzc2IDU2MFoiLz48L3N2Zz4') no-repeat center/70px;}
.product-list-item .cost {font-weight:bold;}
.product-list-item .cost sub {display:block;font-size:.7778em;font-weight:normal;}
.product-list-item .cost del {font-size:.9em;color:#a1a1a1;}
.product-list-item .cost .disc {display:grid;grid-template-columns:auto auto;align-items:center;gap:5px;}

.product-list-item figure>.labels {display:flex;flex-direction:column;gap:3px;position:absolute;left:10px;top:10px;}
.product-list-item figure>.labels>* {
    padding:.4em .8em;border-radius:4px;font-weight:900;font-size:.75rem;
    background-color:#8c8c8c;color:#fff;text-transform: uppercase;line-height:1;
    &.news {background-color:#8ac926;}
    &.promotions {background-color:#f00;}
}

.product-list-item h2 {font-size:1em;word-break:break-word;margin:0;}

.product-list-item.full {border:1px solid #e7e7e7;border-radius:4px;padding:1em;display:grid;grid-template-columns:1fr auto;gap:1em;}
.product-list-item.full+.product-list-item {margin-top:1em;}
.product-list-item.full a:not(.more-link) {display:grid;grid-template-columns:30% 1fr;grid-gap:.5em 1em;grid-template-rows:auto 1fr;}
.product-list-item.full figure {grid-row-start:span 2;aspect-ratio:1.8;border:none;border-radius:0;padding:0;}
.product-list-item.full a:not(.more-link):has(.cost) {grid-template-rows:auto auto 1fr;figure {grid-row-start:span 3;}}
.product-list-item.full .footer {align-self:end;display:flex;flex-direction:column;gap:4px;justify-self:start;font-size:.9em;}
.product-list-item.full .footer>* {background-color:#ededed;border-radius:4px;padding:.3em .6em;&.not {background-color:#ffe0e0;}}
.product-list-item.full footer {display:flex;gap:1em;flex-direction:column;}
.product-list-item.full footer>form,
.product-list-item.full footer>a {margin-top:auto;}

.products-list-scroll>.title {font-weight:900;font-style:italic;font-size:clamp(1.5em,3vw,2em);margin-bottom:1em;}
.products-list-scroll .scroll-wrap {
    --gap:15px;
    --columns:6;
    --scroll-button-width:60px;
    overflow:hidden;
    user-select: none;
    touch-action: pan-y pinch-zoom;
    padding-right:var(--scroll-button-width);
    position:relative;
    .product-list-item h2 {
        line-clamp: 2;
        overflow:hidden;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        margin-bottom:4px;
    }

}
.products-list-scroll .scroll-list {
    list-style:none;display:flex;gap:var(--gap);
}
.products-list-scroll {
    container-type: inline-size;
    margin-block:2em;
    @container (width < 1024px) {  .scroll-wrap {--columns:5;}  }
    @container (width < 800px) {  .scroll-wrap {--columns:4;--scroll-button-width:40px;}  }
    @container (width < 600px) {  .scroll-wrap {--columns:3; --gap:5px; }  }
    @container (width < 524px) {  .scroll-wrap {--columns:2;} padding-right:10px;  }
}
@container shop-main-container (width < 1240px) {
    .product-list:not(.full) {--columns:5;}
}
@container shop-main-container (width < 940px) {
    .product-list:not(.full) {--columns:4;}
}
@container shop-main-container (width < 800px) {
    .product-list:not(.full) {--columns:3;--gap:10px;}
}
@container shop-main-container (width < 550px) {
    .product-list:not(.full) {--columns:2;}
}

@media screen and (max-width:524px){

}