/* ─────────────────────────────────────────────────────────
   SATTVA SECRETS — Blanc edition (white theme polish, loads last)
   Scoped to body:not(.noir). Foil italics, light blobs, rotating
   seal, rounded editorial panels, gold ring tiles, pill buttons,
   bento grid, soft depth.
   ───────────────────────────────────────────────────────── */
body:not(.noir) { --r: 26px; --r-sm: 16px; --shadow-soft: 0 24px 60px rgba(43,33,24,.10), 0 4px 14px rgba(43,33,24,.05); --shadow-deep: 0 40px 90px rgba(43,33,24,.18), 0 10px 24px rgba(43,33,24,.06); }

/* Foil on italics in the light theme (darker gold so it reads on white) */
body:not(.noir) .title-lc i, body:not(.noir) .h-it, body:not(.noir) .lib-item h3 i { background: linear-gradient(100deg, #7A5A1E 0%, #C9A75B 30%, #E9D9A8 48%, #B08D3F 62%, #7A5A1E 100%); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: foil 8s linear infinite; }

/* Soft light blobs behind white sections */
body:not(.noir) #rituals, body:not(.noir) #library, body:not(.noir) #bulk, body:not(.noir) #faq, body:not(.noir) #instagram { position: relative; isolation: isolate; overflow: hidden; }
body:not(.noir) #rituals::before, body:not(.noir) #library::before, body:not(.noir) #bulk::before, body:not(.noir) #faq::before, body:not(.noir) #instagram::before {
  content: ""; position: absolute; inset: -20% -10%; z-index: -1; pointer-events: none; filter: blur(70px); opacity: .55;
  background:
    radial-gradient(38% 34% at 18% 28%, rgba(233,207,198,.9), transparent 70%),
    radial-gradient(34% 30% at 82% 22%, rgba(228,207,154,.85), transparent 70%),
    radial-gradient(40% 36% at 60% 88%, rgba(217,203,230,.75), transparent 70%);
  animation: blobs 28s ease-in-out infinite alternate;
}
@keyframes blobs { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(3%, -2%, 0) scale(1.06); } 100% { transform: translate3d(-3%, 2%, 0) scale(1.02); } }

/* Manifesto goes white with a gold glow and lit words in espresso */
body:not(.noir) .manifesto { background: var(--ivory); color: var(--ink); }
body:not(.noir) .manifesto::before { background: radial-gradient(50% 45% at 50% 60%, rgba(228,207,154,.35), transparent 70%); }
body:not(.noir) .manifesto { --lit: var(--espresso); }
body:not(.noir) .manifesto .w { color: var(--gold); }
body:not(.noir) .manifesto p[data-lit] { font-size: clamp(1.8rem, 4.2vw, 3.6rem); }

/* Rotating seal */
.seal { position: absolute; right: clamp(16px, 6vw, 96px); top: 40px; width: 132px; height: 132px; z-index: 2; pointer-events: none; }
.seal svg { width: 100%; height: 100%; animation: sealspin 24s linear infinite; }
.seal text { font-family: var(--sans); font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; fill: var(--gold); font-weight: 500; }
.seal .core { fill: var(--gold); }
@keyframes sealspin { to { transform: rotate(360deg); } }
@media (max-width: 768px) { .seal { width: 92px; height: 92px; top: 20px; right: 16px; } }

/* Rounded editorial panels + depth */
body:not(.noir) .product { border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--shadow-soft); transition: box-shadow .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
body:not(.noir) .product:hover { box-shadow: var(--shadow-deep); }
body:not(.noir) .gal-card, body:not(.noir) .reel, body:not(.noir) .an-visual .media, body:not(.noir) .story .media-wrap, body:not(.noir) .story .media, body:not(.noir) .qv-panel, body:not(.noir) .bulk-form, body:not(.noir) .ig-grid a, body:not(.noir) .cart-panel { border-radius: var(--r); overflow: hidden; }
body:not(.noir) .story .media-wrap { margin: clamp(16px, 3vw, 48px); box-shadow: var(--shadow-deep); }
body:not(.noir) .story { align-items: stretch; }
body:not(.noir) .story-copy { border-radius: var(--r); margin: clamp(16px, 3vw, 48px) clamp(16px, 3vw, 48px) clamp(16px, 3vw, 48px) 0; }
body:not(.noir) .story.flip .story-copy { margin: clamp(16px, 3vw, 48px) 0 clamp(16px, 3vw, 48px) clamp(16px, 3vw, 48px); }
@media (max-width: 1100px) { body:not(.noir) .story-copy, body:not(.noir) .story.flip .story-copy { margin: 0 clamp(16px, 3vw, 48px) clamp(16px, 3vw, 48px); } }
body:not(.noir) .banner { margin: 0 clamp(16px, 3vw, 48px); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-deep); }
body:not(.noir) .banner .media { border-radius: var(--r); }
body:not(.noir) #scrub .scrub-pin { border-radius: var(--r); margin: 0 clamp(16px, 3vw, 48px); }
body:not(.noir) #scrub { background: var(--ivory); }
body:not(.noir) .pillars { border-radius: var(--r); margin: 0 clamp(16px, 3vw, 48px); }
body:not(.noir) .pillars .pillar-grid, body:not(.noir) .stats { border-radius: var(--r-sm); overflow: hidden; }
body:not(.noir) .newsletter { border-radius: var(--r) var(--r) 0 0; }
body:not(.noir) .bulk-form { box-shadow: var(--shadow-soft); border-color: transparent; background: #fff; }
body:not(.noir) .bulk-form input, body:not(.noir) .bulk-form select, body:not(.noir) .bulk-form textarea { border-radius: 12px; background: var(--ivory); }
body:not(.noir) .pin-row { border-radius: 12px; overflow: hidden; }

/* Gold conic ring on collection tiles */
body:not(.noir) .ritual .ring { padding: 8px; border: 0; background: conic-gradient(from 0deg, #E9D9A8, #B08D3F, #F6EBD0, #C9A75B, #E9D9A8); position: relative; transition: transform .6s cubic-bezier(.22,1,.36,1), box-shadow .6s; }
body:not(.noir) .ritual .ring::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--ivory); }
body:not(.noir) .ritual .media { position: relative; z-index: 1; }
body:not(.noir) .ritual:hover .ring { transform: translateY(-6px) scale(1.02); box-shadow: 0 30px 60px rgba(176,141,63,.25); animation: ringrot 4s linear infinite; }
@keyframes ringrot { to { filter: hue-rotate(0deg); background-position: 100% 0; } }
body:not(.noir) .ritual h3 { font-size: 1.3rem; }

/* Pill buttons and gold quick-add */
body:not(.noir) .btn { border-radius: 999px; }
body:not(.noir) .btn-dark { box-shadow: 0 12px 30px rgba(43,33,24,.22); }
body:not(.noir) .btn-dark:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(176,141,63,.35); }
body:not(.noir) .add { background: var(--gold); border-radius: 999px; margin: 12px; width: calc(100% - 24px); box-shadow: 0 12px 28px rgba(176,141,63,.35); }
body:not(.noir) .add:hover { background: var(--espresso); }
body:not(.noir) .chip { border-radius: 999px; border: 1px solid transparent; padding: 10px 16px; }
body:not(.noir) .chip[aria-pressed="true"] { border-color: var(--gold); border-bottom-color: var(--gold); background: var(--gold-soft); color: var(--espresso); }
body:not(.noir) .rail-nav, body:not(.noir) .rv-arrow { box-shadow: var(--shadow-soft); }
body:not(.noir) .wish { box-shadow: 0 6px 16px rgba(43,33,24,.12); }
body:not(.noir) .sound { background: rgba(255,255,255,.9); color: var(--espresso); box-shadow: var(--shadow-soft); }
body:not(.noir) .trust { background: #fff; }

/* Bento grid */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 200px; gap: 16px; }
.bt { position: relative; border-radius: var(--r); overflow: hidden; background: #fff; box-shadow: var(--shadow-soft); transition: transform .7s cubic-bezier(.22,1,.36,1), box-shadow .7s; }
.bt:hover { transform: translateY(-6px); box-shadow: var(--shadow-deep); }
.bt .media { position: absolute; inset: 0; }
.bt .media > * { transition: transform 1.2s cubic-bezier(.22,1,.36,1); }
.bt:hover .media > * { transform: scale(1.05); }
.bt .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 24px; color: #fff; background: linear-gradient(to top, rgba(22,14,9,.75), transparent); z-index: 2; }
.bt .cap h3 { font-size: 1.5rem; }
.bt .cap small { display: block; font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-3); margin-top: 4px; }
.bt.text { padding: 28px; display: flex; flex-direction: column; justify-content: space-between; }
.bt.text .caps { color: var(--gold); }
.bt.text h3 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.05; }
.bt.text p { color: var(--mute); font-size: .92rem; }
.bt.text .big { font-family: var(--serif); font-size: clamp(3rem, 5vw, 4.6rem); line-height: 1; color: var(--espresso); }
.bt.text .big i { font-style: normal; color: var(--gold); }
.bt.gold { background: linear-gradient(135deg, #F6EBD0, #E9D9A8 60%, #F1E7CF); }
.bt.dark { background: var(--espresso); color: #F1E7CF; }
.bt.dark .caps { color: var(--gold-2); } .bt.dark p { color: rgba(241,231,207,.7); } .bt.dark h3 { color: #fff; }
.bt.dark .big { color: #fff; }
.bt-a { grid-column: span 3; grid-row: span 2; } .bt-b { grid-column: span 2; } .bt-c { grid-column: span 1; } .bt-d { grid-column: span 3; } .bt-e { grid-column: span 2; grid-row: span 2; } .bt-f { grid-column: span 2; } .bt-g { grid-column: span 2; }
@media (max-width: 1000px) { .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; } .bt-a, .bt-b, .bt-c, .bt-d, .bt-e, .bt-f, .bt-g { grid-column: span 1; grid-row: span 1; } .bt-a, .bt-e { grid-row: span 2; } .bt-d { grid-column: span 2; } }

/* Quick view + cart depth */
body:not(.noir) .qv-panel { box-shadow: var(--shadow-deep); }
body:not(.noir) .qv-size button { border-radius: 999px; }
body:not(.noir) .qty { border-radius: 999px; overflow: hidden; }
body:not(.noir) .ci .thumb { border-radius: 12px; }

/* Section spacing rhythm on white */
body:not(.noir) .sec-head p { color: var(--mute); }

/* ── White hero (split editorial) ─────────────────────── */
.hero.hero-white { height: auto; min-height: 0; max-height: none; background: var(--ivory); color: var(--ink); overflow: visible; padding: clamp(40px, 6vw, 80px) 0 clamp(40px, 5vw, 72px); position: relative; }
.hero.hero-white::before { content: ""; position: absolute; inset: -10% -10% 0; z-index: 0; pointer-events: none; filter: blur(80px); opacity: .6; background: radial-gradient(40% 40% at 20% 20%, rgba(233,207,198,.9), transparent 70%), radial-gradient(36% 36% at 80% 30%, rgba(228,207,154,.9), transparent 70%), radial-gradient(40% 40% at 60% 100%, rgba(217,203,230,.7), transparent 70%); animation: blobs 30s ease-in-out infinite alternate; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 80px); align-items: center; min-height: min(78vh, 760px); }
.hero.hero-white .hero-copy { position: static; inset: auto; display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 0; gap: 22px; transform: none !important; opacity: 1 !important; }
.hero.hero-white .hero-copy .caps { color: var(--gold); }
.hero.hero-white .hero-copy h1 { color: var(--ink); font-size: clamp(3.2rem, 7.4vw, 6.4rem); }
.hero.hero-white .hero-copy h1 i .ch { background: linear-gradient(100deg, #7A5A1E 0%, #C9A75B 30%, #E9D9A8 48%, #B08D3F 62%, #7A5A1E 100%); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: foil 8s linear infinite; }
.hero.hero-white .hero-copy p { color: var(--espresso-2); max-width: 50ch; }
.hero.hero-white .hero-cta { justify-content: flex-start; }
.hero-facts { list-style: none; margin: 10px 0 0; padding: 18px 0 0; display: flex; gap: clamp(20px, 3vw, 40px); border-top: 1px solid var(--line); opacity: 0; animation: up 1s var(--ease) 1.1s forwards; }
.hero-facts b { display: block; font-family: var(--serif); font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 500; color: var(--espresso); line-height: 1; }
.hero-facts span { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.hero-panel { position: relative; aspect-ratio: 4/5; max-height: min(78vh, 720px); border-radius: var(--r); overflow: hidden; background: var(--espresso); box-shadow: var(--shadow-deep); }
.hero-panel .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--ease); }
.hero-panel .slide.is-on { opacity: 1; }
.hero-panel .slide .media { position: absolute; inset: 0; }
.hero-panel .slide.is-on .media > * { animation: kb 14s var(--ease) forwards; }
.hero-panel .slide .media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(22,14,9,.35), transparent 50%); }
.hero-panel #embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.hero-panel .hero-dots { bottom: 22px; }
.hero-badge { position: absolute; left: 22px; top: 22px; width: 104px; height: 104px; z-index: 3; }
.hero-badge svg { width: 100%; height: 100%; animation: sealspin 22s linear infinite; }
.hero-badge text { font-family: var(--sans); font-size: 11px; letter-spacing: .28em; text-transform: uppercase; fill: #F1E7CF; font-weight: 500; }
.hero.hero-white .hero-copy .caps, .hero.hero-white .hero-copy p, .hero.hero-white .hero-cta { opacity: 0; animation: up 1s var(--ease) forwards; }
.hero.hero-white .hero-copy .caps { animation-delay: .2s; } .hero.hero-white .hero-copy p { animation-delay: .6s; } .hero.hero-white .hero-cta { animation-delay: .8s; }
@media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; min-height: 0; } .hero-panel { aspect-ratio: 4/5; max-height: 70vh; order: -1; } }
@media (max-width: 768px) { .hero-facts { gap: 18px; flex-wrap: wrap; } .hero-panel { max-height: 60vh; } }

/* ── Instagram embeds ─────────────────────────────────── */
.ig-embeds { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; justify-items: center; }
.ig-embeds .instagram-media { margin: 0 !important; width: 100% !important; min-width: 0 !important; max-width: 400px !important; border-radius: var(--r) !important; box-shadow: var(--shadow-soft) !important; border: 1px solid var(--line) !important; overflow: hidden; }
.ig-embeds blockquote { background: #fff; min-height: 480px; display: grid; place-items: center; font-family: var(--sans); font-size: .8rem; color: var(--mute); }
.ig-embeds blockquote > a { color: var(--gold); letter-spacing: .1em; text-transform: uppercase; font-size: .7rem; }

/* ── Self-hosted Instagram tiles ──────────────────────── */
.ig-live { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ig-tile { position: relative; aspect-ratio: 4/5; border-radius: var(--r); overflow: hidden; background: var(--sand); box-shadow: var(--shadow-soft); display: block; transition: transform .7s cubic-bezier(.22,1,.36,1), box-shadow .7s; }
.ig-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-deep); }
.ig-tile .media { position: absolute; inset: 0; }
.ig-tile .media > * { transition: transform 1.2s cubic-bezier(.22,1,.36,1); }
.ig-tile:hover .media > * { transform: scale(1.04); }
.ig-tile .ig-mark { position: absolute; left: 14px; top: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.88); color: var(--espresso); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; }
.ig-tile .ig-mark svg { width: 14px; height: 14px; }
.ig-tile.reel .play { display: none; }
.ig-tile::after { content: "Open on Instagram"; position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 16px; background: linear-gradient(to top, rgba(22,14,9,.65), transparent); color: #fff; font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; opacity: 0; transition: opacity .3s; z-index: 2; }
.ig-tile:hover::after { opacity: 1; }
@media (max-width: 1000px) { .ig-live { grid-template-columns: repeat(2, 1fr); gap: 12px; } }