/* Body and general styles */
body {
    background-color: #F5F5F5; /* Light neutral background */
    color: #333333; /* Dark gray text */
    font-family: 'Roboto', sans-serif; /* Modern font */
}

/* Header styles */
.header {
    background-color: #333333; /* Dark gray header */
}
.header .nav-item a {
    color: #FFFFFF; /* White text for navigation */
}
.header .nav-item a:hover {
    color: #FF4500; /* Orange hover effect */
}

/* Main content and headings */
h1, h2, h3 {
    color: #FF4500; /* Orange for headings */
}
.category-products .product-item {
    background-color: #FFFFFF; /* White product card background */
    border: 1px solid #E0E0E0; /* Light border for separation */
    padding: 15px;
    margin-bottom: 20px;
}

/* Buttons and call-to-actions */
.btn-primary {
    background-color: #FF4500; /* Orange buttons */
    color: #FFFFFF;
    border: none;
}
.btn-primary:hover {
    background-color: #CC3700; /* Slightly darker orange on hover */
    color: #FFFFFF;
}

/* Product prices and links */
.product-item .price {
    color: #333333; /* Dark gray price */
}
.product-item a:hover {
    color: #FF4500; /* Orange hover for product links */
}

/* Header hover with maximum specificity */
body header#main-header .header-nav .nav-item > a:hover {
    color: #FF4500 !important;
}

/* Footer hover with maximum specificity */
body footer#footer .footer-container a:hover {
    color: #FF4500 !important;
}

/* Footer (if applicable, adjust based on your theme) */
.footer-container {
    background-color: #333333;
    color: #FFFFFF;
}
.footer-container a:hover {
    color: #FF4500;
}

/* Header hover */
html body #header .header-nav .nav-item > a:hover,
html body #header .header-top a:hover {
    color: #FF4500 !important;
}

/* Footer hover */
html body .footer-container a:hover {
    color: #FF4500 !important;
}

.product-title a:hover,
.product-miniature .product-title a:hover,
.block-contact a:hover,
.block-social a:hover,
.footer-container a:hover,
.main-content a:hover,
a:hover {
  color: #FF6600 !important;
}


a:hover,
.main-content a:hover,
.product-item a:hover,
.navbar a:hover,
.footer-container a:hover,
.block-contact a:hover,
.block-social a:hover {
  color: #FF6600 !important; /* TM-style orange */
}

/* Increase white space and responsiveness */
.container {
    padding: 20px;
}
@media (max-width: 768px) {
    .product-item {
        margin-bottom: 10px;
    }
}