/*========= Media ===========*/

@media screen and (max-width: 768px) {
    
.insta-handle:last-of-type {
    display:none;
}
.insta-handle:first-of-type {
    top: 20px;
    font-size:15px;
}
.insta-img:last-of-type{
    display:none;
}
/* 1. Show the hamburger button layout */
.hamburger-btn {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: .7rem;
    width: 24px;
    height: 18px;
    cursor: pointer;
    z-index: 1001; /* Keeps the icon visible on top of menu overlay */
}

   /* 2. Shape the lines inside the hamburger button */
.hamburger-btn .bar {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--navy); /* Match your site primary color */
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

    /* 3. Transform desktop links container into an iOS Slide-Out Drawer */
.nav-menu {
    position: fixed;
    top: 0;
    right: -100%; /* Hides menu off-screen to the right */
    width: 80%; /* Classic iOS side-sheet scale width */
    max-width: 300px;
    height: 100vh;
    background-color: var(--crisp-white);
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    flex-direction: column;
    justify-content: flex-start; /* Aligns menu links from top down */
    align-items: flex-start; /* Left aligns link items inside drawer */
    padding: 100px 30px; /* Space down below the navbar zone */
    gap: 25px;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    /* 4. Target link items inside the mobile drawer */
.nav-menu a {
    color: var(--navy); /* Use purple here if you want text accent shift */
    width: 100%;
    display: block;
    padding: 10px 0;
}

    /* Remove the hover underline animation behavior on touchscreens */
    .nav-menu a::after {
        display: none;
    }

    /* 5. SLIDE INTERACTION: Activates menu container drawer when checkbox is checked */
    .menu-toggle:checked ~ .nav-menu {
        right: 0;
    }

    /* 6. ICON ANIMATION: Forms an 'X' close graphic when checkbox is active */
    .menu-toggle:checked ~ .hamburger-btn .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .menu-toggle:checked ~ .hamburger-btn .bar:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle:checked ~ .hamburger-btn .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}



@media (min-width: 250px) and (max-width:850px){
   .shop-gallery{
        display:flex;
        flex-direction: column;
   }
   .gallery-item{
        align-items:center;
        margin:15px;
        border: 1px var(--butter-yellow) solid;
        background: var(--crisp-white);
        border-radius:5px;
}
    .shop-gallery:first-child{
        border-radius:100%;
    }
    .insta-img{
        white-space:inherit;
    }
    .insta-title{
        white-space: inherit;
    }
    .footer{
        margin:5%;       
    }
}