@charset "UTF-8";

/* =========================
   TABLE WRAPPER
========================= */
.table-wrapper {
    width: 100%;
    padding-top: 35.78px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* =========================
   TABLE
========================= */
.diamond-table {
   /* width: 100%;*/
    /*min-width: 700px;*/
    border-collapse: collapse;
    table-layout: fixed;
    border: 1px solid rgba(204, 204, 204, 0.5019607843);
    min-width: unset;
    width: 100%;
    table-layout: auto;
}

    /* =========================
   HEADER (TH)
========================= */
    .diamond-table th {
        background: #003541;
        color: var(--bg-primary);
        padding: 17px 0px;
        font-size: var(--fz-16);
        font-weight: var(--fw-700);
        line-height: 120%;
        letter-spacing: 4%;
        text-align: center;
        cursor: pointer;
    }

/* FLEX WRAPPER INSIDE TH */
.th-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* =========================
   ARROWS (STACKED)
========================= */
.arrow {
    width: 12px;
    height: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    /* UP */
    .arrow::before {
        content: "";
        display: block;
        width: 100%;
        height: 10px;
        background: url("/images/diamond-listing/up.svg") no-repeat center;
        background-size: contain;
    }

    /* DOWN */
    .arrow::after {
        content: "";
        display: block;
        width: 100%;
        height: 10px;
        background: url("/images/diamond-listing/down.svg") no-repeat center;
        background-size: contain;
    }

/* .arrow::before,
.arrow::after {
  content: "";
  display: block;
  width: 100%;
  height: 10px;
} */
/* =========================
   TABLE BODY
========================= */
.diamond-table td {
    padding: 0;
    height: 52px;
    /* line-height: 52px; */
    vertical-align: middle;
}

    /* ROW COLORS */
    /* .diamond-table tbody tr.main-row:nth-of-type(even) {
  background: #f3f3f3 !important;
}

.diamond-table tbody tr.main-row:nth-of-type(odd) {
  background: #ffffff !important;
} */
    /* First column (Shape) → LEFT */
    .diamond-table td:first-child {
        text-align: left;
    }

    /* All other columns → CENTER */
    .diamond-table td:not(:first-child) {
        text-align: center;
    }

.shape-content {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .shape-content p {
        color: var(--text-color);
        font-weight: var(--fw-600);
        font-size: var(--fz-16);
        line-height: 120%;
        letter-spacing: 4%;
    }

.price-content span:nth-child(1) {
    margin-right: 6px;
    color: #999999;
    text-decoration: line-through;
    font-weight: var(--fw-400);
    font-size: var(--fz-16);
    line-height: 120%;
    letter-spacing: 4%;
}

.price-content span:nth-child(2) {
    color: var(--primary-color);
    font-weight: var(--fw-600);
    font-size: var(--fz-16);
    line-height: 120%;
    letter-spacing: 4%;
}

.carat-content {
    color: var(--text-color);
    font-weight: var(--fw-400);
    font-size: var(--fz-16);
    line-height: 120%;
    letter-spacing: 4%;
}

.color-content {
    color: var(--text-color);
    font-weight: var(--fw-400);
    font-size: var(--fz-16);
    line-height: 120%;
    letter-spacing: 4%;
}

.clarity-content {
    color: var(--text-color);
    font-weight: var(--fw-400);
    font-size: var(--fz-16);
    line-height: 120%;
    letter-spacing: 4%;
}

.cut-content {
    color: var(--text-color);
    font-weight: var(--fw-400);
    font-size: var(--fz-16);
    line-height: 120%;
    letter-spacing: 4%;
}

@media (min-width: 1025px) {
    .arrow {
        width: 14px;
        height: 13px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

        /* UP */
        .arrow::before {
            content: "";
            display: block;
            width: 100%;
            height: 13px;
            background: url("/images/diamond-listing/up.svg") no-repeat center;
            background-size: contain;
        }

        /* DOWN */
        .arrow::after {
            content: "";
            display: block;
            width: 100%;
            height: 13px;
            background: url("/images/diamond-listing/down.svg") no-repeat center;
            background-size: contain;
        }

    .expand-card-mobile {
        display: none;
    }

    .diamond-table tbody tr.main-row:hover td {
        background: #044a59;
        color: var(--bg-primary);
        cursor: pointer;
    }

    .diamond-table tbody tr.main-row.active td {
        background: #044a59;
        color: var(--bg-primary);
        cursor: pointer;
    }

        .diamond-table tbody tr.main-row:hover td p,
        .diamond-table tbody tr.main-row.active td p {
            color: var(--bg-primary);
        }

        .diamond-table tbody tr.main-row:hover td span:nth-child(2),
        .diamond-table tbody tr.main-row.active td span:nth-child(2) {
            color: var(--bg-primary);
        }
}

/* expand section */

.main-row.row-even {
    background: #ffffff;
}

.main-row.row-odd {
    background: #f3f4f5;
}

.accordion-row td {
    padding-left: 0 !important;
    height: 0 !important;
}

.accordion-row .accordion-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transform-origin: top;
    transition: max-height 0.45s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.3s ease, transform 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}

.accordion-row.open .accordion-content {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1025px) {

    .design-lab-mobile-main-container .design-lab-listing-container #tableView .accordion-row > td {
        height: auto !important;
        padding: 0 !important;
        overflow: hidden;
        vertical-align: top;
        border-top: 0;
    }
}

/* .diamond-table tbody tr.main-row td {
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
} */

.expanded-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-primary);
    padding: 20px 30px 20px 20px;
    width: 100%;
}

    /* content section */
    .expanded-card .expand-content-section {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .expanded-card .expand-content-section {
        display: flex;
        align-items: center;
        gap: 16px;
    }

        .expanded-card .expand-content-section .image-container {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 90px;
            height: 90px;
            flex-shrink: 0;
            border: 1.71px solid rgba(204, 204, 204, 0.3019607843);
            /* border-radius: 14px; */
            background: #f6f4f1;
        }


        .expanded-card .expand-content-section .product-title-container {
            display: flex;
            align-items: center;
            gap: 5px;
            padding-bottom: 10px;
        }

            .expanded-card .expand-content-section .product-title-container .product-tag.tag-r {
                background-color: #394498;
                color: var(--bg-primary) !important;
                width: 18px;
                height: 18px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: var(--fw-600);
                font-size: var(--fz-12);
                color: var(--text-color);
                line-height: 120%;
                letter-spacing: 4%;
                border-radius: var(--br-2);
            }

            .expanded-card .expand-content-section .product-title-container .product-tag.tag-f {
                background-color: #f5d860;
                color: var(--text-color);
                width: 18px;
                height: 18px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: var(--fw-600);
                font-size: var(--fz-12);
                color: var(--text-color);
                line-height: 120%;
                letter-spacing: 4%;
                border-radius: var(--br-2);
            }

        .expanded-card .expand-content-section .expand-title {
            color: var(--text-mega-title);
            font-weight: var(--fw-600);
            font-size: var(--fz-16);
            line-height: 130%;
            letter-spacing: 4%;
            padding-bottom: 8px;
        }

        .expanded-card .expand-content-section .expand-product-delivery-detail {
            display: flex;
            align-items: center;
            gap: 6px;
            padding-bottom: 10px;
        }

            .expanded-card .expand-content-section .expand-product-delivery-detail .expand-product-date-container {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 22px;
                height: 22px;
                border: 1px solid rgba(204, 204, 204, 0.3019607843);
                border-radius: var(--br-2);
                background: var(--bg-primary);
            }

            .expanded-card .expand-content-section .expand-product-delivery-detail .expand-product-date-content {
                color: #555555;
                font-weight: var(--fw-400);
                font-size: var(--fz-12);
                line-height: 120%;
                letter-spacing: 4%;
            }

                .expanded-card .expand-content-section .expand-product-delivery-detail .expand-product-date-content span {
                    color: var(--text-mega-title);
                    font-weight: var(--fw-600);
                    font-size: var(--fz-12);
                    line-height: 120%;
                    letter-spacing: 4%;
                }

        .expanded-card .expand-content-section .expand-data-container {
            padding-top: 10px;
            border-top: 1px solid rgba(204, 204, 204, 0.3019607843);
            display: flex;
            align-items: center;
            gap: 20px;
            width: 100%;
            max-width: 100%;
        }

            .expanded-card .expand-content-section .expand-data-container .expand-data-divider {
                width: 1px;
                height: 28px;
                background: rgba(204, 204, 204, 0.3019607843);
            }

/* Row 1: "Measurements" + "L/W Ratio" */
.expand-data-items:nth-child(1) .data-title {
    min-width: 92px;
}

/* Row 2: "Table" + "Depth" */
.expand-data-items:nth-child(3) .data-title {
    min-width: 42px;
}

/* Row 3: "Cut" + "Polish" */
.expand-data-items:nth-child(5) .data-title {
    min-width: 42px;
}

/* Row 4: "Symmetry" + "Certificate" */
.expand-data-items:nth-child(7) .data-title {
    min-width: 65px;
}

.expanded-card .expand-content-section .expand-data-container .expand-data-items {
    display: flex;
    align-items: start;
    flex-direction: column;
    gap: 2px;
}

.expanded-card .expand-content-section .expand-data-container .data-container {
    display: flex;
    align-items: center;
    gap: 4px;
}

    .expanded-card .expand-content-section .expand-data-container .data-container .data-title {
        color: #555555;
        font-weight: var(--fw-400);
        font-size: var(--fz-12);
        line-height: 120%;
        letter-spacing: 4%;
    }

    .expanded-card .expand-content-section .expand-data-container .data-container .data-value-container {
        display: flex;
        align-items: center;
        gap: 4px;
    }

        .expanded-card .expand-content-section .expand-data-container .data-container .data-value-container .data-dot {
            width: 2px;
            height: 2px;
            background: rgba(133, 133, 133, 0.8);
        }

        .expanded-card .expand-content-section .expand-data-container .data-container .data-value-container .data-value {
            color: var(--text-mega-title);
            font-weight: var(--fw-400);
            font-size: var(--fz-12);
            line-height: 120%;
            letter-spacing: 4%;
        }

/* button section */
.expanded-card .expand-button-section {
    /* margin: 0 auto; */
    max-width: 380px;
    width: 100%;
}

/* Desktop/tablet landscape layout (1025px and above) */
@media (min-width: 1025px) {
    .expanded-card {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 16px;
    }

        .expanded-card .expand-content-section {
            flex: 0 1 71%;
            min-width: 0;
            max-width: 71%;
            align-items: flex-start;
        }

            .expanded-card .expand-content-section .product-title-container {
                align-items: flex-start;
                gap: 8px;
                padding-bottom: 8px;
            }

                .expanded-card .expand-content-section .product-title-container .expand-title {
                    flex: 1;
                    min-width: 0;
                    padding-bottom: 0;
                }

            .expanded-card .expand-content-section > div:last-child {
                flex: 1 1 auto;
                min-width: 0;
            }

            .expanded-card .expand-content-section .expand-data-container {
                display: inline-flex;
                width: fit-content;
                max-width: 90%;
                flex-wrap: wrap;
                row-gap: 10px;
                column-gap: 16px;
                align-items: flex-start;
            }

                .expanded-card .expand-content-section .expand-data-container .expand-data-items {
                    flex: 1 1 calc(50% - 8px);
                    min-width: 0;
                }

                .expanded-card .expand-content-section .expand-data-container .expand-data-divider {
                    display: none;
                }

        .expanded-card .expand-button-section {
            flex: 0 1 29%;
            width: 29%;
            min-width: 280px;
            margin-left: auto;
            align-self: center;
            max-width: 355px;
        }
}

@media screen and (min-width: 1025px) and (max-width: 1430px) {
    .expanded-card .expand-content-section .expand-data-container .data-container .data-title {
        min-width: 100px;
    }

    .expanded-card .expand-button-section {
        align-self: end;
    }

    .expanded-card .expand-content-section .expand-data-container {
        row-gap: 2px;
    }
}

@media (min-width: 1440px) {
    .expanded-card .expand-content-section .expand-data-container .expand-data-items {
        flex: none;
    }

    .expanded-card .expand-content-section .expand-data-container .expand-data-divider {
        display: block;
    }
}


.expanded-card .expand-button-section .cart-button {
    background-color: var(--text-mega-title);
    border-radius: var(--br-4);
    padding: 10px 0px;
    border: 1px solid var(--text-mega-title);
    max-height: 38px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #fefefe;
    font-weight: var(--fw-700);
    font-size: var(--fz-12);
}

    .expanded-card .expand-button-section .cart-button:hover {
        background-color: #044a59;
        box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.0509803922);
    }

.expanded-card .expand-button-section .button-view-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  margin-top: 6px;
}

    .expanded-card .expand-button-section .button-view-container .setting-button {
        background-color: var(--text-mega-title);
        border-radius: 0px;
        font-size: var(--fz-12);
        font-weight: var(--fw-700);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fefefe;
        padding: 13.5px 0px;
        border: none;
        max-height: 36px;
        width: 100%;
        /* box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.0509803922); */
        transition: all 0.5s ease-in-out;
        cursor:pointer;
    }

        .expanded-card .expand-button-section .button-view-container .setting-button:hover {
            background-color: #044a59;
            /* box-shadow: 0px 4px 20px 0px rgba {(0, 0, 0, 0.0509803922); */
        }

    .expanded-card .expand-button-section .button-view-container .detail-button {
        border: 1px solid var(--text-mega-title);
        border-radius: 0px;
        background: transparent;
        width: 100%;
        min-height: 36px;
        font-size: var(--fz-12);
        font-weight: var(--fw-700);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-mega-title);
    }

        .expanded-card .expand-button-section .button-view-container .detail-button:hover {
            background-color: #f3f4f5;
        }

.diamond-table th:nth-child(1) {
    width: 18.75%;
}

.diamond-table td:nth-child(1) {
    padding-left: 8px;
}

.diamond-table th:nth-child(2) {
    width: 21.875%;
}

.diamond-table th:nth-child(3),
.diamond-table th:nth-child(4),
.diamond-table th:nth-child(5),
.diamond-table th:nth-child(6) {
    width: 14.84%;
}

/* product count */
.luvanshNewPage .product-data-count {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 45px;
    padding-bottom: 19px;
}

    .luvanshNewPage .product-data-count .product-data-count-content {
        font-weight: var(--fw-700);
        color: #333333;
        font-size: var(--fz-14);
    }

/* product count button */
.luvanshNewPage .product-data-button {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .luvanshNewPage .product-data-button .product-data-button-content {
        font-weight: var(--fw-700);
        color: var(--text-mega-title);
        font-size: var(--fz-16);
        padding: 15px 20px;
        border-bottom: 1.5px solid var(--text-mega-title);
        cursor: pointer;
    }

        .luvanshNewPage .product-data-button .product-data-button-content:hover {
            background: linear-gradient(180deg, rgba(0, 33, 41, 0) 0%, rgba(0, 115, 143, 0.1) 100%);
            transition: all 0.3s ease-in;
        }

@media screen and (max-width: 1400px) {
    .expanded-card .expand-content-section .expand-data-container .data-container .data-value-container {
        gap: 10px;
    }
}

/* =========================
   MOBILE
========================= */
@media (max-width: 1025px) {

    /* expand card — the phone layout opens a drawer instead. Scoped to it: the
       desktop layout (chosen by User-Agent, not width) still needs the card on
       ≤1025px screens, or clicking a row shows nothing. */
    .design-lab-mobile-main-container .expanded-card {
        display: none;
    }

    .table-wrapper {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

        .table-wrapper::-webkit-scrollbar {
            display: none;
        }

    /*.diamond-table {
        min-width: 650px;
    }*/

    .table-wrapper {
        width: 100%;
        padding-top: 0px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

/*    .diamond-table {
        min-width: 512px;
    }*/

        .diamond-table th:nth-child(1) {
            width: 132px;
        }

        .diamond-table th:nth-child(2) {
            width: 140px;
        }

        .diamond-table th:nth-child(3),
        .diamond-table th:nth-child(4),
        .diamond-table th:nth-child(5),
        .diamond-table th:nth-child(6) {
            width: 60px;
        }

        /* =========================
     HEADER (TH)
  ========================= */
        .diamond-table th {
            background: #003541;
            color: var(--bg-primary);
            padding: 4px 0px;
            font-size: 10px;
            font-weight: var(--fw-700);
            line-height: 120%;
            letter-spacing: 4%;
            text-align: center;
            cursor: pointer;
        }

    .arrow::before,
    .arrow::after {
        height: 40px !important;
        display: block !important;
    }

    .diamond-table td {
        height: 36px;
    }

    /* Match desktop: opened row uses active background on the main data row */
    .diamond-table tbody tr.main-row.active td {
        background: #044a59;
        color: var(--bg-primary);
    }

        .diamond-table tbody tr.main-row.active td p,
        .diamond-table tbody tr.main-row.active .shape-content p {
            color: var(--bg-primary);
        }

    .diamond-table tbody tr.main-row.active .price-content span:nth-child(1),
    .diamond-table tbody tr.main-row.active .price-content span:nth-child(2) {
        color: var(--bg-primary);
    }

    .diamond-table tbody tr.main-row.active .carat-content,
    .diamond-table tbody tr.main-row.active .color-content,
    .diamond-table tbody tr.main-row.active .clarity-content,
    .diamond-table tbody tr.main-row.active .cut-content {
        color: var(--bg-primary);
    }

    /* Collapsed row after "Add to Setting" — match .active (full row, not per-cell boxes) */
    .diamond-table tbody tr.main-row.setting-selected,
    .diamond-table tbody tr.main-row.row-even.setting-selected,
    .diamond-table tbody tr.main-row.row-odd.setting-selected {
        background: #044a59;
        /* outline: 1.5px solid #002129; */
        outline: none;
        outline-offset: -1.5px;
    }

        .diamond-table tbody tr.main-row.setting-selected td {
            background: #003541;
            color: var(--bg-primary);
        }

            .diamond-table tbody tr.main-row.setting-selected td p,
            .diamond-table tbody tr.main-row.setting-selected .shape-content p {
                color: var(--bg-primary);
            }

        .diamond-table tbody tr.main-row.setting-selected .price-content span:nth-child(1),
        .diamond-table tbody tr.main-row.setting-selected .price-content span:nth-child(2) {
            color: var(--bg-primary);
        }

        .diamond-table tbody tr.main-row.setting-selected .carat-content,
        .diamond-table tbody tr.main-row.setting-selected .color-content,
        .diamond-table tbody tr.main-row.setting-selected .clarity-content,
        .diamond-table tbody tr.main-row.setting-selected .cut-content {
            color: var(--bg-primary);
        }

    .shape-content {
        display: flex;
        align-items: center;
        gap: 4px;
    }

        .shape-content img {
            width: 15px;
            height: 15px;
        }

        .shape-content p {
            font-weight: var(--fw-400);
            font-size: 10px;
        }

    .price-content span:nth-child(1) {
        margin-right: 5px;
        font-weight: var(--fw-400);
        font-size: 10px;
    }

    .price-content span:nth-child(2) {
        font-weight: var(--fw-500);
        font-size: 10px;
    }

    .carat-content {
        font-size: 10px;
    }

    .color-content {
        font-size: 10px;
    }

    .clarity-content {
        font-size: 10px;
    }

    .cut-content {
        font-size: 10px;
    }

    /* product count */
    .luvanshNewPage .product-data-count {
        padding-top: 36px;
        padding-bottom: 4px;
    }

        .luvanshNewPage .product-data-count .product-data-count-content {
            font-size: var(--fz-12);
        }

    /* product count button */
    /*.luvanshNewPage .product-data-button {
        padding-bottom: 20px;
    }*/

        .luvanshNewPage .product-data-button .product-data-button-content {
            font-size: var(--fz-14);
            padding: 16px 25px;
        }

    /* expand card mobile */
    .expand-main-container-mobile {
        padding: 10px;
        width: 100%;
        max-width: 100vw;
    }

    .expanded-card-mobile {
        background: #ffffff;
    width: 100%;
        border-radius: 0px;
        padding: 12px;
        width: 100%;
        border: 1px solid #cccccc33;
    }

    .expanded-card-mobile .expand-content-section {
        display: flex;
        gap: 10px;
    }

        .expanded-card-mobile .expand-content-section .image-container {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 53px !important;
            height: 53px !important;
            border: 1px solid rgba(204, 204, 204, 0.3019607843);
            border-radius: 0px;
            background: #f6f4f1;
        }

            .expanded-card-mobile .expand-content-section .image-container img {
                width: 36px;
                height: 38px;
            }

        .expanded-card-mobile .expand-content-section .product-title-container {
            display: flex;
            align-items: start;
            gap: 8px;
            padding-bottom: 8px;

        }

            .expanded-card-mobile .expand-content-section .product-title-container .product-tag.tag-r {
                background-color: #394498;
                color: var(--bg-primary) !important;
                width: 18px;
                height: 18px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: var(--fw-600);
                font-size: var(--fz-12);
                color: var(--text-color);
                line-height: 120%;
                letter-spacing: 4%;
                border-radius: var(--br-2);
            }

            .expanded-card-mobile .expand-content-section .product-title-container .product-tag.tag-f {
                background-color: #f5d860;
                color: var(--text-color);
                width: 18px;
                height: 18px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: var(--fw-600);
                font-size: var(--fz-12);
                color: var(--text-color);
                line-height: 120%;
                letter-spacing: 4%;
                border-radius: var(--br-2);
            }


            .expanded-card-mobile .expand-content-section .product-title-container .expand-title {
                color: var(--text-mega-title);
                font-weight: var(--fw-600);
                font-size: var(--fz-12);
                line-height: 120%;
                letter-spacing: 4%;
                margin-top: -2px;
            }

        .expanded-card-mobile .expand-content-section .expand-product-delivery-detail {
            display: flex;
            align-items: center;
            gap: 6px;
            padding-top: 0px;
        }

    .expanded-card-mobile .expand-border-mobile {
        margin: 10px 0px;
        width: 100%;
        height: 1px;
        background: rgba(204, 204, 204, 0.3019607843);
    }

    .expanded-card-mobile .expand-content-section .expand-product-delivery-detail .expand-product-date-container {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        border: 1px solid rgba(204, 204, 204, 0.3019607843);
        border-radius: var(--br-2);
        background: var(--bg-primary);
    }

    .expanded-card-mobile .expand-content-section .expand-product-delivery-detail .expand-product-date-content {
        color: #999999;
        font-weight: var(--fw-400);
        font-size: 10px;
        line-height: 120%;
        letter-spacing: 4%;
    }

        .expanded-card-mobile .expand-content-section .expand-product-delivery-detail .expand-product-date-content span {
            color: var(--text-mega-title);
            font-weight: var(--fw-500);
            font-size: 10px;
            line-height: 120%;
            letter-spacing: 4%;
        }

    .expanded-card-mobile .expand-data-container {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    #tableView .expanded-card-mobile .expand-data-container {
        width: calc(100vw - 12%);
    }

    .expanded-card-mobile .expand-data-container .expand-data-divider {
        width: 1px;
        height: 78px;
        background: rgba(204, 204, 204, 0.3019607843);
    }

    .expanded-card-mobile .expand-data-container .expand-data-items {
        display: flex;
        align-items: start;
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

        /* Row 1: "Measurements" + "L/W Ratio" + "Table" + "Depth"*/
        .expanded-card-mobile .expand-data-container .expand-data-items:nth-child(1) .data-title {
            min-width: 48px;
        }

        /* Row 2: "Cut" + "Polish" +  "Symmetry" + "Certificate"*/
        .expanded-card-mobile .expand-data-container .expand-data-items:nth-child(3) .data-title {
            min-width: 54px;
        }

    .expanded-card-mobile .expand-data-container .data-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 4px;
    }

        .expanded-card-mobile .expand-data-container .data-container .data-title-container {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .expanded-card-mobile .expand-data-container .data-container .data-title {
            color: #999999;
            font-weight: var(--fw-400);
            font-size: 10px;
            line-height: 120%;
            letter-spacing: 4%;
        }

        .expanded-card-mobile .expand-data-container .data-container .data-title-container .data-dot {
            width: 2px;
            height: 2px;
            background: rgba(133, 133, 133, 0.8);
        }

        .expanded-card-mobile .expand-data-container .data-container .data-value {
            color: var(--text-mega-title);
            font-weight: var(--fw-400);
            font-size: 10px;
            line-height: 120%;
            letter-spacing: 4%;
        }

    /* button section */
    .expand-main-container-mobile .expand-button-section {
        padding-top: 4px;
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
        margin-top: auto;
    }

        .expand-main-container-mobile .expand-button-section .setting-button {
            background-color: var(--text-mega-title);
            border-radius: 0px;
            font-size: var(--fz-12);
            font-weight: var(--fw-700);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fefefe;
            border: none;
            max-height: 36px;
            width: 50%;
            box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.0509803922);
            transition: all 0.5s ease-in-out;
        }

        .expand-main-container-mobile .expand-button-section .cart-button {
            background-color: var(--text-mega-title);
            border-radius: var(--br-4);
            border: 1px solid var(--text-mega-title);
            max-height: 36px;
            width: 10%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .expand-main-container-mobile .expand-button-section .detail-button {
            border: 1px solid var(--text-mega-title);
            border-radius: 0px;
            background: transparent;
            width: 50%;
            min-height: 36px;
            font-size: var(--fz-14);
            font-weight: var(--fw-700);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-mega-title);
        }

        .expand-main-container-mobile .expand-button-section .setting-button:hover {
            background-color: #044a59;
            box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.0509803922);
        }

        .expand-main-container-mobile .expand-button-section .cart-button:hover {
            background-color: #044a59;
            box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.0509803922);
        }

        .expand-main-container-mobile .expand-button-section .detail-button:hover {
            background-color: #f3f4f5;
            /* box-shadow: 0px 4px 20px 0px #00000040; */
        }

        .expand-main-container-mobile .expand-button-section .detail-button:active {
            background-color: #f3e9da;
        }
}

@media (min-width: 1025px) {
    .expand-main-container-mobile {
        display: none;
    }
}

@media (max-width: 390px) {
    .expanded-card-mobile .expand-data-container .data-container .data-value {
        font-size: 9px;
    }
}

@media screen and (max-width: 600px) {

    .arrow::before,
    .arrow::after {
        height: 8px !important;
        display: block !important;
    }

    .arrow {
        width: 12px;
        height: 18px;
    }
}

.diamond-table tbody tr.main-row .price-content .product-tag {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-600);
    font-size: var(--fz-12);
    line-height: 120%;
    border-radius: var(--br-2);
    flex-shrink: 0;
}

    .diamond-table tbody tr.main-row .price-content .product-tag.tag-r {
        background-color: #394498;
        color: var(--bg-primary);
    }

    .diamond-table tbody tr.main-row .price-content .product-tag.tag-f {
        background-color: #f5d860;
        color: var(--text-color);
    }

div#tableView {
    padding-bottom: 107px; /* Height of sticky element + buffer */
}