/* ============================================================
   Handicrafts of India — design system
   Deep maroon + gold, sculpted detail, minimal decoration.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Noto+Serif+Devanagari:wght@500;600;700&family=Marcellus&family=Poppins:wght@300;400;500;600&display=swap');

:root {
  --maroon-950: #2a0a10;
  --maroon-900: #3d0f16;
  --maroon-800: #551620;
  --maroon-700: #6e1c29;
  --maroon-600: #8a2434;
  --gold-100: #fbf3df;
  --gold-200: #f2e2b3;
  --gold-300: #e6c878;
  --gold-400: #d4af37;
  --gold-500: #b8912a;
  --gold-600: #8f6f1f;
  --cream: #fbf6ee;
  --cream-dim: #f3ead9;
  --ink: #2a1b14;
  --ink-soft: #5a463a;
  --white: #fffdf8;

  --font-display: 'Marcellus', 'Cormorant Garamond', serif;
  --font-heading: 'Cormorant Garamond', serif;
  --font-body: 'Poppins', sans-serif;
  --font-devanagari: 'Noto Serif Devanagari', serif;

  --shadow-soft: 0 10px 30px rgba(42, 10, 16, 0.12);
  --shadow-deep: 0 18px 48px rgba(42, 10, 16, 0.22);
  --radius: 4px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }

.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Headings ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--maroon-900);
  margin: 0 0 0.5em;
  letter-spacing: 0.01em;
}
h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.4rem; }
p { margin: 0 0 1em; color: var(--ink-soft); }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-600);
  font-weight: 500;
  margin-bottom: 0.6em;
  display: inline-block;
}

/* ---------- Gold bell divider ---------- */
.bell-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 2.2em auto;
  max-width: 360px;
}
.bell-divider .line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-400), transparent);
}
.bell-divider svg { width: 22px; height: 22px; flex-shrink: 0; }
.bell-divider.left-align { margin-left: 0; justify-content: flex-start; max-width: 100%; }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(251, 246, 238, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(180, 145, 42, 0.25);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 24px;
}

/* Logo with hover-to-Sanskrit shimmer */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-bell {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: var(--gold-500);
  transition: transform 0.4s ease, color 0.4s ease;
}
.brand:hover .brand-bell {
  transform: rotate(-14deg);
  color: var(--gold-400);
}
.brand-text {
  position: relative;
  display: inline-block;
  height: 2.1rem;
  overflow: hidden;
  min-width: 250px;
}
.brand-text .en,
.brand-text .sa {
  position: absolute;
  left: 0; top: 0;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 2.1rem;
  font-weight: 500;
  color: var(--maroon-900);
  letter-spacing: 0.01em;
  transition: opacity 0.5s ease, transform 0.5s ease, text-shadow 0.5s ease;
}
.brand-text .sa {
  font-family: var(--font-devanagari);
  font-weight: 600;
  opacity: 0;
  transform: translateY(6px);
  color: var(--gold-600);
}
.brand:hover .brand-text .en {
  opacity: 0;
  transform: translateY(-6px);
}
.brand:hover .brand-text .sa {
  opacity: 1;
  transform: translateY(0);
  text-shadow: 0 0 12px rgba(212, 175, 55, 0.65), 0 0 2px rgba(255, 245, 200, 0.9);
}
.brand-sparkle {
  position: absolute;
  pointer-events: none;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold-300);
  opacity: 0;
}
.brand:hover .brand-sparkle {
  animation: sparkle-pop 900ms ease-out forwards;
}
@keyframes sparkle-pop {
  0% { opacity: 0; transform: scale(0.2) translate(0,0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.3) translate(var(--sx, 10px), var(--sy, -14px)); }
}

.main-nav { display: flex; gap: 6px; }
.nav-item { position: relative; }
.main-nav .nav-item > a {
  font-size: 0.86rem;
  letter-spacing: 0.03em;
  font-weight: 500;
  color: var(--maroon-800);
  padding: 8px 14px;
  border-radius: var(--radius);
  position: relative;
  display: inline-block;
  transition: color 0.25s ease;
}
.main-nav .nav-item > a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 3px;
  height: 1px;
  background: var(--gold-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.main-nav .nav-item:hover > a, .main-nav .nav-item > a.active { color: var(--gold-600); }
.main-nav .nav-item:hover > a::after, .main-nav .nav-item > a.active::after { transform: scaleX(1); }

/* ---------- Nav dropdown (mega-menu style) ---------- */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 230px;
  background: var(--white);
  border: 1px solid rgba(180,145,42,0.35);
  border-top: 2px solid var(--gold-400);
  box-shadow: var(--shadow-deep);
  border-radius: 0 0 4px 4px;
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 600;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown::before {
  /* invisible bridge so the pointer can travel from link to panel */
  content: "";
  position: absolute;
  top: -10px; left: 0; right: 0; height: 10px;
}
.nav-dropdown a {
  display: block;
  padding: 9px 22px;
  font-size: 0.85rem;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}
.nav-dropdown a:hover {
  background: var(--cream-dim);
  color: var(--maroon-800);
  padding-left: 28px;
}
.nav-dropdown .dropdown-all {
  margin-top: 6px;
  border-top: 1px solid rgba(180,145,42,0.25);
  padding-top: 12px;
  font-weight: 500;
  color: var(--gold-600);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.header-actions { display: flex; align-items: center; gap: 14px; }
.icon-btn {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  color: var(--maroon-800);
  border-radius: 50%;
  transition: background 0.25s ease, color 0.25s ease;
}
.icon-btn:hover { background: var(--cream-dim); color: var(--gold-600); }
.icon-btn svg { width: 20px; height: 20px; }

/* Compact "Contact" pill that takes over from the envelope icon once the
   main nav collapses, so the word stays visible on tablets and phones. */
.header-contact-link {
  display: none;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--maroon-800);
  border: 1px solid rgba(180, 145, 42, 0.5);
  border-radius: 999px;
  padding: 8px 16px;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease;
}
.header-contact-link:hover { background: var(--cream-dim); color: var(--gold-600); }

.hamburger { display: none; flex-direction: column; gap: 5px; width: 40px; height: 40px; align-items: center; justify-content: center; }
.hamburger span { width: 22px; height: 1.5px; background: var(--maroon-900); transition: all 0.3s ease; }

/* ---------- Mobile full-screen nav overlay ----------
   Lives directly on <body> (see renderHeader): the header's backdrop-filter
   would otherwise become the containing block and clip this to a thin strip. */
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background: var(--maroon-950);
  z-index: 900;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(.77,0,.18,1), visibility 0s linear 0.45s;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  visibility: hidden;
}
.mobile-nav-overlay.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.45s cubic-bezier(.77,0,.18,1), visibility 0s;
}
.mobile-nav-inner {
  padding: 78px 30px calc(48px + env(safe-area-inset-bottom, 0px));
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.mobile-nav-close {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: 18px;
  z-index: 2;
  width: 44px; height: 44px;
  color: var(--gold-300);
  display: flex; align-items: center; justify-content: center;
  background: rgba(42, 10, 16, 0.92);
  border: 1px solid rgba(212,175,55,0.28);
  border-radius: 50%;
}
.mobile-nav-close svg { width: 20px; height: 20px; }
.mobile-nav-inner > a {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  line-height: 1.3;
  color: var(--gold-100);
  padding: 11px 0;
  border-bottom: 1px solid rgba(212,175,55,0.18);
}
.mobile-nav-inner > a.mobile-sublink {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: rgba(251,246,238,0.75);
  padding: 9px 0 9px 18px;
  border-bottom: none;
}
.mobile-nav-inner .mobile-sub {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--gold-400);
  padding: 26px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.mobile-nav-inner .mobile-sub:first-child { padding-top: 0; }
.mobile-nav-inner .mobile-contact {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid rgba(212,175,55,0.18);
  color: rgba(251,246,238,0.65);
  font-size: 0.85rem;
  line-height: 1.8;
}
.mobile-nav-inner .mobile-contact-mail {
  color: var(--gold-300);
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 30px;
  border-radius: 2px;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: all 0.3s ease;
}
.btn-primary {
  background: linear-gradient(135deg, var(--maroon-800), var(--maroon-900));
  color: var(--gold-200);
  border-color: var(--gold-400);
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--maroon-700), var(--maroon-800));
  box-shadow: 0 6px 20px rgba(212,175,55,0.35);
  transform: translateY(-1px);
}
.btn-outline {
  background: transparent;
  border-color: var(--maroon-800);
  color: var(--maroon-800);
}
.btn-outline:hover { background: var(--maroon-900); color: var(--gold-200); border-color: var(--maroon-900); }

/* ============================================================
   Temple stage — living day/night courtyard
   A single photo whose light shifts with the visitor's real
   local time: dawn, midday, golden hour, night, and back again.
   ============================================================ */
.temple-stage {
  --daylight: 1;
  --night: 0;
  --golden-hour: 0;
  --sun-x: 50%;
  --sun-y: 45%;
  position: relative;
  isolation: isolate;
  min-height: 82vh;
  overflow: hidden;
  background: var(--maroon-950);
  display: flex;
  align-items: flex-end;
}
.temple-image {
  position: absolute;
  inset: 0;
  z-index: -30;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  animation: temple-breathe 20s ease-in-out infinite alternate;
  filter:
    brightness(calc(.4 + var(--daylight) * .6))
    saturate(calc(.6 + var(--daylight) * .4))
    contrast(calc(1.05 + var(--night) * .1))
    sepia(calc(var(--golden-hour) * .16));
  transition: filter 60s linear;
}
.temple-shade {
  position: absolute; inset: 0; z-index: -20;
  background:
    linear-gradient(0deg, var(--maroon-950) 0%, rgba(42,10,16,0.55) 22%, transparent 55%),
    linear-gradient(180deg, rgba(42,10,16,0.5) 0%, transparent 30%);
}
.temple-night {
  position: absolute; inset: 0; z-index: -20;
  background: radial-gradient(ellipse at 50% 30%, rgba(20,6,10,0.35), rgba(10,3,5,0.82) 80%);
  opacity: calc(var(--night) * .9);
  mix-blend-mode: multiply;
  transition: opacity 60s linear;
}
.temple-stars { position: absolute; inset: 0; z-index: -10; opacity: calc(var(--night) * .7); transition: opacity 60s linear; }
.temple-stars i {
  position: absolute;
  left: calc((var(--star) * 37) % 92 * 1% + 4%);
  top: calc(3% + ((var(--star) * 19) % 30) * 1%);
  width: calc(1px + (var(--star) % 2) * 1px);
  height: calc(1px + (var(--star) % 2) * 1px);
  border-radius: 50%;
  background: var(--gold-100);
  box-shadow: 0 0 5px var(--gold-200);
  animation: star-twinkle calc(3s + (var(--star) % 4) * 1s) calc(var(--star) * -.21s) ease-in-out infinite;
}
.temple-haze {
  position: absolute; inset: 0; z-index: -10;
  background: radial-gradient(ellipse at 50% 55%, rgba(230,200,120,calc(.10 + var(--golden-hour) * .14)), transparent 40%);
  animation: haze-drift 11s ease-in-out infinite alternate;
}
/* Volumetric shafts fanning out of the bright gopuram opening. Each ray is a
   clipped wedge (narrow at the source, wide at the floor), blurred and screen
   blended, so where two shafts overlap the light builds up the way haze does. */
.temple-rays {
  position: absolute; inset: 0; z-index: -10;
  overflow: hidden;
  opacity: calc(.14 + var(--daylight) * .4 + var(--golden-hour) * .46);
  transition: opacity 60s linear;
}
.god-ray {
  position: absolute;
  left: 50%; top: 27%;
  width: var(--w, 4%);
  height: 168%;
  translate: -50% 0;
  transform-origin: 50% 0;
  transform: rotate(var(--angle, 0deg));
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0% 100%);
  background: linear-gradient(180deg,
    rgba(255,247,224,0.62) 0%,
    rgba(255,233,180,0.30) 26%,
    rgba(250,214,140,0.13) 58%,
    rgba(240,198,120,0) 100%);
  filter: blur(var(--blur, 7px));
  mix-blend-mode: screen;
  opacity: var(--o, .5);
  animation: ray-drift var(--dur, 14s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
  will-change: transform, opacity;
}
@keyframes ray-drift {
  from { transform: rotate(calc(var(--angle) - 1.4deg)) scaleX(.9); opacity: calc(var(--o) * .5); }
  to   { transform: rotate(calc(var(--angle) + 1.4deg)) scaleX(1.1); opacity: var(--o); }
}
.temple-sanctum-glow {
  position: absolute;
  left: var(--sun-x); top: var(--sun-y);
  width: 30%; aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(250,225,160,.28), rgba(230,190,110,.08) 38%, transparent 70%);
  filter: blur(16px);
  animation: sanctum-bloom 6s ease-in-out infinite;
  transition: left 60s linear, top 60s linear;
}
.temple-lamplight {
  position: absolute; inset: 0; z-index: -10;
  opacity: calc(.06 + var(--night) * .85);
  background:
    radial-gradient(circle at 8% 46%, rgba(232,180,90,.42) 0 1px, transparent 4.5%),
    radial-gradient(circle at 22% 52%, rgba(232,180,90,.38) 0 1px, transparent 4%),
    radial-gradient(circle at 80% 46%, rgba(232,180,90,.4) 0 1px, transparent 4.5%),
    radial-gradient(circle at 93% 52%, rgba(232,180,90,.36) 0 1px, transparent 4%);
  mix-blend-mode: screen;
  animation: lamp-flicker 3.4s ease-in-out infinite alternate;
  transition: opacity 60s linear;
}
/* Dust caught in the light. Sizes, blur and speed all vary so the field reads
   as depth rather than a flat sheet of dots, and each mote wanders sideways
   on its way up instead of tracking a straight line. */
.temple-motes {
  position: absolute; inset: 0; z-index: -10;
  opacity: calc(.28 + var(--daylight) * .72);
  transition: opacity 60s linear;
}
.temple-motes i {
  position: absolute;
  left: var(--mx); top: var(--my);
  width: var(--ms); height: var(--ms);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,248,228,0.95) 0%, rgba(255,224,150,0.42) 55%, rgba(255,214,130,0) 74%);
  filter: blur(var(--mb, 0px));
  opacity: 0;
  animation: mote-float var(--mdur, 14s) linear infinite;
  animation-delay: var(--mdelay, 0s);
  will-change: transform, opacity;
}
@keyframes mote-float {
  0%   { opacity: 0; transform: translate3d(0, 22px, 0) scale(.68); }
  14%  { opacity: var(--mo, .7); }
  32%  { transform: translate3d(calc(var(--mdx) * .55), -2px, 0) scale(1); }
  56%  { transform: translate3d(calc(var(--mdx) * -.25), -30px, 0) scale(.94); }
  80%  { opacity: var(--mo, .7); transform: translate3d(calc(var(--mdx) * .85), -54px, 0) scale(1.06); }
  100% { opacity: 0; transform: translate3d(var(--mdx), -80px, 0) scale(.8); }
}
.temple-stage-content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 24px 64px;
  text-align: center;
  color: var(--gold-100);
}
/* White wordmark with a gold sheen travelling through it. The text itself is
   transparent and the gradient shows through the letterforms, so the shimmer
   passes across the word rather than sitting on top of it. */
.temple-stage-content .hero-eyebrow {
  font-size: clamp(0.86rem, 1.5vw, 1.18rem);
  font-weight: 500;
  letter-spacing: 0.46em;
  text-indent: 0.46em;
  margin-bottom: 4px;
  background-image: linear-gradient(105deg,
    #ffffff 0%, #fffdf7 28%,
    var(--gold-200) 41%, #fff4c9 47%, var(--gold-300) 53%, #fffdf7 62%,
    #ffffff 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: wordmark-shimmer 7s linear infinite;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.55));
}
@keyframes wordmark-shimmer {
  from { background-position: 132% 0; }
  to   { background-position: -32% 0; }
}
.temple-stage-content h1 {
  font-size: clamp(2.6rem, 6.4vw, 5.2rem);
  color: var(--gold-100);
  text-shadow: 0 3px 28px rgba(0,0,0,0.5);
  margin: 12px 0 16px;
  line-height: 1.08;
}
.temple-stage-content p {
  max-width: 540px;
  margin: 0 auto;
  font-size: 1.02rem;
  color: rgba(251,246,238,0.84);
  text-shadow: 0 2px 14px rgba(0,0,0,0.5);
}
.temple-scroll-cue {
  position: absolute;
  left: 50%; bottom: 22px;
  transform: translateX(-50%);
  z-index: 1;
  width: 22px; height: 34px;
  border: 1.5px solid rgba(251,246,238,0.55);
  border-radius: 12px;
}
.temple-scroll-cue::before {
  content: "";
  position: absolute;
  top: 6px; left: 50%;
  width: 3px; height: 7px;
  background: var(--gold-300);
  border-radius: 2px;
  transform: translateX(-50%);
  animation: scroll-cue-drop 1.8s ease-in-out infinite;
}

@keyframes temple-breathe { from { transform: scale(1.02); } to { transform: scale(1.07); } }
@keyframes haze-drift { from { transform: translateX(-2%); opacity: .65; } to { transform: translateX(2%); opacity: 1; } }
@keyframes sanctum-bloom { 0%, 100% { transform: scale(.94); opacity: .5; } 50% { transform: scale(1.08); opacity: .85; } }
@keyframes star-twinkle { 0%, 100% { opacity: .18; transform: scale(.8); } 50% { opacity: .9; transform: scale(1.25); } }
@keyframes lamp-flicker { 0% { filter: brightness(.86) blur(.2px); } 45% { filter: brightness(1.14) blur(.5px); } 100% { filter: brightness(.97); } }
@keyframes scroll-cue-drop { 0% { opacity: 0; top: 6px; } 30% { opacity: 1; } 100% { opacity: 0; top: 20px; } }

@media (max-width: 640px) {
  .temple-stage { min-height: 66vh; }
  /* the paragraph wraps to four lines here, so the scroll cue needs its own room */
  .temple-stage-content { padding-bottom: 76px; }
  .temple-stage-content .hero-eyebrow { letter-spacing: 0.3em; text-indent: 0.3em; }
  .temple-stage-content p { font-size: 0.95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .temple-image, .temple-haze, .god-ray, .temple-sanctum-glow,
  .temple-stars i, .temple-lamplight, .temple-motes i, .temple-scroll-cue::before,
  .temple-stage-content .hero-eyebrow,
  .arch-hanger, .arch-bell .bell-clapper, .arch-lotus .lotus-flame {
    animation: none !important;
  }
  .temple-stage-content .hero-eyebrow {
    color: var(--gold-100);
    -webkit-text-fill-color: var(--gold-100);
  }
}

/* ============================================================
   Hero (museum display)
   ============================================================ */
.hero {
  position: relative;
  background: radial-gradient(ellipse at top, var(--maroon-800) 0%, var(--maroon-950) 78%);
  color: var(--gold-100);
  overflow: hidden;
  padding: 188px 0 0;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(212,175,55,0.10), transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(212,175,55,0.08), transparent 45%);
  pointer-events: none;
}
.hero-frame {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px 70px;
  text-align: center;
}
.hero-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: 18px;
  display: block;
}
.hero-stage {
  position: relative;
  margin: 30px auto 34px;
  width: min(430px, 82vw);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251,246,238,0.06) 0%, transparent 70%);
}
.hero-plinth {
  position: absolute;
  left: 50%; bottom: 6%;
  transform: translateX(-50%);
  width: 78%;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,0.55) 0%, transparent 72%);
  filter: blur(1px);
}
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 1.1s ease, transform 1.4s ease;
  display: flex; align-items: center; justify-content: center;
}
.hero-slide.active { opacity: 1; transform: scale(1); }
.hero-slide img {
  max-height: 88%;
  max-width: 82%;
  object-fit: contain;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,0.5));
  border-radius: 6px;
}
.hero-vignette {
  position: absolute; inset: -10%;
  border-radius: 50%;
  box-shadow: inset 0 0 90px 40px var(--maroon-950);
  pointer-events: none;
}
.hero-caption { min-height: 3.4em; }
.hero-caption h2 { color: var(--gold-100); margin-bottom: 0.25em; }
.hero-caption p { color: rgba(251,246,238,0.7); max-width: 480px; margin: 0 auto; }
.hero-dots { display: flex; gap: 9px; justify-content: center; margin-top: 22px; }
.hero-dots button {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(251,246,238,0.28);
  border: none; padding: 0;
  transition: background 0.3s ease, transform 0.3s ease;
}
.hero-dots button.active { background: var(--gold-400); transform: scale(1.25); }

/* ============================================================
   Fact strip
   ============================================================ */
.fact-strip {
  background: var(--maroon-900);
  color: var(--gold-200);
  text-align: center;
  padding: 16px 24px;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.05rem;
  border-top: 1px solid rgba(212,175,55,0.25);
  border-bottom: 1px solid rgba(212,175,55,0.25);
}
.fact-strip .fact-label {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: 6px;
}

/* ============================================================
   Sections
   ============================================================ */
.section { padding: 76px 0; }
.section-header { text-align: center; max-width: 680px; margin: 0 auto 46px; }
.section-header h2 { max-width: 100%; }
.section-alt { background: var(--cream-dim); }

/* ============================================================
   Hover-reveal product cards
   ============================================================ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 30px;
}
.product-card {
  position: relative;
  display: block;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.product-card:hover { box-shadow: var(--shadow-deep); transform: translateY(-3px); }

.card-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #fdfbf6;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none; /* replaced by the aarti diya cursor */
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* always show the complete photo, never crop */
  padding: 10px;
  transition: transform 480ms ease;
}
.product-card:hover .card-media img { transform: scale(1.03); }
.card-media .card-glow {
  position: absolute; inset: 0;
  border: 2px solid transparent;
  z-index: 3;
  pointer-events: none;
  transition: border-color 420ms ease, box-shadow 420ms ease;
}
.product-card:hover .card-media .card-glow {
  border-color: var(--gold-400);
  box-shadow: inset 0 0 0 1px rgba(212,175,55,0.35), 0 0 22px rgba(212,175,55,0.25);
}

/* ---------- Aarti diya cursor (follows the pointer over product photos) ---------- */
.aarti-cursor {
  position: fixed;
  z-index: 950;
  width: 42px; height: 46px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -60%);
  transition: opacity 0.2s ease;
}
.aarti-cursor.visible { opacity: 1; }
.aarti-cursor .flame {
  transform-origin: 50% 100%;
  animation: flame-flicker 0.9s ease-in-out infinite alternate;
}
.aarti-cursor .flame-glow {
  transform-origin: 50% 100%;
  animation: flame-glow 1.4s ease-in-out infinite alternate;
}
@keyframes flame-flicker {
  0%   { transform: scale(1) rotate(-2deg); }
  45%  { transform: scale(1.08, 1.16) rotate(1.5deg); }
  100% { transform: scale(0.94, 1.05) rotate(-1deg); }
}
@keyframes flame-glow {
  from { opacity: 0.35; transform: scale(1); }
  to   { opacity: 0.7;  transform: scale(1.25); }
}
.card-bestseller {
  position: absolute; top: 12px; left: 12px; z-index: 4;
  background: var(--gold-400); color: var(--maroon-950);
  font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 2px; font-weight: 600;
}
.card-body { padding: 18px 20px 22px; }
.card-subheading {
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-600); margin-bottom: 4px; display: block;
}
.card-body h3 { font-size: 1.2rem; margin-bottom: 4px; }
.card-cta {
  font-size: 0.78rem; color: var(--maroon-700); font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px;
}
.card-cta svg { width: 13px; height: 13px; transition: transform 0.25s ease; }
.product-card:hover .card-cta svg { transform: translateX(3px); }

/* ============================================================
   Filters
   ============================================================ */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: 40px;
}
.filter-chip {
  padding: 8px 18px;
  border: 1px solid rgba(85,22,32,0.25);
  border-radius: 30px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--white);
  transition: all 0.25s ease;
}
.filter-chip:hover { border-color: var(--gold-400); color: var(--maroon-800); }
.filter-chip.active {
  background: var(--maroon-900);
  border-color: var(--maroon-900);
  color: var(--gold-200);
}
.filter-group-label {
  font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--gold-600); margin-right: 6px; align-self: center;
}

/* ============================================================
   Category subheading groups
   ============================================================ */
.subgroup { margin-bottom: 58px; scroll-margin-top: 96px; }
.subgroup-title {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 26px;
}
.subgroup-title h3 { margin: 0; }
.subgroup-title .line { flex: 1; height: 1px; background: rgba(180,145,42,0.3); }

/* ============================================================
   Category tiles (homepage)
   ============================================================ */
.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.category-tile {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; align-items: flex-end;
  background: var(--maroon-900);
}
.category-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 12px 12px 90px; opacity: 0.85; transition: transform 0.5s ease, opacity 0.4s ease; }
.category-tile:hover img { transform: scale(1.05); opacity: 0.65; }
.category-tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(42,10,16,0.92) 5%, rgba(42,10,16,0.15) 65%);
}
.category-tile-content { position: relative; z-index: 2; padding: 22px; color: var(--gold-100); }
.category-tile-content .eyebrow { color: var(--gold-300); }
.category-tile-content h3 { color: var(--gold-100); margin-bottom: 0.15em; }
.category-tile-content span { font-size: 0.78rem; color: rgba(251,246,238,0.75); }

/* ============================================================
   Product detail page
   ============================================================ */
.breadcrumb {
  font-size: 0.78rem; color: var(--ink-soft);
  padding: 18px 0;
}
.breadcrumb a { color: var(--maroon-700); }
.breadcrumb a:hover { color: var(--gold-600); }

.product-detail {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: flex-start;
  padding: 30px 0 80px;
}
.product-photo-wrap {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fdfbf6;
  aspect-ratio: 1/1;
  cursor: zoom-in;
  border: 1px solid rgba(180,145,42,0.2);
}
.product-photo-wrap img {
  width: 100%; height: 100%;
  object-fit: contain; /* full photo always visible */
  padding: 14px;
  transition: transform 0.3s ease;
  transform-origin: center;
}
.product-photo-wrap:hover img { transform: scale(1.8); }

.product-info .subheading-tag {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-600); display: block; margin-bottom: 10px;
}
.product-info h1 { margin-bottom: 6px; }
.product-info .tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 22px; }
.product-info .tag-pill {
  font-size: 0.72rem; padding: 5px 12px; border-radius: 20px;
  background: var(--cream-dim); color: var(--maroon-800);
  border: 1px solid rgba(180,145,42,0.25);
}
.product-story { font-size: 1.02rem; line-height: 1.75; color: var(--ink-soft); }

.request-price-btn { margin-top: 8px; width: 100%; }

/* ---------- Details tab (accordion) ---------- */
.details-accordion { margin-top: 30px; border-top: 1px solid rgba(180,145,42,0.3); }
.accordion-item { border-bottom: 1px solid rgba(180,145,42,0.3); }
.accordion-trigger {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  background: none; border: none; padding: 18px 2px;
  font-family: var(--font-heading); font-size: 1.1rem; color: var(--maroon-900);
  font-weight: 600;
}
.accordion-trigger svg { width: 16px; height: 16px; transition: transform 0.3s ease; color: var(--gold-500); }
.accordion-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.accordion-panel {
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  padding: 0 2px;
}
.accordion-panel.open { max-height: 300px; padding-bottom: 20px; }
.accordion-panel p { font-size: 0.95rem; }

.shipping-note {
  margin-top: 26px; padding: 16px 18px;
  background: var(--cream-dim); border-left: 3px solid var(--gold-400);
  font-size: 0.85rem; color: var(--ink-soft); border-radius: 0 2px 2px 0;
}

/* ---------- Related products ---------- */
.related-title { margin-top: 10px; }

/* ============================================================
   Best sellers strip
   ============================================================ */
.best-seller-scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(270px, 1fr);
  gap: 26px;
  overflow-x: auto;
  padding-bottom: 14px;
  scroll-snap-type: x mandatory;
}
.best-seller-scroll .product-card { scroll-snap-align: start; }
.best-seller-scroll::-webkit-scrollbar { height: 6px; }
.best-seller-scroll::-webkit-scrollbar-thumb { background: var(--gold-300); border-radius: 10px; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  background: var(--maroon-950);
  color: rgba(251,246,238,0.75);
  padding: 64px 0 30px;
  margin-top: 60px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(212,175,55,0.18);
}
.footer-grid h4 {
  color: var(--gold-300); font-size: 0.78rem; letter-spacing: 0.14em;
  text-transform: uppercase; margin-bottom: 18px; font-family: var(--font-body); font-weight: 600;
}
.footer-grid ul li { margin-bottom: 10px; }
.footer-grid a { font-size: 0.88rem; color: rgba(251,246,238,0.72); transition: color 0.2s ease; }
.footer-grid a:hover { color: var(--gold-300); }
.footer-brand p { color: rgba(251,246,238,0.6); font-size: 0.88rem; max-width: 300px; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 26px; font-size: 0.78rem; color: rgba(251,246,238,0.45);
  flex-wrap: wrap; gap: 10px;
}

/* ============================================================
   About / Contact / FAQ / Shipping pages
   ============================================================ */
.page-hero {
  position: relative;
  background: var(--maroon-950);
  color: var(--gold-100);
  padding: 120px 0 50px;
  text-align: center;
  overflow: visible;
}
.page-hero h1 { color: var(--gold-100); }
.page-hero p { color: rgba(251,246,238,0.7); max-width: 560px; margin: 0 auto; }

.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { margin-top: 1.6em; }
.prose img.inline-shrine { border-radius: var(--radius); margin: 30px 0; box-shadow: var(--shadow-soft); }

.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid rgba(180,145,42,0.3); }
.faq-question {
  width: 100%; text-align: left; background: none; border: none;
  padding: 22px 4px; display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-heading); font-size: 1.2rem; color: var(--maroon-900); font-weight: 600;
}
.faq-question svg { width: 18px; height: 18px; color: var(--gold-500); transition: transform 0.3s ease; flex-shrink: 0; margin-left: 20px; }
.faq-question[aria-expanded="true"] svg { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; padding: 0 4px; }
.faq-answer.open { max-height: 400px; padding-bottom: 22px; }

.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 50px;
  max-width: 900px; margin: 0 auto;
}
.contact-card {
  background: var(--white); border-radius: var(--radius);
  padding: 34px; box-shadow: var(--shadow-soft);
  border-top: 3px solid var(--gold-400);
}
.contact-card h3 { margin-bottom: 8px; }

.shipping-table { width: 100%; border-collapse: collapse; margin: 30px 0; }
.shipping-table th, .shipping-table td {
  text-align: left; padding: 14px 16px; border-bottom: 1px solid rgba(180,145,42,0.25);
  font-size: 0.92rem;
}
.shipping-table th { color: var(--gold-600); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.72rem; }

/* ============================================================
   Temple frame: side pillars, arch, hanging bells
   ============================================================ */
.temple-pillar {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 64px;
  z-index: 400;
  pointer-events: none;
  color: var(--gold-500);
  opacity: 0.55;
}
.temple-pillar svg { width: 100%; height: 100%; }
.temple-pillar.left { left: 6px; }
.temple-pillar.right { right: 6px; transform: scaleX(-1); }

/* Arch sits at the top of the hero / page-hero, the garland hangs from its curve */
.temple-arch {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 120px;
  pointer-events: none;
  overflow: visible;
  z-index: 5;
  color: var(--gold-400);
}
.temple-arch svg.arch-line { width: 100%; height: 100%; display: block; }

/* Every hanger swings from the point where it meets the rope. `translate`
   centres it on that point without touching `transform`, which the swing owns. */
.arch-hanger {
  position: absolute;
  translate: -50% 0;
  transform-origin: 50% 0;
  animation: hanger-sway var(--dur, 4.6s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.45));
  will-change: transform;
}
.arch-hanger svg { width: 100%; height: auto; display: block; overflow: visible; }
.arch-bell { width: 34px; }
.arch-leaf { width: 30px; opacity: 0.92; }
.arch-lotus { width: 54px; }
@keyframes hanger-sway {
  from { transform: rotate(calc(var(--amp, 4deg) * -1)); }
  to   { transform: rotate(var(--amp, 4deg)); }
}

/* The clapper trails the bell instead of moving with it, which is what sells
   the weight of the thing. Same period, opposite direction, slight lag. */
.arch-bell .bell-clapper {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: clapper-sway var(--dur, 4.6s) ease-in-out infinite alternate;
  animation-delay: calc(var(--delay, 0s) + 0.42s);
}
@keyframes clapper-sway {
  from { transform: rotate(7deg); }
  to   { transform: rotate(-7deg); }
}
.arch-bell .bell-sheen { filter: blur(1.3px); }
.arch-lotus .lotus-flame {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: diya-flicker 2.6s ease-in-out infinite alternate;
}
@keyframes diya-flicker {
  from { transform: scale(0.9) rotate(-3deg); opacity: 0.82; }
  to   { transform: scale(1.08) rotate(3deg); opacity: 1; }
}

/* Slim arch strip for pages without a dark hero (e.g. product pages) */
.arch-strip {
  position: relative;
  height: 132px;
  background: linear-gradient(180deg, var(--maroon-950), var(--maroon-900));
  overflow: visible;
}
.arch-strip .temple-arch { height: 96px; }
.arch-strip .arch-bell { width: 23px; }
.arch-strip .arch-leaf { width: 18px; }
.arch-strip .arch-lotus { width: 34px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1280px) {
  .temple-pillar { display: none; }
}

/* Six nav items need a little more room than five: tighten spacing on
   narrower laptops before the nav collapses to the hamburger. */
@media (max-width: 1180px) {
  .header-inner { gap: 16px; }
  .brand-text { min-width: 210px; }
  .brand-text .en, .brand-text .sa { font-size: 1.3rem; }
  .main-nav { gap: 0; }
  .main-nav .nav-item > a { padding: 8px 10px; font-size: 0.82rem; }
  .main-nav .nav-item > a::after { left: 10px; right: 10px; }
}

@media (max-width: 980px) {
  .main-nav { display: none; }
  .hamburger { display: flex; }
  /* the envelope icon gives way to a labelled Contact link */
  .header-actions .icon-btn { display: none; }
  .header-contact-link { display: inline-flex; min-height: 40px; padding: 0 16px; }
  .header-actions { gap: 8px; }
  .header-inner { gap: 12px; padding: 12px 0; }
  .brand { min-width: 0; flex: 1 1 auto; }
  .brand-text { min-width: 0; flex: 1 1 auto; }
  .brand-text .en, .brand-text .sa { font-size: 1.35rem; }
  .temple-arch { height: 90px; }
  .arch-bell { width: 24px; }
  .arch-leaf { width: 19px; }
  .arch-lotus { width: 36px; }
  .hero { padding-top: 140px; }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .product-detail { grid-template-columns: 1fr; gap: 34px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  /* grid items default to min-width:auto, so a long unbreakable email in a
     button was stretching the card past the viewport */
  .contact-grid > *, .footer-grid > * { min-width: 0; }
  .contact-card .btn { max-width: 100%; }
}

@media (max-width: 560px) {
  .container { padding: 0 18px; }
  .brand { gap: 8px; min-width: 0; }
  .brand-bell { width: 24px; height: 24px; }
  .brand-text { height: 1.7rem; }
  .brand-text .en, .brand-text .sa { font-size: 1.12rem; line-height: 1.7rem; }
  .header-contact-link { font-size: 0.74rem; padding: 0 13px; }
  .hamburger { width: 36px; }
  .mobile-nav-overlay { padding-left: 22px; padding-right: 22px; }
  .mobile-nav-inner > a { font-size: 1.45rem; }
  .mobile-nav-inner > a.mobile-sublink { font-size: 0.9rem; }
  .temple-arch { height: 70px; }
  .arch-strip { height: 112px; }
  .arch-strip .temple-arch { height: 66px; }
  /* the .arch-strip prefixed rules above outrank a bare .arch-bell here,
     so the strip sizes have to be restated rather than inherited */
  .arch-strip .arch-bell { width: 19px; }
  .arch-strip .arch-leaf { width: 16px; }
  .arch-strip .arch-lotus { width: 28px; }
  .arch-bell { width: 20px; }
  .arch-lotus { width: 30px; }
  .arch-hanger.dense { display: none; }
  .hero { padding-top: 112px; }
  .category-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px; }
  .section { padding: 52px 0; }
  /* long email / link text inside buttons wraps instead of pushing the page wide */
  .btn {
    padding: 13px 16px;
    letter-spacing: 0.06em;
    line-height: 1.4;
    text-align: center;
    overflow-wrap: anywhere;
  }
  .contact-card .btn { font-size: 0.68rem; letter-spacing: 0.03em; }
}

/* Very small phones: keep the brand from crowding the Contact link */
@media (max-width: 380px) {
  .brand-text .en, .brand-text .sa { font-size: 1rem; }
  .header-contact-link { padding: 0 11px; letter-spacing: 0.02em; }
}

/* Touch devices: hover-only affordances shouldn't stick or block taps */
@media (hover: none) {
  .aarti-cursor { display: none !important; }
}