/* ── THE KALYANS — SHARED CSS ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --void:          #0A0A08;
  --deep-cosmos:   #111110;
  --obsidian:      #1C1C19;
  --ancient-stone: #2E2D28;
  --ash:           #7A786E;
  --parchment:     #C8C3B0;
  --bone:          #E8E3D0;
  --pure:          #FFFFFF;
  --solar-white:   #F8F5EC;
  --solar-corona:  #F5EDD4;
  --ancient-gold:  #C9A84C;
  --solar-flare:   #E8C96A;
  --deep-amber:    #8A6E28;
  --nav-h:         64px;
}

html { scroll-behavior:smooth; font-size:16px; }

body {
  background: var(--solar-white);
  color: var(--void);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  min-height: 100vh;
  overflow-x: hidden;
  padding-top: var(--nav-h);
}

/* grain overlay */
body::before {
  content:'';
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events:none; z-index:0; opacity:0.2;
}

/* ── WATERMARK ── */
.bg-watermark {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(72vw,72vh); height:min(72vw,72vh);
  border-radius:50%;
  border:1px solid rgba(201,168,76,0.18);
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; z-index:0;
  background:transparent;
}
.bg-watermark-mid {
  width:62%; height:62%; border-radius:50%;
  border:1px solid rgba(201,168,76,0.28);
  display:flex; align-items:center; justify-content:center;
  background:transparent;
}
.bg-watermark-core {
  width:80px; height:80px; border-radius:50%;
  background:var(--pure);
}

/* ── NAV ── */
.site-nav {
  position:fixed; top:0; left:0; right:0;
  height:var(--nav-h);
  background:var(--void);
  border-bottom:1px solid rgba(46,45,40,0.5);
  z-index:500;
  transition:box-shadow 0.3s;
}
.site-nav.scrolled { box-shadow:0 4px 32px rgba(10,10,8,0.3); }
.site-nav { z-index:500; }
.nav-mobile-menu,
.container,
.site-footer,
.toast,
#loginModal,
#gateOverlay {
  position:relative;
  z-index:1;
}

.nav-inner {
  max-width:1280px; margin:0 auto; padding:0 32px;
  height:100%; display:flex; align-items:center;
  justify-content:space-between; gap:28px;
}

.nav-logo { display:flex; align-items:center; gap:12px; flex-shrink:0; text-decoration:none; }
.nav-circle { width:24px; height:24px; border-radius:50%; background:var(--pure); flex-shrink:0; }
.nav-brand { font-family:'Cormorant SC',serif; font-size:12px; font-weight:300; letter-spacing:0.38em; color:var(--pure); }

.nav-links { display:flex; align-items:center; gap:30px; flex:1; justify-content:center; }
.nav-link {
  font-size:9px; font-weight:300; letter-spacing:0.34em; text-transform:uppercase;
  color:var(--parchment); text-decoration:none; transition:color 0.3s; position:relative;
}
.nav-link::after {
  content:''; position:absolute; bottom:-4px; left:0; right:0;
  height:1px; background:var(--ancient-gold);
  transform:scaleX(0); transition:transform 0.3s;
}
.nav-link:hover, .nav-link.active { color:var(--pure); }
.nav-link:hover::after, .nav-link.active::after { transform:scaleX(1); }

.nav-actions { display:flex; align-items:center; gap:16px; }
.nav-action { color:var(--parchment); transition:color 0.3s; position:relative; display:flex; align-items:center; text-decoration:none; }
.nav-action:hover { color:var(--pure); }

.cart-badge {
  position:absolute; top:-8px; right:-8px;
  width:15px; height:15px; border-radius:50%;
  background:var(--ancient-gold); color:var(--void);
  font-size:8px; font-weight:300;
  display:flex; align-items:center; justify-content:center;
}

.nav-mobile-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.nav-mobile-toggle span { display:block; width:22px; height:1px; background:var(--parchment); transition:all 0.3s; }
.nav-mobile-toggle.open span:nth-child(1) { transform:rotate(45deg) translate(4px,4px); }
.nav-mobile-toggle.open span:nth-child(2) { opacity:0; }
.nav-mobile-toggle.open span:nth-child(3) { transform:rotate(-45deg) translate(4px,-4px); }

.nav-mobile-menu { display:none; flex-direction:column; background:var(--deep-cosmos); border-top:1px solid var(--ancient-stone); }
.nav-mobile-menu.open { display:flex; }
.nav-mobile-menu a, .nav-mobile-menu button {
  padding:16px 32px; font-size:11px; font-weight:300; letter-spacing:0.4em;
  text-transform:uppercase; color:var(--parchment); text-decoration:none;
  border-bottom:1px solid rgba(46,45,40,0.4); transition:color 0.2s, background 0.2s;
  background:none; border-left:none; border-right:none; border-top:none; cursor:pointer;
  font-family:inherit; text-align:left; width:100%;
}
.nav-mobile-menu a:hover, .nav-mobile-menu button:hover { color:var(--pure); background:rgba(255,255,255,0.03); }

/* ── FOOTER ── */
.site-footer { background:var(--void); border-top:1px solid var(--ancient-stone); margin-top:88px; }
.footer-inner { max-width:1280px; margin:0 auto; padding:0 32px; }
.footer-top {
  display:grid; grid-template-columns:1fr 2fr; gap:80px;
  padding:60px 0 44px; border-bottom:1px solid var(--ancient-stone);
}
.footer-logo { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.footer-circle { width:22px; height:22px; border-radius:50%; background:var(--pure); flex-shrink:0; }
.footer-name { font-family:'Cormorant SC',serif; font-size:11px; font-weight:300; letter-spacing:0.38em; color:var(--pure); }
.footer-links { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.footer-col { display:flex; flex-direction:column; gap:14px; }
.footer-col #footerCategoryLinks { display:flex; flex-direction:column; gap:14px; }
.footer-col-title { font-size:8px; font-weight:300; letter-spacing:0.42em; text-transform:uppercase; color:var(--ancient-gold); margin-bottom:4px; }
.footer-col a { font-size:10px; font-weight:300; letter-spacing:0.16em; color:var(--ash); transition:color 0.3s; text-decoration:none; }
.footer-col a:hover { color:var(--parchment); }
.footer-bottom {
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 0; font-size:9px; font-weight:300;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--ash);
}
.footer-bottom a { transition:color 0.3s; text-decoration:none; color:var(--ash); }
.footer-bottom a:hover { color:var(--parchment); }

/* ── CONTAINER ── */
.container { max-width:1280px; margin:0 auto; padding:0 32px; }

/* ── PAGE HEADER ── */
.page-header { padding:52px 0 36px; border-bottom:1px solid rgba(200,195,176,0.3); margin-bottom:36px; }
.page-eyebrow { font-size:8px; font-weight:300; letter-spacing:0.46em; text-transform:uppercase; color:var(--ancient-gold); margin-bottom:14px; }
.page-title { font-family:'Cormorant Garamond',serif; font-size:clamp(30px,4vw,48px); font-weight:300; color:var(--void); line-height:1.05; }
.page-title em { font-style:italic; color:var(--deep-amber); }
.page-desc { margin-top:14px; font-size:12px; font-weight:300; letter-spacing:0.06em; color:var(--ash); max-width:440px; line-height:1.8; }

/* ── TYPOGRAPHY ── */
h1,h2,h3,h4 { font-family:'Cormorant Garamond',serif; font-weight:300; line-height:1.1; }
p { font-size:13px; font-weight:300; line-height:1.78; letter-spacing:0.015em; color:var(--ancient-stone); }
a { text-decoration:none; color:inherit; }
em { font-style:italic; color:var(--deep-amber); }

/* ── BUTTONS ── */
.btn-primary {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--void); color:var(--pure); border:1px solid var(--void);
  padding:13px 24px; font-family:'Jost',sans-serif; font-size:10px; font-weight:300;
  letter-spacing:0.32em; text-transform:uppercase; cursor:pointer; transition:all 0.3s; white-space:nowrap;
}
.btn-primary:hover { background:var(--ancient-stone); border-color:var(--ancient-stone); }

.btn-outline {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:transparent; color:var(--void); border:1px solid var(--ancient-stone);
  padding:12px 22px; font-family:'Jost',sans-serif; font-size:10px; font-weight:300;
  letter-spacing:0.3em; text-transform:uppercase; cursor:pointer; transition:all 0.3s; white-space:nowrap;
}
.btn-outline:hover { border-color:var(--void); background:var(--void); color:var(--pure); }

.btn-gold {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--ancient-gold); color:var(--void); border:1px solid var(--ancient-gold);
  padding:13px 24px; font-family:'Jost',sans-serif; font-size:10px; font-weight:300;
  letter-spacing:0.3em; text-transform:uppercase; cursor:pointer; transition:all 0.3s; white-space:nowrap;
}
.btn-gold:hover { background:var(--deep-amber); border-color:var(--deep-amber); }
.btn-gold:disabled { opacity:0.5; cursor:not-allowed; }

/* ── FORMS ── */
.form-group { display:flex; flex-direction:column; gap:8px; }
.form-label { font-size:8px; font-weight:300; letter-spacing:0.38em; text-transform:uppercase; color:var(--ash); }
.form-input, .form-select, .form-textarea {
  background:transparent; border:1px solid var(--parchment); outline:none;
  padding:12px 14px; font-family:'Jost',sans-serif; font-size:12px; font-weight:300;
  letter-spacing:0.06em; color:var(--void); transition:border-color 0.3s; width:100%; appearance:none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color:var(--ancient-gold); }
.form-input::placeholder, .form-textarea::placeholder { color:var(--parchment); }
.form-textarea { resize:vertical; min-height:120px; }

/* ── PRODUCT CARD ── */
.product-card { display:flex; flex-direction:column; cursor:pointer; transition:transform 0.4s; text-decoration:none; }
.product-card:hover { transform:translateY(-4px); }
.product-card-image { aspect-ratio:3/4; background:var(--solar-corona); position:relative; overflow:hidden; margin-bottom:14px; }
.product-card-image img { width:100%; height:100%; object-fit:cover; transition:transform 0.6s; }
.product-card:hover .product-card-image img { transform:scale(1.04); }
.product-card-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.product-card-placeholder .p-circle { width:60px; height:60px; border-radius:50%; background:var(--parchment); opacity:0.5; }
.product-card-category { font-size:8px; font-weight:300; letter-spacing:0.38em; text-transform:uppercase; color:var(--ancient-gold); margin-bottom:6px; }
.product-card-name { font-family:'Cormorant Garamond',serif; font-size:17px; font-weight:300; color:var(--void); margin-bottom:6px; line-height:1.2; }
.product-card-price { font-size:12px; font-weight:300; letter-spacing:0.08em; color:var(--ancient-stone); }

/* ── BREADCRUMB ── */
.breadcrumb { display:flex; align-items:center; gap:10px; font-size:10px; font-weight:300; letter-spacing:0.3em; text-transform:uppercase; color:var(--ash); margin-bottom:40px; }
.breadcrumb a { transition:color 0.3s; }
.breadcrumb a:hover { color:var(--void); }
.breadcrumb-sep { opacity:0.4; }

/* ── TOAST ── */
.toast {
  position:fixed; bottom:32px; right:32px;
  background:var(--void); color:var(--bone);
  padding:14px 18px; font-size:10px; font-weight:300;
  letter-spacing:0.18em; text-transform:uppercase;
  border-left:2px solid var(--ancient-gold); z-index:9000;
  opacity:0; transform:translateY(16px);
  transition:all 0.4s cubic-bezier(0.16,1,0.3,1); pointer-events:none;
}
.toast.show { opacity:1; transform:translateY(0); }

/* ── LOADING ── */
.loading-ring {
  width:32px; height:32px; border:1px solid var(--parchment);
  border-top-color:var(--ancient-gold); border-radius:50%;
  animation:spin 0.8s linear infinite; margin:40px auto;
}
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }

/* ── SECTION HEADERS ── */
.section-eyebrow { font-size:8px; font-weight:300; letter-spacing:0.48em; text-transform:uppercase; color:var(--ancient-gold); margin-bottom:10px; }
.section-title { font-family:'Cormorant Garamond',serif; font-size:clamp(24px,3.2vw,40px); font-weight:300; color:var(--void); line-height:1.1; }
.section-title em { font-style:italic; color:var(--deep-amber); }
.section-header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:40px; }

.products-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }

/* ── POLICY PAGES ── */
.policy-body { max-width:720px; margin:0 auto; padding-bottom:84px; }
.policy-body h2 { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:300; color:var(--void); margin:34px 0 12px; }
.policy-body p { font-size:12px; font-weight:300; line-height:1.78; letter-spacing:0.05em; color:var(--ancient-stone); margin-bottom:14px; }
.policy-body ul { padding-left:18px; margin-bottom:14px; }
.policy-body ul li { font-size:12px; font-weight:300; line-height:1.78; letter-spacing:0.05em; color:var(--ancient-stone); margin-bottom:6px; }

/* ── RESPONSIVE ── */
@media(max-width:1100px){ .nav-inner,.container,.footer-inner{ padding:0 24px; } .products-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:900px){
  .nav-links{ display:none; } .nav-mobile-toggle{ display:flex; }
  .nav-inner,.container,.footer-inner{ padding:0 20px; }
  .footer-top{ grid-template-columns:1fr; gap:48px; }
  .footer-links{ grid-template-columns:1fr 1fr; }
  .products-grid{ grid-template-columns:repeat(2,1fr); gap:24px; }
}
@media(max-width:640px){
  .nav-inner,.container,.footer-inner{ padding:0 16px; }
  .footer-links{ grid-template-columns:1fr 1fr; }
  .footer-bottom{ flex-direction:column; gap:12px; text-align:center; }
  .products-grid{ grid-template-columns:1fr 1fr; gap:16px; }
}