/* Public showroom and isolated trial workbench. No merchant/admin overrides. */
#app .studio-public { --studio-red:#e51036; --studio-soft:#fff0f3; color:var(--text); background:var(--bg); }
#app .studio-public.reference-home { margin:0; padding:0; }
#app .studio-public + .footer { content-visibility:visible; contain-intrinsic-size:none; }
html[data-theme="dark"] #app .studio-public { --studio-soft:#321a22; --studio-red:#ff4667; }
#app .studio-public *, #app .studio-public *::before, #app .studio-public *::after { box-sizing:border-box; }
#app .studio-public .studio-container { width:min(1180px,calc(100% - 64px)); margin-inline:auto; }
#app .studio-public :is(h1,h2,h3,p) { margin:0; max-width:none; }
#app .studio-public h1 { font-size:clamp(42px,4.6vw,64px); font-weight:750; }
#app .studio-public h2 { font-size:clamp(28px,3.1vw,42px); font-weight:700; }
#app .studio-public h3 { font-size:22px; }
body[data-layout] #app .shell .studio-public :is(h1,h2,h3) { line-height:1.3 !important; letter-spacing:0 !important; text-wrap:pretty; }
#app .studio-public em { color:var(--studio-red); font-style:normal; }
#app .studio-public p { font-size:15px; line-height:1.8; color:var(--muted); }
#app .studio-public button, #app .studio-public input, #app .studio-public select { font:inherit; }
#app .studio-public :is(button,a,input,select):focus-visible { outline:2px solid var(--studio-red); outline-offset:4px; }
#app .studio-public .studio-button { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:48px; padding:12px 22px; color:#fff; background:#dc1033; border:0; border-radius:10px; font-size:15px; font-weight:700; text-decoration:none; cursor:pointer; transition:background .2s,box-shadow .2s; }
#app .studio-public .studio-button:hover { background:#b50d2a; box-shadow:0 6px 18px -10px #dc1033; }
#app .studio-public .studio-text-link { display:inline-flex; align-items:center; gap:10px; min-height:44px; color:var(--studio-red); font-size:14px; font-weight:650; text-decoration:none; }
#app .studio-public .studio-actions { display:flex; align-items:center; flex-wrap:wrap; gap:24px; margin-top:24px; }
#app .studio-public .studio-hero { min-height:0; padding:36px 0 44px; background:var(--bg); overflow:visible; }
#app .studio-public .studio-hero-grid { display:grid; grid-template-columns:1fr 1.12fr; align-items:center; gap:52px; min-height:0; border:0; }
#app .studio-public .studio-hero-copy { display:block; padding:0; border:0; }
#app .studio-public .studio-hero-copy > p { margin-top:18px; max-width:42ch; font-size:16px; }
#app .studio-public .studio-hero-note { display:block; margin-top:12px; color:var(--muted); font-size:12px; }
#app .studio-public .studio-hero-foot { display:flex; align-items:center; flex-wrap:wrap; gap:18px; margin-top:30px; padding-top:18px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }
#app .studio-public .studio-hero-foot a { display:inline-flex; align-items:center; gap:6px; color:var(--text); }
#app .studio-public .studio-hero-display { min-width:0; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--surface); }
#app .studio-public .studio-demo-chrome { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 16px; font-size:12px; background:var(--surface); color:var(--muted); }
#app .studio-public .studio-demo-chrome a { display:inline-flex; align-items:center; gap:6px; min-height:28px; color:var(--studio-red); font-weight:700; }
#app .studio-public .studio-demo-chrome i { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:var(--studio-red); }
#app .studio-public .studio-demo-switch { display:flex; gap:6px; padding:10px; background:var(--surface); }
#app .studio-public .studio-demo-switch button { flex:1; min-height:44px; border:0; border-radius:8px; background:transparent; color:var(--text); cursor:pointer; font-size:13px; }
#app .studio-public .studio-demo-switch button[aria-pressed="true"] { background:var(--studio-soft); color:var(--studio-red); font-weight:700; }
#app .studio-public :is(.studio-examples,.studio-pricing,.studio-faq,.studio-how) { padding-block:48px; border-top:1px solid var(--line); }
#app .studio-public .studio-section-head { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:24px; }
#app .studio-public .studio-section-head p { margin-top:12px; max-width:64ch; }
#app .studio-public .studio-example-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
#app .studio-public .studio-example { color:var(--text); text-decoration:none; min-width:0; }
#app .studio-public .studio-example-image { position:relative; overflow:hidden; border-radius:12px; aspect-ratio:1.5; background:var(--surface); }
#app .studio-public .studio-example-image img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .3s cubic-bezier(.16,1,.3,1); }
#app .studio-public .studio-example:hover img { transform:scale(1.04); }
#app .studio-public .studio-example-image > span { position:absolute; right:12px; bottom:12px; display:flex; align-items:center; gap:8px; padding:10px 12px; background:#fff; color:#161616; border-radius:8px; font-size:12px; font-weight:700; }
#app .studio-public .studio-example > div:last-child { margin-top:14px; }
#app .studio-public .studio-example h3 { font-size:18px; }
#app .studio-public .studio-example > div > span { font-size:13px; }
#app .studio-public .studio-how { background:var(--studio-soft); }
#app .studio-public .studio-how-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; }
#app .studio-public .studio-how-grid > div p { max-width:42ch; margin:16px 0; }
#app .studio-public .studio-how ol { padding:0; margin:0; list-style:none; counter-reset:journey; }
#app .studio-public .studio-how li { position:relative; padding:18px 0 18px 48px; border-bottom:1px solid var(--line); counter-increment:journey; }
#app .studio-public .studio-how li::before { content:counter(journey); position:absolute; left:0; top:20px; display:grid; place-items:center; width:28px; height:28px; border:1px solid var(--studio-red); border-radius:50%; color:var(--studio-red); font-size:13px; }
#app .studio-public .studio-how li:first-child { padding-top:0; }
#app .studio-public .studio-how li:first-child::before { top:2px; }
#app .studio-public .studio-how li p { margin-top:6px; font-size:14px; }
#app .studio-public .studio-pricing-main { display:grid; grid-template-columns:1.1fr .65fr 1.1fr; align-items:center; gap:32px; padding:30px; border:1px solid var(--studio-red); border-radius:16px; background:var(--surface); }
#app .studio-public .studio-availability { display:inline-block; margin-bottom:10px; padding:5px 8px; font-size:11px; color:var(--studio-red); background:var(--studio-soft); border-radius:6px; }
#app .studio-public .studio-pricing-main h3 { font-size:28px; }
#app .studio-public .studio-pricing-main p { margin-top:8px; font-size:14px; }
#app .studio-public .studio-pricing-main .studio-button { margin-top:18px; }
#app .studio-public .studio-pricing-main small { display:block; margin-top:10px; color:var(--muted); font-size:11px; line-height:1.7; }
#app .studio-public .studio-price strong { display:block; color:var(--studio-red); font-size:58px; line-height:1.3; font-weight:750; font-variant-numeric:tabular-nums; }
#app .studio-public .studio-price { border:0; }
#app .studio-public .studio-price > strong { margin:0; letter-spacing:0; }
#app .studio-public .studio-price > span { padding:0; letter-spacing:0; }
#app .studio-public .studio-price > span { font-size:14px; color:var(--muted); }
#app .studio-public .studio-pricing-main ul { list-style:none; padding:0; margin:0; display:grid; gap:14px; font-size:14px; }
#app .studio-public .studio-pricing-main li { display:flex; align-items:start; gap:10px; }
#app .studio-public .studio-pricing-main li svg { flex:none; margin-top:3px; color:var(--studio-red); }
#app .studio-public .studio-coming { display:grid; grid-template-columns:1fr 1fr; margin-top:20px; gap:32px; }
#app .studio-public .studio-coming > div { padding-block:16px; border-bottom:1px solid var(--line); }
#app .studio-public .studio-coming h3 { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:19px; }
#app .studio-public .studio-coming h3 span { font-size:15px; font-weight:500; color:var(--muted); }
#app .studio-public .studio-coming p { margin-block:8px; font-size:13px; }
#app .studio-public .studio-coming a { display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:13px; color:var(--studio-red); }
#app .studio-public .studio-price-note { margin-top:12px; font-size:12px; }
#app .studio-public .studio-faq-grid { display:grid; grid-template-columns:.7fr 1.3fr; gap:64px; }
#app .studio-public .studio-faq-grid > div > p { margin-top:16px; }
#app .studio-public .studio-questions details { margin:0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; padding:0; }
#app .studio-public .studio-questions summary { display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:58px; padding-block:14px; cursor:pointer; font-size:15px; font-weight:600; list-style:none; }
#app .studio-public .studio-questions summary::-webkit-details-marker { display:none; }
#app .studio-public .studio-questions summary svg { flex:none; transition:transform .2s; }
#app .studio-public .studio-questions details[open] summary svg { transform:rotate(45deg); }
#app .studio-public .studio-questions details p { padding:0 24px 18px 0; font-size:14px; }
#app .studio-public .studio-questions a { color:var(--studio-red); text-decoration:underline; }
#app .studio-public .studio-close { padding-block:40px; background:#df1035; color:#fff; }
#app .studio-public .studio-close .studio-container { display:flex; justify-content:space-between; align-items:center; gap:24px; }
#app .studio-public .studio-close h2 { color:#fff; }
#app .studio-public .studio-close .studio-button { background:#fff; color:#b50d2a; }
#app .studio-public .studio-page-title { display:block; padding-block:32px; }
#app .studio-public .studio-page-title p { margin-top:14px; }
#app .studio-public .studio-page-title h1 { font-size:clamp(34px,4vw,52px); }
/* Trial is a small editor, not an onboarding funnel. */
#app .studio-public.trial-page { padding-block:28px 48px; }
#app .studio-public .trial-intro { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:28px; }
#app .studio-public .trial-intro h1 { font-size:clamp(30px,3.4vw,44px); }
#app .studio-public .trial-intro p { margin-top:12px; }
#app .studio-public .trial-safe { font-size:12px; padding:12px 16px; border:1px solid var(--line); border-radius:10px; }
#app .studio-public .trial-workbench { display:grid; grid-template-columns:330px minmax(0,1fr); align-items:start; gap:28px; }
#app .studio-public .trial-editor { padding:20px; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
#app .studio-public .trial-tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:20px; }
#app .studio-public .trial-tabs button { flex:1; padding:10px 4px; min-height:44px; color:var(--muted); background:none; border:0; border-bottom:2px solid transparent; cursor:pointer; font-size:14px; }
#app .studio-public .trial-tabs button[aria-selected="true"] { color:var(--studio-red); border-bottom-color:var(--studio-red); font-weight:700; }
#app .studio-public .trial-editor [hidden] { display:none !important; }
#app .studio-public .trial-editor label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
#app .studio-public .trial-editor :is(input,select) { width:100%; min-height:44px; padding:10px 12px; margin-bottom:18px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--text); font-size:14px; }
#app .studio-public .trial-editor fieldset { padding:0; margin:0 0 20px; border:0; min-width:0; }
#app .studio-public .trial-editor legend { margin-bottom:10px; font-size:13px; font-weight:600; }
#app .studio-public .trial-layouts { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
#app .studio-public .trial-layouts button { padding:6px; border:1px solid var(--line); background:var(--bg); color:var(--text); border-radius:8px; text-align:left; cursor:pointer; min-width:0; }
#app .studio-public .trial-layouts button[aria-pressed="true"] { outline:2px solid var(--studio-red); outline-offset:-2px; }
#app .studio-public .trial-layouts img { width:100%; height:62px; object-fit:cover; display:block; border-radius:4px; }
#app .studio-public .trial-layouts strong { display:block; margin-top:6px; font-size:12px; }
#app .studio-public .trial-layouts span { display:block; font-size:10px; color:var(--muted); line-height:1.6; }
#app .studio-public .trial-colors { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
#app .studio-public .trial-colors button { display:flex; align-items:center; gap:8px; min-height:44px; padding:8px; border:1px solid var(--line); border-radius:8px; color:var(--text); background:var(--bg); font-size:12px; cursor:pointer; }
#app .studio-public .trial-colors i { width:20px; height:20px; border-radius:50%; background:var(--mood-primary); border:1px solid var(--line); }
#app .studio-public .trial-colors [aria-pressed="true"] { border-color:var(--studio-red); background:var(--studio-soft); }
#app .studio-public .trial-editor-foot { padding-top:20px; border-top:1px solid var(--line); }
#app .studio-public .trial-preview-jump { display:none; }
#app .studio-public .trial-editor-foot .studio-button { width:100%; font-size:13px; padding-inline:10px; }
#app .studio-public .trial-editor-foot small { display:block; color:var(--muted); font-size:11px; line-height:1.7; margin-top:10px; }
#app .studio-public .trial-editor-foot > button { border:0; background:none; color:var(--muted); min-height:44px; font-size:12px; text-decoration:underline; cursor:pointer; }
#app .studio-public #trial-order-panel h2 { font-size:22px; }
#app .studio-public #trial-order-panel p { margin-block:14px; font-size:14px; }
#app .studio-public .trial-preview { min-width:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface); }
#app .studio-public .trial-preview { scroll-margin-top:110px; }
#app .studio-public .trial-preview > .studio-text-link { margin:12px 20px; }
#app .studio-public .trial-feedback { padding-inline:20px; color:var(--text); font-size:13px; }
#app .studio-public .trial-feedback:not(:empty) { padding-block:14px; background:var(--studio-soft); }
/* A real semantic demo composition, five materially different structures. */
#app .studio-public .trial-shop { color:var(--mood-text); background:var(--mood-background); padding-bottom:18px; }
#app .studio-public .trial-shop-top { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; background:var(--mood-surface); font-size:13px; }
#app .studio-public .trial-shop-top span { font-size:11px; white-space:nowrap; }
#app .studio-public .trial-cover { display:grid; grid-template-columns:1fr 1fr; min-height:200px; margin:18px; align-items:stretch; gap:18px; }
#app .studio-public .trial-cover > div { align-self:center; padding:14px 4px; min-width:0; }
#app .studio-public .trial-cover h2 { font-size:clamp(22px,2.2vw,30px); color:var(--mood-text); overflow-wrap:anywhere; }
#app .studio-public .trial-cover p { font-size:12px; margin-top:10px; color:var(--mood-text); }
#app .studio-public .trial-cover > div > span { display:inline-block; margin-top:14px; padding:7px 10px; background:var(--mood-primary); color:var(--mood-on-primary); border-radius:5px; font-size:11px; }
#app .studio-public .trial-cover > img { width:100%; height:100%; min-height:200px; object-fit:cover; border-radius:8px; }
#app .studio-public .trial-shop-label { display:flex; justify-content:space-between; padding:12px 18px; font-size:13px; }
#app .studio-public .trial-shop-label span { font-size:10px; }
#app .studio-public .trial-products { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:0 18px; scroll-margin-top:120px; }
#app .studio-public .trial-products article { min-width:0; overflow:hidden; background:var(--mood-surface); border-radius:8px; }
#app .studio-public .trial-product-image { position:relative; overflow:hidden; aspect-ratio:1.12; }
#app .studio-public .trial-product-image img { position:absolute; left:var(--crop); top:0; width:300%; max-width:none; height:100%; object-fit:cover; }
#app .studio-public .trial-product-copy { display:grid; gap:6px; padding:10px; font-size:12px; }
#app .studio-public .trial-product-copy strong { overflow-wrap:anywhere; }
#app .studio-public .trial-product-copy :is(button,.trial-product-tag) { display:flex; align-items:center; justify-content:center; gap:6px; background:var(--mood-primary); color:var(--mood-on-primary); border:0; min-height:44px; padding:8px 6px; border-radius:6px; font-size:11px; cursor:pointer; }
#app .studio-public .trial-product-tag { min-height:28px !important; }
#app .studio-public .trial-layout-boutique .trial-cover { display:flex; flex-direction:column-reverse; gap:0; }
#app .studio-public .trial-layout-boutique .trial-cover > div { text-align:center; }
#app .studio-public .trial-layout-boutique .trial-products { grid-template-columns:1fr 1fr; }
#app .studio-public .trial-layout-boutique .trial-product-image { aspect-ratio:.85; }
#app .studio-public .trial-layout-editorial .trial-cover { grid-template-columns:1.3fr 1fr; }
#app .studio-public .trial-layout-editorial .trial-products article:first-child { grid-column:span 2; }
#app .studio-public .trial-layout-editorial .trial-products article:first-child .trial-product-image { aspect-ratio:2; }
#app .studio-public .trial-layout-catalog .trial-cover { display:none; }
#app .studio-public .trial-layout-catalog .trial-products { grid-template-columns:1fr; }
#app .studio-public .trial-layout-catalog .trial-products article { display:grid; grid-template-columns:96px 1fr; }
#app .studio-public .trial-layout-catalog .trial-product-copy { grid-template-columns:1fr auto; align-items:center; }
#app .studio-public .trial-layout-catalog .trial-product-copy button { grid-column:1 / -1; }
#app .studio-public .trial-layout-focus .trial-cover { display:flex; flex-direction:column; }
#app .studio-public .trial-layout-focus .trial-cover > div { align-self:start; }
#app .studio-public .trial-layout-focus .trial-products { grid-template-columns:1fr; }
#app .studio-public .trial-layout-focus .trial-product-image { aspect-ratio:2; }
#app .studio-public .trial-cart { margin:18px 18px 0; padding:16px; border-top:1px solid var(--mood-text); font-size:13px; }
#app .studio-public .trial-cart > div { display:flex; justify-content:space-between; gap:12px; }
#app .studio-public .trial-cart p { color:var(--mood-text); font-size:12px; margin-top:12px; }
#app .studio-public .trial-cart ul { padding:0; margin-block:14px; list-style:none; }
#app .studio-public .trial-cart li { display:flex; align-items:center; justify-content:space-between; gap:12px; }
#app .studio-public .trial-cart button { min-height:44px; border:0; border-radius:6px; padding:10px; background:var(--mood-surface); color:var(--mood-text); cursor:pointer; }
#app .studio-public .trial-cart .trial-order { background:var(--mood-primary); color:var(--mood-on-primary); }
#app .studio-public .trial-cart small { display:block; margin-top:12px; font-size:11px; }
@media (max-width:1100px) {
  #app .studio-public .studio-hero-grid { gap:28px; }
  #app .studio-public .studio-pricing-main { grid-template-columns:1fr 1fr; }
  #app .studio-public .studio-pricing-main ul { grid-column:1 / -1; grid-template-columns:1fr 1fr; }
}
@media (max-width:760px) {
  #app .studio-public .studio-container { width:calc(100% - 32px); }
  #app .studio-public .studio-hero-grid { grid-template-columns:1fr; gap:28px; }
  #app .studio-public .studio-hero { padding-block:28px; }
  #app .studio-public h1 { font-size:42px !important; }
  #app .studio-public h2 { font-size:28px; }
  #app .studio-public .studio-hero-copy > p { font-size:14px; }
  #app .studio-public .studio-hero-foot { margin-top:22px; gap:14px; }
  #app .studio-public :is(.studio-examples,.studio-pricing,.studio-faq,.studio-how) { padding-block:32px; }
  #app .studio-public .studio-section-head { flex-direction:column; align-items:start; gap:10px; }
  #app .studio-public .studio-example-grid { grid-template-columns:1fr; gap:24px; }
  #app .studio-public :is(.studio-how-grid,.studio-faq-grid) { grid-template-columns:1fr; gap:24px; }
  #app .studio-public .studio-pricing-main { grid-template-columns:1fr; gap:20px; padding:22px; }
  #app .studio-public .studio-price { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; }
  #app .studio-public .studio-price p { flex-basis:100%; }
  #app .studio-public .studio-pricing-main ul { grid-template-columns:1fr; }
  #app .studio-public .studio-coming { grid-template-columns:1fr; gap:4px; }
  #app .studio-public .studio-close .studio-container { align-items:start; flex-direction:column; }
  #app .studio-public .trial-intro { align-items:start; flex-direction:column; gap:4px; }
  #app .studio-public .trial-intro h1 { font-size:32px !important; }
  #app .studio-public .trial-safe { padding:0; border:0; }
  #app .studio-public .trial-workbench { grid-template-columns:1fr; gap:20px; }
  #app .studio-public .trial-editor-foot .trial-preview-jump { display:flex; margin-bottom:14px; color:var(--studio-red); background:var(--studio-soft); }
  #app .studio-public .trial-layouts { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #app .studio-public .trial-colors { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #app .studio-public .trial-layouts img { height:46px; }
  #app .studio-public .trial-cover { gap:12px; margin:12px; min-height:160px; }
  #app .studio-public .trial-cover > img { min-height:160px; }
  #app .studio-public .trial-cover h2 { font-size:22px; }
  #app .studio-public .trial-cover p { font-size:11px; }
  #app .studio-public .trial-products { padding-inline:12px; gap:8px; }
  #app .studio-public .trial-product-copy { padding:8px; font-size:11px; }
  #app .studio-public .trial-product-copy button { flex-direction:column; gap:2px; }
}
body.preview-mobile #app .studio-public .studio-container { width:calc(100% - 32px); }
body.preview-mobile #app .studio-public :is(.studio-hero-grid,.studio-example-grid,.studio-how-grid,.studio-faq-grid,.studio-coming,.trial-workbench,.studio-pricing-main) { grid-template-columns:1fr; }
body.preview-mobile #app .studio-public .studio-section-head { flex-direction:column; align-items:start; }
@media (prefers-reduced-motion:no-preference) {
  #app .studio-public [data-studio-hero-shop] .trial-cover { animation:studio-swap .35s cubic-bezier(.16,1,.3,1); }
  @keyframes studio-swap { from { clip-path:inset(0 0 10% 0); } to { clip-path:inset(0); } }
}