/* =====================================================
   GLOBAL
===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    font-family: "Poppins", sans-serif;

    background: #f4f1e6;

    color: #17351f;

    overflow-x: hidden;
}


/* =====================================================
   NAVBAR
   MATCHING HOME PAGE
===================================================== */

.navbar {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    height: 80px;

    padding: 0 50px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(15px);

    -webkit-backdrop-filter: blur(15px);

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

    z-index: 1000;
}


/* Logo */

.logo {

    display: flex;

    align-items: center;

    gap: 12px;

    text-decoration: none;

    color: white;
}

.logo img {

    width: 48px;

    height: 48px;

    object-fit: contain;
}

.logo span {

    font-family: "Cinzel", serif;

    font-size: 21px;

    letter-spacing: 3px;

    color: white;
}


/* Navigation */

.nav-links {

    display: flex;

    gap: 32px;
}

.nav-links a {

    position: relative;

    color: white;

    text-decoration: none;

    font-size: 13px;

    letter-spacing: 1px;

    transition: 0.3s;
}

.nav-links a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -8px;

    width: 0;

    height: 2px;

    background: #c9d261;

    transition: 0.3s;
}

.nav-links a:hover::after,
.nav-links a.active::after {

    width: 100%;
}

.nav-links a:hover,
.nav-links a.active {

    color: #c9d261;
}


/* Mobile button */

.menu-toggle {

    display: none;

    border: none;

    background: transparent;

    color: white;

    font-size: 24px;

    cursor: pointer;
}


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

.mobile-nav {

    position: fixed;

    top: 80px;

    left: 0;

    width: 100%;

    background: rgba(10, 30, 17, 0.96);

    backdrop-filter: blur(15px);

    display: none;

    flex-direction: column;

    z-index: 999;
}

.mobile-nav.active {

    display: flex;
}

.mobile-nav a {

    color: white;

    text-decoration: none;

    text-align: center;

    padding: 18px;

    border-bottom: 1px solid rgba(255,255,255,0.1);
}


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

.products-page {

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(201,210,97,0.12),
            transparent 35%
        ),

        #f4f1e6;

    padding-bottom: 80px;
}


/* =====================================================
   INTRO
===================================================== */

.products-intro {

    min-height: 430px;

    padding: 150px 30px 70px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    background:

        linear-gradient(
            135deg,
            #102c1a,
            #183d24
        );

    color: white;
}

.eyebrow {

    color: #c9d261;

    font-size: 11px;

    letter-spacing: 5px;

    margin-bottom: 18px;
}

.products-intro h1 {

    font-family: "Cinzel", serif;

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

    font-weight: 500;

    letter-spacing: 3px;
}

.gold-line {

    width: 75px;

    height: 2px;

    background: #c9d261;

    margin: 22px auto;
}

.products-intro p {

    max-width: 650px;

    color: rgba(255,255,255,0.8);

    line-height: 1.9;

    font-size: 15px;
}


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

.tea-product {

    max-width: 1250px;

    min-height: 650px;

    margin: auto;

    padding: 100px 50px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 90px;

    align-items: center;

    border-bottom: 1px solid rgba(23,53,31,0.12);

    opacity: 0;

    transform: translateY(50px);

    transition:

        opacity 0.8s ease,

        transform 0.8s ease;
}

.tea-product.visible {

    opacity: 1;

    transform: translateY(0);
}


/* =====================================================
   ALTERNATING LAYOUT
===================================================== */

.tea-product.reverse .tea-image {

    order: 2;
}

.tea-product.reverse .tea-details {

    order: 1;
}


/* =====================================================
   PRODUCT IMAGE
===================================================== */

.tea-image {

    position: relative;

    min-height: 500px;

    display: flex;

    align-items: center;

    justify-content: center;
}

.tea-image img {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 430px;

    max-height: 520px;

    object-fit: contain;

    filter:

        drop-shadow(
            0 30px 30px rgba(0,0,0,0.20)
        );

    transition: transform 0.6s ease;
}

.tea-image:hover img {

    transform:

        translateY(-10px)

        scale(1.035);
}


/* Glow behind packet */

.image-glow {

    position: absolute;

    width: 370px;

    height: 370px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(201,210,97,0.30),
            rgba(201,210,97,0.05),
            transparent 70%
        );

    filter: blur(8px);
}


/* =====================================================
   PRODUCT INFORMATION
===================================================== */

.tea-details {

    padding: 20px 0;
}

.product-number {

    color: #8d753d;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 4px;
}

.tea-details h2 {

    font-family: "Cinzel", serif;

    font-size: clamp(36px, 4vw, 55px);

    font-weight: 500;

    line-height: 1.2;

    margin: 18px 0;

    color: #17351f;
}

.small-line {

    width: 65px;

    height: 2px;

    background: #b89a45;

    margin: 20px 0;
}

.tea-details h3 {

    font-family: "Cinzel", serif;

    color: #6f592c;

    font-weight: 400;

    font-size: 19px;

    line-height: 1.6;

    margin-bottom: 22px;
}

.tea-details p {

    max-width: 550px;

    color: #566056;

    font-size: 14px;

    line-height: 2;

    margin-bottom: 15px;
}


/* =====================================================
   PRODUCT FEATURES
===================================================== */

.tea-features {

    display: flex;

    flex-wrap: wrap;

    gap: 18px;

    margin-top: 28px;

    padding-top: 22px;

    border-top: 1px solid rgba(23,53,31,0.12);
}

.tea-features span {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #425745;

    font-size: 10px;

    letter-spacing: 0.5px;
}

.tea-features i {

    color: #9d803d;

    font-size: 14px;
}


/* =====================================================
   BUY OPTIONS
===================================================== */

.buy-area {

    margin-top: 30px;
}

.available {

    display: block;

    color: #8b7444;

    font-size: 9px;

    letter-spacing: 3px;

    margin-bottom: 13px;
}

.buy-buttons {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;
}

.buy-buttons a {

    min-width: 150px;

    padding: 13px 20px;

    display: inline-flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    text-decoration: none;

    font-size: 11px;

    border-radius: 3px;

    transition: all 0.3s ease;
}


/* Amazon */

.buy-amazon {

    background: #17351f;

    color: white;

    border: 1px solid #17351f;
}

.buy-amazon i {

    font-size: 17px;
}

.buy-amazon:hover {

    background: #c9d261;

    border-color: #c9d261;

    color: #17351f;

    transform: translateY(-4px);

    box-shadow:

        0 10px 25px rgba(0,0,0,0.15);
}


/* WhatsApp */

.buy-whatsapp {

    background: transparent;

    color: #168b45;

    border: 1px solid #25b65e;
}

.buy-whatsapp i {

    font-size: 17px;

    color: #1fa653;
}

.buy-whatsapp:hover {

    background: #25b65e;

    color: white;

    transform: translateY(-4px);

    box-shadow:

        0 10px 25px rgba(37,182,94,0.20);
}

.buy-whatsapp:hover i {

    color: white;
}


/* =====================================================
   FOOTER
   MATCHING HOME PAGE
===================================================== */

.site-footer {

    position: relative;

    padding: 60px 20px 25px;

    text-align: center;

    color: white;

    background:

        rgba(10, 30, 17, 0.92);

    backdrop-filter: blur(15px);
}

.footer-logo {

    width: 65px;

    margin-bottom: 12px;
}

.footer-content h3 {

    font-family: "Cinzel", serif;

    color: #c9d261;

    letter-spacing: 3px;
}

.footer-content p {

    font-size: 12px;

    margin-top: 8px;

    color: rgba(255,255,255,0.75);
}

.footer-content .modernez {

    color: #c9d261;

    font-size: 9px;

    letter-spacing: 3px;

    margin-top: 12px;
}

.footer-bottom {

    margin-top: 35px;

    padding-top: 20px;

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

    font-size: 9px;

    letter-spacing: 1.5px;

    color: rgba(255,255,255,0.5);
}


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

@media (max-width: 900px) {

    .navbar {

        padding: 0 25px;
    }

    .nav-links {

        display: none;
    }

    .menu-toggle {

        display: block;
    }

    .tea-product {

        grid-template-columns: 1fr;

        gap: 45px;

        padding: 80px 35px;
    }

    .tea-product.reverse .tea-image {

        order: 1;
    }

    .tea-product.reverse .tea-details {

        order: 2;
    }

    .tea-image {

        min-height: auto;
    }

    .tea-details {

        text-align: center;
    }

    .small-line {

        margin: 20px auto;
    }

    .tea-details p {

        margin-left: auto;

        margin-right: auto;
    }

    .tea-features {

        justify-content: center;
    }

    .buy-buttons {

        justify-content: center;
    }
}


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

@media (max-width: 600px) {

    .navbar {

        height: 70px;
    }

    .logo img {

        width: 42px;

        height: 42px;
    }

    .logo span {

        font-size: 17px;

        letter-spacing: 2px;
    }

    .mobile-nav {

        top: 70px;
    }

    .products-intro {

        min-height: 400px;

        padding: 120px 25px 60px;
    }

    .products-intro h1 {

        font-size: 40px;
    }

    .products-intro p {

        font-size: 13px;
    }

    .tea-product {

        padding: 65px 22px;

        min-height: auto;

        gap: 30px;
    }

    .tea-image img {

        max-width: 320px;
    }

    .image-glow {

        width: 270px;

        height: 270px;
    }

    .tea-details h2 {

        font-size: 34px;
    }

    .tea-details h3 {

        font-size: 16px;
    }

    .tea-details p {

        font-size: 13px;

        line-height: 1.9;
    }

    .buy-buttons a {

        width: 100%;
    }

}