/* Public Mood playground: scoped away from application and merchant themes. */
#app .home-preview-section { padding:72px 0; background:var(--dr-paper); color:var(--dr-ink); }
#app .home-preview-lab { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:24px 48px; align-items:start; }
#app .home-preview-intro h2 { margin:0; font-size:clamp(28px,3vw,42px); line-height:1.2; letter-spacing:-.02em; }
#app .home-preview-intro p { max-width:60ch; color:var(--dr-muted); line-height:1.75; }
#app .home-preview-types { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
#app :is(.home-preview-types button,.home-mood-button) { min-height:44px; border:1px solid var(--dr-rule); border-radius:10px; background:var(--dr-white); color:var(--dr-ink); font:inherit; cursor:pointer; }
#app .home-preview-types button { padding:10px 12px; font-size:14px; }
#app .home-preview-types button[aria-pressed="true"] { border-color:var(--dr-red); background:var(--dr-red-soft); color:var(--dr-ink); }
#app .home-preview-status { margin:16px 0 4px; font-weight:700; color:var(--dr-ink); }
#app .home-preview-open { display:inline-flex; align-items:center; gap:10px; min-height:44px; color:var(--dr-ink); font-weight:700; text-decoration:underline; text-underline-offset:5px; }
#app .home-preview-note { display:block; margin-top:8px; color:var(--dr-muted); line-height:1.75; }
#app .home-preview-palettes { grid-column:1; grid-row:2; min-width:0; }
#app .home-mood-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
#app .home-mood-button { display:grid; gap:8px; padding:12px; text-align:left; min-width:0; }
#app .home-mood-button > span:last-child { display:grid; gap:2px; font-size:14px; font-weight:700; }
#app .home-mood-button small { color:var(--dr-muted); font-size:12px; font-weight:400; }
#app .home-mood-button[aria-pressed="true"] { outline:2px solid var(--dr-red); outline-offset:2px; }
#app .home-mood-button .mood-swatches { display:flex; width:100%; height:15px; gap:0; overflow:hidden; border-radius:4px; }
#app .home-mood-button .mood-swatches i { display:block; flex:1; width:auto; height:100%; border:0; border-radius:0; }
#app .home-mood-more { margin-top:18px; }
#app .home-mood-more summary { display:flex; align-items:center; min-height:44px; padding:8px 0; font-weight:600; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
#app .home-mood-more summary::after { content:"+"; margin-left:auto; font-size:20px; }
#app .home-mood-more[open] summary::after { content:"−"; }
#app .home-mood-more .home-mood-grid { margin-top:10px; }
#app .home-preview-sample { grid-column:2; grid-row:1 / span 2; min-width:0; padding:12px; border:1px solid var(--dr-rule); border-radius:16px; background:var(--dr-white); }
#app .home-preview-sample > span { display:block; padding:12px 4px 0; font-size:12px; color:var(--dr-muted); line-height:1.7; }
#app .home-preview-sample .home-shop-screen { border-radius:8px; }
#app :is(.home-preview-types button,.home-mood-button,.home-mood-more summary,.home-preview-open):focus-visible { outline:3px solid var(--dr-red); outline-offset:4px; }

/* The same product imagery appears in the hero devices and live palette sample. */
#app .home-shop-screen { display:block; container-type:inline-size; padding:0; min-height:0; overflow:hidden; color:var(--mood-text); background:var(--mood-background); }
#app .home-shop-nav { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:3cqw 4cqw; background:var(--mood-surface); }
#app .home-shop-nav strong { font-size:3.3cqw; }
#app .home-shop-nav > span { font-size:2.2cqw; }
#app .home-shop-cover { position:relative; height:31cqw; overflow:hidden; }
#app .home-shop-cover > img { display:block; width:100%; height:100%; object-fit:cover; }
#app .home-shop-cover::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.08)); }
#app .home-shop-cover > div { position:absolute; z-index:1; inset:0; display:flex; flex-direction:column; justify-content:center; gap:2cqw; padding:4cqw; color:#fff; }
#app .home-shop-cover strong { font-size:7cqw; line-height:1.1; letter-spacing:-.02em; }
#app .home-shop-cover span { font-size:2.5cqw; }
#app .home-shop-products { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2cqw; padding:4cqw; }
#app .home-shop-products > div { display:flex; flex-direction:column; min-width:0; gap:1.5cqw; }
#app .home-shop-product-image { position:relative; height:16cqw; border-radius:1cqw; overflow:hidden; }
#app [data-home-preview] .home-shop-product-image img { position:absolute; left:var(--home-crop,0%); width:300%; max-width:none; height:100%; display:block; object-fit:cover; }
#app .home-shop-products strong { font-size:2.4cqw; line-height:1.5; }
#app .home-shop-products span { font-size:2.5cqw; }
#app .home-shop-products .home-shop-add { margin-top:auto; padding:1.5cqw; text-align:center; background:var(--mood-primary); color:var(--mood-on-primary); border-radius:1cqw; }
#app .reference-phone .home-shop-screen { padding:24px 0 0; background:var(--mood-surface); }
#app .reference-phone .home-shop-nav { padding:4cqw 5cqw; }
#app .reference-phone .home-shop-nav strong { font-size:9cqw; margin:0; }
#app .reference-phone .home-shop-nav > span { display:none; }
#app .reference-phone .home-shop-cover { height:70cqw; }
#app .reference-phone .home-shop-cover strong { margin:0; font-size:15cqw; }
#app .reference-phone .home-shop-cover span { font-size:7cqw; }
#app .reference-phone .home-shop-products { grid-template-columns:1fr; padding:6cqw; gap:6cqw; background:var(--mood-background); }
#app .reference-phone .home-shop-products > div { gap:4cqw; }
#app .reference-phone .home-shop-product-image { height:46cqw; }
#app .reference-phone .home-shop-products strong { margin:0; font-size:9cqw; }
#app .reference-phone .home-shop-products span { font-size:8cqw; }
#app .reference-phone .home-shop-add { padding:3cqw; }

/* Immediate, non-blocking feedback. Existing cart calculations remain intact. */
[data-store-add].cart-add-confirmed { outline:2px solid currentColor; outline-offset:3px; }
[data-cart-count].cart-count-updated { animation:dr-cart-count .2s ease-out; }
@keyframes dr-cart-count { from { opacity:.4; transform:translateY(2px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:1100px) {
  #app .home-preview-lab { gap:24px; }
  #app .home-mood-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:680px) {
  #app .home-preview-section { padding:48px 0; }
  #app .home-preview-lab { display:flex; flex-direction:column; gap:24px; }
  #app .home-preview-intro { order:0; }
  #app .home-preview-sample { order:1; width:100%; box-sizing:border-box; }
  #app .home-preview-palettes { order:2; width:100%; }
  #app .home-mood-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #app .home-preview-types button { flex:1 1 auto; }
  #app .reference-phone .home-shop-screen { padding-top:16px; }
}
body.preview-mobile #app .home-preview-lab { display:flex; flex-direction:column; }
body.preview-mobile #app .home-preview-sample { order:1; width:100%; box-sizing:border-box; }
body.preview-mobile #app .home-preview-palettes { order:2; width:100%; }
body.preview-mobile #app .home-mood-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (prefers-reduced-motion:reduce) { [data-cart-count].cart-count-updated { animation:none; } }

/* Pricing: active storefront service versus forthcoming document service. */
#app .dr-v2 .offer-grid { gap:16px; border:0; background:transparent; align-items:stretch; }
#app .dr-v2 .offer-plan { border:1px solid var(--dr-rule); border-radius:14px; padding:30px 26px; }
#app .dr-v2 .offer-plan:last-child { border-right:1px solid var(--dr-rule); }
#app .dr-v2 .offer-plan-top { flex-wrap:wrap; gap:12px; }
#app .dr-v2 .offer-status { text-align:left; max-width:none; }
#app .dr-v2 .offer-starter { border-color:var(--dr-red); background:var(--dr-white); }
#app .dr-v2 .offer-starter .offer-plan-top { padding-bottom:20px; border-bottom:1px solid var(--dr-rule); }
#app .dr-v2 .offer-status-live { color:var(--dr-ink); font-size:13px; }
#app .dr-v2 .offer-plan > p { min-height:0; }
#app .dr-v2 .offer-start-actions { margin-top:auto; }
#app .dr-v2 .offer-action { min-height:54px; border-radius:10px; gap:14px; background:var(--primary-hover,#d90e31); line-height:1.5; }
#app .dr-v2 .offer-action:hover { background:#b60b29; }
#app .dr-v2 .offer-payment-note { display:block; margin-top:12px; text-align:center; font-size:13px; color:var(--dr-muted); line-height:1.6; }
#app .dr-v2 .offer-demo-link { display:flex; justify-content:center; align-items:center; gap:8px; min-height:44px; margin-top:8px; color:var(--dr-ink); font-size:14px; text-underline-offset:4px; }
#app .dr-v2 .offer-secret, #app .dr-v2 .offer-secret:hover { background:var(--dr-white); color:var(--dr-ink); }
#app .dr-v2 .offer-secret :is(.offer-status,.offer-price del) { color:var(--dr-muted); }
#app .dr-v2 .offer-secret .offer-price strong { color:var(--dr-ink); }
#app .dr-v2 .offer-document-sample { padding:17px; margin:0 0 22px; background:#fffaf4; color:#3e2a21; border:1px solid #d8c5af; border-radius:4px; font-size:11px; line-height:1.7; }
#app .dr-v2 .offer-document-sample > div:first-child { display:flex; align-items:start; justify-content:space-between; gap:10px; }
#app .dr-v2 .offer-document-sample > div:first-child > span { color:#89512c; font-weight:700; font-size:13px; }
#app .dr-v2 .offer-document-sample > span { display:block; font-size:10px; margin:5px 0 14px; color:#755b49; }
#app .dr-v2 .offer-document-rule, #app .dr-v2 .offer-document-line { display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid #d8c5af; }
#app .dr-v2 .offer-document-rule { font-weight:700; }
#app .dr-v2 .offer-document-sign { margin:22px 0 0 auto; width:45%; padding-top:5px; border-top:1px solid #a88b73; text-align:center; color:#755b49; }
#app .dr-v2 .offer-document-types { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 14px; }
#app .dr-v2 .offer-document-types li { padding:0; }
#app .dr-v2 .offer-document-types li::before { content:none; }
#app .dr-v2 .offer-document-details { margin-bottom:20px; border-block:1px solid var(--dr-rule); }
#app .dr-v2 .offer-document-details summary { display:list-item; padding-block:12px; min-height:44px; box-sizing:border-box; font-size:14px; font-weight:600; cursor:pointer; color:var(--dr-ink); }
#app .dr-v2 .offer-document-details p { margin:0 0 14px; font-size:14px; color:var(--dr-muted); line-height:1.8; }
#app .dr-v2 .offer-plan :is(a,summary):focus-visible { outline:2px solid var(--dr-red); outline-offset:4px; }
#app .dr-v2 .offer-plan .offer-unavailable { line-height:1.8; }
@media (max-width:980px) {
  #app .dr-v2 .offer-starter { order:-1; }
  #app .dr-v2 .offer-grid { gap:20px; }
  #app .dr-v2 .offer-plan { min-height:0; padding:26px 22px; }
}
body.preview-mobile #app .dr-v2 .offer-grid { grid-template-columns:minmax(0,1fr); }
body.preview-mobile #app .dr-v2 .offer-starter { order:-1; }

/* Thai marks need space above and below every heading line, including fallback fonts. */
#app :is(h1,h2,h3),
:is(body[data-layout],body.preview-mobile) #app .shell :is(h1,h2,h3) {
  line-height:1.25 !important;
  letter-spacing:0 !important;
  overflow-wrap:anywhere;
}
#app .reference-section-head { align-items:center; }
#app :is(.reference-section-head,.reference-belief,.reference-final) h2 { max-width:22ch; }
#app :is(.reference-section-head,.reference-belief,.reference-final) p { margin-top:12px; }
#app :is(section[id],.admin-section,.admin-welcome,[id^="guide-"]) {
  scroll-margin-top:calc(var(--workspace-header-height, 100px) + 24px);
}
@media (max-width:600px) {
  #app .reference-section-head h2,
  #app .reference-belief h2,
  #app .reference-final h2 { font-size:clamp(30px,8.4vw,44px); }
}
body.preview-mobile #app .reference-section-head h2,
body.preview-mobile #app .reference-belief h2,
body.preview-mobile #app .reference-final h2 { font-size:clamp(30px,8.4cqw,44px); }

/* A compact, shared marketing rhythm; keep controls and reading text comfortable. */
#app .dr-v2 .reference-home > section:not(.reference-hero),
#app .dr-v2 .reference-home .offer-home { padding-block:48px; }
#app .dr-v2 .reference-section-head,
#app .dr-v2 .offer-heading { margin-bottom:24px; gap:20px; }
#app .dr-v2 .reference-hero { min-height:0; padding-block:24px; }
#app .dr-v2 .reference-hero-grid { min-height:520px; }
#app .dr-v2 .reference-hero-copy { padding-block:28px 16px; }
#app .dr-v2 .reference-hero-copy > p { margin-top:16px; }
#app .dr-v2 .reference-hero-actions { margin-top:20px; }
#app .dr-v2 :is(.reference-page-intro,.reference-websites-intro,.offer-intro) { padding-top:40px; padding-bottom:28px; }
#app .dr-v2 .reference-home > section[id] { scroll-margin-top:100px; }
@media (max-width:600px) {
  #app .dr-v2 .reference-home > section:not(.reference-hero),
  #app .dr-v2 .reference-home .offer-home { padding-block:32px; }
  #app .dr-v2 .reference-hero-grid { min-height:0; }
  #app .dr-v2 .reference-hero-copy { padding-block:20px 12px; }
  #app .dr-v2 .reference-section-head { align-items:flex-start; gap:12px; margin-bottom:20px; }
}
body.preview-mobile #app .dr-v2 .reference-home > section:not(.reference-hero),
body.preview-mobile #app .dr-v2 .reference-home .offer-home { padding-block:32px; }
body.preview-mobile #app .dr-v2 .reference-hero-grid { min-height:0; }
body.preview-mobile #app .dr-v2 .reference-hero-copy { padding-block:20px 12px; }