.presents-product {
    display:grid;
    grid-template-columns:8fr 7fr;
    gap:1em;
    container: presents-product-container / inline-size;
    width:100%;
    max-width:1400px;
    margin-inline:auto;
}
.presents-product>section.main-info {order:1;border:1px solid #e6e6e6;padding:1em;border-radius:6px;position:relative;z-index:0;}
.presents-product>section.main-info header {
    container-type: inline-size;
    border-bottom:1px solid #e6e6e6;margin-bottom:2em;padding-bottom:1em;
    h1 {
        font:var(--h1-font);
        margin-block:.5em 1em;
        span {display:block;font-size:.786em;}
    }
    .groups {display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-inline: auto;}
    .groups>* {
        padding:.4em .8em;border-radius:4px;font-weight:900;font-size:.75em;
        background-color:#8c8c8c;color:#fff;text-transform: uppercase;line-height:1;
        &.news {background-color:#8ac926;}
        &.promotions {background-color:#f00;}
    }
    .addon-info {display:flex;gap:.8em 1em;align-items: center;}
    .identify {color:#808080;font-size:.9em;}
    @container (width < 440px) {
        .addon-info {flex-direction:column;align-items: unset;}
        .prodInquiry {text-align:left;margin-left:0;}
        .groups {margin-inline:0;}
    }
}

.available-percent {fill:#bdbdbd;}
.available-percent.full {fill:#74d700;}
.available-percent.bit rect:nth-child(3),
.available-percent.bit rect:nth-child(2) {fill:#ffb300;}
.available-percent.little rect:nth-child(3) {fill:#e30404;}

.presents-product>section.main-info .doc-product {
    margin-block:2em 0;
    border:1px solid #e7e7e7;
    border-radius:6px;
    padding:1em;
    background-color:#fafafa;
    .doc-info {margin-bottom:.7em;font-size:1.3em;}
    ul {list-style:none;}
}
.presents-product>section.main-info form {
    grid-column-start: span 3;
    display:grid;
    grid-template-columns:subgrid;
    gap:inherit;
    .field-product-options {display:grid;grid-column-start:span 3;grid-template-columns:subgrid;align-items:center;gap:inherit;&.hide {display:none;}}
    .title-field {font-weight:700;}
    .submit {grid-column-start:span 3;display:grid;align-items:center;grid-template-columns:subgrid;gap:inherit;}
    .submit>div.left {font-weight:900;font-style: italic;}
    .submit .shop-add-quantity {width:105px;}
    button[type="submit"] {padding:.5em;font:inherit;font-weight:900;font-style: italic;border-radius:8px;}
    @container (width < 440px) {
        .submit .shop-add-quantity {grid-column-start:span 2;}
        button[type="submit"] {grid-column-start:span 3;}
    }
    @container (width < 370px) {
        .submit {grid-template-columns:auto;gap:3px;}
        .submit .shop-add-quantity {grid-column-start:auto;}
        button[type="submit"] {grid-column-start:auto;margin-top:1em;}
    }
}

.prodInquiry {text-align:right;margin-left:auto;line-height:1;}
.prodInquiry>span[role="button"] {
    display:inline-grid;color:#000;font-size:1rem;font-style:italic;grid-template-columns: auto 1fr;align-items:center;gap:5px;cursor:pointer;
    transition:color .1s;
    &:hover {color:var(--g1-color);}
    svg {vertical-align: top;fill:currentColor;width:28px;height:28px;}
}

.presents-product>section.main-info .entries {
    container-type: inline-size;
    display:grid;grid-template-columns:auto auto auto;gap:.8em;
    section {
        grid-column-start:span 3;
        align-items:center;
        display:grid;
        gap:inherit;
        grid-template-columns:subgrid;
        h2 {font-size:1em;margin:0;}
        &>div {grid-column:span 2;}
        &.cost.leading {
            &>h2 {align-self: start;}
            &>div {display:grid;grid-template-columns:auto 1fr;align-items:center;gap:5px;}
            .leading {line-height:1;font-size:1.25em;font-weight:900;font-style:italic;}
            del {color:#bababa;font-weight:bold;font-style:italic;}
            &>div:has(del) {grid-template-columns:auto auto 1fr;&>*:not(:is(del)) {order:1;}}
        }
        &.deliveries>div {
            display:flex;align-items:center;gap:4px;
            span {cursor:pointer;transition:color .1s;}
            span:hover {color:inherit;}
            span svg {fill:currentColor;vertical-align:top;}
        }
        @container (width < 490px) {
            &.cost.leading>div:has(del) {grid-template-columns:auto 1fr;.not-leading {grid-column-start:span 2;}}
        }
        @container (width < 370px) {
            grid-template-columns:auto;gap:3px;
            &.cost.leading>div {grid-template-columns:auto;gap:2px;}
        }
        @container (width < 305px) {
            &.cost.leading>div:has(del) {grid-template-columns:auto;.not-leading {grid-column-start:unset;}&>*:not(:is(del)) {order:0;}}
        }
    }
    section:has(svg.available-percent)>div {
        display:grid;align-items:center;gap:4px;grid-template-columns:auto 1fr;
        p {grid-column-start: 2;color:#bababa;font-size:.8em;}
    }

    section.variant>div:not(:has(select)) {
        display:flex;gap:5px;flex-wrap: wrap;
        span, a {
            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;
            &:is(span) {cursor:default;}
            &.outer {color:#797979;border-color:#e6e6e6;}
            &:hover, &:is(span) {color:#fff;background-color:var(--g1-color);}

        }
    }
    section.variant option.outer {color:#797979;}
}

.presents-product>.images {
    --max-vertical-width:150px;
    display:grid;grid-template-columns:var(--max-vertical-width) 1fr;gap:1em;
    min-height:0;
    align-self:stretch;
}
.presents-product>.images figure {
    aspect-ratio:1;
    overflow:hidden;
    border:1px solid #e6e6e6;
    position:relative;
    z-index:0;
    min-height:300px;
    box-sizing:border-box;
    order:1;
    background-color:#fff;
    border-radius:10px;
    text-align:center;
    height:100%;
    max-width:100%;
}
.presents-product>.images.no-image {
    grid-template-columns:auto;
    max-width:70%;
    margin-inline: auto;
    figure {background:#e4e4e4 url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiIGZpbGw9IiNmZmYiPjxwYXRoIGQ9Ik0yMDAtMTIwcS0zMyAwLTU2LjUtMjMuNVQxMjAtMjAwdi01NjBxMC0zMyAyMy41LTU2LjVUMjAwLTg0MGg1NjBxMzMgMCA1Ni41IDIzLjVUODQwLTc2MHY1NjBxMCAzMy0yMy41IDU2LjVUNzYwLTEyMEgyMDBabTQwLTMzNyAxNjAtMTYwIDE2MCAxNjAgMTYwLTE2MCA0MCA0MHYtMTgzSDIwMHYyNjNsNDAgNDBabS00MCAyNTdoNTYwdi0yNjRsLTQwLTQwLTE2MCAxNjAtMTYwLTE2MC0xNjAgMTYwLTQwLTQwdjE4NFptMCAwdi0yNjQgODAtMzc2IDU2MFoiLz48L3N2Zz4') no-repeat center/70px;}
}
.presents-product>.images figure img {
    max-width:500px;
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    max-height:none;
    object-fit:scale-down;
    margin:auto;
}

.presents-product>.images .wrap-gallery {

    --embla-axis: x;
    --gap:5px;
    --columns:3;
    --space-width:40px;

    overflow:hidden;position:relative;z-index: 0;padding-right:var(--space-width);user-select: none;

    .space {
        position:absolute;z-index:1;top:0;bottom:0;width:var(--space-width);right:0;
        background:linear-gradient(to right, transparent, #fff);
        display:grid;place-items:center;
        span {box-shadow:0 0 20px rgba(0, 0,0, .10);display:inline-block;width:var(--space-width);aspect-ratio:1;cursor:pointer;background-color:#000;border-radius:6px;color:#fff;padding:10px;box-sizing: border-box};
        span:hover {color:#9c9c9c;}
        span svg {width:100%;height:100%;vertical-align:top;fill:currentColor;}
    }
    .space.start {background:linear-gradient(to left, transparent, #fff);left:0;right:auto;}
    .space.start svg {transform:rotate(180deg);}
    .space:not(.show) {display:none;}

    .list {
        display:flex;gap:var(--gap);
        touch-action: pan-y pinch-zoom;
        &>a {flex:0 0 auto;width:calc((100% / var(--columns)) - var(--gap) + (var(--gap) / var(--columns)));aspect-ratio:1;border:2px solid #eaeaea;border-radius:6px;overflow:hidden;box-sizing:border-box;outline:none;}
        &>a.sel {border-color:var(--g1-color);}
        img {width:100%;height:100%;object-fit:cover;vertical-align:top;}
    }

    @container presents-product-container (width >= 524px) {
        &.vertical {
            --embla-axis: y;
            --max-height:calc(var(--max-vertical-width) * var(--columns) + var(--gap) * (var(--columns) - 1));
            width:var(--max-vertical-width);
            height:var(--max-height);
            padding-right:0;
            padding-bottom:var(--space-width);

            .list {
                flex-direction:column;
                touch-action: pan-x pinch-zoom;
                height:var(--max-height);
            }
            .list>a {width:auto;}
            .space {
                bottom:auto;left:0;right:0;width:auto;height:var(--space-width);top:auto;
                background:linear-gradient(to bottom, transparent, #f7f7f7);
            }
            .space.start {bottom:auto;left:0;right:0;top:0;background:linear-gradient(to top, transparent, #f7f7f7);}
            .space svg {transform:rotate(90deg);}
            .space.start svg {transform:rotate(-90deg);}
        }
        .scroll-button span {
            height:100%;width:auto;
        }
    }
}


@container presents-product-container (width < 1024px) {
    .presents-product>.images {--max-vertical-width:90px;}
    .presents-product>.images .wrap-gallery {
        --columns: 4;
        --space-width: 40px;
        --space-button-size: 30px;
    }
}
@container presents-product-container (width < 800px) {
    .presents-product>section.main-info {order:0;grid-column: span 2;}
    .presents-product>.images {grid-column: span 2;gap:10px;}
}
@container presents-product-container (width < 524px) {
    .presents-product>.images {grid-template-columns: auto;}
    .presents-product>.images figure {order:0;}
    .presents-product>.images .wrap-gallery {--columns: 3;--embla-axis: x;--scroll-button-width: 40px;}
    .wrap-gallery .scroll-button.vertical {
        background:linear-gradient(to right, transparent, #fff);
        width:var(--scroll-button-width, 60px);
        height:unset;
        inset-inline: auto 0;
        inset-block:0;
        svg {transform: none;}
        &.start {
            inset-block:0;
            inset-inline:0 auto;
            background:linear-gradient(to left, transparent, #fff);
        }
    }
}
@container presents-product-container (width < 420px) {
    .presents-product>.images .wrap-gallery {--columns: 2;}
}

header.navbar-product-detail {
    overflow:hidden;
    grid-column:bleed-start / bleed-end !important;
    margin-top:2em;
    position: sticky;
    top:0;
    background-color:#fff;
    z-index:20;
    padding:10px var(--content-padding);
    &.is-stuck {
        box-shadow: 0 2px 8px rgba(0,0,0,.15);
        border-bottom: 1px solid #e6e6e6;
    }
    /*&.is-dragging {*/
    /*    user-select: none;*/
    /*    pointer-events: none;*/
    /*}*/
    &>ul {max-width:1400px;margin-inline: auto;}
}



.spp-desc-content {margin-top:2em;}
.spp-desc-content>.descriptions-cart {max-width:770px;}
.spp-desc-content>header ul,
header.navbar-product-detail ul {
    list-style:none;display:flex;gap:2px;box-shadow:0 -1px 0 inset var(--background-submit);
    button.classic,
    li>a {border:1px solid var(--background-submit);border-radius:6px 6px 0 0;border-bottom-width:0;box-shadow:0 -1px 0 inset var(--background-submit);display:block;padding:.7em 1.2em;&:is(button){height:100%;color:#000;}}
    li.selected>button.classic {background-color:var(--background-submit);color:#fff;}
    li:not(.selected) button.classic,
    li:not(.selected)>a {
        background-color:transparent;border-color:#b1b1b1;
        &:hover {border-color:var(--background-submit);}
    }
}
header.navbar-product-detail ul {
    box-shadow:none;gap:2em;
    li {flex: 0 0 auto;}
    button.classic,
    li>a {border-radius:6px;box-shadow:none;color:#000;border:1px solid #000;font-weight:900;font-style:italic;height:100%;box-sizing: border-box;place-content: center;}
    li:not(.selected) button.classic,
    li:not(.selected)>a:not(:hover) {
        border-color:#e6e6e6;
    }
}
.spp-desc-content:not(.bookmark)>.descriptions-cart {
    &>article+article {margin-top:3em;}
    &>article>h2 {margin-block-end:.5em;font:var(--h2-font);}
}
.spp-desc-content.bookmark>.descriptions-cart {
    padding-top:1em;
}

@media screen and (width >= 796px) {
    .spp-desc-content.bookmark>.descriptions-cart>.hide,
    .spp-desc-content.bookmark>.descriptions-cart>.item-wrap-description>h2 {display:none;}
}
@media screen and (width < 796px) {
    .spp-desc-content>header,
    header.navbar-product-detail {display:none;}
    .spp-desc-content {width:100%;margin-block:2em;}
    .spp-desc-content>.descriptions-cart,
    .spp-desc-content.bookmark>.descriptions-cart {
        &>* {border-radius:10px;border:1px solid #e7e7e7;}
        &>.item-wrap-description+.item-wrap-description,
        &>article+article {margin-top:1em;}
        &>.item-wrap-description>h2,
        &>article>h2 {font-size:1.1em;font-weight:600;padding:.7em 1em;margin-block:0;cursor:pointer;display:grid;grid-template-columns:1fr auto;align-items:center;gap:1em;user-select: none;}
        &>*>h2::after {content:'';width:35px;aspect-ratio:1;transition:transform .1s;background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4Ij48cGF0aCBkPSJNNDY1LTM2My41cS03LTIuNS0xMy04LjVMMjY4LTU1NnEtMTEtMTEtMTEtMjh0MTEtMjhxMTEtMTEgMjgtMTF0MjggMTFsMTU2IDE1NiAxNTYtMTU2cTExLTExIDI4LTExdDI4IDExcTExIDExIDExIDI4dC0xMSAyOEw1MDgtMzcycS02IDYtMTMgOC41dC0xNSAyLjVxLTggMC0xNS0yLjVaIi8+PC9zdmc+') no-repeat center/cover;}
        &>*>h2:has(+.show)::after {transform:rotate(180deg);}
        &>*>h2+* {padding:0 1em 1em;}
        &>*>h2+*:not(.show) {display:none;}
    }
}

.spp-desc-content ul.list-file {list-style:none;display:flex;gap:1em;flex-wrap: wrap}
.spp-desc-content ul.list-file a {
    height:100%;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:5px;
    border:1px solid #e6e6e6;color:#000;padding:.5em 1em;box-sizing: border-box;border-radius:10px;
    font-weight:900;font-style: italic;font-size:clamp(1rem,2vw,1.25rem);text-decoration: underline;
    figure {height:60px;aspect-ratio:1;}
    svg {width:100%;height:100%;fill:currentColor;object-fit:contain;}
    &:hover {border-color:#000;}
}

.spp-desc-content dl.specify {display:grid;grid-template-columns:auto 1fr;}
.spp-desc-content dl.specify>* {padding-block:.5em;padding-inline:1em;align-content: center;}
.spp-desc-content dl.specify>dt {font-weight:900;border-radius:10px 0 0 10px;}
.spp-desc-content dl.specify>dd {border-radius:0 10px 10px 0;}
.spp-desc-content dl.specify>dt:nth-child(4n+1),
.spp-desc-content dl.specify>dd:nth-child(4n+2) {background-color:#f5f5f5;}

.related-products h2 {margin-block:2em 1em;}
.related-products .product-list:not(.full) {--columns:5;}

.set-list-wrap {margin-block:2em;}
.set-list-wrap h2 {margin-bottom:.5em;font:var(--h2-font)}

.product-detail {
    max-width:1400px;
    margin-inline:auto;
    width:100%;
    &:has(aside) {
        display:grid;grid-template-columns:minmax(60%, 770px) minmax(auto, 550px);gap:10px;justify-content:space-between;
        .spp-desc-content {max-width:none;}
        aside {min-width:200px;}
    }
}

@media screen and (max-width:1024px){
    header.navbar-product-detail>ul {gap:1em;}
}

@media screen and (max-width:940px){
    .product-detail:has(aside) {max-width:770px;display:block;}
}
@media screen and (max-width:796px){
    .spp-desc-content:not(.bookmark)>header ul {gap:10px;}
    header.navbar-product-detail>ul {gap:10px;}
    header.navbar-product-detail ul li>a {padding:.7em 10px;font-size:.9em;font-weight:bold;}
}