/* ==========================================
   RESET
========================================== */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Manrope', sans-serif;
    background:#082301;
    color:whitesmoke;
    overflow-x:hidden;
}

img{
    display:block;
    width:100%;
}

a{
    text-decoration:none;
    color:inherit;
}

button{
    border:none;
    background:none;
    cursor:pointer;
    font-family:inherit;
}
 
 
 /* Header */

 /* ==========================================================================
   Header Layout & Navigation
   ========================================================================== */

header {
    margin-bottom: 3em;
    
}

.logo {
    position: relative;     /* Creates a positioning boundary for the centered logo */
    display: flex;
    justify-content: space-between;
    align-items: center;    /* Vertically aligns the links and cart icon */
    margin: 50px 50px 0;
}

/* Perfect dead-center alignment for the logo */
.logo-pic {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* Centers the image perfectly horizontally and vertically */
    display: flex;
}

.shopping-title {
    display: flex;
    gap: 20px;
}

/* ==========================================================================
   Typography & Links
   ========================================================================== */

.products-title {
    font-size: 1em;
    font-weight: bold;
    color: whitesmoke;
    text-decoration: none;
}

#shop-id:hover, 
#contact-id:hover {
    color: whitesmoke;
    text-decoration: underline;
}

/* ==========================================================================
   Images & Interactive Elements
   ========================================================================== */

.top-pic {
    width: 30px;
    height: auto;
}

.mid-tree {
    width: 200px;
    height: auto;
    transition: transform 0.4s ease; /* Transition on base class so it shrinks back smoothly */
}

.mid-tree:hover {
    transform: scale(1.05);
}

/* ==========================================================================
   Shopping Cart
   ========================================================================== */

.cart {
    position: relative; /* Keeps the badge pinned to the cart */
    font-size: 24px;
    color: whitesmoke;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.cart:hover {
    transform: scale(1.08);
}

.cart span {
    position: absolute;
    top: -8px;
    right: -10px;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: black;
    color: white;
    font-size: 11px;
}
 
 


/* Body */

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

main{
    width:100%;
}

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

.hero-images{

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

}

.hero-image{

    overflow:hidden;

}

.hero-image img{

    width:100%;
    height:90vh;

    object-fit:cover;

    transition:.5s ease;

}

.hero-image:hover img{

    transform:scale(1.03);

}


/* ==========================================
   LATEST DROP
========================================== */

.latest-drop{

    padding:100px 8%;

}

.section-title{

    text-align:center;

    margin-bottom:60px;

}

.section-title h2{

    font-size:42px;

    font-weight:600;

    letter-spacing:4px;

}

.product-grid{

    display:flex;

    justify-content:center;

}

/* ==========================================
   PRODUCT CARD
========================================== */

.product-card{

    max-width:420px;

    width:100%;

    color:#111;

}

.product-image{

    overflow:hidden;

}

.product-image img{

    transition:.35s ease;

}

.product-card:hover img{

    transform:scale(1.02);

}

.product-info{

    padding-top:20px;

    text-align:center;

}

.product-info h3{

    font-size:22px;

    font-weight:500;

    margin-bottom:8px;
    color:whitesmoke;

}

.product-info p{

    color:whitesmoke;

}

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

footer{

    padding:60px;

    text-align:center;

    border-top:1px solid #eee;

}

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

.bottom-foot{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:30px;
    padding:40px 0;

}

.footer-title{

    font-size:18px;
    font-weight:600;
    color:#fff;
    text-decoration:none;
    transition:color .3s ease;

}

.footer-title:hover{

    color:#cfcfcf;

}

.tfont{

    color:#fff;
    text-decoration:none;

}

.low-pic{

    width:40px;
    height:auto;
    transition:transform .3s ease;

}

.low-pic:hover{

    transform:scale(1.1);

}

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

@media (max-width: 768px) {

    /* HEADER */

    header {
        margin-bottom: 2em;
    }

    .logo {
        margin: 30px 20px 0;
        min-height: 55px;
    }

    .shopping-title {
        gap: 12px;
    }

    .products-title {
        font-size: 12px;
    }

    .mid-tree {
        width: 120px;
    }

    .cart {
        font-size: 21px;
    }


    /* HERO */

    .hero-images {
        grid-template-columns: 1fr;
    }

    .hero-image img {
        width: 100%;
        height: 60vh;
        object-fit: cover;
    }


    /* LATEST DROP */

    .latest-drop {
        padding: 60px 20px;
    }

    .section-title {
        margin-bottom: 35px;
    }

    .section-title h2 {
        font-size: 28px;
        letter-spacing: 3px;
    }


    /* PRODUCT */

    .product-grid {
        width: 100%;
    }

    .product-card {
        width: 100%;
        max-width: 380px;
    }

    .product-info h3 {
        font-size: 20px;
    }


    /* FOOTER */

    footer {
        padding: 40px 20px;
    }

    .bottom-foot {
        flex-wrap: wrap;
        gap: 18px;
        padding: 25px 0;
    }

    .footer-title {
        font-size: 13px;
    }

    .low-pic {
        width: 32px;
    }

    .tfont {
        font-size: 12px;
        line-height: 1.5;
    }
}

.access-loading {
    visibility: hidden;
}