/* ================================
   J Store India – Premium Gold UI
   Smooth + Glow + Shine Effects
================================ */

/* Root Colors */
:root{
  --primary-gold:#d4af37;
  --primary-gold-light:#f5d76e;
  --white:#ffffff;
  --black:#000000;
  --text:#222222;
  --border:#eeeeee;
  --glow:rgba(212,175,55,0.45);
}

/* Smooth Scroll */
html{
  scroll-behavior:smooth;
}

/* Global Transition */
*{
  transition:all 0.3s ease;
}

/* ================= HEADER ================= */

.app-bar{
  position:sticky;
  top:0;
  z-index:999;
  background:#ffffff !important;
  color:#000000 !important;
  border-bottom:1px solid var(--border);
}

.app-bar *{
  color:#000000 !important;
}

/* Hover highlight */
.app-bar a:hover,
.app-bar button:hover{
  color:var(--primary-gold) !important;
}

/* ================= BUTTON EFFECT ================= */

button,
a,
.sh-solid-button,
.pr-outlined-button{
  cursor:pointer;
}

/* Primary Button */
.sh-solid-button{
  background:linear-gradient(145deg,var(--primary-gold),var(--primary-gold-light)) !important;
  color:#ffffff !important;
  border-radius:14px !important;
  font-weight:600 !important;
  border:none !important;
  position:relative;
  overflow:hidden;
}

/* Golden Shine Animation */
.sh-solid-button::before{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.6),
    transparent
  );
  transition:0.6s;
}

.sh-solid-button:hover::before{
  left:100%;
}

.sh-solid-button:hover{
  box-shadow:0 0 18px var(--glow);
  transform:translateY(-3px);
}

.sh-solid-button:active{
  transform:scale(0.95);
}

/* Outline Button */
.pr-outlined-button{
  background:transparent !important;
  border:2px solid var(--primary-gold) !important;
  color:var(--primary-gold) !important;
  border-radius:14px !important;
}

.pr-outlined-button:hover{
  background:var(--primary-gold) !important;
  color:#ffffff !important;
  box-shadow:0 0 14px var(--glow);
}

/* ================= PRODUCT CARD ================= */

.sh-product-card{
  background:#ffffff !important;
  border:1px solid var(--border) !important;
  border-radius:18px !important;
  overflow:hidden;
}

.sh-product-card:hover{
  border-color:var(--primary-gold) !important;
  box-shadow:0 0 20px var(--glow);
  transform:translateY(-6px);
}

/* Smooth Image Zoom */
.sh-product-card img{
  transition:transform 0.4s ease;
}

.sh-product-card:hover img{
  transform:scale(1.08);
}

/* ================= SEARCH BAR ================= */

.search-field .search-input{
  background:#ffffff !important;
  border:1px solid var(--border) !important;
  border-radius:12px !important;
}

.search-field .search-input:focus{
  border-color:var(--primary-gold) !important;
  box-shadow:0 0 0 3px var(--glow) !important;
}

/* ================= BADGE ================= */

.badge{
  background:var(--primary-gold) !important;
  color:#ffffff !important;
  border-radius:8px !important;
  padding:6px 12px !important;
  font-weight:600 !important;
}

/* ================= SOCIAL ICON ================= */

.sh-social-icon{
  border-radius:50% !important;
}

.sh-social-icon:hover{
  background:var(--primary-gold) !important;
  color:#ffffff !important;
  box-shadow:0 0 14px var(--glow);
}

/* ================= FOOTER ================= */

#footer{
  background:#fafafa !important;
  border-top:1px solid var(--border) !important;
}

.three-col-footer__heading{
  color:#000000 !important;
  font-weight:700 !important;
}

/* ================= CLICK RIPPLE EFFECT ================= */

button:active,
a:active{
  transform:scale(0.96);
}

/* ================= SCROLLBAR PREMIUM ================= */

::-webkit-scrollbar{
  width:8px;
}

::-webkit-scrollbar-thumb{
  background:var(--primary-gold);
  border-radius:10px;
}

::-webkit-scrollbar-track{
  background:#f5f5f5;
}

/* ===== FOOTER TEXT FIX ===== */

#footer,
#footer * {
  color: #000000 !important;
}

/* Footer Headings */
#footer h1,
#footer h2,
#footer h3,
#footer h4,
#footer h5,
#footer h6 {
  color: #000000 !important;
  font-weight: 700 !important;
}

/* Footer Links Hover */
#footer a:hover {
  color: var(--primary-gold) !important;
}