/* Ninefold — per-scent colour tokens and layout additions.
   A scent class on any element (or an ancestor) colours the bottles, glows and accents inside it. */
:root { --acc: #E0B65C; --lt: #F0C46A; --lb: #9A5F12; --glow: #C8892E; }
.nf-bottle { --acc: inherit; --lt: inherit; --lb: inherit; }
.sc-tea-mountain     { --acc: #B9B07A; --lt: #B9A86A; --lb: #5E5326; --glow: #7C8456; }
.sc-osmanthus-oolong { --acc: #E0B65C; --lt: #F0C46A; --lb: #9A5F12; --glow: #C8892E; }
.sc-moss-rock        { --acc: #9DB58F; --lt: #9AB58A; --lb: #34502F; --glow: #4F6B4A; }
.sc-cedre-fume       { --acc: #D08A5E; --lt: #C0703F; --lb: #4E2111; --glow: #7A3B22; }
.sc-black-wood       { --acc: #C9A27A; --lt: #6E4B36; --lb: #1E130D; --glow: #5A4030; }
.sc-alley            { --acc: #AFC2CC; --lt: #CBD7DC; --lb: #5E7480; --glow: #7F96A3; }
.nf-picker .dot { background: var(--acc); }
.nf-gift-art.trio { --g1: #2a2416; }

/* ── LAYOUT ADDITIONS ── */
.nf [hidden] { display: none !important; }
.nf-gifts { margin-top: 48px; }
.nf-related { margin-top: 44px; }
[data-cart-empty] { margin-top: 36px; }
.nf-cart { margin-top: 44px; }
.nf-checkout { margin-top: 72px; padding-top: 56px; }
.nf-care-row > .a { flex: 0 1 320px; }
.nf-hero-stage .nf-cn-big { writing-mode: horizontal-tb; right: auto; left: 50%; top: 6%; transform: translateX(-50%); font-size: 150px; letter-spacing: .14em; white-space: nowrap; opacity: .08; }
.nf-tier-head { flex-wrap: wrap; }
.nf-cart-thumb { font-size: 20px; text-align: center; line-height: 1.2; padding: 6px; }
.nf-goat-box { height: 300px; align-items: flex-end; padding-bottom: 18px; }
.nf-goat-box .nf-bottle { transform: none; width: 150px; height: 240px; }
.nf-goat-box .nf-bottle::before { width: 50px; height: 48px; margin-left: -25px; }
.nf-goat-box .nf-bottle::after { top: 47px; width: 28px; height: 12px; margin-left: -14px; }
.nf-goat-box .nf-bottle-glass { top: 58px; }
.nf-goat-box .nf-bottle-label b { font-size: 15px; }
.nf-goat-box::before { top: -58px; z-index: 2; }

/* ── SCENE RENDERS ── */
.nf-scenes { border-top: 1px solid var(--nf-line); background: #000; }
.nf-scenes-frame { position: relative; aspect-ratio: 2400 / 873; min-height: 420px; overflow: hidden; }
.nf-scene-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1); transition: opacity 1.2s ease, transform 7s ease-out; }
.nf-scene-img.on { opacity: 1; transform: scale(1.04); }
.nf-scenes-shade { position: absolute; inset: 0; background: linear-gradient(to right, rgba(11,11,12,.82) 0%, rgba(11,11,12,.45) 34%, rgba(11,11,12,0) 60%), linear-gradient(to top, rgba(11,11,12,.6), rgba(11,11,12,0) 40%); pointer-events: none; }
.nf-scenes-copy { position: absolute; left: 0; right: 0; bottom: 0; top: 0; display: flex; flex-direction: column; justify-content: center; gap: 16px; max-width: var(--nf-max); }
.nf-scenes-copy > * { max-width: 440px; }
.nf-scenes-copy .nf-body { color: var(--nf-nav); }
.nf-scenes-nav { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 20px; padding-bottom: 20px; }
.nf-scenes-dots { display: flex; gap: 6px; }
.nf-scenes-dots button { width: 44px; height: 32px; padding: 0; border: none; background: transparent; cursor: pointer; position: relative; }
.nf-scenes-dots button::after { content: ""; position: absolute; left: 6px; right: 22px; top: 15px; height: 2px; background: rgba(237,232,223,.4); transition: right .3s, background .3s; }
.nf-scenes-dots button[aria-current="true"]::after { right: 0; background: var(--nf-gold); }
.nf-scenes-arrows { display: flex; gap: 8px; }
.nf-scenes-arrows button { width: 44px; height: 44px; border: 1px solid var(--nf-line-2); background: transparent; color: var(--nf-text); cursor: pointer; font-size: 16px; }
.nf-scenes-arrows button:hover { border-color: var(--nf-gold); }
.nf-scene-band { border-top: 1px solid var(--nf-line); }
.nf-scene-band img { width: 100%; height: auto; aspect-ratio: 2400 / 873; object-fit: cover; }
@media (max-width: 820px) {
  .nf-scenes-frame { aspect-ratio: auto; height: 520px; min-height: 0; }
  .nf-scene-img { object-position: 62% 50%; }
  .nf-scenes-shade { background: linear-gradient(to top, rgba(11,11,12,.9) 0%, rgba(11,11,12,.55) 45%, rgba(11,11,12,0) 75%); }
  .nf-scenes-copy { justify-content: flex-end; padding-bottom: 28px; }
}