/* for diamonds lisitng top sperate header */
@media (max-width: 767px) {
    /* =========================================
       MOBILE TABLE HEADER
       Same columns as product rows
    ========================================= */
    .product-listing-header {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        display: grid !important;
        /*
        Shape | Carat | Cut | Color | Clarity | Price | Arrow
        */
        grid-template-columns:
            minmax(68px, 1.35fr)
            .70fr
            .85fr
            .70fr
            .85fr
            1fr
            22px !important;
        column-gap: 4px !important;
        align-items: center !important;
        padding: 8px 5px !important;
        box-sizing: border-box !important;
        background: #eef4f7;
    }

    /* Reset Elementor widths */
    .product-listing-header > .elementor-element {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /*
       Your actual header order:

       1 Shape
       2 blank
       3 Carat
       4 Certificates
       5 Cut
       6 Color
       7 Clarity
       8 Price
    */

    /* Shape */
    .product-listing-header > :nth-child(1) {
        grid-column: 1 !important;
        text-align: center !important;
    }

    /* Blank column - not needed on mobile */
    .product-listing-header > :nth-child(2) {
        display: none !important;
    }

    /* Carat */
    .product-listing-header > :nth-child(3) {
        grid-column: 2 !important;
        text-align: center !important;
    }

    /* Certificates - hidden on mobile */
    .product-listing-header > :nth-child(4) {
        display: none !important;
    }

    /* Cut */
    .product-listing-header > :nth-child(5) {
        grid-column: 3 !important;
        text-align: center !important;
    }

    /* Color */
    .product-listing-header > :nth-child(6) {
        grid-column: 4 !important;
        text-align: center !important;
    }

    /* Clarity */
    .product-listing-header > :nth-child(7) {
        grid-column: 5 !important;
        text-align: center !important;
    }

    /* Price */
    .product-listing-header > :nth-child(8) {
        grid-column: 6 !important;
        text-align: center !important;
    }

    /* Header typography */
    .product-listing-header .elementor-heading-title {
        margin: 0 !important;
        font-size: 9px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}



/* for diamonds lisitng grid */
@media (max-width: 767px) {
    /* =========================================
       GENERAL
    ========================================= */
    .diamond-table-scroll,
    #product-listing,
    #product-listing .jet-listing-grid,
    #product-listing .jet-listing-grid__items,
    #product-listing .jet-listing-grid__item,
    #product-listing .jet-listing-grid__item > .elementor {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .diamond-table-scroll,
    #product-listing {
        overflow-x: hidden !important;
    }

    /* =========================================
       MAIN PRODUCT ROW

       First .e-con.e-parent inside each listing
       is the actual table row.
    ========================================= */
    #product-listing
    .jet-listing-grid__item
    > .elementor
    > .e-con.e-parent:first-child {width: 100% !important;max-width: 100% !important;min-width: 0 !important;padding: 0px;}


    #product-listing .jet-listing-grid__item > .elementor > .e-con.e-parent:first-child > .e-con-inner {
        width: 100% !important;max-width: 100% !important;min-width: 0 !important;display: grid !important;
        /*
        Shape | Carat | Cut | Color | Clarity | Price | Arrow
        */grid-template-columns:
            minmax(68px, 1.35fr)
            .70fr
            .85fr
            .70fr
            .85fr
            1fr
            22px !important;grid-template-rows:
            28px
            auto !important;column-gap: 4px !important;row-gap: 2px !important;align-items: center !important;padding: 9px 0px !important;box-sizing: border-box !important;border-bottom: 1px solid #eeeeee;
    }


    /* Alternate row background */

    #product-listing
    .jet-listing-grid__item:nth-child(even)
    > .elementor
    > .e-con.e-parent:first-child
    > .e-con-inner {
        background: #f8f8f8;
    }


    /* =========================================
       RESET ALL COLUMN WIDGET WIDTHS
    ========================================= */

    #product-listing
    .jet-listing-grid__item
    > .elementor
    > .e-con.e-parent:first-child
    > .e-con-inner
    > * {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }


    /* =========================================
       CHILD 1 = IMAGE
    ========================================= */

    #product-listing
    .jet-listing-grid__item
    > .elementor
    > .e-con.e-parent:first-child
    > .e-con-inner
    > :nth-child(1) {
        grid-column: 1 !important;
        grid-row: 1 !important;
        text-align: center !important;
        align-self: end !important;
    }


    #product-listing
    .jet-listing-grid__item
    > .elementor
    > .e-con.e-parent:first-child
    > .e-con-inner
    > :nth-child(1) img {
        width: 25px !important;
        height: 25px !important;
        display: block !important;
        object-fit: contain !important;
        margin: 0 auto 3px !important;
    }


    /* =========================================
       CHILD 2 = SHAPE
    ========================================= */

    #product-listing
    .jet-listing-grid__item
    > .elementor
    > .e-con.e-parent:first-child
    > .e-con-inner
    > :nth-child(2) {
        grid-column: 1 !important;
        grid-row: 2 !important;
        text-align: center !important;
        align-self: start !important;
    }


    /* =========================================
       CHILD 3 = CARAT
    ========================================= */

    #product-listing
    .jet-listing-grid__item
    > .elementor
    > .e-con.e-parent:first-child
    > .e-con-inner
    > :nth-child(3) {
        grid-column: 2 !important;
        grid-row: 1 / 3 !important;
        text-align: center !important;
    }


    /* =========================================
       CHILD 4 = CERTIFICATE
       Hide on mobile
    ========================================= */

    #product-listing
    .jet-listing-grid__item
    > .elementor
    > .e-con.e-parent:first-child
    > .e-con-inner
    > :nth-child(4) {
        display: none !important;
    }


    /* =========================================
       CHILD 5 = CUT
    ========================================= */

    #product-listing
    .jet-listing-grid__item
    > .elementor
    > .e-con.e-parent:first-child
    > .e-con-inner
    > :nth-child(5) {
        grid-column: 3 !important;
        grid-row: 1 / 3 !important;
        text-align: center !important;
    }


    /* =========================================
       CHILD 6 = COLOR
    ========================================= */

    #product-listing
    .jet-listing-grid__item
    > .elementor
    > .e-con.e-parent:first-child
    > .e-con-inner
    > :nth-child(6) {
        grid-column: 4 !important;
        grid-row: 1 / 3 !important;
        text-align: center !important;
    }


    /* =========================================
       CHILD 7 = CLARITY
    ========================================= */

    #product-listing
    .jet-listing-grid__item
    > .elementor
    > .e-con.e-parent:first-child
    > .e-con-inner
    > :nth-child(7) {
        grid-column: 5 !important;
        grid-row: 1 / 3 !important;
        text-align: center !important;
    }


    /* =========================================
       CHILD 8 = PRICE
    ========================================= */

    #product-listing
    .jet-listing-grid__item
    > .elementor
    > .e-con.e-parent:first-child
    > .e-con-inner
    > :nth-child(8) {
        grid-column: 6 !important;
        grid-row: 1 / 3 !important;
        text-align: center !important;
    }


    /* =========================================
       CHILD 9 = VIEW
    ========================================= */

    #product-listing
    .jet-listing-grid__item
    > .elementor
    > .e-con.e-parent:first-child
    > .e-con-inner
    > :nth-child(9) {
        grid-column: 7 !important;
        grid-row: 1 / 3 !important;
        text-align: center !important;
    }


    /* =========================================
       VIEW BUTTON -> ARROW
    ========================================= */

    #product-listing
    .jet-listing-grid__item
    > .elementor
    > .e-con.e-parent:first-child
    > .e-con-inner
    > :nth-child(9)
    .elementor-button {
        width: 22px !important;
        min-width: 22px !important;
        padding: 3px !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }


    #product-listing
    .jet-listing-grid__item
    > .elementor
    > .e-con.e-parent:first-child
    > .e-con-inner
    > :nth-child(9)
    .elementor-button-text {
        font-size: 0 !important;
    }


    #product-listing
    .jet-listing-grid__item
    > .elementor
    > .e-con.e-parent:first-child
    > .e-con-inner
    > :nth-child(9)
    .elementor-button-text::after {
        content: "⌄";
        font-size: 16px !important;
        line-height: 1 !important;
        color: #222;
    }


    /* =========================================
       TEXT
    ========================================= */

    #product-listing
    .jet-listing-grid__item
    > .elementor
    > .e-con.e-parent:first-child
    .elementor-heading-title {
        margin: 0 !important;
        font-size: 10px !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }


    /* Shape is allowed to wrap */

    #product-listing
    .jet-listing-grid__item
    > .elementor
    > .e-con.e-parent:first-child
    > .e-con-inner
    > :nth-child(2)
    .elementor-heading-title {
        white-space: normal !important;
        line-height: 1.2 !important;
    }


    /* =========================================
       HEADER
    ========================================= */

    .diamond-table-header,
    .diamond-table-header > .e-con-inner {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }


    .diamond-table-header > .e-con-inner {
        display: grid !important;
        grid-template-columns:
            minmax(68px, 1.35fr)
            .70fr
            .85fr
            .70fr
            .85fr
            1fr
            22px !important;
        column-gap: 4px !important;
        align-items: center !important;
        padding: 8px 5px !important;
        background: #eef4f7;
    }

    /* Shape */
    .diamond-table-header
    > .e-con-inner
    > :nth-child(1) {
        grid-column: 1 !important;
    }

    /* Carat */
    .diamond-table-header
    > .e-con-inner
    > :nth-child(2) {
        grid-column: 2 !important;
    }

    /* Certificate hidden */
    .diamond-table-header
    > .e-con-inner
    > :nth-child(3) {
        display: none !important;
    }

    /* Cut */
    .diamond-table-header
    > .e-con-inner
    > :nth-child(4) {
        grid-column: 3 !important;
    }

    /* Color */
    .diamond-table-header
    > .e-con-inner
    > :nth-child(5) {
        grid-column: 4 !important;
    }

    /* Clarity */
    .diamond-table-header
    > .e-con-inner
    > :nth-child(6) {
        grid-column: 5 !important;
    }

    /* Price */
    .diamond-table-header
    > .e-con-inner
    > :nth-child(7) {
        grid-column: 6 !important;
    }

    .diamond-table-header .elementor-heading-title {
        margin: 0 !important;
        font-size: 9px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        text-align: center !important;
    }
}