/* ===== NEW HEADER & MEGA MENU ===== */
header.new-header{position:fixed;top:0;left:0;width:100%;padding:15px 6%;display:flex;justify-content:space-between;align-items:center;background:rgba(250,247,242,.95);backdrop-filter:blur(10px);z-index:1000;border-bottom:1px solid rgba(58,47,38,.08);transition:padding .3s}
header.new-header.scrolled{padding:10px 6%;background:rgba(250,247,242,.98)}
.logo-img{height:45px;width:auto;display:block}
nav.main-nav ul{display:flex;list-style:none;gap:28px;align-items:center;margin:0;padding:0}
nav.main-nav > ul > li{position:relative}
nav.main-nav a{font-family:'Jost',sans-serif;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:#5a4a3c;text-decoration:none;transition:color .3s;padding:10px 0;display:block}
nav.main-nav a:hover{color:#8a6d3b}

/* Mega Menu Base */
.dropdown{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);background:#fff;box-shadow:0 20px 40px -10px rgba(0,0,0,.15);opacity:0;visibility:hidden;transition:all .3s;z-index:1001;border-top:3px solid #8a6d3b}
nav.main-nav li:hover > .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

/* Products Mega Menu (Horizontal) */
.mega-menu{width:580px;padding:30px 40px;display:grid;grid-template-columns:1fr 1fr;gap:15px}
.mega-menu a{text-transform:none;font-size:.95rem;color:#2b2018;padding:8px 10px;transition:background .2s;display:flex;align-items:center;gap:10px}
.mega-menu a:hover{background:#f5efe6;color:#8a6d3b}
.mega-menu a::before{content:'◆';font-size:.6rem;color:#b8935a}

/* Washbasins Nested Menu (Vertical) */
.sub-dropdown-container{position:relative}
.sub-dropdown-container > span{display:block;padding:8px 10px;font-size:.95rem;color:#2b2018;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background .2s}
.sub-dropdown-container:hover > span{background:#f5efe6;color:#8a6d3b}
.sub-dropdown-container > span::before{content:'◆';font-size:.6rem;color:#b8935a;margin-right:10px}
.sub-dropdown-container > span::after{content:'▸';color:#b8935a}
.nested-dropdown{position:absolute;top:-10px;left:100%;background:#fff;box-shadow:0 20px 40px -10px rgba(0,0,0,.15);width:220px;padding:20px;opacity:0;visibility:hidden;transition:all .3s;transform:translateX(5px);border-left:2px solid #8a6d3b;max-height:400px;overflow-y:auto}
.sub-dropdown-container:hover .nested-dropdown{opacity:1;visibility:visible;transform:translateX(0)}
.nested-dropdown a{text-transform:none;font-size:.9rem;padding:6px 10px}

/* Mobile Adjustments */
@media(max-width:980px){
  nav.main-nav ul{display:none}
  .menu-toggle{display:flex;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:8px}
  .menu-toggle span{width:26px;height:2px;background:#2b2018;transition:.3s}
  nav.main-nav ul.open{display:flex;flex-direction:column;position:absolute;top:100%;left:0;width:100%;background:#fff;padding:20px;box-shadow:0 20px 40px rgba(0,0,0,.1);gap:0}
  nav.main-nav ul.open > li{width:100%}
  .dropdown{position:relative;top:0;left:0;transform:none;box-shadow:none;border:none;padding:0 20px;display:none;opacity:1;visibility:visible}
  nav.main-nav li:hover > .dropdown{display:block}
  .mega-menu{width:100%;grid-template-columns:1fr;padding:10px 0}
  .nested-dropdown{position:relative;top:0;left:0;box-shadow:none;border:none;display:none;opacity:1;visibility:visible;transform:none;padding:10px 20px}
  .sub-dropdown-container:hover .nested-dropdown{display:block}
  .logo-img{height:35px}
}

/* Fix for Menu Overlap */
header.new-header { z-index: 9999 !important; }
.dropdown { z-index: 10000 !important; }

/* Force Logo to Blend */
.logo-img {
  height: 45px;
  width: auto;
  display: block;
  /* If your logo has a white box background, uncomment the line below */
  /* mix-blend-mode: multiply; */
}

/* Fix for WhatsApp Icon and Footer */
.whatsapp-float { width: 62px !important; height: 62px !important; max-width: 62px !important; max-height: 62px !important; }
.whatsapp-float svg { width: 32px !important; height: 32px !important; }
.footer-brand img { height: 50px !important; width: auto !important; }

/* Restore Buttons */
.btn { display: inline-block; padding: 16px 38px; font-family: 'Jost', sans-serif; font-size: .78rem; letter-spacing: .26em; text-transform: uppercase; border: none; cursor: pointer; transition: all .4s; text-align: center; text-decoration: none; }
.btn-gold { background: #8a6d3b !important; color: #fdfaf6 !important; }
.btn-gold:hover { background: #b8935a !important; color: #2b2018 !important; letter-spacing: .32em; }
.btn-outline { background: transparent !important; color: #2b2018 !important; border: 1px solid #2b2018 !important; }
.btn-outline:hover { background: #2b2018 !important; color: #f5efe6 !important; letter-spacing: .32em; }
.btn-primary { background: #2b2018 !important; color: #f5efe6 !important; }
.btn-primary:hover { background: #8a6d3b !important; letter-spacing: .32em; }

/* Restore Footer Grid */
.footer-top { padding: 80px 6% 50px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 50px; max-width: 1300px; margin: 0 auto; }
.footer-brand p { color: rgba(245,239,230,.6); max-width: 340px; margin-bottom: 24px; line-height: 1.8; }
.footer-socials { display: flex; gap: 12px; }
.footer-socials a { width: 40px; height: 40px; border: 1px solid rgba(184,147,90,.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(245,239,230,.7); font-size: .75rem; font-weight: 500; transition: all .3s; }
.footer-socials a:hover { background: #8a6d3b; border-color: #8a6d3b; color: #fff; transform: translateY(-3px); }
.footer-col h4 { color: #fdfaf6; font-family: 'Jost',sans-serif; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; margin-bottom: 26px; }
.footer-col ul { list-style: none; padding: 0; }
.footer-col li { margin-bottom: 14px; }
.footer-col a { color: rgba(245,239,230,.6); transition: color .3s,padding-left .3s; text-decoration: none; }
.footer-col a:hover { color: #b8935a; padding-left: 6px; }
.footer-bottom { border-top: 1px solid rgba(184,147,90,.15); padding: 30px 6%; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; max-width: 1300px; margin: 0 auto; font-size: .8rem; letter-spacing: .08em; }
.footer-bottom span { color: #8a6d3b; }
.footer-bottom .legal { display: flex; gap: 26px; }
.footer-bottom .legal a { color: rgba(245,239,230,.5); text-decoration: none; }
.footer-bottom .legal a:hover { color: #b8935a; }
@media(max-width:980px){ .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media(max-width:720px){ .footer-top { grid-template-columns: 1fr; gap: 40px; padding: 60px 6% 40px; } .footer-bottom { flex-direction: column; text-align: center; gap: 20px; } }

/* Fix Header Stacking */
header.new-header { z-index: 99999 !important; }
.dropdown { z-index: 100000 !important; }

/* =========================================
   UNIVERSAL FIXES FOR FOOTER, WHATSAPP & LAYOUT
   ========================================= */

/* 1. Fix WhatsApp Icon */
.whatsapp-float { 
  width: 62px !important; 
  height: 62px !important; 
  max-width: 62px !important; 
  max-height: 62px !important; 
  position: fixed; 
  bottom: 30px; 
  right: 30px; 
  z-index: 9999; 
}
.whatsapp-float svg { 
  width: 32px !important; 
  height: 32px !important; 	
  max-width: 32px !important; 
  max-height: 32px !important; 
}

/* 2. Fix Footer Layout */
footer { background: #1e1610; color: rgba(245,239,230,.65); font-size: .9rem; font-weight: 300; }
.footer-top { padding: 80px 6% 50px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 50px; max-width: 1300px; margin: 0 auto; text-align: left; }
.footer-brand img { height: 50px !important; width: auto !important; margin-bottom: 20px; }
.footer-brand p { color: rgba(245,239,230,.6); max-width: 340px; margin-bottom: 24px; line-height: 1.8; }
.footer-socials { display: flex; gap: 12px; }
.footer-socials a { width: 40px; height: 40px; border: 1px solid rgba(184,147,90,.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(245,239,230,.7); font-size: .75rem; font-weight: 500; transition: all .3s; text-decoration: none; }
.footer-socials a:hover { background: #8a6d3b; border-color: #8a6d3b; color: #fff; transform: translateY(-3px); }
.footer-col h4 { color: #fdfaf6; font-family: 'Jost',sans-serif; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; margin-bottom: 26px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 14px; }
.footer-col a { color: rgba(245,239,230,.6); transition: color .3s,padding-left .3s; text-decoration: none; }
.footer-col a:hover { color: #b8935a; padding-left: 6px; }
.footer-bottom { border-top: 1px solid rgba(184,147,90,.15); padding: 30px 6%; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; max-width: 1300px; margin: 0 auto; font-size: .8rem; letter-spacing: .08em; }
.footer-bottom span { color: #8a6d3b; }
.footer-bottom .legal { display: flex; gap: 26px; }
.footer-bottom .legal a { color: rgba(245,239,230,.5); text-decoration: none; }
.footer-bottom .legal a:hover { color: #b8935a; }

/* 3. Fix Buttons Globally */
.btn { display: inline-block !important; padding: 16px 38px !important; font-family: 'Jost', sans-serif !important; font-size: .78rem !important; letter-spacing: .26em !important; text-transform: uppercase !important; border: none !important; cursor: pointer !important; transition: all .4s !important; text-align: center !important; text-decoration: none !important; }
.btn-gold { background: #8a6d3b !important; color: #fdfaf6 !important; }
.btn-gold:hover { background: #b8935a !important; color: #2b2018 !important; }
.btn-outline { background: transparent !important; color: #2b2018 !important; border: 1px solid #2b2018 !important; }
.btn-outline:hover { background: #2b2018 !important; color: #f5efe6 !important; }

/* 4. Fix Footer Mobile Layout */
@media(max-width:980px){ .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media(max-width:720px){ .footer-top { grid-template-columns: 1fr; gap: 40px; padding: 60px 6% 40px; } .footer-bottom { flex-direction: column; text-align: center; gap: 20px; } }