/* ============================================================
   GauriNandan Silk — Unified Design System
   Primary: Maroon #6B0F1A  |  Accent: Gold #C8972B
   Font: Playfair Display (serif) + Cormorant Garamond + Inter
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,900;1,400;1,700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=Inter:wght@300;400;500;600;700&display=swap');

/* ===== TOKENS ===== */
:root {
  --maroon:        #6B0F1A;
  --maroon-deep:   #3D0512;
  --maroon-mid:    #8B1A2A;
  --maroon-light:  #B5303F;
  --gold:          #C8972B;
  --gold-light:    #E8C46A;
  --gold-pale:     #F5E6C0;
  --cream:         #FBF5ED;
  --cream-dark:    #F2E9DA;
  --off-white:     #FEFCF8;
  --white:         #FFFFFF;
  --text-dark:     #1A0A08;
  --text-mid:      #4A2A20;
  --text-light:    #8A6A5A;
  --border:        rgba(200,151,43,0.22);
  --border-light:  rgba(200,151,43,0.12);
  --shadow:        0 8px 40px rgba(107,15,26,0.12);
  --shadow-lg:     0 20px 60px rgba(107,15,26,0.18);
  --ease:          cubic-bezier(0.165,0.84,0.44,1);
  --transition:    all 0.4s var(--ease);
  --radius-sm:     3px;
  --radius:        6px;
  --radius-lg:     12px;
  --radius-pill:   100px;
}

/* ===== RESET ===== */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--off-white);
  color: var(--text-dark);
  line-height: 1.65;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul { list-style: none; }
input, textarea, select { font-family: inherit; }

/* ===== TYPOGRAPHY ===== */
.font-serif   { font-family: 'Playfair Display', serif; }
.font-cormo   { font-family: 'Cormorant Garamond', serif; }
.section-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.section-label::before, .section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.section-label.left::before { display: none; }
.section-label.left { justify-content: flex-start; }
.section-label.left::after { flex: unset; width: 40px; }
.section-h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 4vw, 3rem);
  color: var(--maroon);
  line-height: 1.18;
}
.section-sub {
  font-size: 0.92rem;
  color: var(--text-light);
  line-height: 1.75;
  max-width: 540px;
  margin-top: 14px;
}

/* ===== LAYOUT ===== */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
}
.container-sm { max-width: 960px; margin: 0 auto; padding: 0 28px; }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 30px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  cursor: pointer;
  border: none;
}
.btn-primary {
  background: var(--gold);
  color: var(--maroon-deep);
  border: 2px solid var(--gold);
}
.btn-primary:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(200,151,43,0.3);
}
.btn-maroon {
  background: var(--maroon);
  color: #fff;
  border: 2px solid var(--maroon);
}
.btn-maroon:hover {
  background: var(--maroon-mid);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(107,15,26,0.3);
}
.btn-outline {
  background: transparent;
  color: var(--maroon);
  border: 2px solid var(--border);
}
.btn-outline:hover {
  border-color: var(--maroon);
  background: rgba(107,15,26,0.04);
}
.btn-ghost-white {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.4);
}
.btn-ghost-white:hover {
  background: rgba(255,255,255,0.1);
  border-color: #fff;
}
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.btn-icon {
  width: 42px;
  height: 42px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

/* ===== ANNOUNCEMENT BAR ===== */
#gn-announcement {
  background: var(--maroon-deep);
  color: var(--gold-light);
  text-align: center;
  padding: 9px 20px;
  font-size: 0.76rem;
  letter-spacing: 0.07em;
  font-weight: 500;
}
#gn-announcement a { color: var(--gold-light); text-decoration: underline; }

/* ===== NAVBAR ===== */
#gn-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(254,252,248,0.97);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  transition: var(--transition);
}
.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  height: 70px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.nav-logo img {
  height: 46px;
  width: auto;
  object-fit: contain;
}
.nav-logo-text {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--maroon);
  line-height: 1.15;
}
.nav-logo-text small {
  display: block;
  font-size: 0.58rem;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.22em;
  color: var(--gold);
  font-weight: 600;
  text-transform: uppercase;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
}
.nav-links a {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  color: var(--text-mid);
  text-transform: uppercase;
  position: relative;
  transition: color 0.3s;
  padding-bottom: 3px;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--gold);
  transition: width 0.3s var(--ease);
}
.nav-links a:hover, .nav-links a.active { color: var(--maroon); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.nav-icon-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--maroon);
  transition: var(--transition);
}
.nav-icon-btn:hover { background: var(--cream-dark); }
.nav-icon-btn svg { width: 20px; height: 20px; fill: currentColor; }
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 26px;
  cursor: pointer;
  padding: 8px;
  margin: -8px;
}
.hamburger span {
  display: block;
  height: 2px;
  background: var(--maroon);
  border-radius: 2px;
  transition: var(--transition);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Nav */
#gn-mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 998;
  background: var(--off-white);
  flex-direction: column;
  padding: 100px 32px 48px;
  gap: 0;
  overflow-y: auto;
}
#gn-mobile-nav.open { display: flex; }
#gn-mobile-nav a {
  font-family: 'Playfair Display', serif;
  font-size: 1.7rem;
  color: var(--maroon);
  border-bottom: 1px solid var(--border-light);
  padding: 18px 0;
  transition: color 0.3s;
}
#gn-mobile-nav a:hover { color: var(--gold); }
.mobile-soc-row {
  display: flex;
  gap: 16px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.mobile-soc-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--maroon);
  transition: var(--transition);
}
.mobile-soc-btn:hover { background: var(--maroon); color: #fff; border-color: var(--maroon); }
.mobile-soc-btn svg { width: 16px; height: 16px; fill: currentColor; }

/* ===== FOOTER ===== */
#gn-footer {
  background: var(--maroon-deep);
  color: rgba(255,255,255,0.7);
}
.footer-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 44px;
  padding: 72px 28px 52px;
}
.footer-brand img {
  height: 50px;
  width: auto;
  object-fit: contain;
  margin-bottom: 18px;
}
.footer-brand p {
  font-size: 0.86rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.55);
  margin-bottom: 28px;
  max-width: 280px;
}
.footer-soc-row { display: flex; gap: 10px; flex-wrap: wrap; }
.footer-soc-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.65);
  transition: var(--transition);
}
.footer-soc-icon:hover { background: var(--gold); border-color: var(--gold); color: var(--maroon-deep); }
.footer-soc-icon svg { width: 16px; height: 16px; fill: currentColor; }
.footer-col h5 {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  color: #fff;
  margin-bottom: 22px;
  padding-bottom: 10px;
  position: relative;
}
.footer-col h5::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 24px;
  height: 2px;
  background: var(--gold);
}
.footer-col li { margin-bottom: 10px; }
.footer-col a {
  font-size: 0.84rem;
  color: rgba(255,255,255,0.55);
  transition: color 0.3s;
  line-height: 1.6;
}
.footer-col a:hover { color: var(--gold-light); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.07);
  max-width: 1280px;
  margin: 0 auto;
  padding: 22px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.35);
}
.footer-certified {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.45);
}
.footer-certified svg { width: 14px; height: 14px; fill: var(--gold); }

/* ===== CHATBOT ===== */
#gn-chatbot {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
}
#gn-chat-toggle {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--maroon-deep), var(--maroon));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 32px rgba(107,15,26,0.45);
  border: 3px solid var(--gold);
  transition: var(--transition);
  cursor: pointer;
  position: relative;
}
#gn-chat-toggle:hover { transform: scale(1.08); box-shadow: 0 10px 40px rgba(107,15,26,0.5); }
#gn-chat-toggle svg { width: 28px; height: 28px; fill: #fff; }
#gn-chat-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #25d366;
  border: 2.5px solid var(--off-white);
  animation: badge-pulse 2.5s infinite;
}
@keyframes badge-pulse {
  0%,100% { transform:scale(1); }
  50% { transform:scale(1.3); }
}
#gn-chat-window {
  position: absolute;
  bottom: 78px;
  right: 0;
  width: 350px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.18);
  overflow: hidden;
  display: none;
  flex-direction: column;
  max-height: 540px;
}
#gn-chat-window.open { display: flex; }
.chat-header {
  background: linear-gradient(135deg, var(--maroon-deep), var(--maroon));
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.chat-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--gold);
  flex-shrink: 0;
  background: var(--cream);
}
.chat-avatar img { width:100%; height:100%; object-fit:cover; }
.chat-hdr-info { flex: 1; }
.chat-hdr-name { font-family:'Playfair Display',serif; color:#fff; font-size:0.95rem; font-weight:600; }
.chat-hdr-status {
  color:#25d366; font-size:0.68rem; font-weight:600;
  display:flex; align-items:center; gap:4px; margin-top:2px;
}
.chat-hdr-status::before { content:''; width:7px; height:7px; border-radius:50%; background:#25d366; }
.chat-close-btn { color:rgba(255,255,255,0.7); font-size:1.3rem; cursor:pointer; line-height:1; background:none; border:none; transition:color 0.2s; }
.chat-close-btn:hover { color:#fff; }
.chat-msgs {
  flex:1; overflow-y:auto; padding:16px; display:flex;
  flex-direction:column; gap:10px; background:#f7f2f0;
}
.chat-msgs::-webkit-scrollbar { width:4px; }
.chat-msgs::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
.chat-msg {
  max-width:90%; padding:10px 14px; font-size:0.83rem; line-height:1.55;
}
.chat-msg.bot {
  background:#fff; color:var(--text-dark);
  border-radius:4px 16px 16px 16px; align-self:flex-start;
  box-shadow:0 2px 8px rgba(0,0,0,0.07);
}
.chat-msg.user {
  background:var(--maroon); color:#fff;
  border-radius:16px 16px 4px 16px; align-self:flex-end;
}
.chat-quick {
  display:flex; flex-wrap:wrap; gap:6px;
  padding:10px 14px; background:#f7f2f0; border-top:1px solid #ead7d0;
}
.chat-quick-btn {
  padding:6px 12px; background:#fff; border:1.5px solid var(--border);
  border-radius:var(--radius-pill); font-size:0.71rem; font-weight:600;
  color:var(--maroon); cursor:pointer; transition:var(--transition); white-space:nowrap;
}
.chat-quick-btn:hover { background:var(--maroon); color:#fff; border-color:var(--maroon); }
.chat-input-row {
  display:flex; align-items:center; gap:8px;
  padding:11px 14px; border-top:1px solid #ead7d0; background:#fff;
}
.chat-text-input {
  flex:1; border:1.5px solid #ddd; border-radius:var(--radius-pill);
  padding:8px 16px; font-size:0.82rem; outline:none;
  transition:border-color 0.2s;
}
.chat-text-input:focus { border-color:var(--maroon); }
.chat-send-btn {
  width:36px; height:36px; border-radius:50%; background:var(--maroon);
  display:flex; align-items:center; justify-content:center;
  border:none; cursor:pointer; flex-shrink:0; transition:var(--transition);
}
.chat-send-btn:hover { background:var(--maroon-mid); }
.chat-send-btn svg { width:15px; height:15px; fill:#fff; }
.chat-link-btn {
  display:inline-flex; align-items:center; gap:5px; margin-top:6px;
  padding:7px 14px; border-radius:var(--radius-pill);
  font-size:0.72rem; font-weight:700; letter-spacing:0.04em;
  cursor:pointer; border:none; text-decoration:none; transition:var(--transition);
  color:#fff; background:var(--maroon);
}
.chat-link-btn:hover { opacity:0.88; }
.chat-link-btn.green  { background:#25d366; }
.chat-link-btn.blue   { background:#1877f2; }
.chat-link-btn.ig     { background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.chat-link-btn.red    { background:#ea4335; }

/* ===== SCROLL ANIMATIONS ===== */
[data-reveal] {
  opacity:0; transform:translateY(30px);
  transition:opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal].revealed { opacity:1; transform:translateY(0); }

/* ===== BREADCRUMB ===== */
.breadcrumb {
  display:flex; align-items:center; gap:8px;
  font-size:0.76rem; color:var(--text-light); padding:20px 0;
}
.breadcrumb a { color:var(--maroon); transition:color 0.2s; }
.breadcrumb a:hover { color:var(--gold); }
.breadcrumb svg { width:14px; height:14px; fill:var(--text-light); }

/* ===== PAGE HERO (internal pages) ===== */
.page-hero {
  background: linear-gradient(135deg, var(--maroon-deep) 0%, var(--maroon) 100%);
  padding: 64px 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C8972B' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.page-hero-label {
  font-size:0.68rem; font-weight:700; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--gold-light); margin-bottom:12px;
}
.page-hero-title {
  font-family:'Playfair Display',serif;
  font-size:clamp(2rem,5vw,3.5rem);
  color:#fff; font-weight:700; line-height:1.15;
  position:relative;
}
.page-hero-sub {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1rem,2vw,1.25rem); font-style:italic;
  color:rgba(255,255,255,0.72); margin-top:14px;
  position:relative;
}

/* ===== FORM ELEMENTS ===== */
.form-group { margin-bottom: 20px; }
.form-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-mid);
  margin-bottom: 8px;
}
.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid #ddd;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-family: 'Inter', sans-serif;
  color: var(--text-dark);
  background: #fff;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
  -webkit-appearance: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--maroon);
  box-shadow: 0 0 0 3px rgba(107,15,26,0.07);
}
.form-textarea { min-height: 120px; resize: vertical; }

/* ===== PRODUCT CARD ===== */
.product-card {
  background: #fff;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(107,15,26,0.06);
  transition: var(--transition);
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}
.product-img-wrap {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
}
.product-img-wrap img {
  width:100%; height:100%; object-fit:cover;
  transition:transform 0.7s var(--ease);
}
.product-card:hover .product-img-wrap img { transform:scale(1.07); }
.product-badge {
  position:absolute; top:12px; left:12px;
  background:var(--maroon); color:var(--gold-light);
  font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase;
  font-weight:700; padding:4px 10px;
}
.product-badge.gold { background:var(--gold); color:var(--maroon-deep); }
.product-wish {
  position:absolute; top:12px; right:12px;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.92);
  display:flex; align-items:center; justify-content:center;
  transition:var(--transition); cursor:pointer;
}
.product-wish:hover { background:var(--maroon); }
.product-wish svg { width:16px; height:16px; fill:var(--maroon); transition:fill 0.3s; }
.product-wish:hover svg { fill:#fff; }
.product-info { padding:18px 20px 20px; }
.product-cat {
  font-size:0.62rem; font-weight:700; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--gold); margin-bottom:6px;
}
.product-name {
  font-family:'Playfair Display',serif; font-size:1.05rem;
  color:var(--maroon); margin-bottom:6px; line-height:1.3;
}
.product-desc { font-size:0.8rem; color:var(--text-light); margin-bottom:14px; line-height:1.5; }
.product-inquire {
  display:flex; align-items:center; gap:6px;
  font-size:0.7rem; font-weight:700; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--maroon); transition:var(--transition);
}
.product-inquire:hover { color:var(--gold); gap:10px; }
.product-inquire svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.5; }

/* ===== WHATSAPP FLOAT ===== */
.wa-float {
  display:inline-flex; align-items:center; gap:10px;
  background:#25d366; color:#fff;
  padding:10px 22px; border-radius:var(--radius-pill);
  font-size:0.78rem; font-weight:700; letter-spacing:0.08em;
  transition:var(--transition); box-shadow:0 4px 20px rgba(37,211,102,0.3);
}
.wa-float:hover { background:#1eaf56; transform:translateY(-2px); }
.wa-float svg { width:18px; height:18px; fill:#fff; }

/* ===== RESPONSIVE HELPERS ===== */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 768px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .container { padding: 0 20px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  #gn-chat-window { width: 300px; right: -10px; }
}
@media (max-width: 480px) {
  #gn-chat-window { width: calc(100vw - 32px); right: -14px; }
}