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

body{
    font-family:'Poppins',sans-serif;
}

/* ======================
   NAVBAR
====================== */

.custom-navbar{
    position:sticky;
    top:0;
    z-index:1000;

    background:rgba(255,255,255,.96);
    backdrop-filter:blur(15px);

    box-shadow:0 .15rem 1rem rgba(0,0,0,.05);
}

.nav-wrapper{
    width:min(95%,90rem);

    margin:auto;

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

    align-items:center;

    min-height:5.5rem;
}

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

.logo-area{
    flex-shrink:0;
}

.logo-area img{
    width:5.5rem;
    height:5rem;
    display:block;

    transition:.4s ease;
}

.logo-area img:hover{
    transform:scale(1.08) rotate(-4deg);
}

/* ======================
   MENU
====================== */

.nav-menu{
    display:flex;
    justify-content:center;
    align-items:center;

    gap:3rem;

    list-style:none;
}

.nav-menu li{
    position:relative;
}

.nav-menu a{
    text-decoration:none;
    color:#111;

    font-size:1.1rem;
    font-weight:500;

    transition:.35s ease;

    position:relative;
}

.nav-menu a::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:-.5rem;

    width:0;
    height:.15rem;

    background:#1f6d52;

    transform:translateX(-50%);

    transition:.4s ease;
}

.nav-menu a:hover::after{
    width:100%;
}

.nav-menu a:hover{
    color:#1f6d52;
    transform:translateY(-.15rem);
}

/* ======================
   DROPDOWN
====================== */

.shop-dropdown{
    position:relative;
}

.shop-dropdown>a{
    display:flex;
    align-items:center;
    gap:.4rem;
}

.shop-menu{
    position:absolute;

    top:140%;
    left:50%;

    transform:translateX(-50%) translateY(1rem);

    min-width:14rem;

    background:white;

    border-radius:1rem;

    box-shadow:0 .8rem 2rem rgba(0,0,0,.1);

    padding:.7rem 0;

    opacity:0;
    visibility:hidden;

    transition:.35s ease;

    list-style:none;

    z-index:1000;
}

.shop-dropdown:hover .shop-menu{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(0);
}

.shop-menu li a{
    display:block;

    padding:.9rem 1.4rem;

    color:#222;
}

.shop-menu li a:hover{
    background:#f5f7f6;
    padding-left:2rem;
}

/* ======================
   ICONS
====================== */

.nav-actions{
    display:flex;
    align-items:center;

    gap:1.6rem;
}

.action-icon{
    color:#111;

    font-size:1.35rem;

    transition:.35s ease;

    position:relative;
}

.action-icon:hover{
    color:#1f6d52;
    transform:translateY(-.25rem) scale(1.15);
}

.cart-btn{
    position:relative;
}

.cart-badge{
    position:absolute;

    top:-.55rem;
    right:-.7rem;

    min-width:1.25rem;
    height:1.25rem;

    border-radius:50%;

    background:#c50000;
    color:white;

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

    font-size:.65rem;
    font-weight:700;

    animation:pulse 2s infinite;
}

@keyframes pulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.15);
    }

    100%{
        transform:scale(1);
    }
}

/* wishlist icon styling */
.wishlist-btn{

    position:relative;
}

.wishlist-badge{

    position:absolute;

    top:-0.55rem;

    right:-0.7rem;

    min-width:1.25rem;

    height:1.25rem;

    border-radius:50%;

    background:#ff2d55;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:.65rem;

    font-weight:700;

    animation:pulse 2s infinite;
}
/* ======================
   MOBILE TOGGLE
====================== */

.mobile-toggle{
    display:none;
    flex-direction:column;
    gap:.35rem;
    cursor:pointer;
}

.mobile-toggle span{
    width:1.8rem;
    height:.15rem;
    background:#111;
}
/* ======================
   TOAST
====================== */

#cart-toast{

    position:fixed;

    top:90px;

    right:25px;

    background:linear-gradient(
        135deg,
        #0a8f08,
        #17b217
    );

    color:#fff;

    padding:14px 24px;

    border-radius:12px;

    font-size:14px;

    font-weight:600;

    box-shadow:
        0 10px 30px rgba(0,0,0,.15);

    z-index:999999;

    opacity:0;

    visibility:hidden;

    transform:
        translateX(120%);

    transition:
        .4s ease;
}

#cart-toast.show{

    opacity:1;

    visibility:visible;

    transform:
        translateX(0);
}



/* ======================
   MOBILE
====================== */
@media(max-width:50rem){

    .nav-wrapper{

        display:grid;

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

        gap:1rem;

        align-items:center;
    }

    .logo-area{

        justify-self:start;
    }

    .nav-actions{

        display:flex;

        align-items:center;

        gap:1rem;

        justify-self:end;
    }

    .action-icon{

        font-size:1.1rem;
    }

    .mobile-toggle{

        display:flex;

        justify-self:end;
    }

    .nav-menu{

        position:absolute;

        top:100%;
        left:0;

        width:100%;

        flex-direction:column;

        background:white;

        padding:2rem;

        gap:1.5rem;

        box-shadow:0 .5rem 1rem rgba(0,0,0,.08);

        opacity:0;
        visibility:hidden;

        transform:translateY(-1rem);

        transition:.4s ease;

        z-index:999;
    }

    .nav-menu.active{

        opacity:1;

        visibility:visible;

        transform:translateY(0);
    }
.shop-dropdown{
    width:100%;
    text-align:center;
}

.shop-dropdown > a{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:.4rem;
    padding:.9rem;
    border-bottom:1px solid #ececec;
}

.shop-menu{

    display:none;

    position:static !important;

   width:100% !important;
    max-width:none !important;

    margin:12px auto 0 !important;

    padding:0 !important;

    left:auto !important;

    top:auto !important;

    transform:none !important;

    min-width:unset !important;

  

    background:#fafafa;

    border:1px solid #e8e8e8;

    border-radius:12px;

    box-shadow:0 4px 10px rgba(0,0,0,.05);

    opacity:1 !important;

    visibility:visible !important;
}

.shop-menu.show{
    display:block !important;
}

.shop-menu li{
    list-style:none;
    width:100%;
}

.shop-menu li a{

    display:block;

    width:100%;

    text-align:center;

    padding:14px 10px;

    color:#333;

    border-bottom:1px solid #eee;
}

.shop-menu li:last-child a{
    border-bottom:none;
}

 }

/* ==================================================================
   NAV CLOSE BUTTON — only visible in the mobile slide-down menu.
   Hidden entirely on desktop; pops in with a spin when the menu
   opens, and gives a satisfying 90° spin-and-scale on hover/tap.
   (appended only — nothing above this line was changed)
   ================================================================== */

.nav-close-item{

    display:none;
}

.nav-close-btn{

    display:none;
}

@media(max-width:50rem){

    .nav-close-item{

        display:flex;

        justify-content:flex-end;

        width:100%;

        order:-1;
    }

    .nav-close-btn{

        display:flex;

        align-items:center;

        justify-content:center;

        width:2.4rem;

        height:2.4rem;

        border:none;

        border-radius:50%;

        background:#f5f7f6;

        color:#111;

        font-size:1.15rem;

        cursor:pointer;

        transition:background .3s ease, color .3s ease, transform .3s ease;

        transform:rotate(0deg) scale(0);

        opacity:0;
    }

    .nav-menu.active .nav-close-btn{

        animation:navCloseBtnPop .45s cubic-bezier(.22,1,.36,1) .15s forwards;
    }

    .nav-close-btn:hover{

        background:#1f6d52;

        color:#fff;

        transform:rotate(90deg) scale(1.1);
    }

    .nav-close-btn:active{

        transform:rotate(90deg) scale(.9);
    }

    @keyframes navCloseBtnPop{

        from{

            opacity:0;

            transform:rotate(-90deg) scale(.4);
        }

        to{

            opacity:1;

            transform:rotate(0deg) scale(1);
        }
    }
}

/* ==================================================================
   FIX: with "Shop" expanded, the mobile menu's total content was
   taller than the screen, but nothing made it scrollable -- so
   "Contact Us" (and anything below it) was just cut off with no way
   to reach it. Giving the menu panel its own scroll area fixes that
   without changing any layout, icons, or existing behavior.
   (appended only — nothing above this line was changed)
   ================================================================== */

@media(max-width:50rem){

    .nav-menu{

        max-height:calc(100vh - 5.5rem);

        overflow-y:auto;

        -webkit-overflow-scrolling:touch;

        padding-bottom:2.5rem;
    }
}

/* ==================================================================
   NAV LINK ICONS + smaller rem font sizes.
   (appended only — nothing above this line was changed)
   ================================================================== */

.nav-menu a{

    font-size:.95rem;

    display:inline-flex;

    align-items:center;

    gap:.5rem;
}

.nav-link-icon{

    font-size:.85rem;

    color:#1f6d52;
}

.shop-dropdown>a{

    font-size:.95rem;
}

@media(max-width:50rem){

    .nav-menu a{

        font-size:.9rem;

        justify-content:center;
    }

    .shop-dropdown>a{

        font-size:.9rem;

        justify-content:center;
    }

    .shop-menu li a{

        font-size:.85rem;
    }
}

/* ==================================================================
   USER ACCOUNT MENU — icon + dropdown, matches the shop-dropdown
   pattern (hover on desktop). On mobile it becomes click-to-toggle
   (via the small JS block already added in base.html), since touch
   devices have no hover, and the dropdown repositions to stay
   inside the screen instead of overflowing off the right edge.
   (appended only — nothing above this line was changed)
   ================================================================== */

.user-menu{

    position:relative;

    cursor:pointer;
}

.user-dropdown{

    position:absolute;

    top:140%;

    right:0;

    min-width:12rem;

    background:#fff;

    border-radius:.8rem;

    box-shadow:0 .8rem 2rem rgba(0,0,0,.1);

    padding:.6rem 0;

    opacity:0;

    visibility:hidden;

    transform:translateY(.6rem);

    transition:.3s ease;

    z-index:1000;
}

.user-menu:hover .user-dropdown,
.user-menu.show .user-dropdown{

    opacity:1;

    visibility:visible;

    transform:translateY(0);
}

.user-dropdown-name{

    padding:.6rem 1.1rem .7rem;

    font-size:.85rem;

    font-weight:600;

    color:#111;

    border-bottom:1px solid #ececec;

    margin-bottom:.3rem;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}

.user-dropdown a{

    display:flex;

    align-items:center;

    gap:.6rem;

    padding:.6rem 1.1rem;

    font-size:.85rem;

    color:#333;

    text-decoration:none;

    transition:.2s ease;

    white-space:nowrap;
}

.user-dropdown a i{

    color:#1f6d52;

    width:1rem;

    text-align:center;
}

.user-dropdown a:hover{

    background:#f5f7f6;

    color:#1f6d52;
}

@media(max-width:50rem){

    /* icon sits in the compact top-right row on mobile, same as
       search/wishlist/cart/location -- keep it the same small size */

    .user-menu i.fa-circle-user,
    .user-menu > .action-icon i{

        font-size:1.1rem;
    }

    /* the dropdown itself is repositioned so it can't overflow off
       the right edge of a narrow screen */

    .user-dropdown{

        right:-1rem;

        left:auto;

        min-width:11rem;
    }
}

@media(max-width:26rem){

    /* very small phones: keep the panel fully on-screen */

    .user-dropdown{

        right:-2.5rem;
    }
}