/* =====================================================
   PRODUCTS PAGE
   AGRO MAKMUR SENTOSA
===================================================== */


/* =====================================================
   HERO
===================================================== */

.products-hero {

    min-height: 560px;

    position: relative;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: #0a2718;

}


/* =====================================================
   HERO VIDEO
===================================================== */

.products-hero-video {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    z-index: 0;

}


/* =====================================================
   HERO OVERLAY
===================================================== */

.products-hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(10, 39, 24, .93),
            rgba(10, 39, 24, .68),
            rgba(10, 39, 24, .28)
        );

}


/* =====================================================
   HERO CONTENT
===================================================== */

.products-hero-content {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1400px;

    margin: 0 auto;

    padding: 100px 7%;

    color: #ffffff;

}


.products-label {

    margin-bottom: 10px;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 4px;

    text-transform: uppercase;

    color: #5e9a69;

}


.products-hero .products-label {

    color: #c9dfcc;

}


.products-hero h1 {

    max-width: 850px;

    margin-bottom: 28px;

    font-size:
        clamp(
            48px,
            6vw,
            82px
        );

    line-height: .98;

    font-weight: 500;

    letter-spacing: -3px;

}


.products-hero-text {

    max-width: 580px;

    font-size: 17px;

    line-height: 1.7;

    color:
        rgba(
            255,
            255,
            255,
            .84
        );

}



/* =====================================================
   MAIN
===================================================== */

.products-main {

    background: #fcfaf6;

}


.catalogue-section {

    max-width: 1500px;

    margin: 0 auto;

    padding: 40px 5%;

}


.catalogue-header {

    max-width: 750px;

    margin-bottom: 30px;

}


.catalogue-header h2 {

    margin-bottom: 18px;

    font-size:
        clamp(
            42px,
            5vw,
            68px
        );

    line-height: 1;

    font-weight: 500;

    letter-spacing: -2.5px;

    color: #183b2a;

}


.catalogue-header h2 span {

    color: #739653;

}


.catalogue-header > p:last-child {

    font-size: 18px;

    line-height: 1.7;

    color: #657168;

}



/* =====================================================
   SPECIES
===================================================== */

.species-area {

    margin-bottom: 75px;

}


.species-heading {

    margin-bottom: 28px;

}


.species-heading h3 {

    font-size: 32px;

    font-weight: 500;

    color: #183b2a;

}


.species-grid {

    display: grid;

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

    gap: 10px;

    width: 100%;

}


.species-card {

    min-width: 0;

    height: 205px;

    padding: 22px 10px;

    border:
        1px solid
        #dfddd5;

    border-radius: 13px;

    background: #ffffff;

    color: #183b2a;

    cursor: pointer;

    text-align: center;

    font-family: inherit;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;

}


.species-card:hover {

    transform:
        translateY(-5px);

    border-color:
        #8da873;

    box-shadow:
        0 12px 28px
        rgba(
            24,
            59,
            42,
            .07
        );

}


.species-card.active {

    background:
        #edf3e9;

    border-color:
        #739653;

}



/* =====================================================
   SPECIES ICON
===================================================== */

.species-icon {

    width: 72px;

    height: 72px;

    min-width: 72px;

    min-height: 72px;

    margin:
        0 auto 17px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        #f4f1e9;

    flex-shrink: 0;

}


.species-icon img {

    width: 43px;

    height: 43px;

    object-fit: contain;

    display: block;

}


.species-card.active
.species-icon {

    background:
        #dcebd9;

}



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

.species-card h4 {

    height: 20px;

    margin-bottom: 10px;

    font-size: 16px;

    font-weight: 700;

    color: #183b2a;

    line-height: 20px;

}


.species-card > span {

    font-size: 11px;

    line-height: 16px;

    color: #707b73;

}



/* =====================================================
   GENERAL
===================================================== */

.general-icon {

    font-size: 13px;

    font-weight: 500;

    color: #778078;

    letter-spacing: .5px;

}


.general-icon span {

    font-size: 12px;

}



/* =====================================================
   SEARCH
===================================================== */

.product-search-area {

    width: 100%;

    max-width: 100%;

    margin-bottom: 40px;

}


.search-label {

    display: block;

    margin-bottom: 14px;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;

    text-transform: uppercase;

    color: #5f6d64;

}


.search-box {

    position: relative;

    width: 100%;

    display: flex;

    align-items: center;

    padding:
        13px 0 14px;

    border-bottom:
        1px solid
        #bfc2bd;

    transition:
        border-color .25s ease;

}


.search-box:focus-within {

    border-bottom-color:
        #183b2a;

}



/* =====================================================
   SEARCH ICON
===================================================== */

.search-icon {

    position: relative;

    width: 24px;

    height: 24px;

    flex:
        0 0 24px;

    margin-right: 14px;

    opacity: .65;

}


.search-icon::before {

    content: "";

    position: absolute;

    width: 13px;

    height: 13px;

    left: 1px;

    top: 1px;

    border:
        2px solid
        #183b2a;

    border-radius: 50%;

}


.search-icon::after {

    content: "";

    position: absolute;

    width: 8px;

    height: 2px;

    background:
        #183b2a;

    left: 13px;

    top: 16px;

    transform:
        rotate(45deg);

    transform-origin:
        left center;

    border-radius: 2px;

}



/* =====================================================
   SEARCH INPUT
===================================================== */

.search-box input {

    flex: 1;

    width: 100%;

    height: 30px;

    padding: 0;

    border: none;

    outline: none;

    background:
        transparent;

    color:
        #183b2a;

    font-family: inherit;

    font-size: 16px;

}


.search-box input::placeholder {

    color:
        #9aa09b;

}



/* =====================================================
   CLEAR SEARCH
===================================================== */

.clear-search {

    width: 30px;

    height: 30px;

    display: none;

    align-items: center;

    justify-content: center;

    border: none;

    background:
        transparent;

    color:
        #89918c;

    font-size: 23px;

    line-height: 1;

    cursor: pointer;

    transition:
        color .2s ease;

}


.clear-search:hover {

    color:
        #183b2a;

}


.search-box.has-value
.clear-search {

    display: flex;

}



/* =====================================================
   FILTERS
===================================================== */

.product-filters {

    display: grid;

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

    gap: 22px;

    margin-bottom: 80px;

}


.filter-item {

    padding:
        25px 30px;

    border:
        1px solid
        #dfdcd4;

    border-radius: 10px;

    background:
        #ffffff;

}


.filter-item label {

    display: block;

    margin-bottom: 12px;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;

    text-transform: uppercase;

    color:
        #66736b;

}


.filter-item select {

    width: 100%;

    border: none;

    outline: none;

    appearance: auto;

    background:
        transparent;

    color:
        #183b2a;

    font-family: inherit;

    font-size: 16px;

    cursor: pointer;

}



/* =====================================================
   PRODUCTS
===================================================== */

.products-list-section {

    border-top:
        1px solid
        #ddd9d0;

    padding-top: 55px;

}


.products-list-header {

    display: flex;

    align-items: flex-end;

    justify-content:
        space-between;

    margin-bottom: 35px;

}


.products-list-header h3 {

    font-size: 32px;

    font-weight: 500;

    color:
        #183b2a;

}


#productCount {

    font-size: 13px;

    color:
        #737d75;

}



/* =====================================================
   PRODUCT GRID
===================================================== */

.product-grid {

    display: grid;

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

    gap: 24px;

}


.product-card {

    overflow: hidden;

    border:
        1px solid
        #e1ded5;

    border-radius: 12px;

    background:
        #ffffff;

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


.product-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 18px 40px
        rgba(
            24,
            59,
            42,
            .08
        );

}


.product-card-image {

    width: 100%;

    height: 250px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background:
        #f4f1e9;

}


.product-card-image img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    padding: 20px;

    display: block;

}


.product-card-info {

    padding: 26px;

}


.product-card-brand {

    margin-bottom: 8px;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;

    color:
        #739653;

}


.product-card-species {

    margin-bottom: 10px;

    font-size: 11px;

    color:
        #7b847d;

}


.product-card-info h4 {

    margin-bottom: 12px;

    font-size: 25px;

    font-weight: 500;

    color:
        #183b2a;

}


.product-card-info p {

    margin-bottom: 20px;

    font-size: 14px;

    line-height: 1.7;

    color:
        #68736b;

}


.product-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

}


.product-tag {

    padding:
        7px 10px;

    border-radius: 4px;

    background:
        #f2f3ed;

    font-size: 10px;

    color:
        #647064;

}



/* =====================================================
   VIEW PRODUCT
===================================================== */

.product-view-button {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-top: 22px;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .5px;

    color:
        #527e54;

    transition:
        gap .25s ease,
        color .25s ease;

}


.product-view-button::after {

    content: "→";

    font-size: 15px;

    transition:
        transform .25s ease;

}


.product-view-button:hover {

    color:
        #183b2a;

    gap: 10px;

}


.product-view-button:hover::after {

    transform:
        translateX(3px);

}



/* =====================================================
   PRODUCT PAGINATION
===================================================== */

.product-pagination {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-top: 55px;

    padding-top: 30px;

    border-top:
        1px solid
        #e1ded5;

}


.product-pagination.hidden {

    display: none;

}



/* =====================================================
   PAGINATION ARROW
===================================================== */

.pagination-arrow {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        #d8d8d1;

    border-radius: 50%;

    background:
        #ffffff;

    color:
        #183b2a;

    font-family: inherit;

    font-size: 17px;

    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease;

}


.pagination-arrow:hover:not(:disabled) {

    background:
        #edf3e9;

    border-color:
        #739653;

    color:
        #183b2a;

    transform:
        translateY(-2px);

}


.pagination-arrow:disabled {

    opacity: .35;

    cursor: default;

}



/* =====================================================
   PAGINATION NUMBERS
===================================================== */

.pagination-numbers {

    display: flex;

    align-items: center;

    gap: 6px;

}


.pagination-number {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        transparent;

    border-radius: 50%;

    background:
        transparent;

    color:
        #68736b;

    font-family: inherit;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease;

}


.pagination-number:hover {

    background:
        #f0f3ed;

    color:
        #183b2a;

}


.pagination-number.active {

    background:
        #183b2a;

    border-color:
        #183b2a;

    color:
        #ffffff;

}



/* =====================================================
   NO PRODUCTS FOUND
===================================================== */

.no-results {

    display: none;

    padding:
        100px 20px;

    text-align: center;

}


.no-results h3 {

    margin-bottom: 8px;

    font-size: 24px;

    font-weight: 500;

    color:
        #183b2a;

}


.no-results p {

    font-size: 14px;

    line-height: 1.6;

    color:
        #7b847d;

}



/* =====================================================
   EMPTY BOX ICON
===================================================== */

.empty-box-icon {

    position: relative;

    width: 70px;

    height: 62px;

    margin:
        0 auto 24px;

    border:
        1.5px solid
        #b9c1b9;

    border-radius: 7px;

    background:
        #f5f4ef;

}


.empty-box-icon::before {

    content: "";

    position: absolute;

    left: 8px;

    right: 8px;

    top: 14px;

    height: 1px;

    background:
        #b9c1b9;

}


.empty-box-icon::after {

    content: "";

    position: absolute;

    width: 25px;

    height: 12px;

    left: 50%;

    top: 7px;

    transform:
        translateX(-50%);

    border-left:
        1.5px solid
        #b9c1b9;

    border-right:
        1.5px solid
        #b9c1b9;

    border-bottom:
        1.5px solid
        #b9c1b9;

    border-radius:
        0 0 4px 4px;

}


.empty-box-icon span {

    position: absolute;

    width: 26px;

    height: 1.5px;

    left: 50%;

    top: 34px;

    transform:
        translateX(-50%);

    background:
        #c2c8c1;

}



/* =====================================================
   FOOTER
===================================================== */

.products-footer {

    background:
        #0d3020;

    color:
        #ffffff;

}


.footer-content {

    max-width: 1500px;

    margin: 0 auto;

    padding:
        75px 7%;

    display: grid;

    grid-template-columns:
        2fr
        1fr
        1.3fr
        1.2fr;

    gap: 60px;

}


.footer-brand {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 22px;

    text-decoration: none;

    color:
        #ffffff;

}


.footer-brand img {

    width: 54px;

    height: 54px;

    object-fit: contain;

}


.footer-brand span {

    font-family:
        Georgia,
        serif;

    font-size: 17px;

    font-weight: 700;

    letter-spacing: 1px;

}


.footer-company > p {

    max-width: 470px;

    font-family:
        Georgia,
        serif;

    font-size: 15px;

    line-height: 1.9;

    color:
        #d0ddd4;

}


.footer-column {

    display: flex;

    flex-direction: column;

    gap: 13px;

}


.footer-column h4 {

    margin-bottom: 15px;

    font-family:
        Georgia,
        serif;

    font-size: 15px;

    color:
        #ffffff;

}


.footer-column a,
.footer-column p {

    margin: 0;

    text-decoration: none;

    font-family:
        Georgia,
        serif;

    font-size: 14px;

    line-height: 1.6;

    color:
        #d0ddd4;

}


.footer-column a:hover {

    color:
        #ffffff;

}


.social-line {

    display: flex;

    flex-direction: column;

    gap: 5px;

    padding-bottom: 15px;

    margin-bottom: 2px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .12
        );

}


.social-line strong {

    font-family:
        Georgia,
        serif;

    font-size: 14px;

    color:
        #ffffff;

}


.social-line span {

    font-family:
        Georgia,
        serif;

    font-size: 13px;

    color:
        #aebfb4;

}



/* =====================================================
   FOOTER BOTTOM
===================================================== */

.footer-bottom {

    padding:
        22px 7%;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .12
        );

}


.footer-bottom p {

    margin: 0;

    font-family:
        Georgia,
        serif;

    font-size: 12px;

    color:
        #aebfb4;

}



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

@media (max-width: 1200px) {

    .species-grid {

        grid-template-columns:
            repeat(
                5,
                1fr
            );

    }


    .product-grid {

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

    }


    .footer-content {

        grid-template-columns:
            1.5fr
            1fr
            1fr;

    }

}



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

@media (max-width: 850px) {

    .species-grid {

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

    }


    .product-filters {

        grid-template-columns:
            1fr;

    }


    .product-grid {

        grid-template-columns:
            1fr;

    }


    .footer-content {

        grid-template-columns:
            1fr;

    }

}



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

@media (max-width: 600px) {

    .products-hero {

        min-height:
            500px;

    }


    .products-hero-content {

        padding:
            80px 7%;

    }


    .products-hero h1 {

        font-size:
            47px;

        letter-spacing:
            -2px;

    }


    .catalogue-section {

        padding:
            45px 6%;

    }


    .species-grid {

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

    }


    .species-card {

        height:
            195px;

    }


    .products-list-header {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            10px;

    }


    .product-pagination {

        margin-top:
            40px;

        padding-top:
            25px;

        gap:
            5px;

    }


    .pagination-arrow,
    .pagination-number {

        width:
            38px;

        height:
            38px;

    }


    .pagination-numbers {

        gap:
            3px;

    }


    .footer-content {

        padding:
            60px 7%;

        gap:
            45px;

    }


    .footer-bottom {

        padding:
            20px 7%;

    }

}

/* =====================================================
   FOOTER PARTNERS
===================================================== */

.footer-partners {

    max-width: 1500px;

    margin: 0 auto;

    padding:
        0 7% 65px;

}


.footer-partners-header {

    margin-bottom: 30px;

}


.footer-partners-header .products-label {

    margin-bottom: 8px;

}


.footer-partners-header h3 {

    margin: 0;

    font-family:
        Georgia,
        serif;

    font-size: 26px;

    font-weight: 500;

    color:
        #ffffff;

}



/* =====================================================
   PARTNERS GRID
===================================================== */

.footer-partners-grid {

    display: grid;

    grid-template-columns:
        repeat(
            9,
            1fr
        );

    gap: 12px;

    width: 100%;

}



/* =====================================================
   PARTNER LOGO
===================================================== */

.footer-partner-logo {

    height: 90px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 15px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .12
        );

    border-radius: 8px;

    background:
        rgba(
            255,
            255,
            255,
            .035
        );

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;

}


.footer-partner-logo:hover {

    transform:
        translateY(-3px);

    background:
        rgba(
            255,
            255,
            255,
            .07
        );

    border-color:
        rgba(
            255,
            255,
            255,
            .25
        );

}


.footer-partner-logo img {

    width: 100%;

    height: 100%;

    max-width: 120px;

    max-height: 55px;

    object-fit: contain;

    display: block;

}



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

@media (max-width: 1200px) {

    .footer-partners-grid {

        grid-template-columns:
            repeat(
                5,
                1fr
            );

    }

}



/* =====================================================
   PARTNERS SMALL TABLET
===================================================== */

@media (max-width: 850px) {

    .footer-partners {

        padding:
            0 7% 55px;

    }


    .footer-partners-grid {

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

    }

}



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

@media (max-width: 600px) {

    .footer-partners {

        padding:
            0 7% 50px;

    }


    .footer-partners-header h3 {

        font-size:
            23px;

    }


    .footer-partners-grid {

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

        gap:
            10px;

    }


    .footer-partner-logo {

        height:
            80px;

        padding:
            12px;

    }

}