.cores{
    position: relative;
    padding-top: 90px;
}


.cores label img{
    display: block;
    max-width: 100%;

    border: 2px solid #CCC;
}


.cores label::after{
    content: '';
    display: block;
    border-radius: 50%;
    width: 50px;
    height: 50px;

    box-sizing: border-box;

    position: absolute;
    top: 30px;

    border: 6px solid rgba(0, 0, 0, 0);
    transition: 1s;
}


.cores label:hover::after{
    border: 6px solid rgba(0, 0, 0, 0.1);
}


.cores input:checked + label::after{
    border: 6px solid rgba(0, 0, 0, 0.3);
}


.cores input[type=radio]{
    display: none;
}


.cores input:not(:checked) + label img{
    display: none;
}


label[for=verde]::after{
    background-color: #33CC66;

    left: 0;
}


label[for=rosa]::after{
    background-color: #FF6666;

    left: 60px;
}


label[for=azul]::after{
    background-color: #6666FF;

    left: 120px;
}


.produto {
    color: #333;
    line-height: 1.3;
    margin-top: 2em;

    & h1 {
        font-size: 1.8em;
        font-weight: bold;
    }

    & p{
        font-size: 1.2em;
        font-style: italic;
        margin-bottom: 1em;
    }

    & legend {
        display: block;
        font: bold 0.9em/2.5 Arial;
        text-transform: uppercase;
    }
}


.comprar{
    background: #91BD3C;
    border: none;
    color: #333;
    font-size: 1.4em;
    text-transform: uppercase;
    box-shadow: 0 1px 3px #777;
    display: block;
    padding: 0.5em 1em;
    margin: 1em 0;
}


fieldset {
    display: inline-block;
    vertical-align: top;
    margin: 1em 0;
    min-width: 240px;
    width: 45%;
}


table{
    border-spacing: 0.2em;
    border-collapse: separate;
}


thead{
    background-color: #999;

    & th{
        font-weight: bold;
        padding: 0.3em 1em;
        text-align: center;
    }
}


td{
    padding: 0.3em;
}


tr:nth-child(2n){
    background-color: #CCC;
}


td:first-child{
    font-style: italic;
}


.detalhes {
    padding: 2em 0;

    & h2{
        font-size: 1.5em;
        line-height: 2;
    }

    & p{
        margin: 1em 0;
        font-size: 1em;
        line-height: 1.5;
        max-width: 36em;
    }
}

.produto-back{
    background-color: #F2F2F2;
    margin-top: 1em;
    border-top: 2px solid #CCC;
}

.tamanhos output{
    display: inline-block;
    height: 44px;
    width: 44px;
    line-height: 44px;
    text-align: center;
    border: 3px solid #666;
    border-radius: 50%;
    color: #555;
}