/* ============================================================
   ENCHANTED FOREST — theme layer (loaded last, sits on top)
   Emerald + gold, elegant serif. Additive only: safe to remove.
   ============================================================ */

/* Signature ambient glow behind everything (from the Layout 1 mockup) */
body {
  background-color: #0a0e0c !important;
  background-image:
    radial-gradient(900px 520px at 78% -8%,  rgba(52,211,153,.10), transparent 60%),
    radial-gradient(720px 520px at 4% 10%,   rgba(31,111,74,.16),  transparent 55%),
    radial-gradient(820px 700px at 50% 120%, rgba(194,152,47,.07), transparent 60%) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

/* Make sure the old animated cosmic background never shows */
.cosmic-bg, .cosmic-canvas, #cosmic-bg, .cosmic-moon, .cosmic-nebula,
.cosmic-aurora, .cosmic-star, .cosmic-shooting-star, .cosmic-comet {
  display: none !important;
}

/* Metallic-gold wordmark for the brand name in the nav + footer */
.nav-logo-text, .footer-brand-name {
  background: linear-gradient(135deg, #e7ce84 0%, #c89a38 38%, #9a7322 70%, #e0c573 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Elegant serif headings, slightly looser */
h1, h2, h3, h4,
.section-title, .hero h1, .product-name, .footer-brand-name {
  letter-spacing: .01em;
}

/* Solid gold button (Layout 1 feature-row CTA) */
.btn-solid { background: #c2982f; color: #111a15; border: 1px solid #c2982f; }
.btn-solid:hover { background: #d8b65a; color: #0a0e0c; }

/* Homepage Instagram grid retired in the Layout 1 design */
.insta-section { display: none !important; }

/* ============================================================
   No top bar — fixed corner wordmark + edge "<<" drawer handle
   ============================================================ */

/* Announcement strip AND the old top bar removed entirely */
.announcement, .nav { display: none !important; }

/* Brand wordmark sits at the TOP OF THE PAGE and scrolls away normally
   (absolute, not fixed — only the edge handle follows the scroll). */
.ef-brand-fixed {
  position: absolute; top: 1.3rem; left: clamp(1rem, 4vw, 2.4rem);
  z-index: 1000; display: inline-flex; align-items: center; gap: .5rem;
  text-decoration: none;
}
.ef-brand-leaf { width: 30px; height: 30px; object-fit: contain; }
.nav-logo-text {
  font-size: 1.3rem !important; font-weight: 800 !important; letter-spacing: -.01em !important;
  filter: drop-shadow(0 1px 6px rgba(0,0,0,.55));
}

/* "<<" handle pinned to the right edge — stays put while you scroll, slides
   left with the panel when the drawer opens, and flips to ">>". */
.ef-handle {
  position: fixed; right: 0; top: 1.1rem; transform: none;
  z-index: 1002;
  width: 42px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(16, 26, 19, .72); color: #e7ce84; cursor: pointer;
  border: 1px solid rgba(231, 206, 132, .4); border-right: none;
  border-radius: 12px 0 0 12px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform .42s cubic-bezier(.4,0,.2,1), background .3s ease;
}
.ef-handle:hover { background: rgba(231, 206, 132, .16); }
.ef-handle svg { width: 22px; height: 22px; transition: transform .42s cubic-bezier(.4,0,.2,1); }
.ef-handle.active { transform: translateX(calc(-1 * min(340px, 86vw))); }
.ef-handle.active svg { transform: rotate(180deg); }

/* Dimmed backdrop container */
.ef-drawer {
  position: fixed; inset: 0; z-index: 1001;
  background: rgba(6, 10, 8, 0);
  pointer-events: none;
  transition: background .35s ease;
}
.ef-drawer.active { background: rgba(6, 10, 8, .55); pointer-events: auto; }

/* Panel that slides in from the right */
.ef-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(340px, 86vw);
  background: linear-gradient(180deg, #0e1712, #0a0e0c);
  border-left: 1px solid rgba(231, 206, 132, .22);
  box-shadow: -30px 0 60px -20px rgba(0,0,0,.7);
  transform: translateX(100%);
  transition: transform .4s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; justify-content: center; gap: 1.6rem;
  padding: 2.5rem 2.2rem;
}
.ef-drawer.active .ef-drawer-panel { transform: translateX(0); }

.ef-drawer .mm-links { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; }
.ef-drawer .mm-links a {
  font-family: var(--font-gothic); color: #e7ece8;
  font-size: 1.6rem; font-weight: 600; letter-spacing: .01em;
}
.ef-drawer .mm-links a:hover { color: #e7ce84; }
.ef-drawer .mm-cta {
  border: 1px solid rgba(231, 206, 132, .5); border-radius: 999px;
  padding: .3rem 1.5rem; font-size: 1.2rem !important; color: #e7ce84; margin-top: .5rem;
}
.ef-drawer .mm-actions {
  display: flex; gap: 1.6rem; margin-top: 1.2rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.ef-drawer .mm-actions .nav-icon { position: relative; color: #cdd8d0; cursor: pointer; }
.ef-drawer .mm-actions .nav-icon:hover { color: #e7ce84; }
.ef-drawer .mm-actions .nav-icon svg { width: 22px; height: 22px; }
.cart-count {
  position: absolute; top: -6px; right: -8px;
  background: #c2982f !important; color: #0a0e0c !important;
  font-size: .6rem; font-weight: 700; width: 15px; height: 15px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.mobile-menu-close {
  position: absolute; top: 16px; right: 16px;
  background: none; border: none; color: #9fb0a6; cursor: pointer; line-height: 1;
}
.mobile-menu-close svg { width: 24px; height: 24px; }
.mobile-menu-close:hover { color: #e7ce84; }

/* Nav logo: small gold leaf icon instead of the old circular photo */
.nav-logo-img {
  width: 40px !important;
  height: 40px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: contain !important;
}
.nav.scrolled .nav-logo-img {
  width: 34px !important;
  height: 34px !important;
}
/* show the wordmark next to the leaf on mobile too (it used to hide it for the big logo) */
@media (max-width: 767px) {
  .nav-logo-text { opacity: 1 !important; max-width: 60vw !important; }
  .announcement { padding-left: var(--space-md) !important; }
}