/* Customer storefront Moods are independent from the Dot.Rich workspace mode. */
.mood-picker { margin-top:20px; }
.mood-picker-intro { max-width:70ch; margin:0 0 14px; color:var(--muted); font-size:14px; line-height:1.65; }
.mood-current { margin:0 0 17px; color:var(--text); font-size:14px; }
.mood-current strong { color:var(--primary); }
.mood-filter { display:flex; gap:8px; overflow-x:auto; padding:2px 0 12px; scrollbar-width:thin; }
.mood-filter button { flex:0 0 auto; min-height:44px; padding:8px 14px; border:1px solid var(--line-strong); border-radius:999px; color:var(--text); background:var(--surface); font:inherit; font-size:13px; cursor:pointer; }
.mood-filter button[aria-pressed="true"] { border-color:var(--primary); color:#fff; background:var(--primary); }
.mood-grid, .settings-theme-grid.mood-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:2px; }
.mood-choice, .settings-theme-grid .mood-choice { display:grid; grid-template-columns:minmax(0,1fr); align-content:start; gap:8px; min-width:0; min-height:170px; padding:10px; border:1px solid var(--line); border-radius:14px; color:var(--text); background:var(--surface); text-align:left; box-shadow:none; cursor:pointer; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.mood-choice:hover { transform:translateY(-2px); border-color:var(--primary); }
.mood-choice.selected, .settings-theme-grid .mood-choice.selected { border:2px solid var(--primary); padding:9px; box-shadow:0 9px 22px -18px var(--primary); }
.mood-choice-preview { position:relative; display:flex; align-items:center; gap:5px; height:68px; overflow:hidden; padding:9px; border-radius:8px; color:var(--mood-text); background:var(--mood-background); }
.mood-choice-preview::before { position:absolute; inset:0 0 auto; height:13px; background:var(--mood-surface); content:""; }
.mood-choice-preview span { width:35%; height:26px; margin-top:10px; border-radius:5px; background:var(--mood-surface); }
.mood-choice-preview b { flex:1; height:26px; margin-top:10px; border-radius:5px; background:var(--mood-primary); }
.mood-choice-preview i { width:16px; height:26px; margin-top:10px; border-radius:5px; background:var(--mood-accent); }
.mood-choice-name, .settings-theme-grid .mood-choice h3 { display:block; margin:0; color:var(--text); font-size:16px; font-weight:800; line-height:1.2; }
.mood-choice-name small, .settings-theme-grid .mood-choice small { display:block; margin-top:3px; color:var(--muted); font-size:12px; font-weight:500; }
.mood-swatches { display:flex; gap:3px; width:100%; height:17px; margin-top:auto; }
.mood-swatches i { flex:1; border:1px solid color-mix(in srgb,var(--mood-text) 14%,transparent); border-radius:3px; }
.mood-choice[hidden], .settings-theme-grid .mood-choice[hidden] { display:none; }
.settings-theme-grid .choice:not(.mood-choice) { min-height:95px; }
.mood-filter button:focus-visible, .mood-choice:focus-visible { outline:3px solid var(--primary); outline-offset:3px; }

#app .store-shell[data-mood] {
  --bg:var(--mood-background);
  --surface:var(--mood-surface);
  --surface-2:color-mix(in srgb,var(--mood-surface) 60%,var(--mood-background));
  --text:var(--mood-text);
  --muted:var(--mood-text);
  --line:color-mix(in srgb,var(--mood-text) 20%,var(--mood-surface));
  --line-strong:color-mix(in srgb,var(--mood-text) 37%,var(--mood-surface));
  --primary:var(--mood-primary);
  --primary-2:var(--mood-accent);
  --primary-soft:color-mix(in srgb,var(--mood-primary) 20%,var(--mood-background));
  color-scheme:light;
  color:var(--mood-text);
  background:var(--mood-background)!important;
}
#app .store-shell[data-mood] :is(.store-header,.store-footer) { color:var(--mood-text)!important; border-color:var(--line)!important; background:var(--mood-surface)!important; }
#app .store-shell[data-mood] :is(.store-header .brand-wordmark,.store-footer a,.store-footer strong,.demo-store-brand strong) { color:var(--mood-text)!important; }
#app .store-shell[data-mood] :is(.store-header .btn.ghost,.store-header .auth-status) { color:var(--mood-text)!important; border-color:var(--line-strong)!important; }
#app .store-shell[data-mood] :is(.store-hero,.store-product,.store-cart,.store-empty) { color:var(--mood-text); border-color:var(--line); background:var(--mood-surface)!important; }
#app .store-shell[data-mood] .store-hero.has-cover { background:var(--mood-text)!important; }
#app .store-shell[data-mood] :is(p,.section-head p,.store-product-body p,.store-hero p,.store-category,.store-footer,.cart-summary > div) { color:var(--mood-text); }
#app .store-shell[data-mood] .store-hero.has-cover :is(h1,p,.eyebrow) { color:#fff!important; }
#app .store-shell[data-mood] :is(.store-product-image,.store-hero-mark) { color:var(--mood-text); background:var(--surface-2); }
#app .store-shell[data-mood] :is(.store-product-bottom strong,.cart-grand-total strong,.store-category) { color:var(--mood-text); }
#app .store-shell[data-mood] .btn.primary { color:var(--mood-on-primary)!important; border-color:var(--mood-primary)!important; background:var(--mood-primary)!important; }
#app .store-shell[data-mood] .btn.primary:hover { color:var(--mood-on-accent)!important; border-color:var(--mood-accent)!important; background:var(--mood-accent)!important; }
#app .store-shell[data-mood] :is(.store-checkout-form input,.store-checkout-form textarea) { color:var(--mood-text); border-color:var(--line-strong); background:var(--mood-background); caret-color:var(--mood-text); }
#app .store-shell[data-mood] :is(.store-checkout-form input,.store-checkout-form textarea)::placeholder { color:var(--mood-text); opacity:.78; }
#app .store-shell[data-mood] :is(.demo-store-notice,.demo-form-tip,.store-preview-banner,.store-closed-banner) { color:var(--mood-text)!important; border-color:var(--line); background:var(--primary-soft)!important; }
#app .store-shell[data-mood] :is(.cart-controls button,.store-cart input) { color:var(--mood-text); border-color:var(--line-strong); background:var(--mood-background); }
#app .store-shell[data-mood] :is(a,button,input,textarea):focus-visible { outline:3px solid var(--mood-accent); outline-offset:3px; }
#app .store-shell[data-mood] ::selection { color:var(--mood-text); background:var(--mood-primary); }
@media (max-width:880px) { .mood-grid, .settings-theme-grid.mood-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px) { .mood-grid, .settings-theme-grid.mood-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .mood-choice,.settings-theme-grid .mood-choice { min-height:155px; padding:8px; } .mood-choice-preview { height:58px; } .mood-filter { margin-right:-14px; } }
@media (max-width:340px) { .mood-grid, .settings-theme-grid.mood-grid { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { .mood-choice { transition:none; } .mood-choice:hover { transform:none; } }