#sizeGuide {
    overflow: scroll;

    & .title {
        font-weight: 700;
    }
}
.tableBox,
.measureBox {
    display: none;
    flex-direction: column;
    /* animation: hideSizeGuideBox 1s cubic-bezier(.25,.46,.45,.94) forwards; */

}

.tableBox.show,
.measureBox.show {
    display: flex;
    opacity: 1;
    justify-content: space-evenly;
    gap: 0;
    opacity: 1;
    /* animation: showSizeGuideBox .3s cubic-bezier(.25,.46,.45,.94) forwards; */
}
@keyframes showSizeGuideBox {
    0% {
      display: none;
      transform: translateX(100%);
      opacity: 0;
    }
    10% {
        display: flex;
    }
    80% {
        transform: translateX(0);
        
    }
    100% {
        opacity: 1;
        
    }
}
@keyframes hideSizeGuideBox {
    0% {
      opacity: 1;
      transform: translateX(0);
      display: flex;
    }
    50% {
        transform: translateX(100%);
    }
    75% {
        opacity: 0;
    }
    100% {
        display: none;
        
    }
}
  /*  */
#measure {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .75rem 1.5rem;
    color: var(--black1);
    border: 1px solid #E2E2E2;
}

.measureBox p {
    margin-top: 1rem;
}
#measure,
#openSizeGuide {
    font-weight: 400;
}
.measureBox {

    & ul {
        padding-left: .625rem;
        margin: 0;
    }

    & p,
    & .footer span {
        font-weight: 400;
    }

    & p {
        margin-top: 1rem;
    }
    img {
        height: auto;
        width: max-content;
    }
}

/* size table */
#tableWrapper {
    display: flex;

} 
.sizeList {
    overflow-x: scroll;
    touch-action: pan-x;
    display: flex;
    scroll-behavior: smooth;
}
.sizeList::-webkit-scrollbar{
    height: 5px;
}

.sizeList::-webkit-scrollbar-thumb{
    background: var(--black1);
    border-radius: 14px;
}
.sizeList::-webkit-scrollbar-thumb:hover{
    background: #61AF62;
}

.tableBox .head {
    overflow-x: visible;
}

.tableBox .table span {
    display: flex;
    align-items: center;
}
.tableBox .sizes span {
    justify-content: center;
    border: 0.5px solid #D9D9D9;
}
.tableBox .head span {
    width: auto;
    padding: 0 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.sizes > span:nth-of-type(even){
    background: #F5F5F5;
}

.scroll-buttons {
    display: flex;
    justify-content: center;
    gap: .5rem;
}
.scroll-buttons svg {
    color: var(--black1)
}
.scroll-buttons.hide {
    display: none;
}
.back svg,
.close {
    cursor: pointer;
}
/*************************/
/* mobile */
/*************************/
@media (max-width: 767px) {
    .tableBox .table{
        box-sizing: border-box;
        min-width: 4.1rem;
        width: auto;
        display: table;
    }
    .tableBox-wrapper{
        position: absolute;
        display: flex;
        justify-content: space-between;
        width: calc(100% - 2rem);
        top: 0.75rem;
        left: 50%;
        z-index: 5;
        transform: translateX(-50%);
    }
    .tableBox-wrapper .tableBox-wrapper-title span{
        font-size: 1rem;
        font-weight: 400;
        line-height: 1rem;
    }
    .measureBox {
        min-height: calc(100% - 8rem);
        /* padding: 1.5rem 1rem 4.5rem; */
        margin: 3rem 1rem 2rem;
    }
    .tableBox {
        min-height: calc(100% - 8rem);
        /* padding: 1.5rem 1rem 4.5rem; */
        margin: 3rem 1rem 5rem;
    }

    #sizeGuide .title,
    #measure {
        font-size: 0.875rem;
        line-height: 1.5rem;
    }
    #tableWrapper {
        position: relative;
        padding: 3rem 1rem 0;
    }
    #measure {
        margin: 1rem 1rem 2.5rem;
    }
    .measureBox .help,
    #openSizeGuide {
        font-size: 0.625rem;
        line-height: 1rem;
    }
    .measureBox p {
        font-size: 0.875rem;
        line-height: 1rem;
    }
    .measureBox .measureText {
        margin: 0 1rem 2.5rem;

    }
    .measureBox img {
        margin: 0.75rem auto 0;
        max-height: 10rem;
    }
    .header,
    .measureBox .back {
        bottom: 2.55rem;
    }
    .back svg,
    .close {
        width: 3rem;
        height: 3rem;
        padding: .43rem;
    }
    .tableBox .table span {
        height: 3.4375rem;
        font-weight: 400;
        box-sizing: border-box;
    }
    .tableBox .sizes span {
        width: auto;
        min-width: max-content;
        font-size: 0.875rem;
        line-height: 1.5rem; 
        padding: .5rem;
        width: auto;
    }
    .tableBox .head span {
        min-width: 4.125rem;
        font-size: 0.75rem;
        line-height: 1rem;
    }
    .scroll-buttons {
        margin: auto;
    }
     .measureBox .footer span.back{
        font-size: 0;
    }
    .measureBox .footer .back svg{
        font-size: initial;
    }
    .measureBox.show .header{
        display: none;
    }
}

/*************************/
/* mobile and tablet */
/*************************/
@media (max-width: 1081px) {
    #sizeGuide {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(2px);
        z-index: 4;
        overflow: scroll;
    }

    #sizeGuide.show {
        display: block;
    }

    #sizeGuide .title {
        padding: 1rem;
        box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.04);
    }

    .header,
    .measureBox .back {
        position: absolute;
        left: 0;
        width: 100%;
        text-align: center;
        bottom: -2rem;
    }

    .back svg,
    .close {
        background: #fff;
        box-shadow: 0px 0px 32px -8px rgba(0, 0, 0, 0.16);
        box-sizing: border-box;
    }

    .measureBox,
    .tableBox {
        background-color: #eee;
        box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.04);
        box-sizing: border-box;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
    }

    .measureBox .footer {
        /* margin-top: 4.3rem; */
        position: relative;
    }

    .measureBox .help {
        display: flex;
        align-items: center;
        gap: .5rem;
    }

    #measure {
        background: #E2E2E2;
    }
    .noSize,
    .sizeChoosen {
        display: none;
    }
    .noSize.show,
    .sizeChoosen.show {
        display: block;
    }
    
    #openSizeGuide {
        margin: 2.5rem 0 .5rem;
    }
    #tableWrapper {
        justify-content: center;
    }
    .scroll-buttons {
        position: absolute;
        height: auto;
        width: 100%;
        width: 50px;
        right: 0;
        --swiper-navigation-top-offset: 80%;
        --swiper-navigation-sides-offset: calc(50% - 1.5rem);
    }
    .sizeList {
        width: calc(100% - 4.6rem);
    }
}
/*************************/
/* tablet */
/*************************/
@media (min-width:768px) and (max-width: 1081px),
(min-width: 991px) and (any-hover: none) {
    .tableBox .table{
        box-sizing: border-box;
        min-width: 4.1rem;
        width: auto;
        display: table;
    }
    .tableBox-wrapper{
        position: absolute;
        display: flex;
        justify-content: space-between;
        width: calc(100% - 4rem);
        top: 0.75rem;
        left: 50%;
        z-index: 5;
        transform: translateX(-50%);
    }
    .tableBox-wrapper .tableBox-wrapper-title span{
        font-size: 1rem;
        font-weight: 400;
        line-height: 1rem;
    }
    .measureBox {
        min-height: calc(100% - 8rem);
        /* padding: 1.5rem 1rem 4.5rem; */
        margin: 3rem 1rem 2rem;
    }
    .tableBox {
        min-height: calc(100% - 8rem);
        /* padding: 1.5rem 1rem 4.5rem; */
        margin: 3rem 1rem 5rem;
    }

    #openSizeGuide {
        font-size: 0.875rem;
        line-height: 1.5rem;
        margin: 4.75rem 0 .25rem;
    }

    #sizeGuide .title {
        text-align: center;
    }

    .measureBox,
    .tableBox {
        min-height: calc(100% - 9.8rem);
        /* padding: 2rem 2rem 5rem; */
        margin: 5rem 5rem 4.8rem;
    }
    #sizeGuide .title,
    #measure {
        font-size: 1.125rem;
        line-height: 1.5rem;
    }
    .measureBox .help
    #openSizeGuide,
    .measureBox p {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .measureBox .measureText {
        margin: 0 3rem 1rem;
    }
    #tableWrapper {
        position: relative;
        padding: 3rem 2rem;
    }
    
/************ tallas *****************/
    #sizeGuide #measure{
        border-radius: 0.5rem;
        border: 2px solid var(--black);
        padding: 0.5rem 1.5rem;
    }
    #sizeGuide #measure svg{
        margin-right: 1rem;
    }
    #measure {
        margin: 0 2.56rem 5rem;
    }
    .measureBox img {
        margin: 0 auto;
        max-height: 21.5rem;
    }
    .header,
    .measureBox .back {
        /* bottom: 3.3rem; */
        bottom: -2rem;
    }
    .back svg,
    .close {
        width: 3.5rem;
        height: 3.5rem;
        padding: .5rem;
    }
    .tableBox .table span {
        height: 5.375rem;
        width: auto;
        font-weight: 400;
        font-size: 1.125rem;
        line-height: 1.5rem;
        padding: .5rem;
        box-sizing: border-box;
    }
    .tableBox .head span {
        font-size: 0.875rem;
    }
    .scroll-buttons {
        margin: auto 0;
    }
    .scroll-buttons {
        position: absolute;
        height: auto;
        width: 50px;
        padding: 0;
        right: 1rem;
        --swiper-navigation-top-offset: 120%;
        --swiper-navigation-sides-offset: calc(50% - 1.5rem);
    }
    .sizeList {
        width: calc(100% - 6.5rem);
    }
     .measureBox .footer span.back{
        font-size: 0;
    }
    .measureBox .footer .back svg{
        font-size: initial;
    }
    .measureBox.show .header{
        display: none;
    }
}

/*************************/
/* desktop */
/*************************/
@media (min-width: 1081px) and (any-hover: hover) {

    .measureBox{
        display: flex !important;
        top: 1.5rem;
        justify-content: space-evenly;
        position: absolute;
        height: calc(100% - 1.5rem);
        box-sizing: border-box;
        opacity: 0;
        transition: 0.5s;
        transform: translateX(120%);
    }
    .measureBox.show{
        opacity: 1;
        transform: translateX(0);
    }
    .tableBox .header{
        position: absolute;
        width: 100%;
        top: 1.5rem;
        right: 0.5rem;
    }
    
    #sizeGuide .tableBox .header svg{
        right: 1rem;
    }
    #sizeGuide .measureBox .header svg{
        right: 1.25rem;
    }
    #sizeGuide {
        overflow: hidden;
        position: fixed;
        border: 1px solid #000;
        background: #EEE;
        box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.02);
        width: 100%;
        max-width: 30.5rem;
        right: 0;
        padding: 1.5rem 2.5rem 2rem 1.5rem;
        z-index: 3;
        margin-right: -100%;
        box-sizing: border-box;
        transition: all ease-in-out .3s;
        height: calc(100% - 96px);
    }
    .sizeList {
        width: calc(100% - 5rem);
        /* overflow-y: hidden; */
    }
    #tableWrapper {
        position: relative;
        justify-content: center;
        padding-top: 4rem;
    }
    
    .tableBox-wrapper{
        position: absolute;
        display: flex;
        justify-content: space-between;
        width: 100%;
        top: 1.25rem;
        left: 0;
        z-index: 5;
    }
    .tableBox-wrapper .tableBox-wrapper-title span{
        font-size: 1rem;
        font-weight: 400;
        line-height: 1rem;
    }
    #sizeGuideWrapper #sizeGuide .measureBox{
        /* align-content: space-between; */
        overflow: scroll;
        gap: 1.25rem;
    }
    #sizeGuide.show {
        margin-right: 0;
        gap: 1.25rem;
    }
    
    #sizeGuide .close {
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
    }
    .measureBox img {
        margin: 0 auto;
        max-height: 16.5rem;
    }
    .measureBox p {
        line-height: 1.5rem;
    }
    
    .measureBox .footer {
        display: flex;
        justify-content: space-between;
        margin-top: 1rem;
    }
    #sizeGuide .measureBox .close {
        top: 0;
    }
    
    .measureBox .footer span {
        display: flex;
        align-items: center;
        gap: .5rem;
        cursor: pointer;
    }
    .measureBox .measureText p{
        margin-top: 0;
    }
    .tableBox {
        display: block;
        opacity: 0;
        flex-direction: column;
        /* justify-content: space-between; */
        height: 100%;
    }

    #measure {
        font-size: 1rem;
        line-height: 1rem;
        background: var(--white);
        margin-top: 1.5rem;
    }
     #measure svg{
        margin-right: 1rem;
     }
    
    #sizeGuide .title {
        font-size: 1rem;
        line-height: 1rem;
        font-weight: 700;
    }
    #sizeGuide .measureBox .header{
        position: absolute;
        width: 100%;
        top: 0;
        right: 0;
    }
    #openSizeGuide {
        margin-bottom: 1rem;
        cursor: pointer;
    }
    .tableBox .table{
        box-sizing: border-box;
        min-width: 4.1rem;
        width: auto;
        display: table;
    }
    .tableBox .table span {
        height: 4rem;
        font-weight: 400;
        box-sizing: border-box;
    }
    /* .tableBox .table.sizes span {
        width: 3.75rem;
    } */
    .tableBox .sizes span {
        width: auto;
        min-width: max-content;
        padding: 0 .5rem;
        font-size: 1rem;
        line-height: 1rem;
        -webkit-user-select: none;
        user-select: none;
    }
    .tableBox .head span {
        font-size: 0.875rem;
        line-height: 1.5rem;
    }

    .product-data.hide #openSizeGuide {
        display: none;
    }
    .scroll-buttons {
        position: absolute;
        height: auto;
        width: 50px;
        padding: 0;
        right: 0;
        --swiper-navigation-top-offset: 120%;
        --swiper-navigation-sides-offset: calc(50% - 1.5rem);
    }
    .scroll-button{
        z-index: 5;
    }

    #sizeGuide.show + .sizeGuideBackdrop{
        cursor: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzQiIGhlaWdodD0iMzMiIHZpZXdCb3g9IjAgMCAzNCAzMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIgMS4zMTM0OEwzMiAzMS4zMTM1IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjMuNSIvPgo8cGF0aCBkPSJNMiAzMS4zMTM1TDMyIDEuMzEzNDkiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMy41Ii8+Cjwvc3ZnPgo="), auto;
        filter: opacity(100%);
    }
    
    .sizeGuideBackdrop {
        width: 100%;
        height: 100%;
        background: #0006;
        opacity: 0;
        transition: ease opacity .3s;
    }
    .sizeGuideBackdrop.show {
        opacity: 1;
        position: fixed;
        z-index: 2;
        top: 0;
        left: 0;
    }
    .sizeChoosen{
        display: none;
    }
}