/** add_action( 'wp_head', 'wc_page_noindex' );
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
body.scfw-size-chart-active{overflow:hidden;padding-right:15px}
.remodal-wrapper .size-chart-model{padding:35px}
.chart-content-list{display:inline-block;float:left;width:71%;padding-right:10px;text-align:left}
.chart-content-list span{font-size:16px;font-weight:bold}
.chart-content-list li{font-size:14px;padding:3px}

table#size-chart tr th{font-size:14px;font-weight:bold;padding:5px}
table#size-chart tr td{font-size:16px}
table#size-chart tr th,table#size-chart tr td{text-align:center;word-wrap:break-word;min-width:120px;position:relative;background-color:transparent;-webkit-transition:background-color .2s;-o-transition:background-color .2s;transition:background-color .2s;}
.chart-image img{width:100%}
.size-chart-model .remodal-close::before,.size-chart-model .remodal-close{right:0;left:auto}
.chart-content-list p{font-size:14px}
.chart-content-list>ul{margin-left:20px}
#chart-button{border-bottom:medium none;box-shadow:none;text-decoration:none;outline:none;}
.button-wrapper{clear:both;float:left;margin-bottom:15px;width:100%}
.button-wrapper .md-size-chart-btn .dashicons {margin-right:8px;vertical-align: text-bottom;}
.button-wrapper .md-size-chart-btn .dashicons img{width:20px;height:20px;margin:0;display:inline-block;vertical-align:bottom;}
.remodal{margin-top:25px}
@media only screen and (max-width:500px){table#size-chart tr th{font-size:11px!important}table#size-chart tr td{font-size:10px!important}}
#size-chart tr:nth-child(2n+1){border-bottom:1px solid #eee}
.md-size-chart-modal{display:none;}
.md-size-chart-hide{-webkit-animation: cssAnimation 0.4s forwards; animation: cssAnimation 0.4s forwards;}
.md-size-chart-show{display:block;}
.md-size-chart-modal-content{margin:0;position:fixed;z-index:199999;top:0;right:0;bottom:0;left:0;padding:50px}
div#md-size-chart-modal .remodal-close{font-weight:600}
.md-size-chart-modal-body{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);color:#2b2e38;background:#fff;position:relative;outline:none;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;-webkit-animation-name:animatetop;-webkit-animation-duration:0.4s;animation-name:animatetop;animation-duration:0.4s;margin:0 auto;z-index:111111;overflow:hidden;max-height:100%;border-radius:5px;height:100%;padding-bottom: 50px;}
.md-size-chart-hide .md-size-chart-modal-body{-webkit-animation:animateend ease 0.5s forwards;-webkit-animation-duration:0.4s;animation:animateend ease 0.5s forwards;animation-duration:0.4s;}
div.md-size-chart-overlay{position:fixed;z-index:10000;top:-5000px;right:-5000px;bottom:-5000px;left:-5000px;background-color:rgb(0 0 0 / 70%);-webkit-animation-name:animatetop;-webkit-animation-duration:0.4s;animation-name:animatetop;animation-duration:0.4s;}
.md-size-chart-hide .md-size-chart-overlay{-webkit-animation:animateend ease 0.5s forwards;-webkit-animation-duration:0.4s;animation:animateend ease 0.5s forwards;animation-duration:0.4s;}
.chart-container {padding: 20px;height: 100%;overflow-y: auto;}
div#md-size-chart-modal .chart-table{float:none;width:100%;overflow-x:auto;}
div#md-size-chart-modal .chart-image{clear:both;margin-top:15px;float:left}
div#md-size-chart-modal .chart-content{clear:both;width:100%}
.md-size-chart-subtitle{font-size: 16px;}
.chart-table{clear:both;margin-top:15px;float:left}
.chart-table table{border-collapse:collapse;border-spacing:0;border-width:1px 0 0 1px;margin:0;table-layout:auto;width:100%;border:1px solid #d1d1d1;overflow:hidden;}
.chart-table th,td{padding:0.4375em}

.chart-table table,.chart-table th,.chart-table td{border:1px solid #d1d1d1}

.chart-table td,.chart-table th{padding: 5px;}
.md-modal-title {font-size: 20px;line-height: 26px;padding:11px 60px 11px 20px;}
.md-size-chart-close {display: block;width: 100%;border-bottom: 1px solid lightgrey;height: 50px;position: relative;}
.md-size-chart-label{font-size: 20px;font-weight: 700;text-align: center;margin: 0;font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;}
.remodal-close{display:block;overflow:visible;width:50px;height:50px;margin:0;padding:0;cursor:pointer;-webkit-transition:color 0.2s, background-color 0.2s;transition:color 0.2s, background-color 0.2s;text-decoration:none;color:#95979c;border:0;outline:0;background:transparent;position: absolute;right: 0;top:0;}
.remodal-close:hover,.remodal-close:focus{color:#fff;background-color:#d85050;border-color:#d85050;outline:none;}
.remodal-close::before{font-family:Arial, "Helvetica CY", "Nimbus Sans L", sans-serif!important;font-size:30px;line-height:50px;position:absolute;top:0;left:0;display:block;width:48px;content:"\00d7";text-align:center}
.chart_note {background-color: #eaea16;padding: 5px;border-radius: 5px;margin-top: 10px;display: inline-block;width: 100%;}
.scfw-size-chart-main{display:inline-block;width:100%;}
.scfw-size-chart-main .md-size-chart-btn{display:inline-block;}
.woocommerce.single-product .product .summary:has(.md-size-chart-show),.woocommerce.single-product .product:has(.md-size-chart-show){z-index:99999;position:relative;}

/* Left Popup CSS */
.scfw-size-chart-popup-left{display:block;}
.scfw-size-chart-popup-left .md-size-chart-overlay{display:none;}
.scfw-size-chart-popup-left .md-size-chart-modal-content{left:-100%;padding:0;right:unset;transition:all .5s ease-out;width:100%;}
.scfw-size-chart-popup-left.md-size-chart-show .md-size-chart-modal-content{left:0;transition:all .5s ease-out;}
.scfw-size-chart-popup-left .md-size-chart-modal-body{box-shadow:0 0 15px rgb(0 0 0 / 25%);border-radius:0;animation:none;margin-left:0;}
.scfw-size-chart-popup-left.md-size-chart-show .md-size-chart-overlay{display:block;}

/* Right Popup CSS */
.scfw-size-chart-popup-right{display:block;}
.scfw-size-chart-popup-right .md-size-chart-overlay{display:none;}
.scfw-size-chart-popup-right .md-size-chart-modal-content{left:unset;padding:0;right:-100%;transition:all .5s ease-out;width:100%;}
.scfw-size-chart-popup-right.md-size-chart-show .md-size-chart-modal-content{right:0;transition:all .5s ease-out;}
.scfw-size-chart-popup-right .md-size-chart-modal-body{box-shadow:0 0 15px rgb(0 0 0 / 25%);border-radius:0;animation:none;margin-right:0;}
.scfw-size-chart-popup-right.md-size-chart-show .md-size-chart-overlay{display:block;}

/* Size Chart Tabs CSS */
.scfw_size-chart-details-tab{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-bottom:1px solid lightgrey;position:relative;}
.scfw_size-chart-details-tab span{width:100%;max-width:220px;padding:10px 10px 7px 10px;cursor:pointer;text-align:center;border-bottom:3px solid transparent;outline:none;-webkit-box-shadow:none;box-shadow:none;color:#000;font-size:16px;line-height:25px;}
.scfw_size-chart-details-tab span.active-tab{border-bottom-color:#000;font-weight:600;}
.scfw_size-chart-details-tab + .chart-container{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;-ms-flex-wrap:wrap;flex-wrap:wrap;}
.scfw_size-chart-details-tab + .chart-container .chart-content.scfw-tab-content{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;}
.scfw_size-chart-details-tab + .chart-container .scfw-tab-content{display:none;}
.scfw_size-chart-details-tab + .chart-container .scfw-tab-content.active-tab{display:inline-block;}
.scfw_size-chart-details-tab + .chart-container .scfw-tab-content{-webkit-animation:fadeEffext 0.8s;animation:fadeEffext 0.8s}
.scfw_size-chart-details-tab .scfw_tab_underline{display:inline-block;width:100%;max-width:220px;height:3px;background-color:#000;position:absolute;z-index:1200;bottom:0;left:0;-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;visibility:hidden;}
@-webkit-keyframes fadeEffext{
    from{opacity:0}
    to{opacity:1}
}
@keyframes fadeEffext{
    from{opacity:0}
    to{opacity:1}
}

/* Size Chart Multiple Table CSS */
.chart-table .scfw-chart-table{margin-bottom:30px;}
.chart-table .scfw-chart-table-title{font-size:19px;margin:0 0 15px;line-height:normal;}

@media only screen and (min-width:641px){
    .md-size-chart-modal-body.small{max-width:600px;}
    .md-size-chart-modal-body.medium,.md-size-chart-modal-body{max-width:800px;}
    .md-size-chart-modal-body.large{max-width:1000px;}
}
@media only screen and (max-width:640px){
    div#md-size-chart-modal .chart-table{overflow:scroll;width:100%}
    .chart-content-list{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}
    div#md-size-chart-modal .chart-table table{width:100%;table-layout:auto;margin-bottom:0;white-space:nowrap}
    div#md-size-chart-modal .chart-table::-webkit-scrollbar{height:8px;width:0}
    div#md-size-chart-modal .chart-table::-webkit-scrollbar-track{background-color:rgb(238 238 238 / 90%)}
    div#md-size-chart-modal .chart-table::-webkit-scrollbar-thumb{background:#c2c2c2}
    .md-size-chart-modal-content{padding:30px}
}

/* Add Animation */
/* @-webkit-keyframes animatetop{from{top:-300px;opacity:0}to{top:0;opacity:1}}
@keyframes animatetop{from{top:-300px;opacity:0}to{top:0;opacity:1}} */
@-webkit-keyframes animatetop{from{transform: scale(0.7);opacity:0.2}to{transform: scale(1);opacity:1}}
@keyframes animatetop{from{transform: scale(0.7);opacity:0.2}to{transform: scale(1);opacity:1}}

@-webkit-keyframes animateend{from{transform: scale(1);opacity:1}to{transform: scale(0.7);opacity:0;}}
@keyframes animateend{from{transform: scale(1);opacity:1}to{transform: scale(0.7);opacity:0;}}

@keyframes cssAnimation {100% {visibility: hidden;}}
@-webkit-keyframes cssAnimation {100% {visibility: hidden;}}


/* Sbarkfly multitable-to-tabs customization */
.scfw_size-chart-details-tab{
    overflow-x:auto;
    overflow-y:hidden;
    justify-content:flex-start;
    -webkit-overflow-scrolling:touch;
}
.scfw_size-chart-details-tab span{
    flex:0 0 auto;
    width:auto;
    max-width:none;
    min-width:160px;
    white-space:nowrap;
}
.scfw_size-chart-details-tab .scfw_tab_underline{
    max-width:none;
}
.scfw_size-chart-details-tab + .chart-container .chart-table.scfw-tab-content.active-tab{
    display:block;
}
.scfw_size-chart-details-tab + .chart-container .chart-table.scfw-tab-content:not(.active-tab){
    display:none;
}
.scfw_size-chart-details-tab + .chart-container .chart-table.scfw-tab-content .scfw-chart-table{
    margin:0 auto;
}
.scfw_size-chart-details-tab + .chart-container .chart-table.scfw-tab-content .scfw-chart-table + .scfw-chart-table{
    margin-top:18px;
}
@media only screen and (max-width:600px){
    div#md-size-chart-modal .chart-table{
        overflow-x:visible!important;
        width:100%!important;
    }
    div#md-size-chart-modal .chart-table table.scfw-chart-table,
    div#md-size-chart-modal .chart-table table#size-chart{
        width:100%!important;
        table-layout:fixed!important;
        white-space:normal!important;
        min-width:0!important;
    }
    div#md-size-chart-modal table#size-chart tr th,
    div#md-size-chart-modal table#size-chart tr td,
    div#md-size-chart-modal .scfw-chart-table tr th,
    div#md-size-chart-modal .scfw-chart-table tr td{
        min-width:0!important;
        padding:8px 2px!important;
        font-size:11.5px!important;
        line-height:1.2!important;
        white-space:normal!important;
        word-break:normal!important;
    }
    .scfw_size-chart-details-tab span{
        min-width:50%;
        font-size:14px;
        padding-left:8px;
        padding-right:8px;
    }
}

/* Sbarkfly modern size chart UI v2.4.4.2
 * Front-end only. Scoped by JS-added classes to avoid impacting WooCommerce or other plugin UI.
 */
.scfw-modern-modal .md-size-chart-modal-content{
    padding:20px!important;
    display:flex;
    align-items:center;
    justify-content:center;
}
.scfw-modern-modal .md-size-chart-modal-body.scfw-modern-modal-body{
    width:min(1040px, calc(100vw - 56px))!important;
    max-width:1040px!important;
    height:auto!important;
    max-height:calc(100vh - 44px)!important;
    overflow-y:auto!important;
    padding:0 28px 28px!important;
    border-radius:6px!important;
    background:#fff!important;
    box-sizing:border-box!important;
}
.scfw-modern-modal-body .md-size-chart-close{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:16px!important;
    padding:22px 0 10px!important;
    margin:0!important;
    border-bottom:0!important;
}
.scfw-modern-modal-body .md-modal-title{
    margin:0!important;
    padding:0!important;
    color:#111827!important;
    font-size:24px!important;
    line-height:1.25!important;
    font-weight:700!important;
    letter-spacing:-0.02em!important;
}
.scfw-modern-modal-body .remodal-close{
    position:static!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 auto!important;
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    min-height:36px!important;
    background:transparent!important;
    border:0!important;
    color:#4b5563!important;
    opacity:1!important;
    cursor:pointer!important;
}
.scfw-modern-modal-body .remodal-close:before{
    font-size:34px!important;
    line-height:1!important;
    color:#4b5563!important;
}
.scfw-modern-size-chart{
    width:100%!important;
    box-sizing:border-box!important;
    color:#1f2933!important;
    font-family:inherit!important;
}
.scfw-modern-category-tabs{
    display:flex!important;
    align-items:flex-start!important;
    gap:22px!important;
    width:100%!important;
    margin:0 0 24px!important;
    padding:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    border-bottom:1px solid #d7d7d7!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
}
.scfw-modern-category-tabs::-webkit-scrollbar{display:none!important;}
.scfw-modern-category-tab{
    position:relative!important;
    flex:0 0 auto!important;
    padding:0 0 7px!important;
    margin:0!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    color:#777!important;
    font-size:18px!important;
    line-height:1.25!important;
    font-weight:700!important;
    white-space:nowrap!important;
    text-transform:none!important;
    cursor:default!important;
}
.scfw-modern-category-tab.is-active{
    color:#111!important;
}
.scfw-modern-category-tab.is-active:after{
    content:""!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:-1px!important;
    height:2px!important;
    background:#111!important;
}
.scfw-modern-category-tab:disabled{
    opacity:1!important;
    pointer-events:none!important;
}
.scfw-modern-container{
    display:block!important;
    width:100%!important;
}
.scfw-modern-table-area{
    width:100%!important;
    padding:4px 20px 0!important;
    box-sizing:border-box!important;
}
.scfw-modern-table-panel{
    display:none!important;
    width:100%!important;
    overflow:visible!important;
    margin:0!important;
    padding:0!important;
}
.scfw-modern-table-panel.active-tab{
    display:block!important;
}
.scfw-modern-size-chart table.scfw-chart-table,
.scfw-modern-size-chart table#size-chart{
    width:100%!important;
    table-layout:fixed!important;
    border-collapse:collapse!important;
    border-spacing:0!important;
    margin:0 auto!important;
    min-width:0!important;
    max-width:100%!important;
    white-space:normal!important;
    border:0!important;
}
.scfw-modern-size-chart table.scfw-chart-table tr th,
.scfw-modern-size-chart table.scfw-chart-table tr td,
.scfw-modern-size-chart table#size-chart tr th,
.scfw-modern-size-chart table#size-chart tr td{
    min-width:0!important;
    max-width:none!important;
    padding:11px 8px!important;
    text-align:center!important;
    vertical-align:middle!important;
    border:1px solid #fff!important;
    background-color:#fff!important;
    color:#1f2933!important;
    font-size:18px!important;
    line-height:1.18!important;
    font-weight:500!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    transition:none!important;
}
.scfw-modern-size-chart table.scfw-chart-table tr th,
.scfw-modern-size-chart table#size-chart tr th{
    background:#c9c9c9!important;
    color:#1f2933!important;
    font-weight:700!important;
}
.scfw-modern-size-chart table.scfw-chart-table tbody tr:nth-child(odd) td,
.scfw-modern-size-chart table#size-chart tbody tr:nth-child(odd) td{
    background:#e9e9e9!important;
}
.scfw-modern-size-chart table.scfw-chart-table tbody tr:nth-child(even) td,
.scfw-modern-size-chart table#size-chart tbody tr:nth-child(even) td{
    background:#fff!important;
}
.scfw-modern-size-chart table.scfw-chart-table .col-highlight,
.scfw-modern-size-chart table#size-chart .col-highlight{
    background-color:inherit!important;
}
.scfw-modern-unit-toggle{
    display:flex!important;
    align-items:center!important;
    gap:44px!important;
    width:100%!important;
    margin:26px 0 28px!important;
    padding:0 20px!important;
    box-sizing:border-box!important;
}
.scfw-modern-unit-btn{
    display:inline-flex!important;
    align-items:center!important;
    gap:8px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#222!important;
    font-size:17px!important;
    line-height:1.3!important;
    font-weight:500!important;
    cursor:pointer!important;
    text-transform:none!important;
}
.scfw-modern-radio{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:18px!important;
    height:18px!important;
    border:2px solid #8a8a8a!important;
    border-radius:50%!important;
    box-sizing:border-box!important;
    background:#fff!important;
}
.scfw-modern-unit-btn.is-active .scfw-modern-radio{
    border-color:#0078ff!important;
    background:#0078ff!important;
    box-shadow:inset 0 0 0 4px #fff!important;
}
.scfw-modern-measure{
    border-top:2px solid #1f1f1f!important;
    border-bottom:2px solid #1f1f1f!important;
    margin:0!important;
    padding:0!important;
}
.scfw-modern-measure summary{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:16px!important;
    min-height:72px!important;
    padding:0!important;
    color:#1f2933!important;
    font-size:18px!important;
    line-height:1.25!important;
    font-weight:700!important;
    cursor:pointer!important;
    list-style:none!important;
}
.scfw-modern-measure summary::-webkit-details-marker{display:none!important;}
.scfw-modern-measure summary:after{
    content:"⌄"!important;
    display:inline-flex!important;
    color:#555!important;
    font-size:18px!important;
    font-weight:400!important;
    line-height:1!important;
}
.scfw-modern-measure[open] summary:after{content:"⌃"!important;}
.scfw-modern-measure-content{
    padding:0 0 22px!important;
    color:#333!important;
    font-size:16px!important;
    line-height:1.55!important;
}
.scfw-modern-measure-content p{
    margin:0 0 10px!important;
}
.scfw-modern-note{
    margin:26px 20px 0!important;
    color:#1f2933!important;
    font-size:17px!important;
    line-height:1.55!important;
}
.scfw-modern-note strong{font-weight:700!important;}

@media only screen and (max-width:640px){
    .scfw-modern-modal .md-size-chart-modal-content{
        padding:0!important;
        align-items:flex-start!important;
        justify-content:flex-start!important;
    }
    .scfw-modern-modal .md-size-chart-modal-body.scfw-modern-modal-body{
        width:100vw!important;
        max-width:100vw!important;
        min-height:100vh!important;
        max-height:100vh!important;
        border-radius:0!important;
        padding:0 16px 28px!important;
        overflow-y:auto!important;
    }
    .scfw-modern-modal-body .md-size-chart-close{
        padding:18px 0 12px!important;
    }
    .scfw-modern-modal-body .md-modal-title{
        font-size:22px!important;
    }
    .scfw-modern-modal-body .remodal-close{
        width:30px!important;
        height:30px!important;
        min-width:30px!important;
        min-height:30px!important;
    }
    .scfw-modern-modal-body .remodal-close:before{
        font-size:28px!important;
    }
    .scfw-modern-category-tabs{
        gap:18px!important;
        margin-bottom:22px!important;
        padding-bottom:0!important;
    }
    .scfw-modern-category-tab{
        font-size:16px!important;
        padding-bottom:8px!important;
    }
    .scfw-modern-table-area{
        padding:4px 0 0!important;
    }
    div#md-size-chart-modal .scfw-modern-size-chart .chart-table{
        overflow-x:visible!important;
        width:100%!important;
    }
    .scfw-modern-size-chart table.scfw-chart-table,
    .scfw-modern-size-chart table#size-chart{
        width:100%!important;
        table-layout:fixed!important;
        min-width:0!important;
        white-space:normal!important;
    }
    .scfw-modern-size-chart table.scfw-chart-table tr th,
    .scfw-modern-size-chart table.scfw-chart-table tr td,
    .scfw-modern-size-chart table#size-chart tr th,
    .scfw-modern-size-chart table#size-chart tr td{
        padding:8px 2px!important;
        font-size:13px!important;
        line-height:1.16!important;
        letter-spacing:-0.1px!important;
    }
    .scfw-modern-size-chart table.scfw-chart-table tr th:nth-child(1),
    .scfw-modern-size-chart table.scfw-chart-table tr td:nth-child(1),
    .scfw-modern-size-chart table#size-chart tr th:nth-child(1),
    .scfw-modern-size-chart table#size-chart tr td:nth-child(1){width:18%!important;}
    .scfw-modern-size-chart table.scfw-chart-table tr th:nth-child(2),
    .scfw-modern-size-chart table.scfw-chart-table tr td:nth-child(2),
    .scfw-modern-size-chart table#size-chart tr th:nth-child(2),
    .scfw-modern-size-chart table#size-chart tr td:nth-child(2){width:20%!important;}
    .scfw-modern-size-chart table.scfw-chart-table tr th:nth-child(3),
    .scfw-modern-size-chart table.scfw-chart-table tr td:nth-child(3),
    .scfw-modern-size-chart table.scfw-chart-table tr th:nth-child(4),
    .scfw-modern-size-chart table.scfw-chart-table tr td:nth-child(4),
    .scfw-modern-size-chart table.scfw-chart-table tr th:nth-child(5),
    .scfw-modern-size-chart table.scfw-chart-table tr td:nth-child(5),
    .scfw-modern-size-chart table#size-chart tr th:nth-child(3),
    .scfw-modern-size-chart table#size-chart tr td:nth-child(3),
    .scfw-modern-size-chart table#size-chart tr th:nth-child(4),
    .scfw-modern-size-chart table#size-chart tr td:nth-child(4),
    .scfw-modern-size-chart table#size-chart tr th:nth-child(5),
    .scfw-modern-size-chart table#size-chart tr td:nth-child(5){width:20.66%!important;}
    .scfw-modern-unit-toggle{
        gap:36px!important;
        margin:24px 0 28px!important;
        padding:0 8px!important;
    }
    .scfw-modern-unit-btn{
        font-size:16px!important;
    }
    .scfw-modern-radio{
        width:18px!important;
        height:18px!important;
    }
    .scfw-modern-measure summary{
        min-height:62px!important;
        font-size:16px!important;
    }
    .scfw-modern-measure-content{
        font-size:15px!important;
        padding-bottom:18px!important;
    }
    .scfw-modern-note{
        margin:24px 0 0!important;
        font-size:15px!important;
        line-height:1.5!important;
    }
}

@media only screen and (max-width:380px){
    .scfw-modern-size-chart table.scfw-chart-table tr th,
    .scfw-modern-size-chart table.scfw-chart-table tr td,
    .scfw-modern-size-chart table#size-chart tr th,
    .scfw-modern-size-chart table#size-chart tr td{
        font-size:12px!important;
        padding-left:1px!important;
        padding-right:1px!important;
    }
    .scfw-modern-unit-toggle{
        gap:24px!important;
    }
}

/* Sbarkfly modern size chart UI v2.4.4.3 refinements
 * Scoped to the modern modal only. Keeps close button in the top-right corner,
 * removes dependency on hard-coded category tabs, and displays only admin-entered popup notes.
 */
.scfw-modern-modal-body{
    position:relative!important;
}
.scfw-modern-modal-body .md-size-chart-close{
    display:block!important;
    position:relative!important;
    padding:22px 48px 16px 0!important;
    margin:0!important;
    min-height:42px!important;
    border-bottom:0!important;
}
.scfw-modern-modal-body .md-size-chart-close .md-modal-title,
.scfw-modern-modal-body .md-modal-title{
    display:block!important;
    width:100%!important;
}
.scfw-modern-modal-body .md-size-chart-close .remodal-close,
.scfw-modern-modal-body .remodal-close{
    position:absolute!important;
    top:14px!important;
    right:0!important;
    z-index:3!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
}
.scfw-modern-size-chart .scfw-modern-container{
    margin-top:0!important;
}
.scfw-modern-size-chart .scfw-modern-category-tabs + .scfw-modern-container{
    margin-top:0!important;
}
.scfw-modern-note{
    margin:24px 20px 0!important;
}
.scfw-modern-note p{
    margin:0 0 10px!important;
}
@media only screen and (max-width:640px){
    .scfw-modern-modal-body .md-size-chart-close{
        padding:18px 42px 14px 0!important;
    }
    .scfw-modern-modal-body .md-size-chart-close .remodal-close,
    .scfw-modern-modal-body .remodal-close{
        top:12px!important;
        right:0!important;
    }
    .scfw-modern-note{
        margin:22px 0 0!important;
    }
}

/* Sbarkfly modern size chart UI v2.4.4.4 measure layout
 * Scoped to modern size chart only. It restructures admin-entered How to Measure content
 * into a stable image-left / text-right layout on desktop and mobile.
 */
.scfw-modern-size-chart .scfw-modern-measure-content{
    padding:0 0 22px!important;
}
.scfw-modern-size-chart .scfw-modern-measure-layout{
    display:grid!important;
    grid-template-columns:minmax(220px, 30%) minmax(0, 1fr)!important;
    gap:28px!important;
    align-items:start!important;
    width:100%!important;
    box-sizing:border-box!important;
}
.scfw-modern-size-chart .scfw-modern-measure-image{
    width:100%!important;
    min-width:0!important;
}
.scfw-modern-size-chart .scfw-modern-measure-image img{
    display:block!important;
    width:100%!important;
    max-width:320px!important;
    height:auto!important;
    margin:0!important;
    border:0!important;
    box-shadow:none!important;
}
.scfw-modern-size-chart .scfw-modern-measure-text{
    min-width:0!important;
    align-self:start!important;
    padding-top:0!important;
}
.scfw-modern-size-chart .scfw-modern-measure-text p{
    margin:0 0 16px!important;
    color:#222!important;
    font-size:17px!important;
    line-height:1.55!important;
}
.scfw-modern-size-chart .scfw-modern-measure-text p:last-child{
    margin-bottom:0!important;
}
.scfw-modern-size-chart .scfw-modern-measure-text strong,
.scfw-modern-size-chart .scfw-modern-measure-text b{
    font-weight:700!important;
}
.scfw-modern-size-chart .scfw-modern-measure-text-full{
    width:100%!important;
}

@media only screen and (max-width:640px){
    .scfw-modern-size-chart .scfw-modern-measure-content{
        padding-bottom:18px!important;
    }
    .scfw-modern-size-chart .scfw-modern-measure-layout{
        grid-template-columns:min(160px, 38%) minmax(0, 1fr)!important;
        gap:14px!important;
        align-items:start!important;
    }
    .scfw-modern-size-chart .scfw-modern-measure-image img{
        max-width:160px!important;
        width:100%!important;
    }
    .scfw-modern-size-chart .scfw-modern-measure-text p{
        font-size:15px!important;
        line-height:1.45!important;
        margin-bottom:14px!important;
    }
}

@media only screen and (max-width:380px){
    .scfw-modern-size-chart .scfw-modern-measure-layout{
        grid-template-columns:min(132px, 37%) minmax(0, 1fr)!important;
        gap:12px!important;
    }
    .scfw-modern-size-chart .scfw-modern-measure-image img{
        max-width:132px!important;
    }
    .scfw-modern-size-chart .scfw-modern-measure-text p{
        font-size:14px!important;
        line-height:1.42!important;
        margin-bottom:12px!important;
    }
}

/* Sbarkfly modern admin settings v2.4.4.5 */
.scfw-modern-size-chart.scfw-modern-measure-layout-stacked .scfw-modern-measure-layout{
    display:block!important;
}
.scfw-modern-size-chart.scfw-modern-measure-layout-stacked .scfw-modern-measure-image{
    margin:0 0 16px!important;
}
.scfw-modern-size-chart.scfw-modern-measure-layout-stacked .scfw-modern-measure-image img{
    max-width:320px!important;
}


/* ===== Size Guide for WooCommerce v1.0.7 mobile modal refinements =====
 * 1. Make mobile close button clearly visible.
 * 2. Keep mobile modal inset so the overlay gap remains tappable.
 * 3. Remove highlighted/yellow note styling; show note as plain text.
 */

/* Close button: visible on desktop and mobile */
.scfw-modern-modal-body .remodal-close,
.scfw-modern-modal-body .md-size-chart-close .remodal-close {
    top: 10px !important;
    right: 12px !important;
    left: auto !important;
    width: 40px !important;
    height: 40px !important;
    z-index: 999999 !important;
    opacity: 1 !important;
    color: #111827 !important;
    background: rgba(255,255,255,0.96) !important;
    border-radius: 999px !important;
    box-shadow: 0 1px 5px rgba(0,0,0,0.16) !important;
}

.scfw-modern-modal-body .remodal-close:before,
.scfw-modern-modal-body .md-size-chart-close .remodal-close:before {
    color: #111827 !important;
    font-size: 34px !important;
    line-height: 40px !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

/* Plain note text: no yellow/highlight box */
.scfw-modern-size-chart .scfw-modern-note,
.scfw-modern-modal-body .scfw-modern-note,
.scfw-modern-size-chart .chart_note,
.scfw-modern-modal-body .chart_note {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 18px 0 0 !important;
    color: #1f2937 !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
}

.scfw-modern-size-chart .scfw-modern-note p,
.scfw-modern-modal-body .scfw-modern-note p,
.scfw-modern-size-chart .chart_note p,
.scfw-modern-modal-body .chart_note p {
    margin: 0 !important;
}

/* Mobile: leave visible overlay around modal instead of full-screen panel */
@media (max-width: 640px) {
    div.remodal-wrapper:has(.scfw-modern-modal-body) {
        padding: 14px 10px !important;
        box-sizing: border-box !important;
    }

    .scfw-modern-modal .md-size-chart-modal-content,
    .scfw-modern-modal .md-size-chart-modal-body.scfw-modern-modal-body,
    .scfw-modern-modal-body {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100vh - 28px) !important;
        margin: 0 auto !important;
        border-radius: 8px !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    .scfw-modern-modal-body .md-size-chart-close {
        padding-right: 52px !important;
        min-height: 44px !important;
    }

    .scfw-modern-modal-body .remodal-close,
    .scfw-modern-modal-body .md-size-chart-close .remodal-close {
        top: 8px !important;
        right: 8px !important;
        width: 38px !important;
        height: 38px !important;
    }

    .scfw-modern-modal-body .remodal-close:before,
    .scfw-modern-modal-body .md-size-chart-close .remodal-close:before {
        font-size: 32px !important;
        line-height: 38px !important;
    }

    .scfw-modern-size-chart .scfw-modern-note,
    .scfw-modern-modal-body .scfw-modern-note,
    .scfw-modern-size-chart .chart_note,
    .scfw-modern-modal-body .chart_note {
        font-size: 14px !important;
        margin-top: 16px !important;
    }
}

/* Fallback for browsers without :has() support */
@media (max-width: 640px) {
    .remodal-wrapper.scfw-modern-wrapper {
        padding: 14px 10px !important;
        box-sizing: border-box !important;
    }
}


/* ===== Size Guide for WooCommerce v1.0.13 stable mobile modal offset =====
 * Based on the stable v1.0.8 modal behavior.
 * Purpose:
 * - Keep Remodal's original open/close/overlay behavior intact.
 * - On mobile only, push the actual size-chart panel below the site header.
 * - Avoid JS-driven inline positioning that caused page-content overlap in v1.0.11/1.0.12.
 */

@media (max-width: 640px) {
    html.remodal-is-locked,
    body.remodal-is-locked {
        overflow: hidden !important;
        touch-action: none !important;
    }

    body .remodal-overlay,
    body .remodal-wrapper {
        z-index: 2147483600 !important;
    }

    body .remodal-wrapper {
        padding: 0 !important;
        overflow: hidden !important;
        text-align: center !important;
    }

    body .remodal-wrapper:after {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
    }

    /*
     * Static mobile header clearance.
     * 136px is intentionally larger than the visible mobile header in the screenshots.
     */
    body .remodal-wrapper .remodal.scfw-modern-modal,
    body .remodal-wrapper .md-size-chart-modal-body.scfw-modern-modal-body,
    body .remodal-wrapper .scfw-modern-modal-body {
        position: fixed !important;
        top: calc(136px + env(safe-area-inset-top, 0px)) !important;
        left: 10px !important;
        right: 10px !important;
        bottom: auto !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 154px - env(safe-area-inset-top, 0px)) !important;
        margin: 0 auto !important;
        transform: none !important;
        border-radius: 8px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        box-sizing: border-box !important;
        z-index: 2147483647 !important;
        background: #fff !important;
    }

    @supports not (height: 100dvh) {
        body .remodal-wrapper .remodal.scfw-modern-modal,
        body .remodal-wrapper .md-size-chart-modal-body.scfw-modern-modal-body,
        body .remodal-wrapper .scfw-modern-modal-body {
            max-height: calc(100vh - 154px - env(safe-area-inset-top, 0px)) !important;
        }
    }

    body .scfw-modern-modal-body .md-size-chart-close {
        position: sticky !important;
        top: 0 !important;
        z-index: 20 !important;
        background: #fff !important;
        min-height: 48px !important;
        padding-right: 56px !important;
    }

    body .scfw-modern-modal-body .remodal-close,
    body .scfw-modern-modal-body .md-size-chart-close .remodal-close {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        left: auto !important;
        width: 40px !important;
        height: 40px !important;
        z-index: 30 !important;
        opacity: 1 !important;
        background: rgba(255,255,255,0.96) !important;
        border-radius: 999px !important;
        box-shadow: 0 1px 6px rgba(0,0,0,0.18) !important;
    }

    body .scfw-modern-modal-body .remodal-close:before,
    body .scfw-modern-modal-body .md-size-chart-close .remodal-close:before {
        color: #111827 !important;
        font-size: 34px !important;
        line-height: 40px !important;
        font-weight: 700 !important;
        opacity: 1 !important;
    }
}

/* Slightly smaller offset for very short screens, while still clearing the header. */
@media (max-width: 640px) and (max-height: 720px) {
    body .remodal-wrapper .remodal.scfw-modern-modal,
    body .remodal-wrapper .md-size-chart-modal-body.scfw-modern-modal-body,
    body .remodal-wrapper .scfw-modern-modal-body {
        top: calc(118px + env(safe-area-inset-top, 0px)) !important;
        max-height: calc(100dvh - 136px - env(safe-area-inset-top, 0px)) !important;
    }

    @supports not (height: 100dvh) {
        body .remodal-wrapper .remodal.scfw-modern-modal,
        body .remodal-wrapper .md-size-chart-modal-body.scfw-modern-modal-body,
        body .remodal-wrapper .scfw-modern-modal-body {
            max-height: calc(100vh - 136px - env(safe-area-inset-top, 0px)) !important;
        }
    }
}


/* ===== Size Guide for WooCommerce v1.0.14 mobile fullscreen modal =====
 * Mobile strategy changed from "top offset" to true fullscreen overlay.
 * The size guide covers the site header, product image, and page content.
 * Close X remains visible and exits the modal.
 */
@media (max-width: 640px) {
    html.remodal-is-locked,
    body.remodal-is-locked,
    body.scfw-mobile-size-guide-open {
        overflow: hidden !important;
        height: 100% !important;
        touch-action: none !important;
    }

    body .remodal-overlay,
    body .remodal-wrapper {
        z-index: 2147483600 !important;
    }

    body .remodal-wrapper {
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        text-align: left !important;
        background: rgba(0, 0, 0, 0.45) !important;
    }

    body .remodal-wrapper:after {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
    }

    body .remodal-wrapper .remodal.scfw-modern-modal,
    body .remodal-wrapper .md-size-chart-modal-body.scfw-modern-modal-body,
    body .remodal-wrapper .scfw-modern-modal-body {
        position: fixed !important;
        inset: 0 !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        transform: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        box-sizing: border-box !important;
        z-index: 2147483647 !important;
        background: #fff !important;
    }

    @supports not (height: 100dvh) {
        body .remodal-wrapper .remodal.scfw-modern-modal,
        body .remodal-wrapper .md-size-chart-modal-body.scfw-modern-modal-body,
        body .remodal-wrapper .scfw-modern-modal-body {
            height: 100vh !important;
            min-height: 100vh !important;
            max-height: 100vh !important;
        }
    }

    body .scfw-modern-modal-body .md-size-chart-close {
        position: sticky !important;
        top: 0 !important;
        z-index: 50 !important;
        min-height: calc(58px + env(safe-area-inset-top, 0px)) !important;
        padding: calc(12px + env(safe-area-inset-top, 0px)) 58px 10px 14px !important;
        background: #fff !important;
        box-shadow: 0 1px 0 rgba(0,0,0,0.08) !important;
        box-sizing: border-box !important;
    }

    body .scfw-modern-modal-body .md-size-chart-close .md-modal-title,
    body .scfw-modern-modal-body .md-modal-title {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 28px !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
        color: #111827 !important;
        text-align: left !important;
    }

    body .scfw-modern-modal-body .remodal-close,
    body .scfw-modern-modal-body .md-size-chart-close .remodal-close {
        position: absolute !important;
        top: calc(9px + env(safe-area-inset-top, 0px)) !important;
        right: 10px !important;
        left: auto !important;
        width: 44px !important;
        height: 44px !important;
        z-index: 60 !important;
        display: block !important;
        opacity: 1 !important;
        background: rgba(255,255,255,0.98) !important;
        border-radius: 999px !important;
        box-shadow: 0 1px 8px rgba(0,0,0,0.22) !important;
        cursor: pointer !important;
    }

    body .scfw-modern-modal-body .remodal-close:before,
    body .scfw-modern-modal-body .md-size-chart-close .remodal-close:before {
        color: #111827 !important;
        font-size: 36px !important;
        line-height: 44px !important;
        font-weight: 800 !important;
        opacity: 1 !important;
    }

    body .scfw-modern-size-chart,
    body .scfw-modern-size-chart .scfw-modern-container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body .scfw-modern-size-chart .scfw-modern-container {
        padding: 18px 16px 32px !important;
        overflow: visible !important;
        height: auto !important;
    }
}


/* ===== Size Guide for WooCommerce v1.0.15 Northaro header compatibility =====
 * Northaro Site Template Fix creates .nth-site-header with position:sticky and z-index:9999.
 * While the size guide is open on mobile, explicitly move/hide that header layer and force
 * the Remodal layer above the whole page. This keeps the fullscreen size guide unobstructed.
 */
@media (max-width: 640px) {
    html.remodal-is-locked body .nth-site-header,
    html.remodal-is-locked body .nth-mobile-backdrop,
    html.remodal-is-locked body .nth-mobile-drawer,
    body.remodal-is-locked .nth-site-header,
    body.scfw-mobile-size-guide-open .nth-site-header,
    body.scfw-mobile-size-guide-open .nth-mobile-backdrop,
    body.scfw-mobile-size-guide-open .nth-mobile-drawer {
        z-index: 0 !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    body.scfw-mobile-size-guide-open .remodal-overlay,
    body.scfw-mobile-size-guide-open .remodal-wrapper,
    html.remodal-is-locked body .remodal-overlay,
    html.remodal-is-locked body .remodal-wrapper {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 2147483646 !important;
        overflow: hidden !important;
    }

    @supports not (height: 100dvh) {
        body.scfw-mobile-size-guide-open .remodal-overlay,
        body.scfw-mobile-size-guide-open .remodal-wrapper,
        html.remodal-is-locked body .remodal-overlay,
        html.remodal-is-locked body .remodal-wrapper {
            height: 100vh !important;
            min-height: 100vh !important;
            max-height: 100vh !important;
        }
    }

    body.scfw-mobile-size-guide-open .remodal-wrapper:after,
    html.remodal-is-locked body .remodal-wrapper:after {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
    }

    body.scfw-mobile-size-guide-open .remodal-wrapper .remodal.scfw-modern-modal,
    body.scfw-mobile-size-guide-open .remodal-wrapper .md-size-chart-modal-body.scfw-modern-modal-body,
    body.scfw-mobile-size-guide-open .remodal-wrapper .scfw-modern-modal-body,
    html.remodal-is-locked body .remodal-wrapper .remodal.scfw-modern-modal,
    html.remodal-is-locked body .remodal-wrapper .md-size-chart-modal-body.scfw-modern-modal-body,
    html.remodal-is-locked body .remodal-wrapper .scfw-modern-modal-body {
        position: fixed !important;
        inset: 0 !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        transform: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        z-index: 2147483647 !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }

    @supports not (height: 100dvh) {
        body.scfw-mobile-size-guide-open .remodal-wrapper .remodal.scfw-modern-modal,
        body.scfw-mobile-size-guide-open .remodal-wrapper .md-size-chart-modal-body.scfw-modern-modal-body,
        body.scfw-mobile-size-guide-open .remodal-wrapper .scfw-modern-modal-body,
        html.remodal-is-locked body .remodal-wrapper .remodal.scfw-modern-modal,
        html.remodal-is-locked body .remodal-wrapper .md-size-chart-modal-body.scfw-modern-modal-body,
        html.remodal-is-locked body .remodal-wrapper .scfw-modern-modal-body {
            height: 100vh !important;
            min-height: 100vh !important;
            max-height: 100vh !important;
        }
    }

    body.scfw-mobile-size-guide-open .scfw-modern-modal-body .md-size-chart-close,
    html.remodal-is-locked body .scfw-modern-modal-body .md-size-chart-close {
        position: sticky !important;
        top: 0 !important;
        z-index: 50 !important;
        min-height: calc(58px + env(safe-area-inset-top, 0px)) !important;
        padding: calc(12px + env(safe-area-inset-top, 0px)) 58px 10px 14px !important;
        background: #fff !important;
        box-shadow: 0 1px 0 rgba(0,0,0,0.08) !important;
        box-sizing: border-box !important;
    }

    body.scfw-mobile-size-guide-open .scfw-modern-modal-body .remodal-close,
    body.scfw-mobile-size-guide-open .scfw-modern-modal-body .md-size-chart-close .remodal-close,
    html.remodal-is-locked body .scfw-modern-modal-body .remodal-close,
    html.remodal-is-locked body .scfw-modern-modal-body .md-size-chart-close .remodal-close {
        position: absolute !important;
        top: calc(9px + env(safe-area-inset-top, 0px)) !important;
        right: 10px !important;
        left: auto !important;
        width: 44px !important;
        height: 44px !important;
        z-index: 60 !important;
        display: block !important;
        opacity: 1 !important;
        background: rgba(255,255,255,0.98) !important;
        border-radius: 999px !important;
        box-shadow: 0 1px 8px rgba(0,0,0,0.22) !important;
        cursor: pointer !important;
    }
}


/* ===== Size Guide for WooCommerce v1.0.16 Northaro header compatibility =====
 * This fix is contained entirely inside the Size Guide plugin.
 * It does NOT modify Northaro Site Template Fix.
 *
 * When the size guide modal is open on mobile, temporarily hide/lower the
 * Northaro sticky header that otherwise sits above the modal because it uses
 * position: sticky and z-index: 9999.
 */
@media (max-width: 640px) {
    body.scfw-mobile-size-guide-open .nth-site-header,
    body.scfw-mobile-size-guide-open header.nth-site-header,
    body.scfw-mobile-size-guide-open .nth-mobile-header,
    body.scfw-mobile-size-guide-open .site-header,
    body.scfw-mobile-size-guide-open #masthead {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        z-index: 0 !important;
    }

    body.scfw-mobile-size-guide-open .remodal-overlay,
    body.scfw-mobile-size-guide-open .remodal-wrapper {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        z-index: 2147483600 !important;
    }

    @supports not (height: 100dvh) {
        body.scfw-mobile-size-guide-open .remodal-overlay,
        body.scfw-mobile-size-guide-open .remodal-wrapper {
            height: 100vh !important;
        }
    }

    body.scfw-mobile-size-guide-open .remodal-wrapper .remodal.scfw-modern-modal,
    body.scfw-mobile-size-guide-open .remodal-wrapper .md-size-chart-modal-body.scfw-modern-modal-body,
    body.scfw-mobile-size-guide-open .remodal-wrapper .scfw-modern-modal-body {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        z-index: 2147483647 !important;
        background: #fff !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    @supports not (height: 100dvh) {
        body.scfw-mobile-size-guide-open .remodal-wrapper .remodal.scfw-modern-modal,
        body.scfw-mobile-size-guide-open .remodal-wrapper .md-size-chart-modal-body.scfw-modern-modal-body,
        body.scfw-mobile-size-guide-open .remodal-wrapper .scfw-modern-modal-body {
            height: 100vh !important;
            min-height: 100vh !important;
            max-height: 100vh !important;
        }
    }

    body.scfw-mobile-size-guide-open .scfw-modern-modal-body .md-size-chart-close {
        position: sticky !important;
        top: 0 !important;
        z-index: 80 !important;
        min-height: calc(58px + env(safe-area-inset-top, 0px)) !important;
        padding: calc(12px + env(safe-area-inset-top, 0px)) 58px 10px 14px !important;
        background: #fff !important;
        box-shadow: 0 1px 0 rgba(0,0,0,0.08) !important;
    }

    body.scfw-mobile-size-guide-open .scfw-modern-modal-body .remodal-close,
    body.scfw-mobile-size-guide-open .scfw-modern-modal-body .md-size-chart-close .remodal-close {
        position: absolute !important;
        top: calc(9px + env(safe-area-inset-top, 0px)) !important;
        right: 10px !important;
        left: auto !important;
        width: 44px !important;
        height: 44px !important;
        z-index: 90 !important;
        display: block !important;
        opacity: 1 !important;
        background: rgba(255,255,255,0.98) !important;
        border-radius: 999px !important;
        box-shadow: 0 1px 8px rgba(0,0,0,0.22) !important;
    }

    body.scfw-mobile-size-guide-open .scfw-modern-modal-body .remodal-close:before,
    body.scfw-mobile-size-guide-open .scfw-modern-modal-body .md-size-chart-close .remodal-close:before {
        color: #111827 !important;
        font-size: 36px !important;
        line-height: 44px !important;
        font-weight: 800 !important;
        opacity: 1 !important;
    }
}


/* ===== Size Guide for WooCommerce v1.0.18 transparent size-chart icon =====
 * Remove the visible white square behind the size chart icon on grey/light backgrounds.
 * This is scoped to the size-chart trigger area only.
 */
.size-chart-button img,
a.size-chart-button img,
.size-chart-link img,
.md-size-chart-link img,
.scfw_size-chart-button img,
.scfw-size-chart-button img,
.scfw-size-chart-link img,
.scfw_size-chart-link img,
.sfb-size-chart-link img,
[class*="size-chart"] img[src*="chart-icon"],
[class*="size-chart"] img[src*="size-chart-icon"],
[class*="size-chart"] img[src*="ruler"] {
    background: transparent !important;
    mix-blend-mode: multiply;
}

/* Remove icon container backgrounds/padding that create a white block. */
.size-chart-button,
a.size-chart-button,
.size-chart-link,
.md-size-chart-link,
.scfw_size-chart-button,
.scfw-size-chart-button,
.scfw-size-chart-link,
.scfw_size-chart-link,
.sfb-size-chart-link {
    background: transparent !important;
}

/* More specific fallback for the common product-page trigger. */
.product .size-chart-button img,
.single-product .size-chart-button img,
.single-product [class*="size-chart"] img {
    background-color: transparent !important;
    box-shadow: none !important;
}


/* ===== Astra + Woo Variation Swatches exact Size-row placement v1.0.22 =====
 *
 * Actual live markup:
 * <th class="label">
 *   <label for="size">Size</label>
 *   <span class="woo-selected-variation-item-name">34</span>
 *   <div class="button-wrapper ...">Size Guide</div>
 * </th>
 * <td class="value woo-variation-items-wrapper">...</td>
 */

.single-product form.variations_form table.variations tr.scfw-astra-v1022-size-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
}

.single-product form.variations_form table.variations tr.scfw-astra-v1022-size-row > th.scfw-astra-v1022-size-label {
    grid-column: 1 !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

.single-product form.variations_form table.variations tr.scfw-astra-v1022-size-row > th.scfw-astra-v1022-size-label > label {
    flex: 0 0 auto !important;
    margin: 0 4px 0 0 !important;
    padding: 0 !important;
}

.single-product form.variations_form table.variations tr.scfw-astra-v1022-size-row > th.scfw-astra-v1022-size-label > .woo-selected-variation-item-name {
    flex: 0 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.single-product form.variations_form table.variations tr.scfw-astra-v1022-size-row > th.scfw-astra-v1022-size-label > .button-wrapper.scfw-astra-v1022-guide-host {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    clear: none !important;
    float: none !important;
    background: transparent !important;
    line-height: 1.2 !important;
}

.single-product form.variations_form table.variations tr.scfw-astra-v1022-size-row > th.scfw-astra-v1022-size-label .md-size-chart-btn {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #222 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

.single-product form.variations_form table.variations tr.scfw-astra-v1022-size-row > th.scfw-astra-v1022-size-label .md-size-chart-btn .dashicons {
    display: none !important;
}

.single-product form.variations_form table.variations tr.scfw-astra-v1022-size-row > td.value {
    grid-column: 1 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

/*
 * The button has moved, while the popup stays in this original container.
 * Remove only the empty trigger footprint below Add to Cart.
 */
.single-product .summary.entry-summary > .scfw-size-chart-main.scfw-astra-v1022-main-trigger-moved,
.single-product .scfw-size-chart-main.scfw-astra-v1022-main-trigger-moved {
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    clear: none !important;
    line-height: 0 !important;
    overflow: visible !important;
}

@media (max-width: 640px) {
    .single-product form.variations_form table.variations tr.scfw-astra-v1022-size-row > th.scfw-astra-v1022-size-label {
        margin-bottom: 10px !important;
    }

    .single-product form.variations_form table.variations tr.scfw-astra-v1022-size-row > th.scfw-astra-v1022-size-label .md-size-chart-btn {
        font-size: 16px !important;
    }
}


/* v1.0.30: fail-safe for the optional product fit indicator. */
.single-product .scfw-product-fit-guide { display: none !important; }