html {
    scroll-behavior: smooth;
}

.option-btns {
    --options:1;
    display:grid;
    grid-template-columns:repeat(var(--options),1fr);
}

    .op-btn {
        border:1px solid #999;
        border-right:none;
        padding:1rem;
        text-decoration: none;
        background-color:#fff;
        container-type: inline-size;
        position: relative;
        z-index:1;
    }

        .op-btn:last-child{
            border-right:1px solid #999;
        }

    .op-btn img {
        margin-bottom:0.5rem;
        max-height:125px;
        opacity:0.4;
        transition:opacity 0.25s;
        width:100%;
        aspect-ratio:1/1;
        object-fit:contain;
    }

    .op-btn h2 {
        margin:0;
        font-size:0.8rem;
    }

    .op-btn.active img,
    .op-btn:hover img {
        background-color:#fff;
        opacity:1;
    }

    .op-btn.active {
        border-bottom:1px solid #fff;
    }

    .to-add {
        display:inline-block;
        background-color:#333;
        color:#fff;
        text-decoration: none;
        padding:0.5rem 2rem;
        font-size:0.9rem;
        text-transform: uppercase;
        margin-top:1rem;
    }

.options {
    margin-top:-1px;
    position: relative;
    z-index: 0;
}

.option {
    border:1px solid #999;
    padding:2rem;
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-gap:2rem;
    display:none;
}

    .option.visible{
        display:Grid;
    }

    .option > h2 {
        display:none;
    }

.main .price {
    font-size:2rem;
    font-weight:bold;
    margin-bottom:0;
    letter-spacing: -0.025em;
}

.main p.tip {
    float:left;
    clear:left;
    margin-block:1rem;
}

.main .ship {
    font-weight:Bold;
    letter-spacing: -0.025em;
}

.var {
    border:none;
    padding:1rem 0 0 0;
}

    .add-variation {
        float:left;
    }

.main .thumbnails {
    float:left;
    clear:left;
    width:100%;
}

.pop-gal {
    position: relative;
}

    .mag {
        position: absolute;
        left:50%;
        top:50%;
        width:5rem;
        transform:translate(-50%,-50%);
        filter:drop-shadow(0 0 20px #0005);
        pointer-events: none;
        user-select: none;
    }

.pop-gal a {
    display:none;
}

    .pop-gal a:first-of-type {
        display:block;
    }

.image {
    container-type:inline-size;
}

.pubimg {
    max-height:100svh;
    object-fit: contain;
}

video {
    width:100%;
}

@media screen and (width < 700px){
    .op-btn {
        padding:0.5rem;
    }

        .op-btn h2 {
            display:none;
        }

        .op-btn img {
            margin:0;
        }

    .option {
        padding:0.5rem;
        grid-gap:1rem;
    }

        .option > h2 {
            display:Block;
        }
}

@media screen and (width < 500px){
    .option {
        grid-template-columns: 1fr;
        padding:1.5rem;
    }

    .main .option p:not(.price),
    .main .option li {
        font-size:0.8rem;
        line-height:1.4;
    }
}

@media screen and (width < 500px){
    .op-btn {
        padding:0.25rem;
    }
}