:root{
    --scars-guide-width: 720px;
    --scars-guide-border:#d7d7d7;
    --scars-guide-text:#0a0a0a;
    --scars-guide-overlay:rgba(0,0,0,.40);
}

/* Botón/enlace junto al atributo talla */
.scars-size-guide-link{
    appearance:none;
    border:0;
    padding:0;
    margin:0 0 0 10px;
    background:transparent;
    color:#111;
    font:inherit;
    font-size:13px;
    line-height:1.2;
    text-decoration:underline;
    text-underline-offset:3px;
    cursor:pointer;
    white-space:nowrap;
}

.scars-size-guide-link:hover{
    opacity:.7;
}

.scars-size-guide-link-wrap{
    display:inline-flex;
    align-items:center;
    margin-left:10px;
    vertical-align:middle;
}

.scars-size-guide-link-wrap::before{
    content:"";
    width:14px;
    height:10px;
    margin-right:5px;
    opacity:.55;
    background:
        linear-gradient(#111,#111) 0 0/100% 1px no-repeat,
        linear-gradient(#111,#111) 0 50%/100% 1px no-repeat,
        linear-gradient(#111,#111) 0 100%/100% 1px no-repeat;
}

/* Overlay */
.scars-guide-overlay{
    position:fixed;
    inset:0;
    z-index:999990;
    background:var(--scars-guide-overlay);
    opacity:0;
    visibility:hidden;
    transition:opacity .28s ease,visibility .28s ease;
    backdrop-filter:blur(1.5px);
    -webkit-backdrop-filter:blur(1.5px);
}

.scars-guide-overlay.is-open{
    opacity:1;
    visibility:visible;
}

body.scars-guide-open{
    overflow:hidden!important;
}

/* Drawer */
.scars-guide-drawer{
    position:fixed;
    top:0;
    right:0;
    z-index:999999;
    width:min(var(--scars-guide-width),94vw);
    height:100dvh;
    background:#fff;
    color:var(--scars-guide-text);
    transform:translateX(100%);
    transition:transform .34s cubic-bezier(.22,1,.36,1);
    display:flex;
    flex-direction:column;
    box-shadow:-10px 0 35px rgba(0,0,0,.08);
}

.scars-guide-drawer.is-open{
    transform:translateX(0);
}

.scars-guide-header{
    position:relative;
    padding:38px 68px 22px;
    border-bottom:1px solid var(--scars-guide-border);
    flex:0 0 auto;
}

.scars-guide-title{
    margin:0;
    font-size:24px;
    line-height:1.2;
    font-weight:400;
}

.scars-guide-close{
    position:absolute;
    top:24px;
    right:24px;
    width:44px;
    height:44px;
    padding:0;
    border:0;
    border-radius:50%;
    background:#000;
    color:#fff;
    cursor:pointer;
}

.scars-guide-close::before,
.scars-guide-close::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:17px;
    height:1px;
    background:currentColor;
    transform-origin:center;
}

.scars-guide-close::before{
    transform:translate(-50%,-50%) rotate(45deg);
}

.scars-guide-close::after{
    transform:translate(-50%,-50%) rotate(-45deg);
}

.scars-guide-body{
    flex:1 1 auto;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:34px 68px 60px;
}

.scars-guide-image{
    display:block;
    width:100%;
    height:auto;
    max-width:100%;
    margin:0 auto;
}

.scars-guide-description{
    font-size:15px;
    line-height:1.7;
}

.scars-guide-description table{
    width:100%;
    border-collapse:collapse;
    margin:18px 0;
}

.scars-guide-description th,
.scars-guide-description td{
    border:1px solid #d8d8d8;
    padding:11px 12px;
    text-align:left;
}

.scars-guide-description th{
    background:#f3f3f3;
    font-weight:600;
}

.scars-guide-empty{
    padding:30px 0;
    color:#777;
    font-size:14px;
}

/* Colocación compatible con el drawer de talla anterior */
.scars-size-open .scars-size-guide-link{
    margin-left:0;
}

/* Responsive */
@media(max-width:767px){
    :root{
        --scars-guide-width:100vw;
    }

    .scars-guide-drawer{
        width:100vw;
    }

    .scars-guide-header{
        padding:70px 24px 20px;
    }

    .scars-guide-body{
        padding:26px 24px 42px;
    }

    .scars-guide-close{
        top:18px;
        right:18px;
    }

    .scars-guide-title{
        font-size:21px;
    }
}


/* =========================================================
   v1.1 - BOTÓN SIEMPRE DEBAJO DEL PRECIO
   ========================================================= */

.scars-size-guide-below-price{
    width:100%;
    margin:14px 0 20px;
    display:block;
}

.scars-size-guide-below-price .scars-size-guide-link{
    margin:0;
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:14px;
    color:#111;
    text-decoration:underline;
    text-underline-offset:4px;
    cursor:pointer;
}

.scars-size-guide-below-price .scars-size-guide-link::before{
    content:"";
    width:15px;
    height:11px;
    flex:0 0 auto;
    opacity:.6;
    background:
        linear-gradient(#111,#111) 0 0/100% 1px no-repeat,
        linear-gradient(#111,#111) 0 50%/100% 1px no-repeat,
        linear-gradient(#111,#111) 0 100%/100% 1px no-repeat;
}

/* Si existe cualquier versión anterior junto a la talla, la ocultamos. */
.scars-size-guide-link-wrap{
    display:none !important;
}