/* =========================================================
   HT PRODUCT CATEGORY PAGE
   T292 / Textile Manufacturer Style
   CSS ONLY
   ========================================================= */

:root {
    --ht-burgundy: #8C1D2C;
    --ht-burgundy-dark: #6F1723;
    --ht-gold: #B08D57;

    --ht-text: #262422;
    --ht-body: #6F6A64;
    --ht-muted: #8A837C;

    --ht-bg: #F7F5F2;
    --ht-white: #FFFFFF;

    --ht-border: #E4DED7;
    --ht-border-light: #EEEAE5;
}


/* =========================================================
   1. PAGE BASE
   ========================================================= */

body {
    font-family: "Open Sans", Arial, sans-serif;
}

body .prdocuts_wrapper {
    font-family: "Open Sans", Arial, sans-serif;
    color: var(--ht-text);
}


/* =========================================================
   2. MAIN SECTION
   ========================================================= */

body .prdocuts_wrapper .section,
body .prdocuts_wrapper {
    box-sizing: border-box;
}


/* =========================================================
   3. CATEGORY AREA
   ========================================================= */

body .prdocuts_wrapper .products_category_wrapper {
    background: var(--ht-bg);
    margin-bottom: 55px;
}

body .prdocuts_wrapper .products_category_box {
    padding: 0;
}


/* ---------- Section title ---------- */

body .prdocuts_wrapper .products_category_box > .top_title {
    position: relative;

    margin: 0 0 24px;
    padding: 0 0 13px;

    font-size: 12px;
    line-height: 1.5;

    font-weight: 600;
    letter-spacing: 3px;

    text-transform: uppercase;

    color: var(--ht-burgundy);

    border-bottom: 1px solid var(--ht-border);
}


/* Burgundy underline */

body .prdocuts_wrapper .products_category_box > .top_title::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -1px;

    width: 42px;
    height: 2px;

    background: var(--ht-burgundy);
}


/* =========================================================
   4. CATEGORY GRID
   ========================================================= */

body .prdocuts_wrapper .products_category_box .category_box {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 0;

    width: 100%;
}


/* =========================================================
   5. CATEGORY ITEM
   ========================================================= */

body .prdocuts_wrapper .products_category_box .one_item {

    position: relative;

    min-width: 0;

    margin: 0;

    border-bottom: 1px solid var(--ht-border);

    transition:
        background-color .25s ease;
}


/* Vertical divider */

body .prdocuts_wrapper .products_category_box .one_item:not(:nth-child(3n + 1)) {
    border-left: 1px solid var(--ht-border);
}


/* =========================================================
   6. CATEGORY LINK
   ========================================================= */

body .prdocuts_wrapper .products_category_box .one_item .cate_item {

    position: relative;

    display: flex;
    align-items: center;

    min-height: 76px;

    padding: 18px 42px 18px 20px;

    box-sizing: border-box;

    text-decoration: none;

    background: var(--ht-white);

    transition:
        background-color .25s ease,
        padding-left .25s ease;
}


/* Left burgundy indicator */

body .prdocuts_wrapper .products_category_box .one_item .cate_item::before {

    content: "";

    position: absolute;

    left: 0;
    top: 17px;
    bottom: 17px;

    width: 2px;

    background: var(--ht-burgundy);

    opacity: 0;

    transform: scaleY(.5);

    transition:
        opacity .25s ease,
        transform .25s ease;
}


/* =========================================================
   7. CATEGORY H2
   ========================================================= */

body .prdocuts_wrapper .products_category_box .one_item h2 {

    margin: 0;

    font-size: 14px;
    line-height: 1.45;

    font-weight: 500;

    letter-spacing: .1px;

    color: var(--ht-text);

    transition: color .25s ease;
}


/* =========================================================
   8. CATEGORY NUMBER
   Automatically generated
   ========================================================= */

body .prdocuts_wrapper .products_category_box .one_item .cate_item::after {

    position: absolute;

    right: 18px;
    top: 50%;

    transform: translateY(-50%);

    font-size: 10px;
    line-height: 1;

    font-weight: 600;

    letter-spacing: 1px;

    color: #B9B3AC;

    transition:
        color .25s ease,
        right .25s ease;
}


/* Individual numbers */

body .prdocuts_wrapper .products_category_box .one_item:nth-child(1) .cate_item::after {
    content: "01";
}

body .prdocuts_wrapper .products_category_box .one_item:nth-child(2) .cate_item::after {
    content: "02";
}

body .prdocuts_wrapper .products_category_box .one_item:nth-child(3) .cate_item::after {
    content: "03";
}

body .prdocuts_wrapper .products_category_box .one_item:nth-child(4) .cate_item::after {
    content: "04";
}

body .prdocuts_wrapper .products_category_box .one_item:nth-child(5) .cate_item::after {
    content: "05";
}

body .prdocuts_wrapper .products_category_box .one_item:nth-child(6) .cate_item::after {
    content: "06";
}

body .prdocuts_wrapper .products_category_box .one_item:nth-child(7) .cate_item::after {
    content: "07";
}

body .prdocuts_wrapper .products_category_box .one_item:nth-child(8) .cate_item::after {
    content: "08";
}

body .prdocuts_wrapper .products_category_box .one_item:nth-child(9) .cate_item::after {
    content: "09";
}

body .prdocuts_wrapper .products_category_box .one_item:nth-child(10) .cate_item::after {
    content: "10";
}


/* =========================================================
   9. CATEGORY HOVER
   ========================================================= */

body .prdocuts_wrapper .products_category_box .one_item:hover .cate_item {

    background: #FCFBF9;

    padding-left: 25px;
}


body .prdocuts_wrapper .products_category_box .one_item:hover .cate_item::before {

    opacity: 1;

    transform: scaleY(1);
}


body .prdocuts_wrapper .products_category_box .one_item:hover h2 {

    color: var(--ht-burgundy);
}


body .prdocuts_wrapper .products_category_box .one_item:hover .cate_item::after {

    right: 14px;

    color: var(--ht-burgundy);
}


/* =========================================================
   10. PRODUCTS SECTION
   ========================================================= */

body .prdocuts_wrapper .list_wrapper {

    margin-top: 0;
}


/* Products title */

body .prdocuts_wrapper .list_wrapper > .top_title {

    position: relative;

    margin: 0 0 28px;
    padding: 0 0 14px;

    border-bottom: 1px solid var(--ht-border);
}


body .prdocuts_wrapper .list_wrapper > .top_title h1 {

    margin: 0;

    font-size: 30px;
    line-height: 1.35;

    font-weight: 600;

    letter-spacing: -.3px;

    color: var(--ht-text);
}


/* Small burgundy line */

body .prdocuts_wrapper .list_wrapper > .top_title::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 45px;
    height: 2px;

    background: var(--ht-burgundy);
}


/* Hide mobile add icon on desktop */

body .prdocuts_wrapper .list_wrapper > .top_title .iconfont {
    color: var(--ht-burgundy);
}


/* =========================================================
   11. PRODUCT GRID
   ========================================================= */

body .prdocuts_wrapper .list_box {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    column-gap: 24px;
    row-gap: 42px;

    width: 100%;
}


/* =========================================================
   12. PRODUCT CARD
   ========================================================= */

body .prdocuts_wrapper .list_box .themes_prod {

    min-width: 0;

    background: transparent;
}


/* =========================================================
   13. PRODUCT IMAGE
   ========================================================= */

body .prdocuts_wrapper .list_box .themes_prod .pic_box {

    overflow: hidden;

    background: #EEEAE5;
}


body .prdocuts_wrapper .list_box .themes_prod .pic_box img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .5s ease,
        opacity .3s ease;
}


body .prdocuts_wrapper .list_box .themes_prod:hover .pic_box img {

    transform: scale(1.035);
}


/* =========================================================
   14. PRODUCT NAME
   ========================================================= */

body .prdocuts_wrapper .list_box .themes_prod .name {

    margin-top: 14px;

    min-height: 42px;
}


body .prdocuts_wrapper .list_box .themes_prod .name a {

    text-decoration: none;
}


body .prdocuts_wrapper .list_box .themes_prod .name h5 {

    margin: 0;

    font-size: 14px;
    line-height: 1.55;

    font-weight: 600;

    color: var(--ht-text);

    transition: color .2s ease;
}


body .prdocuts_wrapper .list_box .themes_prod:hover .name h5 {

    color: var(--ht-burgundy);
}


/* =========================================================
   15. PRODUCT IMAGE + TITLE REFINEMENT
   ========================================================= */

body .prdocuts_wrapper .list_box .themes_prod {

    position: relative;
}


body .prdocuts_wrapper .list_box .themes_prod .name::before {

    content: "";

    display: block;

    width: 24px;
    height: 1px;

    margin-bottom: 9px;

    background: var(--ht-gold);

    opacity: .8;
}


/* =========================================================
   16. DESKTOP LARGE
   ========================================================= */

@media (min-width: 1200px) {

    body .prdocuts_wrapper .products_category_box .category_box {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

    }

    body .prdocuts_wrapper .list_box {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        column-gap: 30px;
        row-gap: 48px;
    }

}


/* =========================================================
   17. TABLET
   ========================================================= */

@media (max-width: 991px) {

    body .prdocuts_wrapper .products_category_box .category_box {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    body .prdocuts_wrapper .products_category_box .one_item:not(:nth-child(3n + 1)) {

        border-left: none;

    }


    body .prdocuts_wrapper .products_category_box .one_item:nth-child(even) {

        border-left: 1px solid var(--ht-border);

    }


    body .prdocuts_wrapper .list_box {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        column-gap: 20px;
        row-gap: 36px;

    }

}


/* =========================================================
   18. MOBILE
   ========================================================= */

@media (max-width: 768px) {

    body .prdocuts_wrapper .products_category_wrapper {

        margin-bottom: 42px;

    }


    body .prdocuts_wrapper .products_category_box > .top_title {

        margin-bottom: 18px;

        font-size: 11px;

        letter-spacing: 2.5px;

    }


    body .prdocuts_wrapper .products_category_box .category_box {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    body .prdocuts_wrapper .products_category_box .one_item {

        border-bottom: 1px solid var(--ht-border);

    }


    body .prdocuts_wrapper .products_category_box .one_item:nth-child(even) {

        border-left: 1px solid var(--ht-border);

    }


    body .prdocuts_wrapper .products_category_box .one_item .cate_item {

        min-height: 66px;

        padding: 14px 30px 14px 13px;

    }


    body .prdocuts_wrapper .products_category_box .one_item:hover .cate_item {

        padding-left: 17px;

    }


    body .prdocuts_wrapper .products_category_box .one_item h2 {

        font-size: 12px;

        line-height: 1.45;

    }


    body .prdocuts_wrapper .products_category_box .one_item .cate_item::after {

        right: 10px;

        font-size: 9px;

    }


    body .prdocuts_wrapper .list_wrapper > .top_title {

        margin-bottom: 20px;

        padding-bottom: 12px;

    }


    body .prdocuts_wrapper .list_wrapper > .top_title h1 {

        font-size: 24px;

    }


    body .prdocuts_wrapper .list_box {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        column-gap: 12px;
        row-gap: 30px;

    }


    body .prdocuts_wrapper .list_box .themes_prod .name {

        margin-top: 10px;

        min-height: 36px;

    }


    body .prdocuts_wrapper .list_box .themes_prod .name h5 {

        font-size: 12px;

        line-height: 1.45;

    }


    body .prdocuts_wrapper .list_box .themes_prod .name::before {

        width: 18px;

        margin-bottom: 7px;

    }

}


/* =========================================================
   19. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    body .prdocuts_wrapper .products_category_box .category_box {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    body .prdocuts_wrapper .products_category_box .one_item .cate_item {

        min-height: 62px;

        padding: 12px 26px 12px 10px;

    }


    body .prdocuts_wrapper .products_category_box .one_item h2 {

        font-size: 11px;

    }


    body .prdocuts_wrapper .products_category_box .one_item .cate_item::after {

        display: none;

    }


    body .prdocuts_wrapper .list_box {

        column-gap: 10px;

        row-gap: 26px;

    }


    body .prdocuts_wrapper .list_box .themes_prod .name h5 {

        font-size: 11px;

    }

}