/* General Page Look */
body {
    background-color: #1a1a1a; /* Dark Charcoal */
    color: #f5f5f5; /* Off-white text */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* The Orange Header */
header {
    background-color: #d35400; /* Burned Orange */
    padding: 30px 10px;
    text-align: center;
    border-bottom: 4px solid #a04000;
}

/* This handles the logo on every page */
.site-logo {
    border: none !important;
    position: absolute;
    top: 2px;
    left: -20px;
    width: 150px;
    height: auto;
    z-index: 1000;
}

/* This handles your main navigation */
body { font-family: 'Georgia', serif; background: #1a1a1a; color: white; margin: 0; text-align: center; }
header { background: #d35400; padding: 40px; border-bottom: 5px solid #222; }
nav { background: #333; padding: 15px; }
nav a { color: white; margin: 0 20px; text-decoration: none; font-weight: bold; }
nav a:hover { color: #d35400; }

h1, h3 {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

nav { 
    background: #333; 
    padding: 15px; 
    border-bottom: 2px solid #d35400; 
    display: flex;          /* Keeps items in a row */
    justify-content: center; /* Centers the links */
    flex-wrap: wrap;       /* Allows them to move to a new line if the screen is tiny */
}

nav a { 
    color: white; 
    margin: 5px 10px;      /* Reduced margin so they fit better on mobile */
    text-decoration: none; 
    font-weight: bold; 
    font-size: 14px;       /* Set a standard size for mobile readability */
}

/* This makes the container stay inside the phone's walls */
.shop-container {
    background: #1a1a1a;
    width: 100%;           /* Changed from 100vw to 100% */
    margin: 0 auto;       /* Removed the negative margins */
    padding: 40px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* This lets the cards shrink on small screens so they don't overlap */
.product-card { 
    background: #222; 
    border: 2px solid #d35400; 
    padding: 25px; 
    border-radius: 15px; 
    width: 100%;          /* Changed from 250px to 100% */
    max-width: 280px;     /* Keeps them from getting too big on computers */
    position: relative; 
    overflow: hidden; 
    box-sizing: border-box; /* Ensures padding doesn't push the card off-screen */
}

/* Buttons */
.btn {
    background-color: #d35400;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: bold;
    border-radius: 5px;
    margin-top: 10px;
}

.btn:hover {
    background-color: #e67e22;
}

/* Mobile Image Fix */
img {
    max-width: 100%;
    height: auto;
}