.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:not(:has(>aside)) {
    display:grid;grid-template-columns: subgrid;gap:inherit;
    grid-column: bleed-start / bleed-end;
    &>* {grid-column: container-start / container-end;}
    &>main {
        grid-column: bleed-start / bleed-end;
        display:grid;grid-template-columns: subgrid;gap:inherit;
        &>* {grid-column: container-start / container-end;}
    }
}
.inner-main-shop {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;
}

.scroll-button {
    transition: opacity .2s;
    background:linear-gradient(to right, transparent, #fff);
    place-content: center;position:absolute;z-index:1;text-align:center;
    width:var(--scroll-button-width, 60px);
    right:0;top:0;bottom:0;
    &.start {
        background:linear-gradient(to left, transparent, #fff);
        left:0;right:auto;
    }
}
.scroll-button:not(.show) {visibility: hidden;opacity:0;}
.scroll-button span {box-shadow:0 0 20px rgba(0, 0,0, .10);display:inline-block;width:100%;max-width:40px;aspect-ratio:1;cursor:pointer;background-color:#000;border-radius:6px;color:#fff;padding:10px;box-sizing: border-box}
.scroll-button span:hover {color:#9c9c9c;}
.scroll-button svg {width:100%;height:100%;vertical-align:top;fill:currentColor;}
.scroll-button.start svg {rotate:180deg;}
.scroll-button.vertical {
    background:linear-gradient(to bottom, transparent, #fff);
    inset-inline: 0;
    inset-block:auto 0;
    width:auto;height:var(--scroll-button-width, 40px);
    &.start {
        background:linear-gradient(to top, transparent, #fff);
        inset-block:0 auto;
    }
    svg {transform:rotate(90deg);}
    .start svg {transform:rotate(-90deg);}
}

.shop-add-quantity {
    --color:var(--border-input);
    --border-color:var(--border-input);
    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%;border-color:var(--border-color);color:var(--color);}
    button {outline:none;cursor:pointer;border:1px solid var(--border-color);background-color:transparent;font:inherit;color:var(--color);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;align-content: center;}
    button:last-child {border-radius:0 6px 6px 0;border-left-width:0;}
    svg {fill:currentColor;width:20px;height:20px;vertical-align:sub;}
    &:not(:has(*:disabled)) {
        --border-color:#000;
        input[type="text"].classic:not(:disabled),
        button:not(:disabled) {--color:#000;}
    }
}

label.field-product-options {display:block;}
.field-product-options>.buttons {
    display:flex;gap:3px;flex-wrap: wrap;
    label {
        position:relative;z-index:0;user-select: none;
        display:block;padding:4px 8px;border-radius:6px;background-color:#f6f6f6;border:1px solid var(--g1-color);
        color:var(--gfont-color, #000);font-size:.9em;cursor:pointer;
        input {position:absolute;z-index:-1;opacity:0;}
        &:has(input:checked) {color:#fff;background-color:var(--g1-color);cursor:default;}
    }
}
.field-product-options>span.select-styled {
    &::after {width:2.5em;border-left:none;background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4Ij48cGF0aCBkPSJNNDY1LTM2My41cS03LTIuNS0xMy04LjVMMjY4LTU1NnEtMTEtMTEtMTEtMjh0MTEtMjhxMTEtMTEgMjgtMTF0MjggMTFsMTU2IDE1NiAxNTYtMTU2cTExLTExIDI4LTExdDI4IDExcTExIDExIDExIDI4dC0xMSAyOEw1MDgtMzcycS02IDYtMTMgOC41dC0xNSAyLjVxLTggMC0xNS0yLjVaIi8+PC9zdmc+') no-repeat center/auto}
    &>select {border-color:#e6e6e6;border-radius:2em;padding:.5em 2.5em .5em 1em;&:focus {border-color:#000;}}
}

div.modal-dialog.modal-product-cart {border-radius:6px;width:450px;}
div.modal-dialog.modal-product-cart>.modal-body {
    padding:1em;
    header {display:grid;grid-template-columns:90px 1fr;grid-template-rows:auto 1fr;gap:10px 1em;align-items:start;background-color:#f2f2f2;border-radius:6px;padding:1em;}
    header figure {aspect-ratio:1;border-radius:6px;border:2px solid #e4e4e4;grid-row-start:span 2;}
    header h2 {font-size:1.2em;span {display:block;font-size:.7em;margin-top:2px;&.options {font-weight:500;color:#67766e;}}}
    header figure img {width:100%;height:100%;object-fit:cover;border-radius:6px;}
    header figure:empty {background:#e4e4e4 url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiIGZpbGw9IiNmZmYiPjxwYXRoIGQ9Ik0yMDAtMTIwcS0zMyAwLTU2LjUtMjMuNVQxMjAtMjAwdi01NjBxMC0zMyAyMy41LTU2LjVUMjAwLTg0MGg1NjBxMzMgMCA1Ni41IDIzLjVUODQwLTc2MHY1NjBxMCAzMy0yMy41IDU2LjVUNzYwLTEyMEgyMDBabTQwLTMzNyAxNjAtMTYwIDE2MCAxNjAgMTYwLTE2MCA0MCA0MHYtMTgzSDIwMHYyNjNsNDAgNDBabS00MCAyNTdoNTYwdi0yNjRsLTQwLTQwLTE2MCAxNjAtMTYwLTE2MC0xNjAgMTYwLTQwLTQwdjE4NFptMCAwdi0yNjQgODAtMzc2IDU2MFoiLz48L3N2Zz4') no-repeat center/50%;}
    header .info {display:flex;align-items:center;gap:5px;font-size:1.2em;}
    .field {display:block;&+.field {margin-top:5px;}}
    .field.hide {display:none;}
    .otherData:not(:empty) {margin-top:1em;}
    .field-product-options+.field-product-options {margin-top:.5em;}
}

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;gap:1em;
    .set-item {container:sl-item/inline-size}
    .set-item>.inner {display:grid;grid-template-columns:1fr auto;gap:1em;border:1px solid #e6e6e6;border-radius:10px;padding:1em;}
    .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:40px;height:40px;vertical-align:top;}
    .set-item header {order:1;}
    .set-item .params {;color:#797979;font-size:.7em;}
    .set-item header h3 {font-size:1em;font-weight:900;font-style: italic}
    .set-item figure {aspect-ratio:1;border-radius:6px;border:1px solid #e6e6e6;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;font-weight:900;font-style:italic;font-size:1.125em;}
    .set-item .cost del {font-size:.8em;font-weight:normal;}
    .set-item .summary {
        padding-left:1em;border-left:1px solid #e7e7e7;
        display:flex;flex-direction:column;gap:1em;
        font-size:1rem;
        .cost-set-info,
        .cost-set-save {font-weight:900;font-size:1.125em;font-style: italic;}
        .nl-cost {display:block;}
        form {margin-top:auto;}
        .sum-cost,
        .sum-save {font-size:1.125em;font-weight:900;font-style: italic;line-height:1.1;}
        .sum-cost .nl-cost,
        .sum-save .nl-cost {font-size:.778em;font-weight:normal;}
        &.is-save .sum-save {color:#8ac926;}
    }
    [type="submit"].classic,
    [type="button"].classic {padding:.8em 1em;font:inherit;font-weight:900;font-style: italic;border-radius:8px;width:100%;}
}

@container sl-wrap-list (width < 550px) {
    .product-set-list {
        grid-template-columns: auto;
        .set-item .summary {padding-left:0;border-left:none;border-top:1px solid #e7e7e7;padding-top:1em;}
    }

}
@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;}
@media screen and (max-width:1240px) {
    .carts-category-list .categories-list {--columns: 5;}
}
@media screen and (max-width:948px) {
    .carts-category-list .categories-list {--columns: 4;}
}
@media screen and (max-width:768px) {
    .carts-category-list .categories-list {--columns: 3;}
}
@media screen and (max-width:550px) {
    .carts-category-list .categories-list {--columns: 2;}
}

@media screen and (max-width:796px){
    .shop-content:has(>aside) {
        grid-template-columns:auto;
        &>main {order:0;}
    }
}