.site-preview { --preview-ink:#30364f; --preview-teal:#237d6f; color:var(--preview-ink); max-width:1600px; margin:auto; min-width:0; }
.site-preview [hidden] { display:none!important; }
.site-preview-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin:4px 0 28px; }
.site-preview-eyebrow { color:#82704c; font-size:11px; letter-spacing:.15em; font-weight:750; margin:0 0 10px; }
.site-preview-heading h1 { font-size:clamp(23px,2.2vw,34px); line-height:1.2; letter-spacing:-.035em; margin:0 0 10px; }
.site-preview-heading p:not(.site-preview-eyebrow) { margin:0; color:#697184; font-size:14px; line-height:1.6; }
.site-preview-badge { white-space:nowrap; background:#f5efdf; color:#7d6535; padding:8px 12px; border-radius:30px; font-size:11px; font-weight:650; }
.site-preview button,.site-preview select,.site-preview input { font:inherit; min-height:42px; border:1px solid #dce2e7; border-radius:8px; background:white; color:var(--preview-ink); }
.site-preview button { cursor:pointer; padding:10px 16px; font-size:12px; font-weight:650; }
.site-preview button:disabled { cursor:default; opacity:.5; }
.site-preview :is(button,input,select):focus-visible { outline:3px solid #65b5a5; outline-offset:3px; }
.site-preview-search { padding:18px 20px 12px; background:white; border:1px solid #e0e5e8; border-radius:14px; display:grid; grid-template-columns:auto minmax(150px,1fr) minmax(180px,1.1fr); gap:10px 16px; align-items:center; }
.site-preview-search > label { font-size:13px; font-weight:700; }
.site-preview-search > div { display:flex; gap:8px; }
.site-preview-search input { width:100%; min-width:0; padding:10px 14px; font-size:13px; background:#f8f9fb; }
.site-preview-search button { color:white; background:var(--preview-ink); border-color:var(--preview-ink); }
.site-preview select { width:100%; padding:8px 12px; font-size:13px; text-overflow:ellipsis; }
.site-preview-search p { grid-column:2/-1; margin:0; color:#718078; font-size:11px; min-height:17px; line-height:1.5; }
.site-preview-sr { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.site-preview-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:24px 0 16px; }
.site-preview-tabs { display:flex; gap:22px; min-width:0; }
.site-preview-tabs button { padding:12px 1px; background:none; border:0; border-radius:0; border-bottom:2px solid transparent; color:#72798b; white-space:nowrap; }
.site-preview-tabs button[aria-selected=true] { border-color:var(--preview-teal); color:var(--preview-ink); }
.site-preview-devices { display:flex; padding:3px; border:1px solid #dde3e7; border-radius:9px; background:#e9edef; }
.site-preview-devices button { min-height:34px; padding:6px 12px; background:none; border:0; font-size:11px; }
.site-preview-devices button[aria-pressed=true] { background:white; box-shadow:0 1px 4px #30364f17; }
.site-preview-browser { border:1px solid #dbe1e5; border-radius:14px; overflow:hidden; box-shadow:0 12px 34px #25364d09; }
.site-preview-browser-bar { display:flex; justify-content:space-between; gap:12px; padding:12px 18px; color:#7c8292; background:#f9fafb; border-bottom:1px solid #e1e6e8; font-size:10px; }
.site-preview-browser-bar span:first-child { color:#c6ccd4; letter-spacing:3px; }
.site-preview-browser-bar span:last-child { color:#287d6b; }
.site-preview-stage { background:#e7ecee; padding:0; transition:padding .2s; }
.site-preview-stage iframe { display:block; width:100%; height:clamp(420px,calc(100dvh - 100px),820px); scroll-margin-top:80px; border:0; background:#fff; margin:auto; }
.site-preview-stage.is-mobile { padding:24px 8px; }
.site-preview-stage.is-mobile iframe { width:390px; max-width:100%; height:clamp(420px,calc(100dvh - 100px),844px); border-radius:20px; box-shadow:0 8px 30px #19293e22; }
.site-preview-footnote { color:#77818b; font-size:12px; margin:14px 0; line-height:1.6; }
.site-preview-provenance { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:22px 0; }
.site-preview-provenance article { border:1px solid #e0e5e8; background:white; padding:20px; border-radius:12px; display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.site-preview-provenance span { font-size:12px; color:#74808b; }
.site-preview-provenance strong { font-size:24px; }
.site-preview-provenance b { background:#f7efdd; color:#806638; font-size:10px; border-radius:5px; padding:4px 7px; }
.site-preview-provenance p { margin:2px 0 0; font-size:12px; line-height:1.6; color:#707b86; }
.site-preview-json-head { display:flex; justify-content:space-between; gap:18px; align-items:center; margin:26px 0 16px; }
.site-preview-json-head h2 { font-size:20px; margin:0 0 6px; }
.site-preview-json-head p { margin:0; color:#7c8392; font-size:12px; }
.site-preview-json-head > div:last-child { display:flex; gap:8px; }
.site-preview [role=tabpanel] > label { display:block; font-size:12px; margin:0 0 8px; }
.site-preview-request { padding:13px 0 0; font:12px/1.6 monospace; overflow-wrap:anywhere; }
.site-preview pre { white-space:pre-wrap; overflow-wrap:anywhere; font:12px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace; }
.site-preview-json { background:#232b3c; color:#dbede8; padding:24px; border-radius:12px; max-height:660px; overflow:auto; }
.site-preview-selection { border:1px solid #a8cfc4; padding:18px; border-radius:12px; background:#eff8f4; }
.site-preview-selection strong,.site-preview-selection code { display:block; margin-bottom:10px; }
.site-preview-selection code { font-size:11px; overflow-wrap:anywhere; }
.site-preview-selection pre { max-height:300px; overflow:auto; margin:0; }
.site-preview-guide { background:white; border:1px solid #e0e5e8; border-radius:14px; padding:32px; }
.site-preview-guide h2 { font-size:28px; max-width:650px; letter-spacing:-.025em; margin:8px 0 26px; }
.site-preview-guide p,.site-preview-guide dd { font-size:13px; color:#707b86; line-height:1.7; }
.site-preview-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-bottom:28px; }
.site-preview-steps article > span { color:#c4a26d; font-size:25px; font-weight:700; }
.site-preview-guide h3 { font-size:15px; margin:12px 0; }
.site-preview-guide pre { background:#f3f6f7; padding:22px; border-radius:10px; }
.site-preview-mapping div { display:grid; grid-template-columns:230px 1fr; padding:14px 0; border-top:1px solid #e4e9ed; gap:24px; }
.site-preview-mapping dt { font:12px/1.7 monospace; overflow-wrap:anywhere; }
.site-preview-mapping dd { margin:0; }
.site-preview-guide aside { background:#f8f3e8; border-radius:10px; padding:20px; margin-top:26px; }
.site-preview-guide aside p { margin-bottom:0; }
.integration-frame-page { margin:0; background:#f4f6f5; }
.integration-frame-header { background:white; border-bottom:1px solid #e2e7e5; padding:20px 28px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.integration-frame-header img { width:125px; height:auto; }
.integration-frame-header div { text-align:right; }
.integration-frame-header strong { display:block; font-size:13px; font-weight:600; color:#364156; }
.integration-frame-header span { display:block; font-size:10px; margin-top:5px; color:#83908e; }
.integration-frame-page .seller-main:has(.seller-offers) { max-width:1440px; padding:22px; margin:auto; }
.integration-frame-page .sf-toolbar { display:none!important; }
@media(max-width:1100px) {
    .site-preview-search { grid-template-columns:1fr 1fr; }
    .site-preview-search > label:not(.site-preview-sr) { grid-column:1/-1; }
    .site-preview-search p { grid-column:1/-1; }
}
@media(max-width:650px) {
    .site-preview-heading { flex-direction:column; gap:12px; margin-bottom:20px; }
    .site-preview-search { display:flex; flex-direction:column; align-items:stretch; padding:16px; }
    .site-preview-search input { font-size:16px; }
    .site-preview-search select { font-size:16px; }
    .site-preview-toolbar { align-items:stretch; flex-direction:column; margin-top:18px; }
    .site-preview-tabs { gap:15px; justify-content:space-between; }
    .site-preview-tabs button { font-size:11px; }
    .site-preview-devices { align-self:flex-end; }
    .site-preview-browser-bar { padding:10px; }
    .site-preview-browser-bar span:first-child { display:none; }
    .site-preview-provenance,.site-preview-steps { grid-template-columns:1fr; }
    .site-preview-json-head { flex-direction:column; align-items:flex-start; }
    .site-preview-json { padding:16px; }
    .site-preview-guide { padding:20px; }
    .site-preview-guide h2 { font-size:23px; }
    .site-preview-mapping div { grid-template-columns:1fr; gap:6px; }
    .integration-frame-header { padding:16px; gap:14px; }
    .integration-frame-header img { width:92px; }
    .integration-frame-header strong { font-size:11px; }
    .integration-frame-header span { font-size:9px; }
    .integration-frame-page .seller-main:has(.seller-offers) { padding:12px; }
}