/* =========================================================
   SATRUPA MASTER CUSTOMER SHELL
   Home page is the visual source of truth.
   This file only normalizes shared header/footer and common
   visual tokens. Page functionality remains in page JS/CSS.
   ========================================================= */

:root{
  --sat-bg:#EDE5D8;
  --sat-ink:#171a10;
  --sat-olive:#3D4B2A;
  --sat-gold:#D4AF37;
  --sat-gold-hover:#D4AF37;
  --sat-white:#fff;
}

html,body{max-width:100%;min-width:0;overflow-x:hidden}
body{background:var(--sat-bg);color:var(--sat-ink);font-family:"DM Sans",sans-serif}
a{text-decoration:none}
button,input,select,textarea{font-family:"DM Sans",sans-serif}

/* ================= SHARED HEADER ================= */
.site-header{
  position:sticky!important;
  top:0!important;
  z-index:10000!important;
  width:100%;
  border-bottom:1px solid rgba(0,0,0,.05)!important;
  background:rgba(247,243,235,.95)!important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.nav-inner{
  width:100%!important;
  max-width:1240px!important;
  height:78px!important;
  min-height:0!important;
  margin:0 auto!important;
  padding:0 24px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:20px;
}

.brand{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  flex:0 0 auto;
  color:inherit!important;
}

.logo-mark{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  border:1px solid var(--sat-gold)!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  color:var(--sat-gold)!important;
  font-size:13px!important;
}

.brand-name{
  font-family:"Playfair Display",serif!important;
  color:var(--sat-olive)!important;
  font-size:25px!important;
  letter-spacing:.18em!important;
  white-space:nowrap;
}

.desktop-nav{
  display:flex!important;
  align-items:center!important;
  gap:32px!important;
  min-width:0;
}

.desktop-nav a{
  display:inline-flex!important;
  align-items:center!important;
  color:rgba(0,0,0,.55)!important;
  font-size:14px!important;
  font-weight:400;
  white-space:nowrap;
}

.desktop-nav a.active,
.desktop-nav a:hover{color:var(--sat-olive)!important}
.desktop-nav a.active{font-weight:700!important}

.nav-actions{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex:0 0 auto;
}

.icon-btn{
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:999px!important;
  border:1px solid rgba(0,0,0,.1)!important;
  background:#fff!important;
  color:var(--sat-ink)!important;
}

.icon-btn:hover{color:var(--sat-olive)!important}

.cart-btn{
  position:relative!important;
  background:var(--sat-ink)!important;
  color:#fff!important;
  border-color:var(--sat-ink)!important;
}

.cart-count{
  position:absolute!important;
  right:-4px!important;
  top:-4px!important;
  min-width:20px!important;
  height:20px!important;
  padding:0 4px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:999px!important;
  background:var(--sat-gold)!important;
  color:var(--sat-ink)!important;
  font-size:10px!important;
  font-weight:700!important;
}

.menu-btn{display:none!important}

.mobile-menu{
  display:none;
  border-top:1px solid rgba(0,0,0,.05)!important;
  background:var(--sat-bg)!important;
  padding:12px 16px!important;
}
.mobile-menu.open{display:block!important}
.mobile-links{
  max-width:1240px!important;
  margin:auto!important;
  display:grid!important;
  gap:4px!important;
}
.mobile-links a{
  padding:12px 16px!important;
  border-radius:12px!important;
  color:var(--sat-ink)!important;
  font-size:14px!important;
}
.mobile-links a:hover{background:#fff!important;color:var(--sat-olive)!important}
.mobile-links a:first-child{background:#fff!important;font-weight:700!important}

/* ================= SHARED FOOTER ================= */
.footer{
  width:100%;
  margin:0!important;
  background:var(--sat-bg)!important;
  color:var(--sat-ink)!important;
}
.footer-inner{
  width:100%!important;
  max-width:1240px!important;
  margin:0 auto!important;
  padding:64px 32px!important;
  display:grid!important;
  grid-template-columns:2fr 1fr 1fr!important;
  gap:56px!important;
}
.footer-brand{display:flex!important;align-items:center!important;gap:12px!important}
.footer-name{
  font-family:"Playfair Display",serif!important;
  color:var(--sat-olive)!important;
  font-size:25px!important;
  letter-spacing:.18em!important;
}
.footer-desc{max-width:380px!important;margin:12px 0 0!important;color:rgba(0,0,0,.45)!important;font-size:14px!important;line-height:1.7!important}
.footer-heading{margin:0!important;font-size:14px!important;font-weight:700!important}
.footer-links{margin-top:16px!important;display:grid!important;gap:10px!important;font-size:14px!important;color:rgba(0,0,0,.5)!important}
.footer-links a{color:rgba(0,0,0,.5)!important}
.footer-links a:hover{color:var(--sat-olive)!important}
.footer-links.two{grid-template-columns:1fr 1fr!important}
.copyright{border-top:1px solid rgba(0,0,0,.05)!important;padding:20px!important;text-align:center!important;color:rgba(0,0,0,.35)!important;font-size:12px!important}

/* ================= COMMON CUSTOMER UI ================= */
.btn-gold,
.cta-btn,
.checkout-btn,
.place-order-btn,
.shop-btn,
.track-shop-btn,
.track-back-btn,
.view-btn{
  background:var(--sat-gold)!important;
  color:var(--sat-ink)!important;
  border-color:var(--sat-gold)!important;
}
.btn-gold:hover,
.cta-btn:hover,
.checkout-btn:hover,
.place-order-btn:hover,
.shop-btn:hover,
.track-shop-btn:hover,
.track-back-btn:hover,
.view-btn:hover{background:var(--sat-gold-hover)!important}

/* ================= RESPONSIVE HEADER ================= */
@media(max-width:900px){
  .desktop-nav{display:none!important}
  .menu-btn{display:grid!important}
  .nav-inner{padding:0 18px!important}
}

@media(max-width:700px){
  .nav-inner{height:72px!important}
  .brand-name{font-size:23px!important}
  .footer-inner{grid-template-columns:1fr!important;padding:40px 24px!important;gap:28px!important}
}

@media(max-width:480px){
  .nav-inner{padding:0 10px!important}
  .brand-name{font-size:21px!important;letter-spacing:.14em!important}
  .footer-inner{padding:40px 18px!important}
  .footer-links.two{grid-template-columns:1fr!important}
}

@media(max-width:380px){
  .brand-name{font-size:19px!important}
  .logo-mark{width:31px!important;height:31px!important;min-width:31px!important}
  .icon-btn{width:38px!important;height:38px!important;min-width:38px!important}
}