/* Headlines are steady regardless of motion settings or reveal containers. */
:where(#mood-preview) h1,:where(#mood-preview) h2,:where(#mood-preview) h3,:where(#mood-preview) h4,:where(#mood-preview) h5,:where(#mood-preview) h6{animation:none!important;transition:none!important;text-shadow:none!important}
:where(#mood-preview) .hero h1{opacity:1!important;transform:none!important}
:where(#mood-preview) .reveal:has(h1),:where(#mood-preview) .reveal:has(h2),:where(#mood-preview) .reveal:has(h3),:where(#mood-preview) h1.reveal,:where(#mood-preview) h2.reveal,:where(#mood-preview) h3.reveal{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
:where(#mood-preview) .taste-notes{justify-content:center}
:where(#mood-preview) .botanical-specimen>img{width:min(78%,330px);height:300px;object-fit:contain;mix-blend-mode:multiply}
@media(max-width:560px){:where(#mood-preview) .botanical-specimen>img{height:220px;width:min(78%,260px)}}

:where(#mood-preview) :is(h1,h2,h3,h4,h5,h6) *{animation:none!important;transition:none!important;text-shadow:none!important}
:where(#mood-preview) .taste-grid{grid-template-columns:1fr 25px 1fr 25px 1fr;max-width:760px}

/* Paired desktop and phone photography keeps the complete composition visible. */
:where(#mood-preview) .responsive-photo{display:block;width:100%;height:100%}
:where(#mood-preview) .bonus-art.ebook-original{width:100%;padding:0;align-self:center;transform-origin:50% 75%}
:where(#mood-preview) .ebook-crop{position:relative;overflow:hidden;aspect-ratio:1.60;border-radius:8px}
:where(#mood-preview) .ebook-crop picture{display:contents}
:where(#mood-preview) .ebook-crop img{position:absolute;width:204.082%;max-width:none;height:auto;left:-100%;top:-16.667%;object-fit:initial}
@media(prefers-reduced-motion:reduce){:where(#mood-preview) .ebook-original{animation:none!important;transform:none!important}}
:where(#mood-preview) .gallery-main{aspect-ratio:3/2;height:auto!important;max-height:none}
:where(#mood-preview) .gallery-main>.responsive-photo>img{width:100%;height:100%;object-fit:cover}
:where(#mood-preview) .film-button{aspect-ratio:3/2;min-height:0!important;height:auto!important}
:where(#mood-preview) .ritual-visual{min-height:0;height:auto;aspect-ratio:auto;align-self:center}
:where(#mood-preview) .film-button>.responsive-photo>img{width:100%;height:100%;object-fit:cover}
:where(#mood-preview) .bonus-art>.responsive-photo>img{width:100%;height:auto;object-fit:contain}
@media(min-width:801px){
 :where(#mood-preview) .hero{height:clamp(610px,50vw,760px);min-height:610px}
 :where(#mood-preview) .hero-art{width:76%}
 :where(#mood-preview) .hero-art picture img,:where(#mood-preview) .hero-art .atmosphere-loop{object-position:center;transform:none!important}
}
@media(min-width:681px) and (max-width:800px){
 :where(#mood-preview) .hero-art picture img,:where(#mood-preview) .hero-art .atmosphere-loop{object-position:center top;transform:none!important}
}
@media(max-width:680px){
 :where(#mood-preview) .gallery-main,:where(#mood-preview) .film-button{aspect-ratio:2/3}
 :where(#mood-preview) .hero-art picture img,:where(#mood-preview) .hero-art .atmosphere-loop{object-position:center!important;transform:none!important}
}

@font-face{font-family:'Ariata Display';src:url('https://cdn11.bigcommerce.com/s-no04cebghs/content/mood-preview/v1/fonts/AriataDisplay-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Aeonik;src:url('https://cdn11.bigcommerce.com/s-no04cebghs/content/mood-preview/v1/fonts/Aeonik-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Aeonik;src:url('https://cdn11.bigcommerce.com/s-no04cebghs/content/mood-preview/v1/fonts/Aeonik-Medium.woff2') format('woff2');font-weight:500 600;font-display:swap}
@font-face{font-family:Aeonik;src:url('https://cdn11.bigcommerce.com/s-no04cebghs/content/mood-preview/v1/fonts/Aeonik-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Aeonik;src:url('https://cdn11.bigcommerce.com/s-no04cebghs/content/mood-preview/v1/fonts/Aeonik-RegularItalic.woff2') format('woff2');font-style:italic;font-display:swap}
:where(#mood-preview) .wordmark{padding:0;flex-shrink:0}:where(#mood-preview) .brand-logo{width:140px;height:auto;object-fit:contain}:where(#mood-preview) .site-header.scrolled .brand-logo{filter:brightness(0)}
:where(#mood-preview) .small-star,:where(#mood-preview) .quiz-star,:where(#mood-preview) .card-cover-star,:where(#mood-preview) .specimen-star,:where(#mood-preview) .faq-sparkle,:where(#mood-preview) .card-endmark,:where(#mood-preview) .header-shop>span,:where(#mood-preview) .hero-secondary>span{display:none!important}
:where(#mood-preview) #open-film{aspect-ratio:16/9!important}:where(#mood-preview) #open-film>img{width:100%;height:100%;object-fit:contain}:where(#mood-preview) .film-selector{display:none}
@media(max-width:680px){:where(#mood-preview) .brand-logo{width:114px}:where(#mood-preview) .taste-grid{gap:8px}:where(#mood-preview) .taste-note h3{font-size:21px}}

:where(#mood-preview) #motion-study{position:relative;aspect-ratio:16/9;width:100%;height:auto;min-height:0;background:#120e12}:where(#mood-preview) #motion-study>iframe,:where(#mood-preview) #motion-study>video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:contain}:where(#mood-preview) .film-fallback{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 0}:where(#mood-preview) .film-fallback button,:where(#mood-preview) .film-fallback a{min-height:44px;padding:10px 15px;font-size:13px;border:1px solid #ffffff50;border-radius:4px;background:transparent;color:inherit}:where(#mood-preview) .film-fallback button:hover{background:#ffffff18}:where(#mood-preview) .film-fallback a{text-decoration:underline}
/* The complete formula is visible by name, including on touch screens. */
:where(#mood-preview) .ingredient-switcher{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;flex-wrap:wrap}
:where(#mood-preview) .ingredient-switcher button{width:auto!important;min-width:0!important;height:auto;min-height:44px;border-radius:5px;padding:8px 10px;text-align:left;font-size:11px;line-height:1.3;display:flex;gap:8px;align-items:center}
:where(#mood-preview) .ingredient-switcher button span{font-size:9px;opacity:.65;flex-shrink:0}
:where(#mood-preview) .ingredient-count{font-size:13px!important;margin-top:10px!important}
:where(#mood-preview) .botanical-specimen>img{border-radius:50%;clip-path:circle(50%);filter:none;box-shadow:0 10px 45px #5c48431a;object-fit:cover;object-position:center}
:where(#mood-preview) .bonus-art.ebook-fan{position:relative;aspect-ratio:1.58;width:100%;padding:0;transform:none;align-self:center;isolation:isolate}
:where(#mood-preview) .ebook-cover{position:absolute;top:5%;height:90%;background:transparent;padding:0;transform:none;transition:transform .35s cubic-bezier(.22,1,.36,1);filter:drop-shadow(0 12px 13px #39252220);border-radius:0}
:where(#mood-preview) .ebook-cover img{display:block;width:100%;height:100%;object-fit:fill;border-radius:0;box-shadow:none;transform:none}
:where(#mood-preview) .ebook-golden{left:0;width:27.54%;z-index:1}:where(#mood-preview) .ebook-confidence{left:70.65%;width:29.46%;z-index:1}:where(#mood-preview) .ebook-mood{left:27.2%;width:43.8%;z-index:2}
html.mood-preview-page[data-motion=on] .ebook-cover:focus-visible{transform:translateY(-5px)}
@media(hover:hover){html.mood-preview-page[data-motion=on] .ebook-cover:hover{transform:translateY(-5px)}}
@media(prefers-reduced-motion:reduce){:where(#mood-preview) .ebook-cover{transition:none!important;transform:none!important}}
@media(max-width:680px){:where(#mood-preview) .botanical-detail{padding:28px 22px}:where(#mood-preview) .bonus-art.ebook-fan{margin:22px auto 0;max-width:520px}:where(#mood-preview) .ingredient-switcher button{font-size:11px}}
:where(#mood-preview) .bonus-section{overflow:clip}
:where(#mood-preview) .ebook-cover img{animation:none!important;transform:none!important;mask-image:none;mix-blend-mode:normal;filter:none}

/* Focused performance landing page. */
:where(#mood-preview) .preview-bar{justify-content:flex-end;min-height:32px}:where(#mood-preview) .preview-tools{margin-left:auto}
:where(#mood-preview) .header-actions{margin-left:auto}:where(#mood-preview) .site-header .menu-toggle{display:none}
:where(#mood-preview) .hero{height:auto;min-height:0;padding:0;display:flex;align-items:center}
:where(#mood-preview) .hero-content{width:100%;min-height:clamp(390px,calc(100svh - 240px),650px);padding-top:64px;padding-bottom:64px;display:flex;flex-direction:column;justify-content:center}
:where(#mood-preview) .hero-content h1{margin-top:0}:where(#mood-preview) .hero-description{margin-bottom:26px}
:where(#mood-preview) .ingredients-section .section-heading h2{line-height:1.16;margin-bottom:22px;transform:none}
:where(#mood-preview) .ingredients-section .section-heading>p{position:static;margin-top:0;transform:none;line-height:1.6}
@media(max-width:800px){:where(#mood-preview) .hero-content{min-height:calc(100svh - 230px);padding-top:48px;padding-bottom:48px}:where(#mood-preview) .hero h1{font-size:clamp(36px,7.5vw,60px)}:where(#mood-preview) .hero-art{width:100%}}
@media(max-width:560px){:where(#mood-preview) .hero-content{min-height:calc(100svh - 225px);padding:42px 24px}:where(#mood-preview) .hero h1{font-size:clamp(34px,9.2vw,48px)}:where(#mood-preview) .hero-description{font-size:14px;max-width:290px}:where(#mood-preview) .hero-art{width:100%}:where(#mood-preview) .hero .button{min-width:170px}}

:where(#mood-preview) .reviewer-avatar{position:relative;overflow:hidden;flex-shrink:0}:where(#mood-preview) .reviewer-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;background:var(--paper)}

:where(#mood-preview) .faq-answer { white-space: pre-line; }

/* Keep the founder visible; the complete thumbnail remains a single button. */
:where(#mood-preview) #open-film .founder-play-label{position:absolute;left:24px;bottom:24px;z-index:2;display:flex;align-items:center;gap:14px;color:#fff;font-size:15px;letter-spacing:.015em}
:where(#mood-preview) #open-film .play-disc{position:static;transform:none;width:56px;height:56px;min-width:56px;max-width:56px;box-shadow:none;flex-shrink:0}
:where(#mood-preview) #open-film .play-disc svg{width:20px;height:20px;margin-left:3px}
:where(#mood-preview) #open-film:after{inset:55% 0 0;background:linear-gradient(transparent,rgba(29,12,21,.78))}
:where(#mood-preview) #open-film:focus-visible{outline:3px solid #b987af;outline-offset:5px}
@media(max-width:600px){:where(#mood-preview) #open-film .founder-play-label{left:16px;bottom:14px;gap:10px;font-size:13px}:where(#mood-preview) #open-film .play-disc{width:48px;height:48px;min-width:48px;max-width:48px}}

/* 2026-09-10 feedback: official shopmood.com hero CTA accent, RGB(231,255,0). */
html.mood-preview-page{--accent:#e7ff00;--accent-hover:#d5eb00;--plum:#394011;--deep:#20221b;--ink:#25271f;--muted:#63665b}
:where(#mood-preview) .button.button-plum,:where(#mood-preview) .button.button-light,:where(#mood-preview) .button.button-outline{background:var(--accent);color:#25271f;border-color:var(--accent);box-shadow:none}
:where(#mood-preview) .button.button-plum:hover,:where(#mood-preview) .button.button-light:hover,:where(#mood-preview) .button.button-outline:hover{background:var(--accent-hover);border-color:var(--accent-hover);box-shadow:none}
:where(#mood-preview) .hero{background:#20221b}:where(#mood-preview) .hero-shade{background:linear-gradient(90deg,#20221b 0%,#20221bfa 23%,#20221bc7 40%,#20221b28 64%,transparent 82%),linear-gradient(0deg,#20221ba6 0%,transparent 23%,transparent 85%,#20221b33 100%)}
:where(#mood-preview) .hero h1 em,:where(#mood-preview) .closing-section h2 em{color:var(--accent)}
:where(#mood-preview) .closing-section{background:#20221b}
:where(#mood-preview) .benefit-number{display:inline-grid;place-items:center;min-width:48px;min-height:48px;font:500 24px/1 var(--sans);letter-spacing:.02em;color:var(--ink);background:var(--accent);border-radius:50%;margin:0 0 20px}
:where(#mood-preview) .benefit{padding-top:0}:where(#mood-preview) .benefit .icon-replay{display:none}
:where(#mood-preview) .ritual-emphasis,:where(#mood-preview) .faq-item[open] summary,:where(#mood-preview) .botanical-detail h3{color:var(--ink)}
:where(#mood-preview) .ingredient-switcher button[aria-pressed="true"],:where(#mood-preview) .box-choice[aria-pressed="true"]{background:var(--accent);color:var(--ink);border-color:var(--ink)}
:where(#mood-preview) button:focus-visible,:where(#mood-preview) a:focus-visible,:where(#mood-preview) input:focus-visible,:where(#mood-preview) select:focus-visible,:where(#mood-preview) textarea:focus-visible,:where(#mood-preview) summary:focus-visible,:where(#mood-preview) #open-film:focus-visible{outline-color:#657300}
:where(#mood-preview) #open-film .play-disc,:where(#mood-preview) #open-film:hover .play-disc{background:var(--accent);color:var(--ink)}
/* Supplied water photographs: full landscape hero and uncropped square product. */
:where(#mood-preview) .hero-art{width:100%!important;opacity:1}
:where(#mood-preview) .hero-art picture img,:where(#mood-preview) .hero-art .atmosphere-loop{object-position:center!important}
:where(#mood-preview) .gallery-main{aspect-ratio:1!important}
:where(#mood-preview) .gallery-main>.atmosphere-loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:0;transition:opacity .45s;z-index:0}
:where(#mood-preview) .gallery-main>.atmosphere-loop.is-playing{opacity:1}
:where(#mood-preview) .gallery-main .product-hotspots,:where(#mood-preview) .gallery-main .zoom-trigger,:where(#mood-preview) .gallery-main .hotspot-card{z-index:3}
@media(max-width:800px){:where(#mood-preview) .hero-art picture img,:where(#mood-preview) .hero-art .atmosphere-loop{object-position:72% center!important}:where(#mood-preview) .hero-shade{background:linear-gradient(90deg,#102e35ee,#102e35b8 45%,#102e3530),linear-gradient(0deg,#102e3590,transparent)}}
/* Center the control in clear space, away from the founder portrait. */
:where(#mood-preview) #open-film .founder-play-label{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);flex-direction:column;gap:12px;text-align:center;white-space:nowrap;font-size:13px;text-shadow:0 1px 8px #000}
:where(#mood-preview) #open-film .play-disc{width:64px;height:64px;min-width:64px;max-width:64px;box-shadow:0 4px 24px #0003}
@media(max-width:600px){:where(#mood-preview) #open-film .founder-play-label{font-size:10px;gap:8px}:where(#mood-preview) #open-film .play-disc{width:46px;height:46px;min-width:46px;max-width:46px}}
/* Authentic video frame; horizontally centered play control below her face. */
:where(#mood-preview) #open-film .founder-play-label{top:68%}

/* Visible founder fullscreen control; expanded viewport fallback preserves the player. */
:where(#mood-preview) #film-dialog #motion-study{width:min(100%,max(320px,calc((100dvh - 260px) * 16 / 9)));margin-inline:auto}
:where(#mood-preview) .film-view-controls{display:flex;justify-content:flex-end;padding:8px 20px;background:#170f1b}
:where(#mood-preview) #film-fullscreen{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:132px;min-height:44px;padding:10px 16px;border:1px solid #ffffff70;border-radius:4px;background:transparent;color:#fff;font:inherit;font-size:14px;cursor:pointer}
:where(#mood-preview) #film-fullscreen svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
:where(#mood-preview) #film-fullscreen:hover{background:#ffffff18}
:where(#mood-preview) #film-fullscreen:focus-visible{outline:2px solid #e7ff00;outline-offset:3px}
:where(#mood-preview) #film-dialog.film-expanded{position:fixed;inset:0;margin:0;width:100%;height:100dvh;max-width:none;max-height:none;border:0;border-radius:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);box-sizing:border-box;overflow:auto}
:where(#mood-preview) #film-dialog.film-expanded .film-heading{padding-top:16px;padding-bottom:12px}
:where(#mood-preview) #film-dialog.film-expanded #motion-study{width:100%;height:calc(100dvh - 160px - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:150px;aspect-ratio:auto}