/* --- SNEFERU CUISINE: MASTER STYLESHEET v4.0 (GOLD EDITION) --- */

:root {
    --deep-charcoal: #1A1A18;
    --smoky-black: #0F0F0E;
    --warm-dark-brown: #2A1F18;
    --antique-gold: #C9A24D;
    --rich-gold: #D4AF37;
    --muted-brass: #B8963A;
    --roasted-brown: #6B3F1D;
    --grilled-umber: #8A4B2A;
    --honey-beige: #E2C27B;
    --baklava-gold: #D8B56A;
    --hummus-cream: #F1E2C6;
    --warm-ivory: #EFE6D8;
    --mint-green: #5C8A4E;
    --olive-green: #6F7F3A;
    --paprika-red: #9C3B2E;
    --tomato-red: #B23A2B;
    --soft-smoke-gray: #B7B2AA;
    --ash-gray: #8F8C86;
}

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

body {
    background: var(--deep-charcoal) url("bkg.png") center top / cover no-repeat fixed;
    color: var(--warm-ivory);
    font-family: 'Optima', 'Segoe UI', serif;
    line-height: 1.6;
    overflow-x: hidden;
    width: 100%;
}

/* Make the header opaque so background doesn't show through */
header { 
    padding: 15px 5%; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border-bottom: 2px solid var(--antique-gold); 
    background: var(--deep-charcoal); 
    position: sticky; 
    top: 0; 
    z-index: 1000;
    width: 100%;
}

/* Make sure content area is transparent to show background */
#landing-hub,
#shop-display,
.hub-container,
.full-page-content,
.product-grid {
    background: transparent !important;
}

/* Add some spacing/padding to content areas */
.hub-container {
    padding: 60px 5%;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    animation: fadeIn 1s ease;
    min-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Landing hub should take full viewport */
#landing-hub {
    min-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 20px;
}

/* Shop display should take full width */
#shop-display {
    width: 100%;
    min-height: calc(100vh - 80px);
    padding: 40px 5%;
}

/* For product grid pages */
.product-grid {
    padding: 40px 5%;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
}

/* For full page content (about, contact, product details) */
.full-page-content {
    max-width: 1000px;
    margin: 40px auto;
    padding: 40px 20px;
    width: 100%;
    min-height: calc(100vh - 80px);
}

.logo { 
    width: 100px;
    height: 100px;
    background: url("logo.png") center / contain no-repeat;
    border-radius: 50%;
    border: 2px solid var(--antique-gold);
    background-color: var(--deep-charcoal);
    padding: 5px;
    color: var(--rich-gold); 
    font-size: 1.8rem; 
    font-weight: bold; 
    letter-spacing: 4px; 
    text-transform: uppercase; 
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.logo:hover {
    text-shadow: 0 0 10px var(--rich-gold);
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
}

nav#shop-nav { display: flex; gap: 10px; }

/* DARKER NAVIGATION BUTTONS FOR BETTER READABILITY */
nav#shop-nav button { 
    background: var(--deep-charcoal) !important; /* Dark background */
    border: 1px solid var(--roasted-brown) !important; /* Darker border */
    color: var(--hummus-cream) !important; /* Light text */
    padding: 8px 16px; 
    cursor: pointer; 
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.8rem;
    transition: 0.3s;
}

nav#shop-nav button:hover { 
    background: var(--roasted-brown) !important; /* Dark brown on hover */
    color: var(--warm-ivory) !important; /* Light text */
}

.header-actions { display: flex; align-items: center; gap: 15px; }

.auth-btn {
    background: var(--deep-charcoal) !important; /* Dark background */
    border: 1px solid var(--roasted-brown) !important; /* Darker border */
    color: var(--hummus-cream) !important; /* Light text */
    padding: 6px 12px;
    cursor: pointer;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.auth-btn:hover {
    background: var(--roasted-brown) !important;
    color: var(--warm-ivory) !important;
}

.cart-status { 
    background: var(--deep-charcoal) !important; /* Dark background */
    color: var(--hummus-cream) !important; /* Light text */
    border: 1px solid var(--roasted-brown) !important; /* Darker border */
    padding: 8px 15px; 
    border-radius: 30px; 
    cursor: pointer; 
    font-weight: bold;
}

.cart-status:hover {
    background: var(--roasted-brown) !important;
    color: var(--warm-ivory) !important;
}

/* --- DARKER DROPDOWN BUTTONS --- */
.dropbtn {
    background: var(--deep-charcoal) !important;
    border: 1px solid var(--roasted-brown) !important;
    color: var(--hummus-cream) !important;
    padding: 8px 16px;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: 0.3s;
    border-radius: 4px;
}

.dropbtn:hover {
    background: var(--roasted-brown) !important;
    color: var(--warm-ivory) !important;
}

/* --- DARKER FIXED BUTTONS (About & Contact) --- */
.nav-fixed-btn {
    background: var(--deep-charcoal) !important;
    border: 1px solid var(--roasted-brown) !important;
    color: var(--hummus-cream) !important;
    padding: 8px 16px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.8rem;
    transition: 0.3s;
    white-space: nowrap;
    border-radius: 4px;
}

.nav-fixed-btn:hover {
    background: var(--roasted-brown) !important;
    color: var(--warm-ivory) !important;
}

/* --- 2. LANDING HUB (THE GATES) --- */

.hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 50px;
    width: 100%;
    max-width: 1200px;
}

.hub-card {
    background: linear-gradient(145deg, rgba(42, 31, 24, 0.95), rgba(26, 26, 24, 0.95)); /* Darker, more opaque */
    border: 2px solid var(--roasted-brown); /* Darker border */
    padding: 60px 20px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(2px);
    width: 100%;
}

.hub-card h2 {
    color: var(--baklava-gold); /* Slightly lighter gold for better contrast */
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 10px;
    font-size: 1.5rem;
}

.hub-card span {
    font-size: 0.7rem;
    color: var(--soft-smoke-gray);
    opacity: 0.9; /* More visible */
    text-transform: uppercase;
    letter-spacing: 2px;
}

.hub-card:hover {
    border-color: var(--muted-brass); /* Darker gold on hover */
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5); /* Darker shadow */
    background: linear-gradient(145deg, rgba(42, 31, 24, 0.98), rgba(26, 26, 24, 0.98));
}

/* Shimmer Effect - make it subtler */
.hub-card::after {
    content: "";
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: linear-gradient(45deg, transparent, rgba(184, 150, 58, 0.05), transparent); /* Muted brass with low opacity */
    transform: rotate(45deg);
    transition: 0.6s;
}
.hub-card:hover::after { left: 100%; }

/* --- 3. PRODUCT GRID & CARDS --- */

.p-card { 
    background: rgba(15, 15, 14, 0.95); /* More opaque */
    border: 1px solid var(--roasted-brown); /* Darker border */
    cursor: pointer; 
    transition: 0.3s;
    backdrop-filter: blur(2px);
    width: 100%;
}

.p-card:hover { 
    transform: translateY(-5px); 
    border-color: var(--muted-brass); /* Darker gold on hover */
    background: rgba(15, 15, 14, 0.98); /* Even more opaque on hover */
}

.p-card img { 
    width: 100%; 
    height: 250px; 
    object-fit: cover; 
    border-bottom: 1px solid var(--roasted-brown); /* Darker border */
}

.p-card h3 { 
    color: var(--baklava-gold); /* Lighter gold for better contrast */
    padding: 15px 15px 5px; 
    text-transform: uppercase; 
}

.p-card p { 
    padding: 0 15px 15px; 
    font-weight: bold; 
    font-size: 1.2rem; 
    color: var(--honey-beige);
}

.view-hint { 
    text-align: center; 
    font-size: 0.7rem; 
    padding: 10px; 
    color: var(--baklava-gold); 
    background: rgba(26, 26, 24, 0.95); /* More opaque */
    text-transform: uppercase; 
    letter-spacing: 2px; 
    backdrop-filter: blur(2px);
}

/* --- 4. MODALS (CENTERED) --- */

.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(15, 15, 14, 0.98); /* More opaque */
    display: none;
    justify-content: center; 
    align-items: center; 
    z-index: 9999;
    backdrop-filter: blur(10px);
}

.cart-popup {
    background: var(--deep-charcoal);
    border: 2px solid var(--roasted-brown); /* Darker border */
    width: 90%;
    max-width: 450px;
    padding: 30px;
    box-shadow: 0 0 50px rgba(0,0,0,1);
    animation: scaleUp 0.3s ease;
}

@keyframes scaleUp {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* --- 5. PRODUCT DETAILS --- */

.page-header { 
    color: var(--baklava-gold); /* Lighter gold for better contrast */
    font-size: 2.5rem; 
    margin-bottom: 30px; 
    text-transform: uppercase; 
    letter-spacing: 4px; 
    text-align: center;
}

.product-layout { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 40px; 
    background: rgba(42, 31, 24, 0.95); /* More opaque */
    padding: 30px; 
    border: 1px solid var(--roasted-brown); /* Darker border */
    backdrop-filter: blur(2px);
    border-radius: 8px;
    width: 100%;
}

.product-img-box img { 
    width: 100%; 
    border: 1px solid var(--roasted-brown); /* Darker border */
    border-radius: 4px;
}

.price-tag { 
    font-size: 2rem; 
    color: var(--baklava-gold); /* Lighter gold */
    margin-bottom: 15px; 
    font-weight: bold; 
}

.buy-btn { 
    width: 100%; 
    background: var(--roasted-brown) !important; /* Dark brown instead of green */
    color: var(--warm-ivory) !important; 
    padding: 15px; 
    border: none; 
    font-weight: bold; 
    cursor: pointer; 
    text-transform: uppercase; 
    border-radius: 4px;
}

.buy-btn:hover { 
    background: var(--grilled-umber) !important; /* Slightly lighter brown on hover */
    color: var(--warm-ivory) !important; 
}

.back-link { 
    background: var(--deep-charcoal) !important; /* Dark background */
    border: 1px solid var(--roasted-brown) !important; /* Darker border */
    color: var(--hummus-cream) !important; /* Light text */
    padding: 8px 15px; 
    cursor: pointer; 
    margin-bottom: 20px; 
    border-radius: 4px;
}

.back-link:hover {
    background: var(--roasted-brown) !important;
    color: var(--warm-ivory) !important;
}

/* --- 6. FORM ELEMENTS --- */

input, textarea, select {
    width: 100%; 
    padding: 12px; 
    margin-bottom: 15px; 
    background: var(--smoky-black); 
    border: 1px solid var(--roasted-brown); /* Darker border */
    color: var(--warm-ivory);
    font-family: inherit;
    border-radius: 4px;
}

/* --- DARKER ADMIN PRODUCT LIST ITEMS --- */

/* Admin list items for products/pages */
.list-item {
    background: rgba(15, 15, 14, 0.9) !important; /* Dark smoky black with transparency */
    border: 1px solid var(--roasted-brown) !important; /* Dark brown border */
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.2s;
    border-radius: 4px;
    color: var(--hummus-cream) !important; /* Light cream text */
}

.list-item:hover {
    background: rgba(26, 26, 24, 0.95) !important; /* Slightly lighter on hover */
    border-color: var(--grilled-umber) !important; /* Lighter brown on hover */
}

.list-item span {
    color: var(--hummus-cream) !important; /* Light cream text */
    font-weight: bold;
    cursor: pointer;
    flex-grow: 1;
}

/* Admin item rows in product lists */
.admin-item-row {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    background: rgba(15, 15, 14, 0.9) !important; /* Dark smoky black */
    border: 1px solid var(--roasted-brown) !important; /* Dark brown border */
    padding: 12px 15px;
    margin-bottom: 8px; 
    border-left: 3px solid var(--roasted-brown) !important; /* Dark brown accent */
    border-radius: 4px;
    color: var(--hummus-cream) !important; /* Light text */
}

.admin-item-row:hover {
    background: rgba(26, 26, 24, 0.95) !important; /* Slightly lighter on hover */
    border-color: var(--grilled-umber) !important;
    border-left-color: var(--grilled-umber) !important;
}

.admin-item-row span {
    color: var(--hummus-cream) !important; /* Light text */
    font-weight: bold;
}

.btn-del-text { 
    background: var(--paprika-red) !important;
    color: white !important;
    border: none !important;
    padding: 5px 10px; 
    cursor: pointer; 
    font-size: 0.7rem; 
    border-radius: 2px;
}

.btn-del-text:hover {
    background: var(--tomato-red) !important;
}

/* --- 7. RESPONSIVENESS --- */

@media (max-width: 768px) {
    header { flex-direction: column; gap: 15px; }
    nav#shop-nav { flex-wrap: wrap; justify-content: center; }
    .product-layout { grid-template-columns: 1fr; }
    .page-header { font-size: 1.8rem; }
    .logo {
        width: 80px;
        height: 80px;
    }
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* --- DARKER HOME BUTTON --- */
.nav-home-btn {
    background: var(--roasted-brown) !important; /* Dark brown */
    color: var(--warm-ivory) !important;
    border: 1px solid var(--roasted-brown) !important;
    padding: 8px 16px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.8rem;
    transition: 0.3s;
    border-radius: 4px;
}

.nav-home-btn:hover {
    background: var(--grilled-umber) !important; /* Slightly lighter brown */
    color: var(--warm-ivory) !important;
}

/* --- FIX FOR CONTACT US BUTTONS --- */

.contact-stack { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 20px; 
    margin-top: 40px; 
}

.royal-contact-btn {
    display: block; 
    width: 100%; 
    max-width: 500px; 
    padding: 20px; 
    background: rgba(26, 26, 24, 0.95) !important; /* More opaque */
    color: var(--baklava-gold) !important; /* Lighter gold */
    border: 2px solid var(--roasted-brown) !important; /* Darker border */
    text-decoration: none; 
    font-size: 1.2rem; 
    font-weight: bold; 
    text-transform: uppercase; 
    letter-spacing: 3px; 
    text-align: center; 
    transition: 0.3s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5); /* Darker shadow */
    backdrop-filter: blur(2px);
    border-radius: 8px;
}

.royal-contact-btn:hover { 
    background: var(--roasted-brown) !important; /* Dark brown */
    color: var(--warm-ivory) !important; 
    transform: scale(1.02); 
    box-shadow: 0 0 20px rgba(106, 63, 29, 0.4); /* Brown shadow */
}

.about-text-body { 
    font-size: 1.2rem; 
    line-height: 1.8; 
    color: var(--hummus-cream);
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    background: rgba(26, 26, 24, 0.95); /* More opaque */
    padding: 30px;
    border-radius: 8px;
    backdrop-filter: blur(2px);
}

/* --- ADMIN DASHBOARD REPAIR --- */

.admin-grid { 
    display: grid; 
    grid-template-columns: 280px 1fr; 
    min-height: 100vh; 
    background: rgba(26, 26, 24, 0.8) !important; /* Dark charcoal background */
}

/* Admin sidebar */
.sidebar { 
    background: rgba(15, 15, 14, 0.95) !important; /* Dark with slight transparency */
    border-right: 2px solid var(--roasted-brown) !important;
    padding: 25px; 
}

.sidebar h2 { 
    color: var(--baklava-gold) !important; /* Lighter gold */
    margin-bottom: 20px; 
    font-size: 1.2rem; 
    text-transform: uppercase; 
}

/* Admin sidebar category list items */
#cat-list .list-item {
    background: rgba(15, 15, 14, 0.9) !important; /* Dark smoky black */
    border: 1px solid var(--roasted-brown) !important;
    margin-bottom: 8px;
    padding: 10px 12px;
}

#cat-list .list-item:hover {
    background: rgba(26, 26, 24, 0.95) !important;
    border-color: var(--grilled-umber) !important;
}

/* Product list in admin editor */
#product-list .admin-item-row {
    background: rgba(15, 15, 14, 0.9) !important;
    border: 1px solid var(--roasted-brown) !important;
    margin-bottom: 10px;
}

#product-list .admin-item-row:hover {
    background: rgba(26, 26, 24, 0.95) !important;
    border-color: var(--grilled-umber) !important;
}

/* Contact list items in admin */
#contact-list .admin-item-row {
    background: rgba(15, 15, 14, 0.9) !important;
    border: 1px solid var(--roasted-brown) !important;
}

#contact-list .admin-item-row:hover {
    background: rgba(26, 26, 24, 0.95) !important;
    border-color: var(--grilled-umber) !important;
}

/* Active page title in admin */
#active-title {
    color: var(--baklava-gold) !important; /* Lighter gold for title */
    border-bottom: 2px solid var(--roasted-brown) !important;
    padding-bottom: 10px;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Admin card backgrounds */
.admin-card {
    background: rgba(15, 15, 14, 0.9) !important; /* Dark smoky black */
    border: 1px solid var(--roasted-brown) !important;
    padding: 25px;
    margin: 20px;
    border-radius: 4px;
    backdrop-filter: blur(2px);
}

/* Add category button in admin */
#cat-list + button, 
button[onclick="addCategory()"] {
    width: 100%;
    background: var(--roasted-brown) !important; /* Dark brown */
    color: var(--warm-ivory) !important;
    padding: 12px;
    border: none;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    margin-top: 15px;
    display: block;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    border-radius: 4px;
}

#cat-list + button:hover, 
button[onclick="addCategory()"]:hover {
    background: var(--grilled-umber) !important; /* Lighter brown */
}

/* Admin form inputs */
#dashboard textarea, 
#dashboard input,
#dashboard select {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    background: rgba(15, 15, 14, 0.9) !important; /* Dark background */
    border: 1px solid var(--roasted-brown) !important;
    color: var(--warm-ivory) !important;
    font-family: inherit;
    border-radius: 4px;
}

/* Screen centering for the Admin Login */
#lock-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 80vh;
}

/* Admin buttons */
.admin-card button {
    background: var(--roasted-brown) !important;
    color: var(--warm-ivory) !important;
    padding: 10px 20px;
    border: none;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    margin-top: 10px;
    border-radius: 4px;
}

.admin-card button:hover {
    background: var(--grilled-umber) !important;
}

/* Save about button */
button[onclick="saveAbout()"] {
    background: var(--roasted-brown) !important;
    color: var(--warm-ivory) !important;
}

button[onclick="saveAbout()"]:hover {
    background: var(--grilled-umber) !important;
}

/* Add contact button */
button[onclick="addContact()"] {
    background: var(--roasted-brown) !important;
    color: var(--warm-ivory) !important;
}

button[onclick="addContact()"]:hover {
    background: var(--grilled-umber) !important;
}

/* Save product button */
button[onclick="saveProduct()"] {
    background: var(--roasted-brown) !important;
    color: var(--warm-ivory) !important;
}

button[onclick="saveProduct()"]:hover {
    background: var(--grilled-umber) !important;
}

/* --- DARKER DROPDOWN CONTENT --- */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--deep-charcoal);
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.7); /* Darker shadow */
    border: 1px solid var(--roasted-brown); /* Darker border */
    z-index: 1001;
    top: 100%;
    border-radius: 4px;
}

.dropdown-content a {
    color: var(--hummus-cream); /* Light text */
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 0.85rem;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(106, 63, 29, 0.3); /* Darker border */
    transition: 0.3s;
}

.dropdown-content a:last-child {
    border-bottom: none;
}

.dropdown-content a:hover {
    background-color: var(--roasted-brown); /* Dark brown */
    color: var(--warm-ivory); /* Light text */
    border-radius: 2px;
}

.nav-dropdown:hover .dropdown-content {
    display: block;
}

.nav-dropdown:hover .dropbtn {
    background: var(--roasted-brown) !important; /* Dark brown */
    color: var(--warm-ivory) !important; /* Light text */
}

/* --- V5.2 NAVIGATION & DROPDOWN REPAIR --- */

#shop-nav {
    display: flex;
    gap: 12px;
    align-items: center;
}

.nav-dropdown {
    position: relative;
    display: inline-block;
}

/* Updated dropdown content */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--deep-charcoal);
    min-width: 180px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.7); /* Darker shadow */
    border: 1px solid var(--roasted-brown); /* Darker border */
    z-index: 1001;
    top: 100%;
    left: 0;
    border-radius: 4px;
}

.dropdown-content a {
    color: var(--hummus-cream); /* Light text */
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(106, 63, 29, 0.3); /* Darker border */
}

.dropdown-content a:last-child {
    border-bottom: none;
}

.dropdown-content a:hover {
    background-color: var(--roasted-brown); /* Dark brown */
    color: var(--warm-ivory); /* Light text */
    border-radius: 2px;
}

.nav-dropdown:hover .dropdown-content {
    display: block;
}

.nav-dropdown:hover .dropbtn {
    background: var(--roasted-brown) !important; /* Dark brown */
    color: var(--warm-ivory) !important; /* Light text */
}

@media (max-width: 768px) {
    #shop-nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
    .dropbtn, .nav-fixed-btn {
        padding: 6px 10px;
        font-size: 0.7rem;
    }
    .admin-grid { 
        grid-template-columns: 1fr; 
    }
    .sidebar { 
        border-right: none; 
        border-bottom: 2px solid var(--roasted-brown) !important;
    }
}

.hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    padding: 40px 0;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.hub-card {
    background: linear-gradient(145deg, rgba(42, 31, 24, 0.95), rgba(26, 26, 24, 0.95));
    border: 2px solid var(--roasted-brown); /* Darker border */
    padding: 50px 20px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s, border-color 0.3s;
    backdrop-filter: blur(2px);
    border-radius: 8px;
    width: 100%;
}

.hub-card:hover {
    transform: translateY(-10px);
    border-color: var(--muted-brass); /* Darker gold */
    background: linear-gradient(145deg, rgba(42, 31, 24, 0.98), rgba(26, 26, 24, 0.98));
}

.hub-card h2 {
    font-size: 1.8rem;
    color: var(--baklava-gold); /* Lighter gold */
    margin-bottom: 10px;
    letter-spacing: 3px;
}

.hub-card span {
    color: var(--soft-smoke-gray);
    font-size: 0.9rem;
    text-transform: uppercase;
}

.weight-dropdown {
    background: var(--smoky-black);
    color: var(--baklava-gold); /* Lighter gold */
    border: 1px solid var(--roasted-brown); /* Darker border */
    padding: 10px;
    width: 100%;
    max-width: 200px;
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 4px;
}

.weight-dropdown:focus {
    outline: none;
    border-color: var(--muted-brass); /* Darker gold */
}

input[type=number].qty-text-input {
    background: var(--smoky-black);
    color: var(--baklava-gold); /* Lighter gold */
    border: 1px solid var(--roasted-brown); /* Darker border */
    padding: 10px;
    font-size: 1.2rem;
    text-align: center;
    border-radius: 4px;
}

/* Removes the ugly arrows on some browsers */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}