
#g4s-mvp-demo{--green:#74d64b;--ink:#17231b;--line:#d7e2d5;max-width:1400px;margin:auto;font:15px/1.48 system-ui,Arial,sans-serif;color:var(--ink)}
#g4s-mvp-demo *{box-sizing:border-box} #g4s-mvp-demo h2{font-size:clamp(23px,2.4vw,36px);margin:0 0 12px}#g4s-mvp-demo h3{font-size:19px;margin:0 0 13px}#g4s-mvp-demo p{margin:0 0 12px}
#g4s-mvp-demo .g4s-intro{padding:20px 10px 18px}#g4s-mvp-demo .g4s-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(330px,1fr);gap:20px;align-items:start}
#g4s-mvp-demo .g4s-stage-wrap{position:sticky;top:20px;min-width:0}#g4s-mvp-demo .g4s-stage{width:100%;aspect-ratio:1.4;position:relative;background-color:#cce6ea;background-position:center center;background-size:cover;background-repeat:no-repeat;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
#g4s-mvp-demo .g4s-field-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:0} #g4s-mvp-demo .g4s-stage canvas{position:relative;z-index:1;display:block;width:100%;height:100%;touch-action:none}#g4s-mvp-demo .g4s-hint{z-index:2;position:absolute;bottom:10px;left:12px;padding:5px 9px;background:#ffffffd9;border-radius:7px;font-size:12px;pointer-events:none}
#g4s-mvp-demo .g4s-views{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}#g4s-mvp-demo button{cursor:pointer;font:inherit}#g4s-mvp-demo .g4s-views button,#g4s-mvp-demo .g4s-size button,#g4s-mvp-demo .g4s-flap-btn{padding:8px 12px;border:1px solid #a9b8a7;border-radius:8px;background:white;color:var(--ink)}#g4s-mvp-demo button[aria-pressed="true"]{background:var(--green);border-color:#438932;font-weight:700}
#g4s-mvp-demo .g4s-box{border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:14px;background:#fff}#g4s-mvp-demo .g4s-size{display:flex;gap:10px;flex-wrap:wrap}
#g4s-mvp-demo .g4s-swatches{display:flex;flex-wrap:wrap;gap:9px;margin:10px 0}#g4s-mvp-demo .g4s-swatch{height:28px;width:28px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #999}#g4s-mvp-demo .g4s-swatch[aria-pressed="true"]{box-shadow:0 0 0 3px #315d2d}#g4s-mvp-demo label{display:block;font-size:14px;margin:8px 0}
#g4s-mvp-demo input[type=text],#g4s-mvp-demo select,#g4s-mvp-demo input[type=file]{display:block;width:100%;max-width:100%;margin-top:4px;padding:9px;border:1px solid #b7c7b4;border-radius:7px;background:white;color:#17231b}#g4s-mvp-demo input[type=checkbox]{accent-color:#479d35;transform:scale(1.08);margin-right:9px}
#g4s-mvp-demo .g4s-check{display:flex;gap:6px;align-items:flex-start;margin:8px 0}#g4s-mvp-demo .g4s-check span{flex:1}#g4s-mvp-demo .g4s-muted{font-size:12px;color:#526457}#g4s-mvp-demo .g4s-options{display:grid;gap:9px}#g4s-mvp-demo .g4s-error{color:#a22018;font-weight:600;font-size:13px}#g4s-mvp-demo .g4s-price{font-size:29px;font-weight:800;color:#245c23}#g4s-mvp-demo .g4s-summary{font-size:13px;white-space:pre-line;background:#f3f8f1;padding:10px;border-radius:8px;max-height:210px;overflow:auto}
#g4s-mvp-demo .g4s-primary{width:100%;margin-top:12px;border:0;background:#315e2a;color:white;padding:13px 15px;border-radius:8px;font-weight:700}#g4s-mvp-demo .g4s-secondary{border:1px solid #7ea977;background:#fff;padding:9px 12px;border-radius:8px}#g4s-mvp-demo .g4s-footnote{font-size:13px;margin-top:10px}#g4s-mvp-demo details{border-top:1px solid var(--line);padding:10px 0}
@media(max-width:900px){#g4s-mvp-demo .g4s-layout{grid-template-columns:1fr}#g4s-mvp-demo .g4s-stage-wrap{position:static}#g4s-mvp-demo .g4s-stage{aspect-ratio:1.2}}

#g4s-mvp-demo .g4s-freight-notice{border:2px solid #315e2a;border-radius:9px;padding:13px 15px;margin:14px 0;background:#f8fbf7;color:#183b1a}#g4s-mvp-demo .g4s-freight-notice strong{font-weight:800}#g4s-mvp-demo .g4s-freight-notice p{margin:6px 0 0;line-height:1.5}
#g4s-mvp-demo .g4s-copyright-notice{margin:18px 0 0;padding:13px 15px;border-top:1px solid #bbcaba;background:#f6f8f5;border-radius:8px;color:#37483a;font-size:12px;line-height:1.6}
