.sz-studio-page { background: var(--sz-paper); }
.sz-studio {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
gap: 0;
max-width: 1480px;
margin: 0 auto;
min-height: calc(100vh - var(--sz-header-h));
} .sz-studio__stage {
position: relative;
background: var(--sz-wall);
}
.sz-stage {
position: sticky;
top: var(--sz-header-h);
height: calc(100vh - var(--sz-header-h));
min-height: 520px;
display: flex;
flex-direction: column;
padding: 20px clamp(16px, 3vw, 40px) 24px;
}
.admin-bar .sz-stage { top: calc(var(--sz-header-h) + 32px); height: calc(100vh - var(--sz-header-h) - 32px); }
.sz-stage__views {
display: inline-flex;
align-self: center;
gap: 4px;
padding: 4px;
margin-bottom: 16px;
background: var(--sz-paper);
border-radius: 12px;
box-shadow: 0 1px 2px rgba(28, 40, 48, 0.08);
}
.sz-stage__views[hidden] { display: none; }
.sz-stage__views button {
border: 0;
background: none;
padding: 0.55em 1.1em;
border-radius: 8px;
font: inherit;
font-size: var(--sz-t-sm);
font-weight: 600;
color: var(--sz-muted);
cursor: pointer;
}
.sz-stage__views button[aria-selected="true"] { background: var(--sz-ink); color: #fff; } .sz-drop {
flex: 1;
display: grid;
place-items: center;
border: 2px dashed var(--sz-line-strong);
border-radius: 20px;
cursor: pointer;
transition: border-color 0.15s, background-color 0.15s;
text-align: center;
padding: 32px 20px;
font-weight: 400;
}
.sz-drop[hidden] { display: none; }
.sz-drop:hover, .is-dragover .sz-drop { border-color: var(--sz-accent); background: color-mix(in srgb, var(--sz-accent) 5%, var(--sz-wall)); }
.sz-drop:focus-within { outline: 3px solid var(--sz-accent); outline-offset: 2px; }
.sz-drop__inner { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 360px; }
.sz-drop__icon {
display: grid;
place-items: center;
width: 80px;
height: 80px;
border-radius: 50%;
background: var(--sz-paper);
color: var(--sz-accent);
margin-bottom: 8px;
box-shadow: 0 6px 20px -8px rgba(28, 40, 48, 0.3);
}
.sz-drop__title { font-size: var(--sz-t-xl); font-weight: 750; letter-spacing: -0.02em; }
.sz-drop__text { color: var(--sz-muted); }
.sz-drop__btn { margin-top: 12px; pointer-events: none; }
.sz-drop__meta { font-size: var(--sz-t-xs); color: var(--sz-muted); margin-top: 4px; } .sz-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sz-view[hidden] { display: none; }
.sz-crop {
flex: 1;
min-height: 0;
display: grid;
place-items: center;
position: relative;
}
.sz-crop__frame {
position: relative;
overflow: hidden;
cursor: grab;
touch-action: none;
user-select: none;
background: #ccc;
box-shadow: var(--sz-shadow-canvas);
}
.sz-crop__frame.is-dragging { cursor: grabbing; }
.sz-crop__img {
position: absolute;
top: 0;
left: 0;
max-width: none;
transform-origin: 0 0;
pointer-events: none;
}
.sz-crop__guide {
position: absolute;
border: 2px dashed rgba(255, 255, 255, 0.95);
box-shadow: 0 0 0 100vmax rgba(20, 28, 34, 0.32);
pointer-events: none;
}
.sz-crop__guide[hidden] { display: none; }
.sz-crop__grid {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s;
background:
linear-gradient(90deg, transparent calc(33.33% - 0.5px), rgba(255, 255, 255, 0.7) calc(33.33% - 0.5px), rgba(255, 255, 255, 0.7) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px), transparent calc(66.66% - 0.5px), rgba(255, 255, 255, 0.7) calc(66.66% - 0.5px), rgba(255, 255, 255, 0.7) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px)),
linear-gradient(180deg, transparent calc(33.33% - 0.5px), rgba(255, 255, 255, 0.7) calc(33.33% - 0.5px), rgba(255, 255, 255, 0.7) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px), transparent calc(66.66% - 0.5px), rgba(255, 255, 255, 0.7) calc(66.66% - 0.5px), rgba(255, 255, 255, 0.7) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px));
}
.sz-crop__frame.is-dragging .sz-crop__grid, .sz-crop__frame:focus-visible .sz-crop__grid { opacity: 1; }
.sz-crop__frame[data-edge="white"] { outline: 6px solid #f6f6f3; }
.sz-crop__frame[data-edge="black"] { outline: 6px solid #191b1c; }
.sz-crop__tools {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 20px;
}
.sz-crop__tools input[type="range"] {
width: min(260px, 50vw);
accent-color: var(--sz-accent);
min-height: 0;
padding: 0;
border: 0;
background: none;
}
.sz-crop__hint { text-align: center; color: var(--sz-muted); font-size: var(--sz-t-sm); margin: 10px auto 0; max-width: 52ch; min-height: 1.5em; } .sz-view--room { justify-content: center; }
.sz-room {
position: relative;
width: 100%;
max-width: 900px;
margin: auto;
border-radius: 14px;
overflow: hidden;
background: color-mix(in srgb, var(--sz-wall) 70%, #fff);
box-shadow: inset 0 0 0 1px var(--sz-line);
}
.sz-room__wall {
position: relative;
width: 100%;
aspect-ratio: 280 / 220;
margin: 0 auto;
background: radial-gradient(ellipse at 50% 20%, #fff 0%, transparent 70%);
}
.sz-room__canvas { position: absolute; left: 50%; transform: translateX(-50%); }
.sz-room__canvas .sz-canvas { --turn: 0deg; --depth: var(--depth-px, 6px); }
.sz-room__canvas .sz-canvas__face { box-shadow: 0 1px 1px rgba(28, 40, 48, 0.2), 6px 10px 18px -6px rgba(28, 40, 48, 0.45); }
.sz-room__canvas .sz-canvas__side { display: none; }
.sz-room__dim {
position: absolute;
left: 50%;
top: calc(100% + 6px);
transform: translateX(-50%);
font-size: var(--sz-t-xs);
font-weight: 650;
color: var(--sz-muted);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.sz-room__sofa {
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
fill: color-mix(in srgb, var(--sz-ink) 38%, var(--sz-wall));
display: block;
}
.sz-room__floor { height: 18px; background: color-mix(in srgb, var(--sz-ink) 12%, var(--sz-wall)); }
.sz-room__note { text-align: center; color: var(--sz-muted); font-size: var(--sz-t-sm); margin: 12px 0 0; } .sz-upload-status {
position: absolute;
left: 50%;
top: 76px;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
background: var(--sz-paper);
border-radius: 999px;
box-shadow: 0 8px 24px -10px rgba(28, 40, 48, 0.35);
font-size: var(--sz-t-sm);
font-weight: 600;
white-space: nowrap;
max-width: calc(100% - 32px);
}
.sz-upload-status[hidden] { display: none; }
.sz-upload-status__bar { width: 90px; height: 6px; border-radius: 3px; background: var(--sz-line); overflow: hidden; flex: none; }
.sz-upload-status__bar span { display: block; height: 100%; width: 0; background: var(--sz-accent); transition: width 0.2s; }
.sz-upload-status.is-error { white-space: normal; border-radius: 14px; color: var(--sz-bad); }
.sz-upload-status.is-error .sz-upload-status__bar { display: none; } .sz-studio__panel {
padding: 28px clamp(20px, 3vw, 36px) 40px;
border-left: 1px solid var(--sz-line);
background: var(--sz-paper);
}
.sz-studio__title { font-size: var(--sz-t-2xl); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 6px; }
.sz-studio__rating { display: flex; align-items: center; gap: 8px; font-size: var(--sz-t-sm); color: var(--sz-muted); margin: 0; }
.sz-studio__head { margin-bottom: 24px; }
.sz-steps { list-style: none; margin: 0; padding: 0; counter-reset: sz-step; }
.sz-step { counter-increment: sz-step; padding: 20px 0; border-top: 1px solid var(--sz-line); }
.sz-step__title {
display: flex;
align-items: center;
gap: 10px;
font-size: var(--sz-t-md);
font-weight: 700;
letter-spacing: -0.01em;
margin: 0 0 12px;
}
.sz-step__title::before {
content: counter(sz-step);
display: inline-grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--sz-ink);
color: #fff;
font-size: 12px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.sz-studio:not(.has-photo) .sz-step:not([data-step="photo"]) .sz-step__title::before { background: var(--sz-line-strong); } .sz-photo { display: flex; align-items: center; gap: 14px; }
.sz-photo[hidden] { display: none; }
.sz-photo__thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; flex: none; }
.sz-photo__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sz-photo__name { font-weight: 600; font-size: var(--sz-t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sz-quality { display: inline-flex; align-items: center; gap: 6px; font-size: var(--sz-t-xs); font-weight: 650; }
.sz-quality__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sz-line-strong); }
.sz-quality[data-level="great"] { color: var(--sz-good); }
.sz-quality[data-level="great"] .sz-quality__dot { background: var(--sz-good); }
.sz-quality[data-level="ok"] { color: var(--sz-ok); }
.sz-quality[data-level="ok"] .sz-quality__dot { background: var(--sz-ok); }
.sz-quality[data-level="low"] { color: var(--sz-bad); }
.sz-quality[data-level="low"] .sz-quality__dot { background: var(--sz-bad); }
.sz-quality__help { margin: 10px 0 0; font-size: var(--sz-t-sm); color: var(--sz-bad); }
[data-sz-pick][hidden] { display: none; } .sz-studio .sz-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); width: 100%; background: var(--sz-wall); border: 0; }
.sz-seg__opt { position: relative; cursor: pointer; font-weight: 400; margin: 0; }
.sz-seg__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sz-seg__opt-body, .sz-seg__opt > span {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 8px 6px;
border-radius: 8px;
font-size: var(--sz-t-sm);
font-weight: 600;
color: var(--sz-muted);
text-align: center;
transition: background-color 0.12s, color 0.12s;
}
.sz-seg__opt svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.sz-seg__opt input:checked + span { background: var(--sz-paper); color: var(--sz-ink); box-shadow: 0 1px 3px rgba(28, 40, 48, 0.16); }
.sz-seg__opt input:focus-visible + span { outline: 3px solid var(--sz-accent); outline-offset: 1px; } .sz-sizes { display: grid; gap: 6px; }
.sz-size { position: relative; display: block; cursor: pointer; margin: 0; font-weight: 400; }
.sz-size input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sz-size-body {
display: grid;
grid-template-columns: 44px 1fr auto 12px;
align-items: center;
gap: 12px;
min-height: 54px;
padding: 6px 14px 6px 8px;
border: 1.5px solid var(--sz-line);
border-radius: var(--sz-r-ui);
transition: border-color 0.12s, background-color 0.12s;
}
.sz-size:hover .sz-size-body { border-color: var(--sz-line-strong); }
.sz-size input:checked + .sz-size-body { border-color: var(--sz-accent); background: color-mix(in srgb, var(--sz-accent) 6%, #fff); box-shadow: inset 0 0 0 1px var(--sz-accent); }
.sz-size input:focus-visible + .sz-size-body { outline: 3px solid var(--sz-accent); outline-offset: 2px; }
.sz-size.is-disabled { opacity: 0.5; cursor: not-allowed; }
.sz-size__thumb { display: grid; place-items: center; width: 44px; height: 40px; }
.sz-size__thumb span { display: block; background: var(--sz-ink); opacity: 0.85; border-radius: 1px; }
.sz-size input:checked + .sz-size-body .sz-size__thumb span { background: var(--sz-accent); opacity: 1; }
.sz-size__dims { font-weight: 650; font-variant-numeric: tabular-nums; }
.sz-size__dims small { font-weight: 400; color: var(--sz-muted); font-size: 0.85em; }
.sz-size__price { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sz-size__price del { color: var(--sz-muted); font-size: var(--sz-t-xs); margin-right: 2px; }
.sz-size__q { width: 10px; height: 10px; border-radius: 50%; }
.sz-q--great { background: var(--sz-good); }
.sz-q--ok { background: var(--sz-ok); }
.sz-q--low { background: var(--sz-bad); }
.sz-size__oos { grid-column: 2 / -1; font-size: var(--sz-t-xs); color: var(--sz-bad); } .sz-edges { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; }
.sz-edge { position: relative; cursor: pointer; margin: 0; font-weight: 400; }
.sz-edge input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sz-edge-body {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 10px 6px 8px;
border: 1.5px solid var(--sz-line);
border-radius: var(--sz-r-ui);
font-size: var(--sz-t-sm);
font-weight: 600;
text-align: center;
}
.sz-edge input:checked + .sz-edge-body { border-color: var(--sz-accent); box-shadow: inset 0 0 0 1px var(--sz-accent); }
.sz-edge input:focus-visible + .sz-edge-body { outline: 3px solid var(--sz-accent); outline-offset: 2px; }
.sz-edge__swatch {
position: relative;
width: 40px;
height: 30px;
background: linear-gradient(150deg, #9cc0d4, #3d6b84 60%, #23465a);
box-shadow: 2px 3px 6px -2px rgba(28, 40, 48, 0.4);
}
.sz-edge__swatch span { position: absolute; top: 0; right: -8px; width: 8px; height: 100%; transform: skewY(-35deg); transform-origin: left top; }
.sz-edge__swatch--mirror span { background: linear-gradient(90deg, #23465a, #3d6b84); filter: brightness(0.75); }
.sz-edge__swatch--wrap span { background: #23465a; filter: brightness(0.7); }
.sz-edge__swatch--wrap::after { content: ""; position: absolute; inset: 3px; border: 1px dashed rgba(255, 255, 255, 0.85); }
.sz-edge__swatch--white span { background: #e9e9e5; }
.sz-edge__swatch--black span { background: #191b1c; } .sz-buy { padding-top: 20px; border-top: 1px solid var(--sz-line); }
.sz-buy__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.sz-buy__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.sz-buy__now { font-size: var(--sz-t-xl); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sz-buy__was { color: var(--sz-muted); font-variant-numeric: tabular-nums; }
.sz-buy__was[hidden] { display: none; }
.sz-buy__desc { flex-basis: 100%; font-size: var(--sz-t-sm); color: var(--sz-muted); }
.sz-qty { display: inline-flex; align-items: center; border: 1px solid var(--sz-line-strong); border-radius: var(--sz-r-ui); overflow: hidden; }
.sz-qty button { width: 40px; height: 44px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; color: var(--sz-ink); }
.sz-qty button:hover { background: var(--sz-wall); }
.sz-qty input {
width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 0;
text-align: center; font-weight: 650; -moz-appearance: textfield;
}
.sz-qty input::-webkit-outer-spin-button, .sz-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
[data-sz-add].is-done { background: var(--sz-good); border-color: var(--sz-good); }
.sz-buy__error { margin: 12px 0 0; color: var(--sz-bad); font-size: var(--sz-t-sm); font-weight: 600; }
.sz-buy__error[hidden] { display: none; }
.sz-buy__assure { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; font-size: var(--sz-t-sm); color: var(--sz-muted); }
.sz-buy__assure li { display: flex; align-items: center; gap: 8px; }
.sz-buy__assure .sz-icon { color: var(--sz-accent); }
.sz-buy__assure .woocommerce-Price-amount { color: var(--sz-ink); font-weight: 650; } .sz-sticky-buy {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 40;
display: none;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 12px var(--sz-gutter) calc(12px + env(safe-area-inset-bottom));
background: var(--sz-paper);
border-top: 1px solid var(--sz-line);
box-shadow: 0 -8px 24px -12px rgba(28, 40, 48, 0.25);
transform: translateY(110%);
transition: transform 0.2s;
}
.sz-sticky-buy__price { font-size: var(--sz-t-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
.sz-sticky-buy .sz-btn { flex: 1; max-width: 260px; }
.sz-sticky-buy.is-shown { transform: none; } .sz-studio-extra { padding-top: var(--sz-section); }
.sz-studio-help { border-top: 1px solid var(--sz-line); } @media (max-width: 960px) {
.sz-studio { grid-template-columns: 1fr; min-height: 0; }
.sz-stage {
position: relative;
top: auto;
height: auto;
min-height: 0;
padding: 16px var(--sz-gutter) 20px;
}
.admin-bar .sz-stage { top: auto; height: auto; }
.sz-drop { min-height: 300px; }
.sz-crop { flex: none; height: min(58vh, 480px); }
.sz-studio__panel { border-left: 0; padding-top: 20px; }
.sz-sticky-buy { display: flex; }
.sz-upload-status { top: 64px; }
}