:root{
  --px-navy: #1800ad;
  --px-navy-dark: #10007a;
  --px-navy-light: #2a13d6;
  --px-cream: #ebe7d6;
  --px-red: #e8432b;
  --px-text: #1a1a1a;
  --radius: 16px;
}

*{ box-sizing: border-box; }

body{
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  background: #f7f6f0;
  color: var(--px-text);
  margin: 0;
}

a{ text-decoration: none; }

/* ---------------- TOP CONTACT STRIP ---------------- */
.topbar{
  background: var(--px-navy-dark);
  color: var(--px-cream);
  font-size: .85rem;
  padding: 6px 0;
}
.topbar a{ color: var(--px-cream); font-weight: 600; }
.topbar a:hover{ color: var(--px-red); }

/* ---------------- NAVBAR ---------------- */
.navbar-px{
  background: var(--px-navy);
  box-shadow: 0 4px 18px rgba(24,0,173,.3);
  padding: .6rem 0;
}
.navbar-px .navbar-brand img{ height: 46px; }
.navbar-px .nav-link{
  color: var(--px-cream) !important;
  font-weight: 600;
}
.navbar-px .nav-link:hover{ color: var(--px-red) !important; }

.btn-px{
  background: linear-gradient(90deg, var(--px-red), #ff6a4d);
  border: none;
  color: #fff;
  font-weight: 700;
  border-radius: 30px;
  padding: .5rem 1.4rem;
  box-shadow: 0 6px 16px rgba(232,67,43,.35);
}
.btn-px:hover{ color:#fff; filter: brightness(1.08); }

.btn-px-outline{
  background: transparent;
  border: 2px solid var(--px-cream);
  color: var(--px-cream);
  font-weight: 700;
  border-radius: 30px;
  padding: .45rem 1.2rem;
}
.btn-px-outline:hover{ background: var(--px-cream); color: var(--px-navy); }

/* ---------------- SEARCH BAR ---------------- */
.search-wrap{
  background: var(--px-navy);
  padding: 18px 0 34px;
}
.search-box{
  border-radius: 40px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.search-box input{
  border: none;
  padding: .9rem 1.4rem;
  font-size: 1rem;
  flex: 1;
}
.search-box input:focus{ outline: none; box-shadow: none; }
.search-box button{
  background: var(--px-red);
  border: none;
  color: #fff;
  padding: 0 1.6rem;
  font-weight: 700;
}

/* ---------------- HERO ROTATOR ---------------- */
.hero-rotator{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(120deg, var(--px-navy-dark), var(--px-navy));
  min-height: 320px;
}
.hero-slide{
  display: none;
  align-items: center;
  color: var(--px-cream);
  padding: 30px;
  min-height: 320px;
}
.hero-slide.active{ display: flex; }
.hero-slide img{
  max-height: 240px;
  object-fit: contain;
  border-radius: 12px;
  background: rgba(235,231,214,.08);
}
.hero-slide .price{
  color: var(--px-red);
  font-size: 1.8rem;
  font-weight: 800;
}
.hero-slide .mrp{
  text-decoration: line-through;
  opacity: .6;
  font-size: 1rem;
  margin-left: 8px;
}
.hero-dots{
  position: absolute;
  bottom: 14px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 8px;
}
.hero-dots span{
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(235,231,214,.4);
  cursor: pointer;
}
.hero-dots span.active{ background: var(--px-red); }

/* ---------------- SECTION TITLES ---------------- */
.section-title{
  font-weight: 800;
  color: var(--px-navy);
  position: relative;
  display: inline-block;
  margin-bottom: 1.6rem;
}
.section-title::after{
  content:"";
  position:absolute; left:0; bottom:-8px;
  width: 60px; height: 4px; border-radius: 4px;
  background: var(--px-red);
}

/* ---------------- PRODUCT CARDS ---------------- */
.product-card{
  border: none;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 22px rgba(24,0,173,.1);
  transition: transform .2s ease, box-shadow .2s ease;
  height: 100%;
}
.product-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(24,0,173,.2);
}
.product-card img{
  width: 100%; height: 170px; object-fit: contain;
  background: #f2f1ea;
  padding: 10px;
}
.product-card .body{ padding: 14px; }
.product-card .cat{
  font-size: .72rem;
  text-transform: uppercase;
  color: var(--px-navy);
  font-weight: 700;
  letter-spacing: .5px;
}
.product-card .name{ font-weight: 600; margin: 4px 0 8px; min-height: 44px; }
.product-card .price{ color: var(--px-red); font-weight: 800; font-size: 1.15rem; }
.product-card .mrp{ text-decoration: line-through; color: #999; font-size: .85rem; margin-left: 6px; }

/* ---------------- SIDE AUTH PANEL ---------------- */
.offcanvas-px{
  width: 380px;
  background: var(--px-cream);
}
.offcanvas-px .offcanvas-header{
  background: var(--px-navy);
  color: var(--px-cream);
}
.offcanvas-px .nav-pills .nav-link.active{ background: var(--px-navy); }
.offcanvas-px .nav-pills .nav-link{ color: var(--px-navy); font-weight: 700; }
.offcanvas-px form label{ font-weight: 600; color: var(--px-navy); }

/* ---------------- WHATSAPP FLOAT ---------------- */
.whatsapp-float{
  position: fixed;
  bottom: 22px; right: 22px;
  background: #25D366;
  color: #fff;
  width: 58px; height: 58px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 8px 20px rgba(0,0,0,.3);
  z-index: 1000;
}
.whatsapp-float:hover{ color: #fff; transform: scale(1.06); }

/* ---------------- FOOTER ---------------- */
footer.footer-px{
  background: var(--px-navy-dark);
  color: var(--px-cream);
  padding: 40px 0 20px;
  margin-top: 60px;
}
footer.footer-px a{ color: var(--px-cream); }
footer.footer-px a:hover{ color: var(--px-red); }
footer.footer-px h6{ color: var(--px-red); font-weight: 700; }

.empty-state{ padding: 40px; text-align: center; color: #777; }