/* === Header === */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 3rem;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.logo img {
  height: 50px;
}
nav a {
  text-decoration: none;
  color: #333;
  font-weight: 600;
  margin-left: 1.5rem;
  transition: color 0.3s, transform 0.3s;
}
nav a:hover {
  color: #0077ff;
  transform: scale(1.05);
}
nav a.active {
  color: #0077ff;
}

/* === Footer === */
footer {
  text-align: center;
  padding: 2rem;
  background: linear-gradient(90deg, #f8f8f8, #f1f5ff);
  color: #555;
  font-size: 0.9rem;
}
/* --- FIX: Remove Default Blue Underline from Navigation Links --- */

header a,        /* Targets ALL links inside the header */
nav a,           /* Targets links in the navigation (for simplicity) */
.cart-icon-desktop { /* Targets the cart link specifically */
    text-decoration: none !important; /* This is the critical line to remove the underline */
    
    /* OPTIONAL: Ensures link color is consistent (e.g., black or gray) */
    color: #333; 
}

/* Optional: Add a subtle underline back ONLY on hover for user feedback */
header a:hover {
    text-decoration: underline;
    color: #0077ff; /* Change to your brand color */
}
/* --- FIX: Remove Default Blue Underline from ALL Common Link Areas --- */

/* 1. Target Header/Navigation Links */
header a,
nav a,
.cart-icon-desktop { 
    text-decoration: none !important; /* Forces the removal of the underline */
    color: #333; /* Ensures text color is not the default blue */
}

/* 2. Target Footer Links */
footer a {
    text-decoration: none;
    color: #ffffff; /* Use white or a light color suitable for a dark footer */
}

/* 3. Global Link Reset (for pages like contact.html) */
/* This targets links in the main content body unless they are specifically styled */
.main-content a,
.content-section a {
    text-decoration: none;
    color: #0077ff; /* You might want content links to be a primary brand color */
}

/* Optional: Add hover effect back for user feedback */
a:hover {
    text-decoration: underline; /* Adds the line back ONLY on hover */
    color: #005bbb; /* Darker hover color */
}

/* header-fix.css — load after main CSS */
:root { --site-header-height: 64px; }

/* Ensure header sits above page content */
header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  height: var(--site-header-height);
  display: flex;
  align-items: center;
  z-index: 2147483647 !important; /* extremely high to beat other stacking contexts */
  -webkit-transform: translateZ(0); /* try to kick in its own stacking context */
  transform: translateZ(0);
  background: rgba(255,255,255,0.02); /* tweak as needed; keeps transparency */
}

/* Ensure header children (logo, nav, actions) render above other content */
header > * { position: relative; z-index: 2147483647 !important; }

/* Make space so fixed header does not overlap page content */
body { padding-top: var(--site-header-height); }

/* Mobile actions (cart + hamburger) */
.mobile-actions,
.menu-toggle {
  position: relative;
  z-index: 2147483648 !important;
  pointer-events: auto;
}

/* Mobile nav overlay */
#mobile-nav {
  position: fixed !important;
  top: var(--site-header-height);
  left: 0;
  right: 0;
  z-index: 2147483646 !important;
  display: none;
  background: rgba(0,0,0,0.98);
  -webkit-overflow-scrolling: touch;
}

/* Visible state */
#mobile-nav.active {
  display: flex;
  flex-direction: column;
}

/* ensure mobile nav links are visible and highlight active */
#mobile-nav a { color: #fff; padding: 12px 16px; text-decoration: none; }
#mobile-nav a.active, #mobile-nav a[aria-current="page"] { color: #ff5b00; font-weight: 700; }

/* Defensive: try to neutralize low-opacity or filter stacking issues for hero sections.
   This will only apply if those selectors exist; harmless if not. */
.hero, .contact-section, .hero-hero, .page-hero, .checkout-section {
  z-index: 0 !important;
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  will-change: auto !important;
}