*{
margin: 0;
padding: 0;
 

}
body{
    background-color:  #0c4751dc;
}
div.main{
width: 400px;
margin: 100px auto 0px auto;
}
h2{
text-align: center;
padding: 20px;
font-family: sans-serif;
}
div.register{
background-color:rgba(0,0,0,0.5);
width: 100%;
border-radius: 10px;
font-size: 18px;
border:1px soid rgba(255,255,255,0.3);
box-shadow: :2px 2px 15px rgba(0,0,0,0.5);
color:#fff;
}
form#register{
margin: 40px;
}
label{
font-family: sans-serif;
font-size: 18px;
font-style: italic;
}
input#name{
width: 300px;
border:1px solid #ddd;
border-radius: 3px;
outline: 0;
padding: 7px;
background-color: #fff;
box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.3);
}
input#submit{
width: 200px;
padding: 7px;
font-size: 16px;
font-family: sans-serif;
font-weight: 600;
border-radius: 3px;
background-color: rgba(255, 0, 0, 0.8);
color: #fff;
cursor: auto;
border: 1px solid rgba(255,255,255,0.3);
box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
margin-bottom: 20px;
}
label,span,h2{
text-shadow: 1px 1px 5px rgba(0,0,0,0.3);
}
/* --- 1. Global Setup --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Crucial for keeping icons & padding inside boxes */
}

body {
    width: 100%;
    overflow-x: hidden; /* Prevents horizontal scrolling on phones */
    font-family: Arial, sans-serif;
}

/* --- 2. Responsive Navbar & Panel --- */
.navbar {
    display: flex;
    flex-wrap: wrap; /* Allows icons/logo to wrap on small screens */
    align-items: center;
    background-color: #0f1111;
    color: white;
    padding: 5px 10px;
}

.nav-search {
    display: flex;
    flex-grow: 1; /* Search bar stretches to fill space */
    margin: 5px 10px;
    min-width: 280px; /* Keeps search usable on mobile */
}

.search-input {
    width: 100%; /* Makes input take full search bar width */
}

.panel {
    display: flex;
    align-items: center;
    overflow-x: auto; /* Allows horizontal swipe for menu items on mobile */
    white-space: nowrap;
    background-color: #232f3e;
    padding: 8px;
}

.panel-ops a {
    margin-right: 15px;
    text-decoration: none;
    color: white;
}

/* --- 3. Hero & Shop Section (The Grid) --- */
.hero-section {
    width: 100%;
    height: 350px;
    background-size: cover;
    background-position: center;
}

.shop-section {
    display: flex;
    flex-wrap: wrap; /* Wraps boxes to new rows */
    justify-content: center;
    gap: 20px;
    padding: 20px;
    background-color: #e3e6e6;
    margin-top: -150px; /* Amazon-style overlap */
}

.box {
    width: calc(25% - 20px); /* 4 boxes per row on desktop */
    min-width: 250px;
    background-color: white;
    padding: 20px;
}

.box-img {
    height: 300px;
    margin-top: 1rem;
    margin-bottom: 1rem;
    background-size: cover; /* Keeps your section images looking sharp */
    background-position: center;
}

/* --- 4. Footer Responsiveness --- */
.foot-panel2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding: 30px 10px;
}

.foot-panel2 ul {
    margin: 10px;
    min-width: 150px;
}

/* --- 5. Breakpoints for Mobile & Tablets --- */

/* For Tablets/Small Laptops */
@media (max-width: 1024px) {
    .box {
        width: calc(50% - 20px); /* 2 boxes per row */
    }
}

/* For Phones */
@media (max-width: 600px) {
    .box {
        width: 100%; /* 1 box per row (Full width) */
    }
    
    .nav-search {
        order: 5; /* Moves search bar below the logo/signin on tiny screens */
        width: 100%;
    }

    .hero-section {
        height: 250px;
    }

    .shop-section {
        margin-top: -50px;
    }
}