/* ==========================================================================
   Rudransh — design tokens
   ========================================================================== */
:root{
  --ivory: #FCF6E9;
  --ivory-deep: #E6D9BB;
  --maroon: #96631C;
  --maroon-dark: #4A2F10;
  --gold: #B8863E;
  --gold-light: #DDB876;
  --indigo: #74793E;
  --indigo-dark: #2E3018;
  --charcoal: #2A211A;
  --marigold: #B9642A;

  --font-display: 'Cormorant', Georgia, serif;
  --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --max-w: 1120px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--ivory);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--maroon-dark);
  margin: 0 0 0.4em;
  line-height: 1.12;
}
p{ margin: 0 0 1em; max-width: 62ch; }
button{ font-family: var(--font-body); cursor: pointer; }
:focus-visible{ outline: 2px solid var(--marigold); outline-offset: 3px; }

.wrap{ max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }

/* ==========================================================================
   Announcement bar
   ========================================================================== */
.announce-bar{
  background: #74CC00; color: var(--ivory);
  text-align:center; font-size: 0.82rem; letter-spacing: 0.03em;
  padding: 0.55rem 1rem;
}

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header{
  position: sticky; top:0; z-index: 40;
  background: rgba(241,231,210,0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--ivory-deep);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top: 0.9rem; padding-bottom: 0.9rem;
  position: relative; gap: 1rem;
}
.brand{ display:flex; align-items:center; gap: 0.55rem; font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--maroon); letter-spacing: 0.02em; }
.brand span{ color: var(--marigold); }
.brand-logo{ height: 40px; width: 40px; object-fit: contain; }
.nav-right{ display:flex; align-items:center; gap: 1.4rem; }
.bag-link{ display:inline-flex; align-items:center; justify-content:center; color: var(--maroon); }
.bag-link svg{ width: 22px; height: 22px; }
.nav-links{ display:flex; gap: 2rem; list-style:none; margin:0; padding:0; }
.nav-links a{
  font-size: 0.95rem; color: var(--charcoal);
  border-bottom: 2px solid transparent; padding-bottom: 2px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.nav-links a:hover, .nav-links a.active{ border-color: var(--marigold); color: var(--maroon); }
.nav-toggle{ display:none; }
.cart-pill{
  background: var(--maroon); color: var(--ivory); border: none; border-radius: 999px;
  padding: 0.5rem 1.1rem; font-size: 0.85rem;
}

@media (max-width: 720px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction: column; gap: 0; background: var(--ivory);
    border-bottom: 1px solid var(--ivory-deep);
    max-height: 0; overflow:hidden; transition: max-height 0.3s ease;
  }
  .nav-links.open{ max-height: 320px; }
  .nav-links a{ padding: 1rem var(--gutter); border-bottom: 1px solid var(--ivory-deep); display:block; }
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width: 40px; height: 40px; background:none; border: 1px solid var(--maroon);
    border-radius: 50%; color: var(--maroon); font-size: 1.1rem;
  }
}

/* ==========================================================================
   Maharaja door entrance animation
   ========================================================================== */
#door-overlay{ position: fixed; inset:0; z-index: 999; background: var(--indigo-dark); perspective: 1800px; overflow: hidden; }
#door-overlay .door-frame{ position:absolute; inset: 0; display:flex; transform-style: preserve-3d; }
.door-panel{
  width: 50%; height: 100%; position: relative;
  background:
    repeating-linear-gradient(115deg, rgba(184,134,62,0.08) 0 2px, transparent 2px 26px),
    linear-gradient(180deg, var(--maroon) 0%, var(--maroon-dark) 100%);
  box-shadow: inset 0 0 0 10px var(--maroon-dark), inset 0 0 0 14px var(--gold);
  transition: transform 1.4s cubic-bezier(.68,-0.15,.27,1.15);
  will-change: transform;
}
.door-panel.left{ transform-origin: left center; }
.door-panel.right{ transform-origin: right center; }
.door-panel::before{
  content:""; position:absolute; top:0; left:0; right:0; height: 22%;
  background: inherit; border-radius: 0 0 50% 50% / 0 0 40% 40%;
}
.door-panel.left::after, .door-panel.right::after{
  content:""; position:absolute; top:50%; width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--gold-light), var(--gold) 60%, var(--maroon-dark) 100%);
  box-shadow: 0 0 0 4px var(--maroon-dark), 0 0 12px rgba(0,0,0,0.4);
  transform: translateY(-50%);
}
.door-panel.left::after{ right: 8px; }
.door-panel.right::after{ left: 8px; }
.door-panel .jali{
  position:absolute; top: 8%; bottom: 8%; width: 18%;
  background-image:
    repeating-linear-gradient(45deg, transparent 0 10px, rgba(221,184,118,0.35) 10px 12px),
    repeating-linear-gradient(-45deg, transparent 0 10px, rgba(221,184,118,0.35) 10px 12px);
  opacity: 0.6;
}
.door-panel.left .jali{ left: 6%; }
.door-panel.right .jali{ right: 6%; }

.door-welcome{
  position:absolute; inset:0; z-index: 5; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; color: var(--gold-light);
  opacity: 0; transition: opacity 0.6s ease; pointer-events:none; padding: 0 1.5rem;
}
.door-welcome.show{ opacity: 1; }
.door-welcome .devanagari{ font-family: var(--font-display); font-size: clamp(1.6rem, 5vw, 2.6rem); letter-spacing: 0.02em; margin-bottom: 0.3rem; }
.door-welcome .english{ font-family: var(--font-body); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.28em; color: var(--ivory-deep); }
.door-skip{
  position:absolute; bottom: 2rem; left:50%; transform: translateX(-50%); z-index: 6;
  background: transparent; border: 1px solid var(--gold-light); color: var(--gold-light);
  font-size: 0.8rem; letter-spacing: 0.1em; padding: 0.55rem 1.3rem; border-radius: 999px;
  opacity: 0; transition: opacity 0.5s ease 1.1s;
}
.door-skip.show{ opacity: 0.85; }
.door-frame.open .door-panel.left{ transform: rotateY(-108deg); }
.door-frame.open .door-panel.right{ transform: rotateY(108deg); }
#door-overlay.hide{ display:none; }
@media (prefers-reduced-motion: reduce){ #door-overlay{ display:none !important; } }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{ padding: clamp(3rem,8vw,6rem) 0 clamp(2.5rem,6vw,4rem); display:grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem,5vw,4rem); align-items:center; }
.hero .eyebrow{ font-family: var(--font-display); font-style: italic; color: var(--marigold); font-size: 1.1rem; margin-bottom: 0.6rem; }
.hero h1{ font-size: clamp(2.4rem, 5.2vw, 3.6rem); }
.hero p.lede{ font-size: 1.1rem; color: var(--charcoal); }
.hero-art{ position:relative; aspect-ratio: 4/5; border-radius: 6px; background: linear-gradient(160deg, var(--gold-light), var(--maroon) 65%, var(--indigo)); overflow:hidden; }
.hero-art::before{ content:""; position:absolute; inset:0; background-image: repeating-linear-gradient(60deg, rgba(255,255,255,0.06) 0 3px, transparent 3px 22px); }
.btn{ display:inline-block; background: var(--maroon); color: var(--ivory); padding: 0.85rem 1.8rem; border-radius: 2px; font-size: 0.95rem; letter-spacing: 0.03em; border: 1px solid var(--maroon); transition: background 0.2s ease, color 0.2s ease; }
.btn:hover{ background: transparent; color: var(--maroon); }
.btn.outline{ background: transparent; color: var(--maroon); }
.btn.outline:hover{ background: var(--maroon); color: var(--ivory); }
.btn.gold{ background: var(--marigold); border-color: var(--marigold); color: var(--ivory); }
.btn.gold:hover{ background: transparent; color: var(--marigold); }
.hero .btn{ background: #6E1F2B; border-color: #6E1F2B; }
.hero .btn:hover{ background: transparent; color: #6E1F2B; }

@media (max-width: 800px){ .hero{ grid-template-columns: 1fr; } .hero-art{ order:-1; aspect-ratio: 16/10; } }

/* ==========================================================================
   Section shells
   ========================================================================== */
section{ padding: clamp(2.5rem,6vw,4.5rem) 0; }
.section-head{ max-width: 46ch; margin-bottom: 2.2rem; }
.section-head .eyebrow{ font-family: var(--font-display); font-style: italic; color: var(--marigold); font-size: 1.05rem; }

.philosophy{ background: var(--ivory-deep); }
.philosophy-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,3rem); align-items:center; }
.motif-block{ aspect-ratio: 1/1; border-radius: 4px; background: repeating-conic-gradient(from 0deg, var(--maroon) 0deg 12deg, var(--ivory-deep) 12deg 24deg); border: 10px solid var(--ivory-deep); box-shadow: 0 0 0 2px var(--gold); }
@media (max-width: 800px){ .philosophy-grid{ grid-template-columns: 1fr; } .motif-block{ order:-1; max-width: 280px; margin: 0 auto; } }

.stats{ text-align:center; }
.stats-row{ display:flex; flex-wrap:wrap; justify-content:center; gap: clamp(2rem,6vw,5rem); margin-top: 1.5rem; }
.stat .num{ font-family: var(--font-display); font-size: clamp(2.2rem,6vw,3.4rem); color: var(--maroon); }
.stat .label{ font-size: 0.95rem; color: var(--charcoal); }

/* ==========================================================================
   Shop
   ========================================================================== */
.product-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 1.8rem; }
.product-card{ background: #fff; border: 1px solid var(--ivory-deep); border-radius: 4px; overflow:hidden; display:flex; flex-direction:column; }
.product-photo{ aspect-ratio: 4/5; background: linear-gradient(150deg, var(--gold-light), var(--indigo)); position:relative; }
.product-photo img{ width:100%; height:100%; object-fit:cover; }
.product-photo::after{ content: attr(data-tag); position:absolute; top: 0.7rem; left: 0.7rem; background: rgba(42,33,26,0.75); color: var(--ivory); font-size: 0.72rem; padding: 0.25rem 0.6rem; border-radius: 999px; }
.product-body{ padding: 1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; gap: 0.4rem; flex:1; }
.product-body h3{ font-size: 1.25rem; margin-bottom: 0; }
.product-body .craft{ font-size: 0.85rem; color: var(--marigold); font-style: italic; font-family: var(--font-display); }
.product-body .price{ margin-top: auto; font-size: 1.1rem; color: var(--maroon-dark); font-weight: 600; }
.product-body .btn{ width:100%; text-align:center; margin-top: 0.5rem; border:none; }

.placeholder-note{ background: var(--ivory-deep); border-left: 3px solid var(--marigold); padding: 0.9rem 1.1rem; font-size: 0.9rem; margin-bottom: 2rem; border-radius: 2px; }

/* Order drawer */
#order-drawer{ position: fixed; inset: 0; z-index: 200; background: rgba(42,33,26,0.55); display:flex; justify-content:flex-end; opacity:0; pointer-events:none; transition: opacity 0.25s ease; }
#order-drawer.open{ opacity:1; pointer-events:auto; }
.drawer-panel{ width: min(420px, 100%); height:100%; background: var(--ivory); padding: 2rem clamp(1.4rem,4vw,2.2rem); overflow-y:auto; transform: translateX(100%); transition: transform 0.3s ease; border-left: 4px solid var(--gold); }
#order-drawer.open .drawer-panel{ transform: translateX(0); }
.drawer-close{ background:none; border:none; font-size: 1.6rem; color: var(--maroon); float:right; line-height:1; }
.field{ margin-bottom: 1.1rem; display:flex; flex-direction:column; gap: 0.35rem; }
.field label{ font-size: 0.85rem; color: var(--charcoal); }
.field input, .field select, .field textarea{ font-family: var(--font-body); font-size: 0.95rem; padding: 0.65rem 0.8rem; border: 1px solid var(--ivory-deep); border-radius: 2px; background: #fff; width: 100%; }
.field textarea{ resize: vertical; min-height: 70px; }
.form-status{ font-size: 0.9rem; margin-top: 0.8rem; min-height: 1.4em; }
.form-status.success{ color: #3a6b3f; }
.form-status.error{ color: #8a2e2e; }
.order-summary-line{ font-size: 0.9rem; background: var(--ivory-deep); padding: 0.6rem 0.8rem; border-radius: 2px; margin-bottom: 1rem; }

/* ==========================================================================
   Shop — store layout (sidebar + grid)
   ========================================================================== */
.shop-layout{ display:grid; grid-template-columns: 220px 1fr; gap: 2.2rem; align-items:flex-start; margin-top: 1rem; }
.shop-filters{ position: sticky; top: 90px; border: 1px solid var(--ivory-deep); border-radius: 4px; padding: 1.2rem; background: #fff; }
.filter-block{ margin-bottom: 1.3rem; }
.filter-block h4{ font-size: 0.95rem; margin-bottom: 0.6rem; color: var(--maroon-dark); }
.filter-block label{ display:flex; align-items:center; gap: 0.5rem; font-size: 0.88rem; margin-bottom: 0.5rem; cursor:pointer; color: var(--charcoal); }
.filter-block input[type="checkbox"]{ accent-color: var(--maroon); width: 15px; height: 15px; }
.filter-block select{ width:100%; padding: 0.5rem 0.6rem; border: 1px solid var(--ivory-deep); border-radius: 2px; font-size: 0.88rem; background:#fff; }
.shop-toolbar{ display:flex; justify-content:flex-end; margin-bottom: 0.9rem; font-size: 0.85rem; color: var(--charcoal); opacity:0.75; }
@media (max-width: 820px){ .shop-layout{ grid-template-columns: 1fr; } .shop-filters{ position:static; } }

.product-photo .sale-badge{
  position:absolute; top: 0.7rem; right: 0.7rem;
  background: #B23A2E; color: #fff; font-size: 0.72rem; font-weight:600;
  padding: 0.25rem 0.55rem; border-radius: 3px;
}
.product-body .price-row{ display:flex; align-items:baseline; gap: 0.5rem; margin-top: auto; }
.product-body .price-row .price{ margin-top:0; }
.product-body .price-row .was-price{ text-decoration: line-through; color: #9a8f7a; font-size: 0.85rem; }
.product-body .rating{ display:flex; align-items:center; gap: 0.3rem; font-size: 0.8rem; color: var(--marigold); }
.product-body .rating .count{ color: var(--charcoal); opacity: 0.65; }

/* ==========================================================================
   Reviews
   ========================================================================== */
.review-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 1.6rem; }
.review-card{ background: #fff; border: 1px solid var(--ivory-deep); border-radius: 4px; padding: 1.4rem 1.5rem; position:relative; }
.review-card .stars{ color: var(--marigold); letter-spacing: 0.15em; margin-bottom: 0.5rem; }
.review-card .who{ margin-top: 1rem; font-size: 0.85rem; color: var(--maroon-dark); font-weight:600; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,3.5rem); }
.contact-info p{ margin-bottom: 0.6rem; }
@media (max-width: 800px){ .contact-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background: var(--indigo-dark); color: var(--ivory-deep); padding: 2.6rem 0 2rem; }
.site-footer .wrap{ display:flex; flex-wrap:wrap; justify-content:space-between; gap: 2rem; }
.site-footer h4{ color: var(--gold-light); font-size: 1.1rem; }
.site-footer a{ color: var(--ivory-deep); }
.site-footer .social{ display:flex; align-items:center; gap: 0.9rem; margin-top: 0.7rem; }
.site-footer .social a{ display:inline-flex; color: var(--gold-light); transition: color 0.2s ease; }
.site-footer .social a:hover{ color: var(--ivory); }
.site-footer .social svg{ width: 19px; height: 19px; }
.footer-bottom{ text-align:center; font-size: 0.8rem; opacity: 0.65; margin-top: 2rem; }

/* ==========================================================================
   Scroll reveal — fade + rise as sections enter view
   ========================================================================== */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(.2,.7,.3,1), transform 0.8s cubic-bezier(.2,.7,.3,1);
  will-change: opacity, transform;
}
.reveal.in-view{ opacity: 1; transform: translateY(0); }
.reveal-delay-1.in-view{ transition-delay: 0.12s; }
.reveal-delay-2.in-view{ transition-delay: 0.24s; }
.reveal-delay-3.in-view{ transition-delay: 0.36s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; transition: none; }
}