@charset "utf-8";
/* =====================================================
   RESET
   ===================================================== */

* {
    box-sizing: border-box;
}


/* =====================================================
   PRODUCT SET
   ===================================================== */

.jewelry-product {
    width: 630px;
    max-width: 100%;
    margin: 0 auto;
}


/* =====================================================
   MAIN GOLD FRAME
   ===================================================== */

.jewelry-frame {
    width: 100%;
    padding: 5px;

    background:
        linear-gradient(
            135deg,
            #80632f 0%,
            #c9a45b 20%,
            #f0d99e 35%,
            #b58b42 50%,
            #e7ca80 70%,
            #80632f 100%
        );

    clip-path: polygon(
        12px 0,
        calc(100% - 12px) 0,
        100% 12px,
        100% calc(100% - 12px),
        calc(100% - 12px) 100%,
        12px 100%,
        0 calc(100% - 12px),
        0 12px
    );

    filter:
        drop-shadow(
            0 10px 25px
            rgba(0,0,0,.55)
        );
}


/* =====================================================
   PRODUCT IMAGE
   ===================================================== */

.product-image {
    width: 100%;
    background: #050505;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
}


.product-image img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .35s ease;
}


.product-image:hover img {
    transform: scale(1.02);
}


/* =====================================================
   YOUTUBE + 3D
   ===================================================== */

.media-row {
    position: relative;

    display: grid;

    grid-template-columns: 1fr 1fr;

    width: 100%;

    margin-top: 5px;

    background: #050505;

    border-radius: 10px;

    overflow: hidden;
}


/* =====================================================
   MEDIA BOX
   ===================================================== */

.media-box {
    width: 100%;
    height: 310px;
    background: #000;
    overflow: hidden;
}


/* =====================================================
   YOUTUBE
   ===================================================== */

.youtube-box {
    width: 100%;
    height: 310px;
    background: #000;
    overflow: hidden;
}


.youtube-box .youtube-player {
    width: 100%;
    height: 100%;
}


.youtube-box iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}


/* =====================================================
   CENTER DIVIDER
   ===================================================== */

.media-row::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: 50%;

    width: 1px;

    transform: translateX(-50%);

    background:
        rgba(201,168,93,.85);

    z-index: 10;

    pointer-events: none;
}


/* =====================================================
   SKETCHFAB
   ===================================================== */

.sketchfab-box iframe {
    display: block;

    width: 100%;
    height: 310px;

    border: 0;
}


/* =====================================================
   PRICE FRAME
   ===================================================== */

.price-frame {
    width: 100%;

    margin-top: 8px;

    padding: 5px;

    background:
        linear-gradient(
            135deg,
            #80632f 0%,
            #c9a45b 20%,
            #f0d99e 35%,
            #b58b42 50%,
            #e7ca80 70%,
            #80632f 100%
        );

    clip-path: polygon(
        10px 0,
        calc(100% - 10px) 0,
        100% 10px,
        100% calc(100% - 10px),
        calc(100% - 10px) 100%,
        10px 100%,
        0 calc(100% - 10px),
        0 10px
    );
}


/* =====================================================
   PRICE TABLE
   ===================================================== */

.price-table {
    width: 100%;

    border-collapse: collapse;

    background: #050505;

    color: #ddd;

    border-radius: 10px;

    overflow: hidden;
}


/* =====================================================
   TABLE CELLS
   ===================================================== */

.price-table td {
    width: 50%;

    padding: 10px;

    text-align: center;

    border-bottom:
        1px solid
        rgba(201,168,93,.45);
}


/* =====================================================
   VERTICAL CENTER LINE
   ===================================================== */

.price-table td:first-child {
    color: #d8b66b;

    border-right:
        1px solid
        rgba(201,168,93,.75);
}


/* =====================================================
   PRICE
   ===================================================== */

.price-table td:last-child {
    color: #ddd;
}


/* =====================================================
   LAST ROW
   ===================================================== */

.price-table tr:last-child td {
    border-bottom: none;
}


/* =====================================================
   IMAGE MODAL
   ===================================================== */

.product-modal {
    display: none;

    position: fixed;

    z-index: 99999;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    background:
        rgba(0,0,0,.93);

    justify-content: center;
    align-items: center;

    flex-direction: column;

    padding: 25px;
}


/* =====================================================
   MODAL IMAGE
   ===================================================== */

.product-modal-image {
    display: block;

    max-width: 95%;
    max-height: 85vh;

    object-fit: contain;

    border: 1px solid #c9a45b;

    box-shadow:
        0 0 30px
        rgba(0,0,0,.8);
}


/* =====================================================
   CLOSE
   ===================================================== */

.product-close {
    position: absolute;

    top: 10px;
    right: 25px;

    color: #d8b66b;

    font-size: 40px;

    cursor: pointer;
}


/* =====================================================
   CAPTION
   ===================================================== */

.product-caption {
    margin-top: 12px;

    color: #d8b66b;

    font-size: 14px;

    letter-spacing: 2px;

    text-align: center;
}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 650px) {

    .jewelry-product {
        width: 100%;
    }


    .media-box,
    .youtube-box {
        height: 250px;
    }


    .sketchfab-box iframe {
        height: 250px;
    }

}/* CSS Document */