/* Global Redesign Overrides */
body {
    background-color: var(--creme);
}

header {
    background-color: rgba(250, 248, 245, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(38, 77, 55, 0.05);
    /* Lighter shadow */
}

nav a {
    color: var(--vert-principal);
}

nav a::after {
    background: var(--vert-principal);
}

.cart-icon {
    fill: var(--vert-principal);
}

.menu-toggle span {
    background: var(--vert-principal);
}

/* Filter to turn white logo to dark green #264D37 */
.logo img {
    filter: brightness(0) saturate(100%) invert(23%) sepia(19%) saturate(1478%) hue-rotate(94deg) brightness(96%) contrast(92%);
}

.hero {
    background: var(--creme);
    /* Remove gradient */
}

/* Ensure Hero Text is Green if not already */
.hero h2 {
    color: var(--vert-principal);
}

footer {
    background: var(--creme);
    color: var(--vert-principal);
    border-top: 1px solid rgba(38, 77, 55, 0.1);
}

.footer-section p,
.footer-section a {
    color: var(--vert-principal);
}

.footer-section h3 {
    color: var(--vert-principal);
}

.social-links a {
    border-color: var(--vert-principal);
}

.social-links a:hover {
    background: var(--vert-principal);
}

.social-links a:hover svg {
    fill: var(--creme);
}

.social-links svg {
    fill: var(--vert-principal);
}

.footer-bottom {
    border-top-color: rgba(38, 77, 55, 0.1);
    color: var(--vert-principal);
    opacity: 0.8;
}

/* Adjust highlight cards if needed on full creme */
.highlight-card {
    border-color: var(--vert-principal);
    background: rgba(38, 77, 55, 0.03);
    /* Slight green tint instead of white */
}

.btn-text {
    background: #FFFFFF !important;
    color: var(--vert-principal) !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 1rem 2rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    display: inline-block;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}

.btn-text:hover {
    background: #FFFFFF !important;
    color: var(--vert-principal) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Mobile Menu Override */
@media (max-width: 768px) {

    nav,
    #mainNav {
        background-color: var(--creme) !important;
        /* Force override */
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    }

    nav a,
    #mainNav a {
        color: var(--vert-principal) !important;
        /* Force override */
        font-weight: 500;
    }
}