/* Faithful storefront examples, scoped entirely to the measure experience. */
.sg36-measure{--m-accent:#600e83;--m-muted:#52657e;color:#1a2638;padding:40px 0 50px;scroll-margin-top:90px;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:14px;line-height:1.6}
.sg36-measure[data-example=curtain]{--m-accent:#e31e34}
.sg36-measure *{box-sizing:border-box}.sg36-measure [hidden]{display:none!important}
.sg36-measure p,.sg36-measure h2,.sg36-measure h3,.sg36-measure h4{margin:0}.sg36-measure button,.sg36-measure input,.sg36-measure select{font:inherit;touch-action:manipulation}
.sg36-measure .m36-intro{display:flex;justify-content:space-between;gap:22px;align-items:flex-end;margin-bottom:25px}.sg36-measure .m36-intro h2{font-size:clamp(26px,3.5vw,42px);line-height:1.06;letter-spacing:-.04em;max-width:820px}
.sg36-measure .m36-kicker{font-size:10px;color:#2c64c8;font-weight:850;letter-spacing:.13em;margin-bottom:12px}.sg36-measure .m36-intro p:not(.m36-kicker){font-size:13px;color:#5a6e87;margin-top:13px}
.sg36-measure .m36-live-label{display:inline-flex;align-items:center;gap:7px;color:#326758;border:1px solid #c6e4d5;background:#effaf4;padding:8px 13px;border-radius:999px;font-size:11px;white-space:nowrap}
.sg36-measure .m36-live-label:before{content:"";width:6px;height:6px;border-radius:50%;background:#29a56e}
.sg36-measure .m36-workspace{border:1px solid #d9e2ee;border-radius:23px;overflow:hidden;background:#fff;box-shadow:0 22px 60px #12345b0b}
.sg36-measure .m36-toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;padding:17px 23px;background:#edf3fb;border-bottom:1px solid #dce5f1}
.sg36-measure .m36-mode{display:flex;gap:9px;border:0;padding:0;margin:0;min-width:0}.sg36-measure .m36-mode legend{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
.sg36-measure .m36-mode label{display:flex;align-items:center;gap:9px;padding:10px 15px;min-height:45px;border:1px solid #c8d7e9;background:#fff;border-radius:12px;cursor:pointer;color:#234469;font-size:13px;font-weight:700}
.sg36-measure .m36-mode input{margin:0;width:17px;height:17px;accent-color:var(--m-accent)}.sg36-measure .m36-mode label:has(input:checked){border-color:var(--m-accent);box-shadow:inset 0 0 0 1px var(--m-accent)}
.sg36-measure .m36-reset{border:0;background:transparent;min-height:44px;padding:9px;color:#4d6889;font-size:12px;text-decoration:underline}
.sg36-measure .m36-explainer{margin:0;padding:14px 25px;font-size:12px;color:#536b85;border-bottom:1px solid #edf0f6}
.sg36-measure .m36-store{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.05fr);gap:29px;padding:26px;align-items:start}
.sg36-measure .m36-photo{--m-photo-ratio:478 / 638;position:relative;display:block;margin:0;min-width:0;width:100%;aspect-ratio:var(--m-photo-ratio);background:#faf9fb;border:1px solid #e2dfeb;border-radius:12px;overflow:hidden;text-align:center}
.sg36-measure .m36-photo img{display:block;width:100%;height:100%;max-height:none;object-fit:contain;background:#faf9fb}
.sg36-measure .m36-product{min-width:0}.sg36-measure .m36-product h3{font-size:clamp(25px,2.5vw,33px);letter-spacing:-.02em;line-height:1.18;color:#303034}
.sg36-measure .m36-model{font-size:10px;color:#66748b;margin:8px 0 15px}.sg36-measure .m36-price{border-top:1px solid #e5e2eb;padding-top:15px;font-size:29px;line-height:1.2;color:#323234;font-weight:750;letter-spacing:-.025em}
.sg36-measure .m36-price-note{font-size:11px;color:#5f6580;margin:4px 0 17px}
.sg36-measure .m36-colors{border:0;padding:0;margin:23px 0 26px;min-width:0}.sg36-measure .m36-colors legend{font-size:12px;color:#475260;margin-bottom:8px}.sg36-measure .m36-color-grid{display:flex;gap:12px}
.sg36-measure .m36-swatch{display:flex;align-items:center;flex-direction:column;justify-content:flex-start;position:relative;padding:3px 5px 7px;min-width:58px;max-width:75px;cursor:pointer;min-height:91px;border:1px solid transparent;border-radius:6px}
.sg36-measure .m36-swatch img{width:34px;height:53px;object-fit:contain;border:1px solid #c4c5c8}.sg36-measure .m36-swatch input{position:absolute;width:1px;height:1px;opacity:0}.sg36-measure .m36-swatch span{font-size:10px;line-height:1.2;text-align:center;margin-top:5px;color:#404b5b}
.sg36-measure .m36-swatch:has(input:checked){border-color:var(--m-accent);background:#fcf7f8}.sg36-measure .m36-swatch:has(input:focus-visible){outline:3px solid #75a3ff;outline-offset:2px}
.sg36-measure .m36-measure-card{border:1px solid #cad6e7;border-radius:15px;padding:17px 16px;box-shadow:0 8px 28px #16325205;margin-top:21px}
.sg36-measure .m36-measure-heading{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:17px}.sg36-measure .m36-measure-heading h4{font-size:16px;line-height:1.2}.sg36-measure .m36-measure-heading span{font-size:11px;color:#536b89;text-align:right}
.sg36-measure .m36-field-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 18px}.sg36-measure .m36-field-grid label{display:block;font-size:12px;color:#2d486b;margin-bottom:7px}
.sg36-measure .m36-control{display:flex;align-items:center;border:1px solid #e0dfe7;background:#faf8fb}.sg36-measure .m36-control input,.sg36-measure .m36-control select{width:100%;min-width:0;border:0;background:transparent;min-height:45px;color:#243d5e;padding:10px 11px;font-size:16px;border-radius:0}.sg36-measure .m36-control span{font-size:10px;color:#687990;padding-right:11px;white-space:nowrap}
.sg36-measure .m36-field-hint{display:block;color:#526b89;font-size:11px;line-height:1.55;margin-top:6px;overflow-wrap:anywhere}
.sg36-measure .m36-error{display:block;font-size:11px;color:#a22f32;line-height:1.45;margin-top:4px;min-height:0}.sg36-measure input[aria-invalid=true]{outline:2px solid #be5361;outline-offset:-2px}
.sg36-measure .m36-totals{margin-top:16px;padding:12px;border:1px solid #e6ecf4;background:#f7f9fc;border-radius:11px}
.sg36-measure .m36-total-row{display:flex;justify-content:space-between;align-items:baseline;gap:15px;padding:4px 0;color:#4b6a8c;font-size:12px}.sg36-measure .m36-total-row strong{color:#152b48;font-size:13px;text-align:right;overflow-wrap:anywhere}
.sg36-measure .m36-total-row.is-total{margin-top:5px;border-top:1px solid #dce4f0;padding-top:10px;font-size:14px}.sg36-measure .m36-total-row.is-total strong{font-size:18px;letter-spacing:-.015em}
.sg36-measure .m36-confirm{display:flex;align-items:center;gap:9px;font-size:12px;min-height:44px;cursor:pointer;margin-top:8px;color:#3d5371}.sg36-measure .m36-confirm input{width:17px;height:17px;accent-color:var(--m-accent);flex-shrink:0}
.sg36-measure .m36-buy-row{display:flex;gap:12px;align-items:flex-end;margin-top:18px}.sg36-measure .m36-quantity{flex:0 0 74px}.sg36-measure .m36-quantity label{display:block;font-size:10px;color:#5a6e85;margin-bottom:4px}.sg36-measure .m36-quantity input{display:block;width:74px;min-height:47px;border:1px solid #bfc9d8;border-radius:8px;padding:8px 10px;font-size:16px;color:#233c5e;background:#fff}
.sg36-measure .m36-preview-button{min-height:47px;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 19px;border:0;border-radius:9px;background:var(--m-accent);color:#fff;font-size:12px;font-weight:750;line-height:1.3;cursor:pointer}.sg36-measure .m36-preview-button[aria-disabled=true]{opacity:.55}
.sg36-measure .m36-safety{font-size:11px;color:#596f8b;margin-top:13px}.sg36-measure .m36-action-message{font-size:12px;color:#7d3037;min-height:20px;margin-top:6px}
.sg36-measure .m36-bottom{border-top:1px solid #e3eaf4;padding:18px 25px;display:flex;justify-content:space-between;gap:16px;align-items:center;background:#f9fbfe;color:#45627f;font-size:12px}.sg36-measure .m36-bottom a{color:#2565b9;font-weight:650;min-height:44px;display:flex;align-items:center;text-decoration:underline}
.sg36-measure .m36-order{border:1px solid #c3d8cc;border-radius:20px;background:#f5fcf8;padding:25px;margin-top:24px;scroll-margin-top:100px}.sg36-measure .m36-order h3{font-size:24px;line-height:1.2;letter-spacing:-.02em;color:#163e2e}
.sg36-measure .m36-order p{font-size:13px;color:#547065;margin-top:10px}.sg36-measure .m36-order dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:20px 0}.sg36-measure .m36-order dt{font-size:11px;color:#546f64}.sg36-measure .m36-order dd{margin:4px 0 0;font-size:14px;font-weight:650;color:#213e32}.sg36-measure .m36-order>a{display:inline-flex;min-height:46px;align-items:center;padding:11px 16px;background:#2269d4;color:#fff;border-radius:12px;font-size:12px;font-weight:700;margin-top:12px}
@media(max-width:850px){.sg36-measure .m36-store{grid-template-columns:minmax(0,.7fr) minmax(0,1fr);gap:20px;padding:20px}.sg36-measure .m36-field-grid{grid-template-columns:1fr}.sg36-measure .m36-intro{display:block}.sg36-measure .m36-live-label{margin-top:15px}.sg36-measure .m36-product h3{font-size:25px}}
@media(max-width:620px){.sg36-measure .m36-store{grid-template-columns:1fr;padding:17px;gap:20px}.sg36-measure .m36-photo{display:block;max-height:none;padding:0;width:100%}.sg36-measure .m36-photo img{width:100%;height:100%;max-height:none;object-fit:contain}.sg36-measure .m36-price{font-size:26px}.sg36-measure .m36-measure-card{padding:15px 13px}.sg36-measure .m36-toolbar{padding:12px 14px;gap:5px}.sg36-measure .m36-mode{gap:6px}.sg36-measure .m36-mode label{padding:9px 10px;font-size:12px}.sg36-measure .m36-explainer{padding:12px 17px}.sg36-measure .m36-bottom{flex-direction:column;align-items:flex-start;padding:16px}.sg36-measure .m36-order{padding:20px}.sg36-measure .m36-order dl{grid-template-columns:1fr 1fr}.sg36-measure .m36-order dd{font-size:13px}.sg36-measure .m36-color-grid{gap:7px}.sg36-measure .m36-swatch{min-width:48px;max-width:63px;padding-inline:4px}.sg36-measure .m36-measure-heading{align-items:flex-start}.sg36-measure .m36-buy-row{gap:10px}.sg36-measure .m36-preview-button{padding-inline:13px;flex:1}}
@media(prefers-reduced-motion:reduce){.sg36-measure *{transition:none!important;scroll-behavior:auto!important}}

/* Preserve product proportions; keep hints, units and keyboard focus legible. */
.sg36-measure .m36-control>span{flex:0 0 33px;padding-left:4px;padding-right:9px;color:#526680}
.sg36-measure :focus-visible{outline:3px solid #2464c7;outline-offset:3px}
.sg36-measure .m36-swatch:has(input:focus-visible){outline-color:#2464c7}
.sg36-measure input,.sg36-measure select,.sg36-measure button,.sg36-measure a{scroll-margin-block:100px 24px}
.sg36-measure .m36-selection-note{margin-top:12px;padding:10px 12px;border-left:3px solid var(--m-accent);background:#f4f7fb;color:#405976;font-size:12px;line-height:1.55}
.sg36-measure .m36-order dd,.sg36-measure .m36-product h3{overflow-wrap:break-word}

/* Photo and selected variant remain one truthful product view. */
.sg36-measure .m38-photo-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;pointer-events:none}
.sg36-measure .m38-photo-state p{color:#41536a;font-size:13px;line-height:1.55;max-width:100%;overflow-wrap:break-word}
.sg36-measure .m38-photo-state button{pointer-events:auto;min-width:112px;min-height:44px;padding:9px 15px;border:1px solid #7086a2;border-radius:9px;background:#fff;color:#233c5e;cursor:pointer;font-weight:650;font-size:13px}
.sg36-measure .m36-photo[data-photo-state=ready] .m38-photo-state{display:none}
@media(max-width:900px){.sg36-measure .m36-store{grid-template-columns:minmax(0,1fr);gap:24px}.sg36-measure .m36-photo{width:100%;max-width:540px;justify-self:center}.sg36-measure .m36-product{width:100%}}
@media(max-width:620px){.sg36-measure .m36-photo{max-width:none}.sg36-measure .m36-store{padding:17px}.sg36-measure .m36-product h3{font-size:26px}}
