.wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "main-content";
    overflow-y: scroll;
    flex: 1;
    padding: 0;
    position: relative;
}
#sidebar {
    z-index: 400;
    isolation: isolate;
    display: flex;
    flex-flow: column nowrap;
    position: fixed;
    top: 0;
    left: -100%;
    opacity: 0;
    width: 100%;
    height: max-content;
    background-color: var(--skin1c);
    font-size: 0.9rem;
    transition: all .25s ease-in-out 0.25s;
    overflow: auto;
}
#sidebar.open {
    left: 0;
    opacity: 1;
}
#sidebar .product-tree {
    flex: 1;
}
#sidebar.hamburger.open .product-tree {
    opacity: 1;
    z-index: 0;
}
.content {
    z-index: 1;
    height: 100%;
    display: flex;
    flex-flow: column;
    opacity: 0;
    padding: 0;
    transition: all 0.5s ease-in;

}
.content.visible {
    opacity: 1;
}
.round-button {
    --bar: 0px;
    position: fixed;
    right: calc(0.75rem + var(--bar) + var(--scroll));
    background: var(--sccss);
    border: 1px solid var(--bg-color);
    border-radius: var(--rad-maxi);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 3;
}
.wrapper .to-help {
    bottom: 0.75rem;
}
body[data-template-name='help'] .to-help {
    display: none;
}
.wrapper .back-to-top {
    display: none;
}
.wrapper .back-to-top[data-visible="1"] {
    display: flex;
    bottom: 5rem;
}
.wrapper .round-button img {
    height: 46px;
    aspect-ratio: 1 / 1;
    filter: var(--fc-3);
}
.wrapper .round-button:hover {
    background: var(--sccss-hov);
}
.wrapper .round-button:hover img {
    filter: var(--fc-f);
}
.wrapper::after {
    position: fixed;
    content: '';
    inset: 0;
    z-index: 0;
    width: 0;
    background: var(--skin1c);
}
#sidebar.open .wrapper::after {
    width: var(--sidebar);
}

/* md */
@media (min-width: 768px) {
    .wrapper {
        grid-template-columns: var(--sidebar) minmax(0, 1fr);
        grid-template-areas: "sidebar main-content";
        z-index: initial;
    }
    .wrapper::after {
        width: var(--sidebar);
    }
    #sidebar {
        display: block;
        position: sticky;
        opacity: 1;
        width: var(--sidebar);
        overflow: visible;
    }
}
/* xl */
@media  (min-width: 1200px) {
    .wrapper {
        grid-template-columns: var(--sidebar) minmax(0, 1fr) repeat(auto-fit, var(--cartbar));
        grid-template-areas: "sidebar main-content cart";
        overflow-y: auto;
    }
    .wrapper .to-help {
        right: calc(0.75rem + var(--scroll));
    }
    .wrapper .back-to-top[data-visible="1"] {
        --bar: var(--sidebar);
        bottom: 0.75rem;
    }
}