/* ===== COMPLETE CSS – ORIGINAL THEME + ALL FEATURES ===== */
* { margin:0; padding:0; box-sizing:border-box; }
:root { --primary:#0a2540; --secondary:#0066c0; --accent:#0066c0; 
--accent-light:#3399ff; --bg-body:#f4f6f9; --bg-white:#ffffff; --text-
dark:#0a2540; --text-muted:#4a5b6b; --text-light:#8a9aa8; --border-
light:#e2e8f0; --shadow-sm:0 2px 8px rgba(10,37,64,0.04); --shadow-md:0 8px 24px
 rgba(10,37,64,0.06); --shadow-lg:0 20px 50px rgba(10,37,64,0.08); --radius:8px;
 --radius-sm:6px; --transition:0.3s ease; }
html { scroll-behavior:smooth; }
body { font-family:'Inter', -apple-system, sans-serif; 
background:var(--bg-body); color:var(--text-dark); line-height:1.6; 
overflow-x:hidden; }
.container { max-width:1240px; margin:0 auto; padding:0 20px; }

/* HEADER */
.site-header { background:var(--bg-white); border-bottom:1px solid 
var(--border-light); box-shadow:var(--shadow-sm); position:sticky; top:0; 
z-index:1000; }
.header-top { padding:10px 0; display:flex; align-items:center; justify-
content:space-between; flex-wrap:wrap; gap:12px; }
.brand { display:flex; align-items:center; gap:10px; text-
decoration:none; flex-shrink:0; }
.brand-logo { width:48px; height:48px; border-radius:50%; 
overflow:hidden; background:var(--bg-white); border:2px solid var(--border-
light); display:flex; align-items:center; justify-content:center; flex-shrink:0;
 }
.brand-logo img { width:100%; height:100%; object-fit:cover; }
.brand-logo .logo-fallback { font-size:24px; color:var(--accent); }
.brand-text h1 { font-size:1.5rem; font-weight:800; color:var(--text-
dark); letter-spacing:-0.02em; }
.brand-text .tagline { font-size:0.7rem; color:var(--text-muted); 
display:block; text-transform:uppercase; letter-spacing:0.04em; }
.header-search { flex:1 1 280px; display:flex; align-items:center; 
background:var(--bg-body); border:1px solid var(--border-light); border-
radius:50px; padding:2px; transition:var(--transition); }
.header-search:focus-within { border-color:var(--accent); box-shadow:0 0
 0 3px rgba(0,102,192,0.1); }
.header-search input { flex:1; border:none; background:transparent; 
padding:8px 16px; font-size:0.9rem; outline:none; color:var(--text-dark); min-
width:80px; }
.header-search input::placeholder { color:var(--text-light); }
.header-search button { background:var(--accent); color:#fff; 
border:none; border-radius:50px; padding:8px 20px; cursor:pointer; font-
size:0.9rem; transition:var(--transition); white-space:nowrap; }
.header-search button:hover { background:var(--primary); }
.header-right { display:flex; align-items:center; gap:12px; flex-
wrap:wrap; }
.header-right .contact-item { display:flex; align-items:center; gap:6px;
 color:var(--text-muted); font-size:0.8rem; text-decoration:none; 
transition:var(--transition); }
.header-right .contact-item i { color:var(--accent); font-size:1rem; }
.header-right .contact-item:hover { color:var(--accent); }
.header-right .icon-btn { font-size:1.2rem; color:var(--text-muted); 
transition:var(--transition); cursor:pointer; background:none; border:none; 
position:relative; padding:4px; }
.header-right .icon-btn:hover { color:var(--accent); }
.header-right .icon-btn .badge { position:absolute; top:-6px; 
right:-6px; background:var(--accent); color:#fff; font-size:0.55rem; font-
weight:700; padding:2px 5px; border-radius:50%; min-width:18px; text-
align:center; line-height:1.2; transition:0.2s; }
.header-right .icon-btn .badge.pop { animation:pop 0.3s ease; }
@keyframes pop { 0% { transform:scale(0.5); } 80% { 
transform:scale(1.3); } 100% { transform:scale(1); } }

.mega-menu { background:var(--bg-white); border-top:1px solid 
var(--border-light); padding:6px 0; overflow-x:auto; -webkit-overflow-
scrolling:touch; }
.mega-menu::-webkit-scrollbar { height:0; }
.mega-menu ul { list-style:none; display:flex; flex-wrap:nowrap; 
gap:2px; justify-content:flex-start; min-width:max-content; }
.mega-menu ul li a { display:block; padding:8px 16px; color:var(--text-
muted); text-decoration:none; font-size:0.75rem; font-weight:600; text-
transform:uppercase; letter-spacing:0.04em; border-radius:var(--radius-sm); 
transition:var(--transition); white-space:nowrap; }
.mega-menu ul li a:hover { background:var(--bg-body); 
color:var(--accent); }

/* BRANDS SLIDER */
.brands-slider { background:var(--bg-white); padding:16px 0; border-
top:1px solid var(--border-light); border-bottom:1px solid var(--border-light); 
overflow:hidden; position:relative; }
.brands-slider::before, .brands-slider::after { content:''; 
position:absolute; top:0; width:60px; height:100%; z-index:2; pointer-
events:none; }
.brands-slider::before { left:0; background:linear-gradient(to right, 
var(--bg-white), transparent); }
.brands-slider::after { right:0; background:linear-gradient(to left, 
var(--bg-white), transparent); }
.brands-track { display:flex; gap:40px; animation:scrollBrands 25s 
linear infinite; width:max-content; }
.brands-track:hover { animation-play-state:paused; }
.brands-track .brand-item { display:flex; align-items:center; gap:10px; 
flex-shrink:0; }
.brands-track .brand-item img { height:30px; object-fit:contain; 
opacity:0.7; transition:var(--transition); }
.brands-track .brand-item:hover img { opacity:1; transform:scale(1.05); 
}
.brands-track .brand-item .brand-name { font-size:0.7rem; font-
weight:600; color:var(--text-muted); white-space:nowrap; }
@keyframes scrollBrands { 0% { transform:translateX(0); } 100% { 
transform:translateX(-50%); } }

/* HERO */
.hero-banner { background:linear-gradient(135deg, #e8edf3, #d5dde8); 
padding:40px 0; margin-bottom:30px; border-radius:0 0 30px 30px; 
position:relative; overflow:hidden; }
.hero-banner .container { display:flex; align-items:center; justify-
content:space-between; flex-wrap:wrap; gap:30px; }
.hero-content { flex:1 1 350px; }
.hero-content .badge { display:inline-block; background:var(--accent); 
color:#fff; padding:4px 14px; border-radius:50px; font-size:0.65rem; font-
weight:600; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:10px;
 }
.hero-content h2 { font-size:2.4rem; font-weight:800; color:var(--text-
dark); line-height:1.1; margin-bottom:10px; }
.hero-content h2 span { color:var(--accent); }
.hero-content p { font-size:1rem; color:var(--text-muted); margin-
bottom:20px; }
.hero-cta { display:flex; flex-wrap:wrap; gap:10px; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 
24px; border-radius:50px; font-weight:600; font-size:0.85rem; text-
decoration:none; transition:var(--transition); border:none; cursor:pointer; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--primary); 
transform:translateY(-2px); }
.btn-outline { background:transparent; border:2px solid var(--accent); 
color:var(--accent); }
.btn-outline:hover { background:var(--accent); color:#fff; }
.hero-image { flex:0 0 250px; display:flex; justify-content:center; }
.hero-image img { max-width:100%; border-radius:12px; box-
shadow:var(--shadow-lg); }

/* CATEGORIES */
.categories-section { padding:20px 0; }
.categories-section .section-title { font-size:1.6rem; font-weight:700; 
margin-bottom:16px; text-align:center; }
.category-grid { display:grid; grid-template-columns:repeat(auto-fit, 
minmax(130px,1fr)); gap:14px; }
.category-item { background:var(--bg-white); border:1px solid 
var(--border-light); border-radius:var(--radius); padding:16px 10px; text-
align:center; transition:var(--transition); cursor:pointer; text-
decoration:none; color:var(--text-dark); }
.category-item:hover { transform:translateY(-5px); box-
shadow:var(--shadow-md); border-color:var(--accent); }
.category-item i { font-size:2rem; color:var(--accent); margin-
bottom:6px; display:block; }
.category-item span { font-weight:600; font-size:0.8rem; }

/* ===== PRODUCTS ===== */
.products-section { padding:30px 0 50px; }
.section-header { display:flex; justify-content:space-between; align-
items:center; flex-wrap:wrap; gap:10px; margin-bottom:20px; }
.section-header h2 { font-size:1.6rem; font-weight:700; }
.section-header .view-all { color:var(--accent); font-weight:600; text-
decoration:none; transition:var(--transition); font-size:0.9rem; }
.section-header .view-all:hover { color:var(--primary); }

.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
@media (max-width: 992px) {
    .product-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 400px) {
    .product-grid { grid-template-columns: 1fr; }
}

.product-card {
    background:var(--bg-white);
    border:1px solid var(--border-light);
    border-radius:var(--radius);
    padding:14px;
    transition: all 0.3s ease;
    display:flex;
    flex-direction:column;
    position:relative;
    text-decoration: none;
    color: inherit;
}
.product-card:hover { transform:translateY(-6px); box-
shadow:var(--shadow-lg); border-color:var(--accent); }
.product-img { height:160px; background:var(--bg-body); display:flex; 
align-items:center; justify-content:center; border-radius:var(--radius-sm); 
margin-bottom:10px; overflow:hidden; }
.product-img img { max-width:100%; max-height:100%; object-fit:contain; 
transition:transform 0.4s ease; }
.product-card:hover .product-img img { transform:scale(1.04); }
.product-title { font-weight:600; font-size:0.9rem; margin-bottom:4px; 
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; 
overflow:hidden; line-height:1.3; }
.product-rating { color:#f5a623; font-size:0.65rem; letter-spacing:1px; 
margin-bottom:4px; }
.product-rating span { color:var(--text-light); font-size:0.6rem; }
.product-price { font-weight:700; font-size:1rem; color:var(--text-
dark); margin-top:auto; }
.product-price .old { font-weight:400; font-size:0.7rem; 
color:var(--text-light); text-decoration:line-through; margin-left:5px; }
.product-price .gst { font-weight:400; font-size:0.6rem; 
color:var(--text-light); }
.product-stock { font-size:0.65rem; font-weight:600; color:#0b7e3d; 
margin-top:3px; }
.product-actions {
    display:flex;
    gap:8px;
    margin-top:10px;
    align-items:center;
}
.product-actions .add-btn {
    flex:1;
    background:var(--accent);
    color:#fff;
    border:none;
    padding:7px 10px;
    border-radius:50px;
    font-weight:600;
    font-size:0.7rem;
    cursor:pointer;
    transition: all 0.3s ease;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
}
.product-actions .add-btn:hover { background:var(--primary); 
transform:scale(1.02); }
.product-actions .wishlist-btn {
    background:transparent;
    border:1px solid var(--border-light);
    border-radius:50%;
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-muted);
    cursor:pointer;
    transition: all 0.3s ease;
    font-size:0.8rem;
    flex-shrink:0;
}
.product-actions .wishlist-btn:hover { background:#fee2e2; border-
color:#e53e3e; }
.product-actions .wishlist-btn.liked { color:#e53e3e; 
background:#fee2e2; border-color:#e53e3e; }

/* INFO */
.info-section { display:grid; grid-template-columns:1fr 1fr; gap:24px; 
margin:30px 0; }
.info-card { background:var(--bg-white); border:1px solid var(--border-
light); border-radius:var(--radius); padding:24px; }
.info-card h3 { font-size:1.1rem; font-weight:700; margin-bottom:12px; 
display:flex; align-items:center; gap:10px; }
.info-card h3 i { color:var(--accent); }
.info-card ul { list-style:none; }
.info-card ul li { display:flex; align-items:center; gap:12px; 
padding:6px 0; border-bottom:1px solid var(--border-light); font-size:0.85rem; }
.info-card ul li:last-child { border-bottom:none; }
.info-card ul li i { width:20px; color:var(--accent); text-align:center;
 font-size:0.9rem; }

/* ENQUIRY */
.enquiry-section { background:var(--bg-white); border:1px solid 
var(--border-light); border-radius:var(--radius); padding:30px; margin:30px 0; }
.enquiry-section h2 { font-size:1.5rem; font-weight:700; margin-
bottom:6px; }
.enquiry-section h2 i { color:var(--accent); }
.enquiry-section p { color:var(--text-muted); margin-bottom:20px; }
.msg { padding:10px 16px; border-radius:var(--radius-sm); margin-
bottom:16px; display:flex; align-items:center; gap:10px; font-weight:500; font-
size:0.9rem; }
.msg.success { background:#d1fae5; color:#0b7e3d; }
.msg.error { background:#fee2e2; color:#e53e3e; }
.msg.warning { background:#fef3c7; color:#d69e2e; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-group { display:flex; flex-direction:column; gap:4px; }
.form-group label { font-weight:600; font-size:0.8rem; color:var(--text-
dark); }
.form-group label .required { color:#e53e3e; }
.form-group input, .form-group select { padding:8px 12px; border:1px 
solid var(--border-light); border-radius:var(--radius-sm); font-size:0.85rem; 
background:var(--bg-body); transition:var(--transition); outline:none; font-
family:inherit; width:100%; }
.form-group input:focus, .form-group select:focus { border-
color:var(--accent); box-shadow:0 0 0 3px rgba(0,102,192,0.1); 
background:var(--bg-white); }
.btn-submit { background:var(--accent); color:#fff; border:none; 
padding:12px 24px; border-radius:50px; font-weight:600; font-size:0.9rem; 
cursor:pointer; transition:var(--transition); grid-column:1 / -1; justify-
self:start; }
.btn-submit:hover { background:var(--primary); }

/* ===== FOOTER ===== */
.site-footer { background:var(--primary); color:rgba(255,255,255,0.7); 
padding:24px 0; margin-top:30px; }
.footer-inner { display:flex; justify-content:space-between; align-
items:center; flex-wrap:wrap; gap:12px; }
.footer-inner .footer-text { font-size:0.8rem; }
.footer-inner .footer-text strong { color:#fff; }
.footer-inner .socials { display:flex; gap:12px; }
.footer-inner .socials a { color:rgba(255,255,255,0.5); font-
size:1.1rem; transition:var(--transition); text-decoration:none; display:flex; 
align-items:center; justify-content:center; width:36px; height:36px; border-
radius:50%; background:rgba(255,255,255,0.05); border:1px solid 
rgba(255,255,255,0.05); }
.footer-inner .socials a:hover { color:#fff; 
background:rgba(255,255,255,0.1); transform:translateY(-3px); }

/* ===== WHATSAPP FLOAT ===== */
.whatsapp-float { position:fixed; bottom:24px; right:24px; 
background:#25d366; color:#fff; width:54px; height:54px; border-radius:50%; 
display:flex; align-items:center; justify-content:center; font-size:1.8rem; box-
shadow:0 6px 30px rgba(37,211,102,0.4); text-decoration:none; z-index:9999; 
transition:all 0.3s ease; animation:whatsappPulse 2s infinite; }
.whatsapp-float:hover { transform:scale(1.08); box-shadow:0 8px 40px 
rgba(37,211,102,0.6); color:#fff; }
.whatsapp-float .whatsapp-tooltip { position:absolute; right:68px; 
background:rgba(0,0,0,0.75); color:#fff; padding:4px 12px; border-radius:6px; 
font-size:0.7rem; font-weight:500; white-space:nowrap; opacity:0; 
visibility:hidden; transition:all 0.3s ease; }
.whatsapp-float:hover .whatsapp-tooltip { opacity:1; visibility:visible;
 transform:translateX(-4px); }
.whatsapp-float .whatsapp-tooltip::after { content:''; 
position:absolute; right:-6px; top:50%; transform:translateY(-50%); border-
left:6px solid rgba(0,0,0,0.75); border-top:6px solid transparent; border-
bottom:6px solid transparent; }
@keyframes whatsappPulse { 0%,100% { transform:scale(1); box-shadow:0 
6px 30px rgba(37,211,102,0.4); } 50% { transform:scale(1.04); box-shadow:0 6px 
40px rgba(37,211,102,0.6); } }

/* ===== CART SIDEBAR ===== */
.cart-overlay { position:fixed; top:0; left:0; width:100%; height:100%; 
background:rgba(0,0,0,0.4); z-index:9998; display:none; }
.cart-overlay.open { display:block; }
.cart-sidebar {
    position:fixed; top:0; right:-400px; width:380px; max-width:92vw; 
height:100%;
    background:var(--bg-white); z-index:9999; box-shadow:-6px 0 30px 
rgba(0,0,0,0.1);
    transition:right 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    display:flex; flex-direction:column; padding:18px; overflow:hidden;
}
.cart-sidebar.open { right:0; }
.cart-header { display:flex; justify-content:space-between; align-
items:center; padding-bottom:12px; border-bottom:1px solid var(--border-light); 
}
.cart-header h3 { font-size:1.2rem; font-weight:700; }
.cart-close { background:none; border:none; font-size:1.4rem; 
cursor:pointer; color:var(--text-muted); transition:0.2s; padding:4px; }
.cart-close:hover { color:var(--text-dark); transform:rotate(90deg); }
.cart-items { flex:1; overflow-y:auto; padding:12px 0; }
.cart-item { display:flex; align-items:center; gap:10px; padding:10px 0;
 border-bottom:1px solid var(--border-light); }
.cart-item-img { width:50px; height:50px; background:var(--bg-body); 
border-radius:var(--radius-sm); display:flex; align-items:center; justify-
content:center; flex-shrink:0; }
.cart-item-img img { max-width:100%; max-height:100%; object-
fit:contain; }
.cart-item-info { flex:1; min-width:0; }
.cart-item-title { font-weight:600; font-size:0.85rem; white-
space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cart-item-price { color:var(--text-muted); font-size:0.75rem; }
.cart-item-qty { display:flex; align-items:center; gap:4px; }
.cart-item-qty a { display:inline-flex; align-items:center; justify-
content:center; width:24px; height:24px; background:var(--bg-body); border:1px 
solid var(--border-light); border-radius:4px; text-decoration:none; 
color:var(--text-dark); font-weight:600; font-size:0.9rem; transition:0.2s; }
.cart-item-qty a:hover { background:var(--border-light); }
.cart-item-qty span { min-width:20px; text-align:center; font-
weight:500; font-size:0.85rem; }
.cart-item-remove { background:none; border:none; color:#e53e3e; 
cursor:pointer; font-size:0.8rem; padding:4px; transition:0.2s; }
.cart-item-remove:hover { transform:scale(1.2); }
.cart-footer { border-top:1px solid var(--border-light); padding-
top:12px; }
.cart-total { display:flex; justify-content:space-between; font-
size:1rem; font-weight:700; margin-bottom:10px; }
.cart-total span:last-child { color:var(--accent); }
.checkout-btn { display:block; width:100%; padding:12px; 
background:var(--accent); color:#fff; border:none; border-radius:50px; font-
weight:600; font-size:0.9rem; cursor:pointer; transition:0.3s; text-
align:center; text-decoration:none; }
.checkout-btn:hover { background:var(--primary); }
.empty-cart-msg { text-align:center; color:var(--text-muted); 
padding:30px 0; font-size:0.9rem; }

/* SCROLL REVEAL */
.reveal { opacity:0; transform:translateY(24px); transition:opacity 0.6s
 ease, transform 0.6s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.stagger-children > * { opacity:0; transform:translateY(20px); 
transition:opacity 0.5s ease, transform 0.5s ease; }
.stagger-children.visible > *:nth-child(1) { transition-delay:0.04s; }
.stagger-children.visible > *:nth-child(2) { transition-delay:0.08s; }
.stagger-children.visible > *:nth-child(3) { transition-delay:0.12s; }
.stagger-children.visible > *:nth-child(4) { transition-delay:0.16s; }
.stagger-children.visible > *:nth-child(5) { transition-delay:0.20s; }
.stagger-children.visible > *:nth-child(6) { transition-delay:0.24s; }
.stagger-children.visible > *:nth-child(7) { transition-delay:0.28s; }
.stagger-children.visible > *:nth-child(8) { transition-delay:0.32s; }
.stagger-children.visible > * { opacity:1; transform:translateY(0); }

/* RESPONSIVE */
@media (max-width: 768px) {
    .cart-sidebar { width:100%; max-width:100%; right:-100%; }
    .hero-content h2 { font-size:1.8rem; }
    .hero-image { flex:0 0 180px; }
    .info-section { grid-template-columns:1fr; }
    .form-grid { grid-template-columns:1fr; }
    .btn-submit { justify-self:stretch; }
    .header-top { flex-direction:column; align-items:stretch; }
    .header-search { flex:1; }
    .header-right { justify-content:flex-start; }
    .brand-text h1 { font-size:1.2rem; }
    .brand-logo { width:40px; height:40px; }
}
@media (max-width: 480px) {
    .product-img { height:120px; }
    .product-title { font-size:0.75rem; }
    .product-price { font-size:0.85rem; }
    .product-actions .add-btn { font-size:0.6rem; padding:5px 8px; }
    .product-actions .wishlist-btn { width:28px; height:28px; font-
size:0.7rem; }
    .hero-content h2 { font-size:1.4rem; }
    .hero-banner { padding:24px 0; }
    .whatsapp-float { width:46px; height:46px; font-size:1.4rem; 
bottom:16px; right:16px; }
    .brands-track .brand-item img { height:22px; }
    .brands-track { gap:20px; }
}