.shop-content {max-width:var(--content-limit-width, 1333px);margin:2em auto;}
.shop-content>.breadcrumbs {grid-column-start:span 2;margin-bottom:3em;}
.shop-content:has(>aside) {
    display:grid;grid-template-columns:minmax(auto, 250px) 1fr;gap:0 2em;
    &>main {order:1}
}
.shop-content>main {container:shop-main-container / inline-size;}

.shop-style {
    --shop-g1-color: var(--g1-color, #3180e5);
    --shop-submit-bck:var(--background-submit, #3180e5);
    --shop-submit-border:1px solid var(--shop-submit-bck);
    --shop-submit-col:#fff;
    --shop-input-font:var(--font-weight-input, normal) var(--font-size-input, 1em) var(--font-family-input, inherit), serif, system-ui;
    --shop-submit-radius:4px;
    --shop-color-error: #d41919;
    --shop-color-delete: #d41919;
    --shop-color-delete-hover: #ff4040;

    --shop-table-sc-background-header: var(--shop-submit-bck);
    --shop-table-sc-border-color:#c1f4a7;
}

.shop-add-quantity {
    display:inline-grid;grid-template-columns:35px auto 35px;height:35px;background-color:#fff;border-radius:6px;overflow:hidden;
    input[type="text"].classic {border-radius:0;border-inline-width:0;text-align:center;width:100%;padding:0;height:100%;}
    button {outline:none;cursor:pointer;border:1px solid currentColor;background-color:transparent;font:inherit;color:var(--border-input);font-size:1.2em;}
    &:has(button:disabled),
    button:disabled,
    input[type="text"].classic:disabled {cursor:default;color:#9c9c9c;border-color:#9fbf8c;background-color:inherit}
    button:first-child {border-radius:6px 0 0 6px;border-right-width:0;}
    button:last-child {border-radius:0 6px 6px 0;border-left-width:0;}
    svg {fill:currentColor;width:20px;height:20px;vertical-align:top;}
}


button.shop-button {
    transition:all .2s;
    cursor:pointer;
    border:var(--shop-submit-border);
    background-color:var(--shop-submit-bck);
    color:var(--shop-submit-col);
    border-radius:var(--shop-submit-radius);
    outline:none;
    font:var(--shop-input-font);
    padding:.8em 1.5em;
    box-sizing:border-box;
}
button.shop-button:hover {
    background-color:var(--shop-submit-col);
    color:var(--shop-submit-bck);
}
button.shop-button:has(>svg) {display:grid;grid-template-columns:auto auto;gap:.4em;align-items:center;justify-content:center;svg {fill:currentColor}}

.blank-result {font-size:clamp(1rem, 2vw, 1rem + 1em);font-weight:600;color:#d1d1d1;text-align:center;margin-block:2em;user-select:none;}

.product-set-list-wrap {container:sl-wrap-list/inline-size;}
.product-set-list {
    display:grid;grid-template-columns:1fr 1fr;gap:1em;
    .set-item {container:sl-item/inline-size}
    .set-item>.inner {display:grid;grid-template-columns:1fr auto;gap:1em;border:2px solid #f0f0f0;border-radius:6px;padding:4px;}
    .set-item article:not(:has(>a)),
    .set-item article>a {display:grid;grid-template:auto 1fr/60px 1fr;gap:5px 10px;align-items:start;color:inherit;padding:4px;}
    .set-item article>a:hover h3 {color:var(--a-color)}
    .set-item .products .separate {display:grid;color:var(--a-color);grid-template-columns:1fr auto 1fr;align-items:center;gap:3px;margin-block:4px;}
    .set-item .products .separate::before,
    .set-item .products .separate::after {content:'';height:1px;background-color:#f3f3f3;}
    .set-item .products svg {fill:currentColor;width:30px;height:30px;vertical-align:top;}
    .set-item header .params {;color:#797979;font-size:.7em;}
    .set-item header h3 {font-size:1em;}
    .set-item figure {aspect-ratio:1;border-radius:6px;border:2px solid #e4e4e4;grid-row-start:span 2;}
    .set-item figure img {width:100%;height:100%;object-fit:cover;border-radius:6px;}
    .set-item figure:empty {background:#e4e4e4 url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiIGZpbGw9IiNmZmYiPjxwYXRoIGQ9Ik0yMDAtMTIwcS0zMyAwLTU2LjUtMjMuNVQxMjAtMjAwdi01NjBxMC0zMyAyMy41LTU2LjVUMjAwLTg0MGg1NjBxMzMgMCA1Ni41IDIzLjVUODQwLTc2MHY1NjBxMCAzMy0yMy41IDU2LjVUNzYwLTEyMEgyMDBabTQwLTMzNyAxNjAtMTYwIDE2MCAxNjAgMTYwLTE2MCA0MCA0MHYtMTgzSDIwMHYyNjNsNDAgNDBabS00MCAyNTdoNTYwdi0yNjRsLTQwLTQwLTE2MCAxNjAtMTYwLTE2MC0xNjAgMTYwLTQwLTQwdjE4NFptMCAwdi0yNjQgODAtMzc2IDU2MFoiLz48L3N2Zz4') no-repeat center/50%;}
    .set-item .cost {display:flex;align-items:flex-end;gap:3px;}
    .set-item .cost del {color:#cfcfcf;font-size:.8em;font-weight:normal;}
    .set-item .summary {
        background-color:#fafafa;padding:10px 1em;border-radius:3px;border:1px solid #e7e7e7;
        display:flex;flex-direction:column;gap:.5em;
        .cost-set-info, .cost-set-save {font-weight:bold;font-size:1.1em;margin-bottom:1px;}
        .cost-set-save {font-size:1em;}
        .nl-cost {display:block;font-size:.75em;color:#a6a6a6;}
        form {margin-top:auto;}
    }
    [type="submit"].classic, [type="button"].classic {padding:0.7em 1em;width:100%;}
}

@container sl-wrap-list (width < 550px) {
    .product-set-list {grid-template-columns: auto;}
}
@container sl-item (width < 450px) {
    .product-set-list {
        .set-item>.inner {grid-template-columns:auto;}
    }
}

.sc-error-msg {
    margin-bottom:1em;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:5px;color:var(--shop-color-error);font-size:1.1em;
    svg {fill:currentColor;width:30px;height:30px;vertical-align:top;align-self:start;}
}

.carts-category-list {margin-block:0 2em;}
.carts-category-list .categories-list {--columns: 6;margin-block:0;}
.carts-category-list .categories-list a {font-size:1rem;}
@container shop-main-container (width < 1240px) {
    .carts-category-list .categories-list {--columns: 5;}
}
@container shop-main-container (width < 948px) {
    .carts-category-list .categories-list {--columns: 4;}
}
@container shop-main-container (width < 768px) {
    .carts-category-list .categories-list {--columns: 3;}
}
@container shop-main-container (width < 550px) {
    .carts-category-list .categories-list {--columns: 2;}
}