:root { 
    --navy: #002347; 
    --burnt-orange: #BE5103; 
    --light-gray: #f4f4f4; 
    --white: #ffffff;
}

body { 
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    margin: 0; padding: 0; line-height: 1.6; 
    color: var(--navy); background-color: var(--white); 
}

/* Orange Script Branding */
.brand-inline { 
    font-family: 'Great Vibes', cursive; 
    color: var(--burnt-orange); 
    font-size: 1.4em; 
    line-height: 0; 
}

/* Navigation */
nav { 
    background: var(--navy); padding: 10px 50px; 
    display: flex; justify-content: space-between; align-items: center; 
    position: sticky; top: 0; z-index: 1000; 
}
.logo-box img { height: 84px; width: auto; display: block; }
.nav-links a { 
    text-decoration: none; color: var(--white); font-weight: bold; 
    margin-left: 30px; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 1px; 
}
.nav-links a:hover { color: var(--burnt-orange); }

/* Global Container */
.container { max-width: 1000px; margin: auto; padding: 0 20px; }

/* Grid System (For Home Page) */
.values-grid { 
    display: grid; grid-template-columns: repeat(2, 1fr); 
    gap: 25px; margin: auto; 
}
.value-card { 
    padding: 40px; background: var(--white); border-radius: 4px; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.05); text-align: center; 
    border-top: 4px solid var(--burnt-orange); 
}
.value-card i { font-size: 2.2rem; color: var(--burnt-orange); margin-bottom: 15px; }

/* Footer & Copyright */
footer { 
    background: var(--navy); color: var(--white); padding: 40px 20px; 
    text-align: center; border-top: 2px solid var(--burnt-orange); 
}
.copyright-text { 
    font-size: 0.9rem; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--white); 
}
.brand-script-footer { 
    font-family: 'Great Vibes', cursive; color: var(--burnt-orange); 
    font-size: 1.6rem; line-height: 1; position: relative; top: 1px; 
}

/* Wholesale Popup */
.wholesale-trigger {
    position: relative; display: inline-block; cursor: pointer;
    color: rgba(255,255,255,0.8); text-decoration: underline dotted var(--burnt-orange);
    font-size: 0.75rem; margin-bottom: 15px; letter-spacing: 1px;
}
.wholesale-popup {
    visibility: hidden; width: 260px; background-color: var(--white);
    color: var(--navy); text-align: left; border-radius: 4px; padding: 15px;
    position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -130px;
    opacity: 0; transition: opacity 0.3s, visibility 0.3s;
    box-shadow: 0 8px 25px rgba(0,0,0,0.4); font-size: 0.45rem; line-height: 1.5;
    border-top: 3px solid var(--burnt-orange); text-transform: none;
}
.wholesale-trigger:hover .wholesale-popup { visibility: visible; opacity: 1; }

/* Buttons */
.btn { 
    display: inline-block; background: var(--burnt-orange); color: white; 
    padding: 15px 40px; text-decoration: none; font-weight: bold; 
    border-radius: 4px; transition: 0.3s; border: none; cursor: pointer;
}
.btn:hover { background: #964002; transform: translateY(-2px); }

/* Mobile Adjustments */
@media (max-width: 768px) {
    nav {
        flex-direction: column; /* Stacks logo and links */
        padding: 15px;
    }
    header { padding: 60px 20px; }
    .nav-links {
        display: flex;
        flex-direction: row; /* Keeps links side-by-side but smaller */
        justify-content: center;
        gap: 15px;
        margin-top: 10px;
        width: 100%;
    }

    .nav-links a {
        font-size: 0.9rem; /* Smaller text to fit the screen width */
    }
}