/* =========================================================
   MI FURNITURES
   PRODUCTS PAGE ONLY
   Clean / Editable / Responsive
========================================================= */


/* =========================================================
   01. PAGE
========================================================= */

.products-page {
    margin: 0;
    font-family: "Poppins", sans-serif;
    color: #111;
    background: #fff;
    overflow-x: hidden;
}

.products-page * {
    box-sizing: border-box;
}

.products-page a {
    color: inherit;
    text-decoration: none;
}

.products-page img {
    display: block;
}

.products-container {
    padding-left: 3%;
    padding-right: 3%;
}


/* =========================================================
   02. HEADER
========================================================= */

.products-header {
    position: relative;
    width: 100%;
    padding: 18px 0 15px;
    background: #fff;
    z-index: 100;
}

.products-header .navbar {
    min-height: 42px;
    padding: 0;
}

.products-header .navbar-brand {
    margin: 0;
    padding: 0;

    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;

    color: #111;
}

.products-header .navbar-brand:hover {
    color: #111;
    opacity: 0.65;
}


/* Main Menu */

.products-header .main-menu {
    display: flex;
    align-items: center;
    gap: 32px;
}

.products-header .main-menu .nav-link {
    position: relative;

    padding: 7px 0 !important;

    font-size: 11px;
    font-weight: 400;
    line-height: 1.3;

    color: #111;

    transition: opacity 0.25s ease;
}

.products-header .main-menu .nav-link:hover {
    color: #111;
}


/* Menu Underline */

.products-header .main-menu .nav-link::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 2px;

    width: 0;
    height: 1px;

    background: #111;

    transition: width 0.3s ease;
}

.products-header .main-menu .nav-link:hover::after,
.products-header .main-menu .nav-link.active::after {
    width: 100%;
}


/* Social Icons */

.products-header .social-icons {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 15px;
}

.products-header .social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #111;

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

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.products-header .social-icons a:hover {
    color: #111;
    opacity: 0.55;

    transform: translateY(-2px);
}


/* =========================================================
   03. PAGE TITLE
========================================================= */

.products-title-section {
    padding: 92px 86px 37px;
    background: #fff;
}

.products-title-row {
    display: flex;
    align-items: center;

    gap: 20px;
}

.products-title-row h1 {
    flex: 0 0 auto;

    margin: 0;

    font-size: 27px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -1px;
}

.title-line {
    display: block;

    width: 220px;
    height: 1px;

    background: #777;
}


/* =========================================================
   PRODUCT CATEGORY NAVIGATION
========================================================= */

.product-category-navigation {
    width: 100%;
    background: #f3f0ef;
    padding: 24px 3%;
}


/* Category Grid */

.product-category-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
}


/* Category Link */

.category-tab {
    position: relative;

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

    width: 100%;

    padding: 8px 15px;

    color: #111;
    background: transparent;

    font-family: "Poppins", sans-serif;
    font-size: clamp(17px, 1.8vw, 25px);
    font-weight: 600;
    line-height: 1.25;

    text-align: center;
    text-decoration: none;

    cursor: pointer;

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


/* Keep Link Black */

.category-tab:link,
.category-tab:visited {
    color: #111;
    text-decoration: none;
}


/* Hover */

.category-tab:hover {
    color: #111;
    opacity: .55;
    text-decoration: none;
}


/* Active Category */

.category-tab.active {
    color: #111;
    opacity: 1;
}


/* Active Underline */

.category-tab.active::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -8px;

    width: 45px;
    height: 2px;

    background: #111;

    transform: translateX(-50%);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .product-category-tabs {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 10px;
    }

    .category-tab {
        font-size: 18px;
    }

}


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

@media (max-width: 575.98px) {

    .product-category-navigation {
        padding: 20px 10px;
    }

    .product-category-tabs {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px 5px;
    }

    .category-tab {
        padding: 8px 5px;

        font-size: 14px;
    }

    .category-tab.active::after {
        bottom: -4px;
        width: 30px;
    }

}


/* =========================================================
   05. PRODUCT GRID SECTION
========================================================= */

.products-grid-section {
    width: 100%;

    padding: 7px;

    background: #fff;
}

.product-grid-container {
    width: 100%;
    max-width: none;

    padding: 0;
}


/* =========================================================
   06. DESKTOP MOSAIC GRID

   Layout:

   | ARM |       | SOFA              |
   |     | BAR   |                   |
   |-----| STOOL |-------------------|
   |INFO |       | OTTOMANS          |
   |---------------------------------|
   | OFFICE TABLE | CENTER | SIDE    |
   |---------------------------------|
   | MODULAR | HIGH | OFFICE CHAIR   |

========================================================= */

.product-layout {
    display: grid;

    width: 100%;

    grid-template-columns:
        1.08fr
        1.23fr
        0.94fr
        1fr;

    grid-template-rows:
        320px
        320px
        315px
        315px;

    gap: 7px;
}


/* =========================================================
   07. PRODUCT CARD
========================================================= */

.product-card {
    position: relative;

    display: block;

    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;

    overflow: hidden;

    background: #f0f3f4;

    color: #111;

    text-decoration: none;
}

.product-card:hover,
.product-card:focus {
    color: #111;
}


/* Product Name */

.product-name {
    position: absolute;

    top: 20px;
    left: 26px;

    z-index: 5;

    margin: 0;

    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;

    color: #111;
}


/* =========================================================
   08. PRODUCT IMAGE
========================================================= */

.product-image {
    display: flex;

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

    width: 100%;
    height: 100%;

    padding:0;
}

.product-image img {
    display: block;

    width: auto;
    height: auto;

    max-width: 88%;
    max-height: 82%;

    object-fit: contain;

    transition:
        transform 0.65s cubic-bezier(.2, .6, .2, 1);
}


/* Product Hover */

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


/* =========================================================
   09. TOP LEFT COLUMN
========================================================= */

.column-one {
    grid-column: 1;
    grid-row: 1 / span 2;

    display: grid;

    grid-template-rows:
        1fr
        1fr;

    gap: 7px;
}


/* Arm Chair */

.card-armchair .product-image img {
    max-width: 100%;
    max-height: 100%;
}


/* Informal Seating */

.card-informal .product-image img {
    max-width: 75%;
    max-height: 76%;
}


/* =========================================================
   10. TALL BAR STOOL
========================================================= */

.column-two {
    grid-column: 2;
    grid-row: 1 / span 2;

    min-width: 0;
    min-height: 0;
}

.card-barstool {
    width: 100%;
    height: 100%;
}

.card-barstool .product-image {
    padding: 0;
}

.card-barstool .product-image img {
    max-width:130%;
    max-height:130%;
}


/* =========================================================
   11. TOP RIGHT COLUMN
========================================================= */

.column-three {
    grid-column: 3 / span 2;
    grid-row: 1 / span 2;

    display: grid;

    grid-template-rows:
        1fr
        1fr;

    gap: 7px;
}


/* Sofa */

.card-sofa .product-image {
    padding:
       0;
}

.card-sofa .product-image img {
    max-width:120%;
    max-height:120%;
}


/* Ottoman */

.card-ottoman .product-image {
    justify-content: center;

    padding:
        0;
}

.card-ottoman .product-image img {
    max-width: 95%;
    max-height:95%;
}


/* =========================================================
   12. LARGE OFFICE TABLE
========================================================= */

.card-office-table {
    grid-column: 1 / span 2;
    grid-row: 3;
}

.card-office-table .product-image {
    padding:
        50;
}

.card-office-table .product-image img {
    max-width:95%;
    max-height:95%;
}


/* =========================================================
   13. CENTER TABLE
========================================================= */

.card-center-table {
    grid-column: 3;
    grid-row: 3;
}

.card-center-table .product-image {
    padding:
        0;
}

.card-center-table .product-image img {
    max-width:100%;
    max-height:100%;
}


/* =========================================================
   14. SIDE TABLE
========================================================= */

.card-side-table {
    grid-column: 4;
    grid-row: 3;
}

.card-side-table .product-image {
    padding:0;
}

.card-side-table .product-image img {
    max-width:93%;
    max-height:93%;
}


/* =========================================================
   15. MODULAR SEATING
========================================================= */

.card-modular {
    grid-column: 1;
    grid-row: 4;
}

.card-modular .product-image {
    padding:
        0;
}

.card-modular .product-image img {
    max-width: 95%;
    max-height: 95%;
}


/* =========================================================
   16. HIGH TABLE
========================================================= */

.card-high-table {
    grid-column: 2;
    grid-row: 4;
}

.card-high-table .product-image {
    padding:
        0;
}

.card-high-table .product-image img {
    max-width:90%;
    max-height:90%;
}


/* =========================================================
   17. LARGE OFFICE CHAIR
========================================================= */

.card-office-chair {
    grid-column: 3 / span 2;
    grid-row: 4;
}

.card-office-chair .product-image {
    padding:
        0;
}

.card-office-chair .product-image img {
    max-width:100%;
    max-height: 100%;
}


/* =========================================================
   18. FOOTER
========================================================= */

.products-footer {
    width: 100%;

    padding:
        75px
        0
        22px;

    background: #ddd4ce;
}

.products-footer .footer-main {
    min-height: 210px;
}


/* Footer Links */

.products-footer .footer-links,
.products-footer .footer-right {
    display: flex;
    flex-direction: column;

    gap: 9px;
}

.products-footer .footer-links a,
.products-footer .footer-right a {
    color: #111;

    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;

    text-decoration: none;

    transition: opacity 0.25s ease;
}

.products-footer .footer-links a:hover,
.products-footer .footer-right a:hover {
    opacity: 0.55;
}


/* Right Links */

.products-footer .footer-right {
    text-align: right;
}


/* Footer Logo */

.products-footer .footer-logo {
    font-size: 27px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
}


/* Footer Bottom */

.products-footer .footer-bottom {
    display: flex;

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

    margin-top: 40px;
}


/* Copyright */

.products-footer .copyright {
    font-size: 8px;
    line-height: 1.6;
}


/* Footer Social */

.products-footer .footer-social {
    display: flex;

    align-items: center;

    gap: 14px;
}

.products-footer .footer-social a {
    color: #111;

    font-size: 14px;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.products-footer .footer-social a:hover {
    opacity: 0.55;

    transform: translateY(-2px);
}


/* =========================================================
   19. LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

    .product-layout {
        grid-template-rows:
            340px
            340px
            335px
            335px;
    }

}


/* =========================================================
   20. SMALL DESKTOP
========================================================= */

@media (max-width: 1199.98px) {

    .product-layout {
        grid-template-rows:
            280px
            280px
            275px
            275px;
    }

    .product-name {
        top: 18px;
        left: 20px;

        font-size: 14px;
    }

}


/* =========================================================
   21. TABLET
========================================================= */

@media (max-width: 991.98px) {

    /* Container */

    .products-container {
        padding-left: 28px;
        padding-right: 28px;
    }


    /* Header */

    .products-header .navbar-collapse {
        margin-top: 15px;

        padding: 20px;

        background: #fff;

        border-top: 1px solid #eee;
    }

    .products-header .main-menu {
        align-items: flex-start;

        gap: 2px;
    }

    .products-header .main-menu .nav-link {
        padding: 9px 0 !important;

        font-size: 13px;
    }

    .products-header .social-icons {
        justify-content: flex-start;

        margin-top: 15px;
        padding-top: 15px;

        border-top: 1px solid #eee;
    }


    /* Category Navigation */

    .product-category-tabs {
        grid-template-columns:
            repeat(2, 1fr);

        gap:
            25px
            10px;
    }

    .category-tab {
        font-size: 19px;
    }


    /* Product Grid */

    .product-layout {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-template-rows: none;

        gap: 6px;
    }


    /*
       Remove Desktop Grid Positioning
    */

    .column-one,
    .column-two,
    .column-three,
    .card-office-table,
    .card-center-table,
    .card-side-table,
    .card-modular,
    .card-high-table,
    .card-office-chair {
        grid-column: auto;
        grid-row: auto;
    }


    /*
       Children of these desktop wrappers
       become part of main grid.
    */

    .column-one,
    .column-three {
        display: contents;
    }


    /* Normal Cards */

    .product-card {
        min-height: 320px;
    }


    /* Bar Stool */

    .column-two {
        min-height: 480px;
    }

    .column-two .product-card {
        min-height: 480px;
    }


    /* Wide Cards */

    .card-sofa,
    .card-ottoman,
    .card-office-table,
    .card-office-chair {
        grid-column: span 2;
    }

    .card-sofa,
    .card-ottoman {
        min-height: 380px;
    }

    .card-office-table,
    .card-office-chair {
        min-height: 450px;
    }


    /* Footer */

    .products-footer .footer-logo {
        margin: 40px 0;
    }

    .products-footer .footer-right {
        text-align: left;
    }

}


/* =========================================================
   22. MOBILE
========================================================= */

@media (max-width: 575.98px) {

    /* Container */

    .products-container {
        padding-left: 20px;
        padding-right: 20px;
    }


    /* Header */

    .products-header {
        padding-top: 14px;
        padding-bottom: 12px;
    }

    .products-header .navbar-brand {
        font-size: 18px;

        letter-spacing: -0.6px;
    }


    /* Page Title */

    .products-title-section {
        padding:
           60px
           0px
            21px
    }

    .products-title-row {
        gap: 15px;
    }

    .products-title-row h1 {
        font-size: 24px;
    }

    .title-line {
        width: 100px;
    }


    /* Categories */

    .product-category-navigation {
        padding:
            20px
            8px;
    }

    .product-category-tabs {
        grid-template-columns:
            1fr
            1fr;

        gap:
            20px
            5px;
    }

    .category-tab {
        padding: 0 5px;

        font-size: 14px;
        line-height: 1.35;
    }


    /* Product Grid */

    .products-grid-section {
        padding: 4px;
    }

    .product-layout {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 4px;
    }


    /* Product Cards */

    .product-card {
        min-height: 230px;
    }

    .product-name {
        top: 14px;
        left: 14px;

        font-size: 12px;
    }

    .product-image {
        padding:
            42px
            10px
            12px;
    }

    .product-image img {
        max-width: 88%;
        max-height: 76%;
    }


    /* Tall Bar Stool */

    .column-two {
        grid-column: span 2;

        min-height: 360px;
    }

    .column-two .product-card {
        min-height: 360px;
    }

    .card-barstool .product-image img {
        max-width: 65%;
        max-height: 84%;
    }


    /* Full Width Products */

    .card-sofa,
    .card-ottoman,
    .card-office-table,
    .card-office-chair {
        grid-column: span 2;

        min-height: 310px;
    }


    /* Sofa */

    .card-sofa .product-image img {
        max-width: 90%;
    }


    /* Office Table */

    .card-office-table .product-image img {
        max-width: 82%;
    }


    /* Office Chair */

    .card-office-chair {
        min-height: 350px;
    }

    .card-office-chair .product-image img {
        max-width: 70%;
        max-height: 85%;
    }


    /* Footer */

    .products-footer {
        padding:
            50px
            0
            20px;
    }

    .products-footer .footer-main {
        min-height: auto;
    }

    .products-footer .footer-logo {
        margin:
            35px
            0;

        text-align: left !important;

        font-size: 23px;
    }

    .products-footer .footer-bottom {
        flex-direction: column;

        align-items: flex-start;

        gap: 25px;

        margin-top: 45px;
    }

    .products-footer .copyright {
        font-size: 7px;
        line-height: 1.7;
    }

}


/* =========================================================
   23. VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .products-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .products-header .navbar-brand {
        font-size: 17px;
    }

    .category-tab {
        font-size: 12px;
    }

    .product-card {
        min-height: 210px;
    }

    .product-name {
        top: 12px;
        left: 12px;

        font-size: 11px;
    }

}


/* =========================================================
   24. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .product-card img,
    .products-header a,
    .products-footer a,
    .category-tab {
        transition: none !important;
    }

}