above and none of this applies.
*
* It must not LOOK like a button — it is the price, and turning the headline
* figure of the action bar into a second call to action competes with Add to
* cart. So: the same weight and size it had, plus a chevron, plus the ordinary
* affordances of something pressable.
* ---------------------------------------------------------------------- */
.stp-capture__price-value--button {
display: inline-flex;
align-items: center;
gap: var( --stp-gap-sm );
/*
* Self-start, or the button stretches to the footer column's full width and
* its 44px hit area becomes a 44px-tall band the customer taps by accident
* on the way to the quantity stepper.
*/
align-self: flex-start;
min-height: 44px;
margin: 0;
padding: 0;
font: inherit;
font-size: 1.0625em;
font-weight: 700;
/*
* Outside the `font` shorthand, so `font: inherit` does not reach them and
* an uppercasing theme would set the price in tracked-out capitals. It is
* the price: it has to look like the number, not like a call to action.
* Same reset as the warning strip and .stp-capture__link.
*/
text-transform: none;
letter-spacing: normal;
text-align: left;
color: inherit;
background: none;
border: 0;
cursor: pointer;
}
.stp-capture__price-value--button:focus-visible {
outline: none;
box-shadow: var( --stp-focus );
border-radius: var( --stp-radius-sm );
}
.stp-capture__price-number {
min-width: 0;
}
/* Down when closed, up when open — the standing convention for a disclosure. */
.stp-capture__price-chevron {
transform: rotate( 45deg );
margin-top: -4px;
}
.stp-capture__price-value--button[aria-expanded="true"] .stp-capture__price-chevron {
transform: rotate( -135deg );
margin-top: 4px;
}
/*
* The setup fee is its own line and never folded into the per-unit figure: it
* is charged once per job across the whole cart and may be waived.
*/
.stp-capture__price-setup {
font-size: 0.875em;
}
.stp-capture__price-setup[hidden] {
display: none;
}
/*
* The price's scope line. A sibling of the price block since 0.9.0 (it is
* footnote text, and the action bar is for the number and the button), so it
* carries its own margin reset — it is a in someone else's theme now.
*/
.stp-capture__price-note {
margin: 0;
color: var( --stp-ink-muted );
font-size: 0.75em;
line-height: 1.4;
text-align: center;
}
/*
* The trust strip: the counterweight to the fidelity disclaimer, sitting with
* the primary action because that is the moment the reassurance is for.
*/
.stp-capture__trust {
margin: 6px 0 0;
color: var( --stp-ink-muted );
font-size: 0.75em;
line-height: 1.4;
text-align: center;
}
.stp-capture__trust[hidden] {
display: none;
}
/*
* The card's quantity stepper (inline presentation only — revealed by
* mountInline when it finds a native input to mirror).
*/
.stp-capture__field--qty {
display: flex;
align-items: center;
gap: var( --stp-gap-sm );
}
.stp-capture__field--qty[hidden] {
display: none;
}
.stp-capture__qty {
width: 5.5em;
text-align: center;
}
.stp-capture__submit {
width: 100%;
padding: 14px 20px;
font: inherit;
font-weight: 600;
color: var( --stp-accent-contrast );
background: var( --stp-accent );
border: 0;
border-radius: var( --stp-radius-sm );
cursor: pointer;
}
.stp-capture__submit[disabled] {
opacity: 0.65;
cursor: default;
}
/*
* The way out of a resumed design. Deliberately a quiet text button in the
* muted ink and deliberately NOT next to the primary one on a phone: it throws
* work away, so it must not be what a thumb lands on by accident.
*/
.stp-capture__startover {
align-self: center;
/*
* ...but quiet is not the same as small. It measured 62x20 on a phone,
* under both the 24px floor in ARCHITECTURE.md and WCAG 2.5.8 AA, which is
* the worst of both worlds for a destructive control: hard to hit on
* purpose AND hard to hit accurately, so a miss lands on it exactly when
* the customer meant something else. The padding grows the target without
* raising the visual weight one bit — the ink, the size and the position
* are all unchanged, so the note above still holds.
*/
min-height: 24px;
padding: 6px 12px;
color: var( --stp-ink-muted );
}
.stp-capture__startover:hover {
color: var( --stp-danger );
}
/* -------------------------------------------------------------------------
* Studio layout — VISUAL MODE ONLY
*
* Canvas first: the garment across the top of the modal, an icon rail under it,
* and one panel at a time coming up over the lower half of the stage. Quick
* capture never sees any of this — every rule below is behind
* `.stp-capture.is-studio`, and the rail and the sheet carry `hidden` there.
*
* The body becomes a two-area grid rather than a column of boxes, and the sheet
* is a grid item placed in the STAGE area, aligned to its end. That is what
* makes the panel an overlay with no absolute positioning to maintain and no
* measurement of the rail's height: the rail keeps its own row and stays
* reachable, the sheet sits over the canvas, and the canvas box does not change
* size when a panel opens. It must not — a text item's font-size is fitted in
* PIXELS against the measured canvas (fitLine), so a canvas that reflowed under
* an opening panel would leave every fitted size describing a stage that is no
* longer there.
* ---------------------------------------------------------------------- */
.stp-capture.is-studio .stp-capture__body {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr auto;
grid-template-areas:
"stage"
"rail";
gap: 0;
padding: 0;
min-height: 0;
/*
* STRETCH, explicitly. The 720px flex layout above sets align-items:
* flex-start for the two-column modal, and a grid inherits it — which left
* the tool bar sized to its own five buttons and a band of stage showing
* beneath it where the dark column should have run the full height. The
* chrome only reads as a frame if it reaches the edges.
*/
align-items: stretch;
/*
* The BODY does not scroll here; the stage inside it does. An overlay
* anchored to a scrolling box scrolls away from the rail it is supposed to
* sit on top of.
*
* `clip` rather than `hidden`, and the PAIR is load-bearing. `hidden` still
* makes this a SCROLL CONTAINER - it only refuses the user a scrollbar, so
* the browser remains free to scroll it programmatically. The sheet is a
* grid item that spends the first frames of its open at translateY( 100% ),
* a transform contributes to scrollable overflow, and so any focus() that
* lands inside the sheet gets "revealed" by scrolling this box: measured
* 317px on a rail open and 361px entering the zone editor, which is the
* blank panel Aramis photographed on 0.9.0 (iPhone, 2026-08-20). `clip`
* clips WITHOUT creating a scroll container, so there is nothing left to
* scroll and the whole class of bug is gone rather than patched one caller
* at a time.
*
* `hidden` stays as the first declaration for Safari below 16, which drops
* the `clip` line; those browsers are covered behaviorally instead, by the
* preventScroll + assertion in focusInCard().
*/
overflow: hidden;
overflow: clip;
}
.stp-capture.is-studio .stp-capture__stage {
grid-area: stage;
/* The 720px layout makes this sticky for the two-column view; a grid item
* in the studio is placed by the grid and nothing else. */
position: static;
/*
* LOAD-BEARING. Do not remove this line; it is not a leftover.
*
* The stage and the sheet are two items of the SAME grid. The sheet carries
* `z-index: 20` so a panel paints over the canvas it overlays. Inside the
* stage, the selected decoration is lifted with `z-index: 30`
* (.stp-capture__zone-items.is-lifted) so the thing being dragged is the
* thing you can see and grab. With no stacking context on the stage those
* two numbers are compared against each other in the body's context — 30
* beats 20 — and the lifted decoration paints straight THROUGH an open
* panel, on top of the very fields that are editing it.
*
* `z-index` applies to a grid item even at `position: static`, and any value
* other than `auto` makes it a stacking context. That is what makes one
* declaration enough: the lift still wins against its siblings inside the
* stage, and the stage as a whole now loses to the sheet, always. `0` is
* chosen because it changes nothing about where the stage itself paints.
*/
z-index: 0;
min-width: 0;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: var( --stp-gap-sm ) var( --stp-gap-sm ) var( --stp-gap );
background: var( --stp-canvas-bg );
}
/*
* THE CANVAS BOX IS THE IMAGE BOX, and stays that way.
*
* Zone rects and every stored placement are percentages of the view image
* (SPEC-SCHEMA), and both the hotspot layer and the item layer are inset:0 of
* this element — so giving the canvas a height of its own and letterboxing the
* garment inside it would put dead bars inside the coordinate frame and move
* every zone. Instead the IMAGE is capped and the canvas shrink-wraps it, which
* is the only way to get a ~55vh stage without touching the geometry.
*/
.stp-capture.is-studio .stp-capture__canvas {
display: block;
width: -webkit-fit-content;
width: fit-content;
max-width: 100%;
margin: 0 auto;
background: none;
border: 0;
border-radius: 0;
}
.stp-capture.is-studio .stp-capture__image {
width: auto;
height: auto;
max-width: 100%;
max-height: var( --stp-stage-h, 55vh );
}
.stp-capture.is-studio .stp-capture__views {
justify-content: center;
}
/*
* The mode pills sit between the dark top bar and the canvas. Centered and
* tightened so they read as a small switch under the chrome rather than as a
* second row of navigation.
*/
.stp-capture.is-studio .stp-capture__capture-modes {
justify-content: center;
padding: var( --stp-gap-sm ) var( --stp-gap-sm ) 0;
}
.stp-capture.is-studio .stp-capture__disclaimer {
text-align: center;
}
/*
* The stage instruction goes SR-ONLY in the studio layout, and stays in the DOM.
*
* It is the target of every stage item's aria-describedby — the keyboard
* contract for moving a decoration is described by this string and nowhere else
* — so it cannot be removed or `hidden`. What it can stop being is a line of
* help text printed under the garment: the card's whole claim is that it looks
* like a product, and the same sentence is one press of Info away for anyone who
* wants it. Quick capture keeps it visible; it has no Info button and its zone
* outlines are its interface.
*/
.stp-capture.is-studio .stp-capture__hint {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect( 0, 0, 0, 0 );
white-space: nowrap;
border: 0;
}
/*
* SHORT VIEWPORTS — a phone in landscape, a small laptop, a browser with three
* toolbars open.
*
* The stage was tuned against a portrait phone: 55vh is the garment before the
* modal's own header, the mode pills, the rail and the footer have taken
* anything. Under the height below that collapses — the garment is squeezed to
* a strip. The stage comes down, which leaves the fixed chrome the room it
* needs.
*
* WHERE 760 COMES FROM, and why it is not 620 any more. The inline card sizes
* its stage as `max( 260px, 100svh - --stp-chrome-h )`, so the FLOOR takes over
* — and the chrome starts being squeezed instead of the garment — as soon as
* the viewport drops under `chrome + 260`. The chrome measured at 430x932 was
* ~440 (top bar 52, mode pills 38, rail 66, action-bar footer ~282, borders),
* which put that crossover at ~700 and made 620 an under-estimate even before
* this wave. 0.10.0 then adds a row to the action bar: the warning strip is
* 44px of min-height plus one 8px row-gap, ~52px, call the chrome ~500. 500 +
* 260 = 760, and every viewport from there down is one where the floor is
* holding the garment up while the chrome overflows. 621–760px — the iPhone SE
* class, and a phone in landscape with a toolbar open — was the band that fell
* between the old number and the real one.
*
* The interior values are unchanged: 34vh was tuned against the layout, not
* against the breakpoint, and it stays the stage this block asks for.
*
* The SHEET is not in here any more: it is a percentage of the stage area and
* the customer sizes it themselves (--stp-sheet-size, written by the grip), so
* it follows the stage down without a second number to keep in step.
*
* A custom property rather than a new rule, so this is the same knob a shop
* already overrides, set to a different number at a different height.
*
* TWO SELECTORS, and that is not redundancy. A custom property is resolved by
* INHERITANCE — nearest declaration wins, and specificity only breaks ties
* between declarations on the SAME element. `.stp-capture` is the overlay/embed
* root; the inline card declares --stp-stage-h on `.stp-capture__dialog
* .is-inline`, which is its descendant, so from 0.9.0 until this line the whole
* media query was dead on the primary surface no matter how it was written
* (9th review round, MAJOR 1: measured at 430x600, the dialog was still
* resolving max(260px, 100svh - chrome) while the root said 34vh). The second
* rule is the same knob declared where the card can actually see it, at equal
* specificity and later in source than the block at the top of this file.
*/
@media ( max-height: 760px ) {
.stp-capture {
--stp-stage-h: 34vh;
}
.stp-capture__dialog.is-inline {
--stp-stage-h: 34vh;
}
}
/*
* The accordion column, the note field and the proof choice are LENT to their
* panels — the same nodes, re-parented, never a second copy. All three rules use
* a child combinator on purpose: once the node is inside the sheet its parent is
* different and the rule stops applying to it, with no class to add and remove
* in step with the move.
*/
.stp-capture.is-studio .stp-capture__body > .stp-capture__panel {
display: none;
}
.stp-capture.is-studio .stp-capture__footer > .stp-capture__field--note {
display: none;
}
/*
* ...AND THE PROOF CHOICE JOINS IT (Wave 1).
*
* The studio footer is an ACTION BAR: the price, the quantity, Add to cart, and
* the standing fine print under them. "Email me a proof before production" is
* not fine print and it is not an action — it is a DECISION, and a decision
* belongs with the other decisions, in the review step, next to the note field
* that has been there since the studio layout shipped (openStudioPanel lends
* both). Left in the footer it sat on row 3, below the fold, where a customer
* met it after they had already been offered the button.
*
* Same technique, same reason, same consequence: the child-combinator scopes
* this to the footer, so the field is fully visible the moment the review panel
* takes it, and (see the footer map, "Designer UX 1.1") a hidden child needs no row.
*/
.stp-capture.is-studio .stp-capture__footer > .stp-capture__field--proof {
display: none;
}
/* -------------------------------------------------------------------------
* Studio: the icon rail
* ---------------------------------------------------------------------- */
/*
* The tool bar. Dark chrome, large icons, white labels — the frame around the
* garment, matching the top bar above it.
*
* SCROLLS RATHER THAN SHRINKS. The buttons used to divide the width between
* them (`flex: 1 1 0`), which meant a sixth tool, or a locale whose words are
* longer, silently squeezed every label past the point of being readable. At a
* fixed minimum they overflow instead, and the bar scrolls — the same answer
* the reference toolbar gives, and the only one that keeps a label a label.
*
* ...and once it can overflow, `justify-content` has to be `flex-start`.
* `space-around` distributes free space by putting half a share OUTSIDE the
* first and last items — which is fine while everything fits and is a bug the
* moment it does not: in an overflowing scroll container that leading half-share
* becomes negative offset, and the first tool is unreachable in the scroll
* direction. It cannot be scrolled to, because there is nothing before the
* origin to scroll back to. The rail is packed from the start instead, so the
* first tool is where a rail's first tool has always been and the overflow all
* happens at the end, where the scroll can reach it.
*/
.stp-capture__rail {
grid-area: rail;
display: flex;
align-items: stretch;
justify-content: flex-start;
gap: 2px;
padding: 4px var( --stp-gap-sm );
overflow-x: auto;
scrollbar-width: thin;
color: var( --stp-chrome-ink );
background: var( --stp-chrome-bg );
border-top: 1px solid var( --stp-light-12 );
}
/*
* THE SCROLL AFFORDANCE. A row of tools that stops flush at the card's edge
* looks like the whole set — nothing about it says a sixth one is a swipe away,
* and on a phone with no visible scrollbar (every phone) the tools past the edge
* were simply not discovered.
*
* A STICKY FLEX ITEM, which is what makes this self-hiding without a line of JS
* or a wrapper element. The pseudo-element is the last item in the flex row, so
* it takes part in the layout rather than covering it; `position: sticky` with
* `right: 0` pins it to the right edge of the SCROLLPORT while the buttons pass
* underneath. The gradient runs to the rail's own background color, so:
*
* nothing to scroll — it sits in flow at the end of the row, painting a fade
* from transparent to the background ON the background.
* Invisible, exactly as it should be.
* more to the right — it is pinned at the edge with buttons under it, and
* those buttons fade out into the card edge.
* scrolled to the end — its flow position IS the right edge, so it is back
* over empty rail and disappears again.
*
* No negative margin, deliberately: it adds its own width to the row instead of
* overlapping the last button, which is why the "nothing to scroll" case can be
* genuinely invisible rather than a permanent smudge on the last label.
*/
.stp-capture__rail::after {
content: "";
position: sticky;
right: 0;
flex: 0 0 28px;
align-self: stretch;
/*
* The transparent end is the chrome color AT ZERO ALPHA, not the
* `transparent` keyword and not a white — either of those drags the ramp
* through a color the bar does not contain (transparent is transparent
* BLACK, and white would gray the middle), which reads as a dirty smear
* rather than a fade.
*
* Written out because a custom property cannot be given an alpha in a
* browser this file still supports (no color-mix, no relative color
* syntax). --stp-chrome-fade is --stp-chrome-bg (#1b2c46) at zero alpha; a
* skin that moves the chrome moves the fade with it.
*/
background: linear-gradient( to right, var( --stp-chrome-fade ), var( --stp-chrome-bg ) );
pointer-events: none;
}
.stp-capture__rail[hidden] {
display: none;
}
.stp-capture__rail-button {
display: flex;
/*
* GROW to share a wide rail, SHRINK no further than the 50px floor. At
* the old fixed 68px the five-tool set plus the 28px fade item overflowed
* the ~315px the inline card actually gives the rail on a 375px phone —
* the fifth tool sat half-clipped under the fade on the most common
* viewport there is, looking cut off rather than scrollable. At the 50px
* floor all five fit that rail (5×50 + 4×2 gap + 24 padding + 28 fade =
* 310 ≤ 315) and still clear the 44px target; a sixth tool overflows and
* the fade affordance takes over, which is what it is for. The narrow
* floor needs the two-line label clamp below, widened to cover every
* phone this floor can occur on.
*/
flex: 1 1 56px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
/* Mobile ship gate: a 44px target, reachable one-handed at the bottom of
* the modal. Wider than that so the (possibly two-line) label fits. */
min-width: 50px;
min-height: 56px;
padding: 6px 6px;
font: inherit;
font-size: 11px;
line-height: 1.15;
text-align: center;
color: var( --stp-light-86 );
background: transparent;
border: 1px solid transparent;
border-radius: var( --stp-radius-lg );
cursor: pointer;
}
.stp-capture__rail-button[hidden] {
display: none;
}
.stp-capture__rail-button:hover {
color: var( --stp-chrome-ink );
background: var( --stp-light-08 );
}
/*
* The open tool. A white wash rather than the accent: the accent belongs to the
* customer's choices on the garment, and a rail button lit in the same color
* as a selected swatch reads as another one of them.
*/
.stp-capture__rail-button.is-on {
color: var( --stp-chrome-ink );
background: var( --stp-light-14 );
border-color: var( --stp-light-42 );
}
.stp-capture__rail-button :focus-visible,
.stp-capture__rail-button:focus-visible {
outline: 2px solid var( --stp-chrome-ink );
outline-offset: -2px;
box-shadow: none;
}
/* Large enough to be read as a picture rather than a mark. */
.stp-capture__rail-icon {
width: 26px;
height: 26px;
}
/*
* The label is visible AND is the accessible name. Five icons a customer meets
* once are five guesses without it, and unlike the seven-wide parity row this
* rail has the width for words.
*/
.stp-capture__rail-label {
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/*
* PHONES (and any locale whose words are longer than English's).
*
* With the 50px shrink floor above, five rail buttons in a ~315px inline-card
* rail leave about 51px each, and one line of nowrap text in that space
* ellipsises "Add artwork" down to "Add…" — a visible label that has stopped
* being a label. On phone widths the label is allowed two lines instead,
* clamped so a three-word translation cannot grow the rail into the canvas.
* The ellipsis still lands, on the second line, where it costs a word rather
* than the meaning. 719px matches the studio desktop breakpoint, where the
* rail stands up into a column and the squeeze cannot happen.
*/
@media ( max-width: 719.98px ) {
.stp-capture__rail-label {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
white-space: normal;
}
}
/* -------------------------------------------------------------------------
* Studio: the panel (bottom sheet on a phone, left drawer from 720px)
* ---------------------------------------------------------------------- */
.stp-capture__sheet {
/* The SAME grid area as the stage, aligned to its end — so it overlays the
* lower part of the canvas without taking the rail's row away from it. */
grid-area: stage;
align-self: end;
z-index: 20;
display: flex;
flex-direction: column;
width: 100%;
/*
* THE CUSTOMER SETS THIS. capture.js writes --stp-sheet-size from the grip
* (drag, tap to cycle, arrow keys) and remembers the choice for the page.
*
* A LENGTH, not a percentage, and that is load-bearing. The sheet is a grid
* item in the stage's area, and a percentage height against an area whose
* own height is indefinite (this card is a block in a page, not a
* viewport-capped modal) is treated as `auto` while the row is being sized
* — so the row grew to the sheet's CONTENT, which for a 141-swatch thread
* chart is thousands of pixels. Measured on staging: the stage area went to
* 1129px around a 354px garment. A definite length contributes itself and
* nothing else.
*
* `svh` is the viewport with the phone's browser toolbars showing, which is
* the state the customer is actually in; the `vh` line before each is the
* fallback for browsers that do not know `svh`.
*
* The old flat cap (half the stage) was the complaint on a real phone: with
* the stage at 55vh the editor got about a quarter of the screen, which is
* not enough to work a thread chart in.
*
* ABOVE THE GARMENT'S HEIGHT THE STAGE ROW GROWS, and as of 0.9.1 that is
* deliberate. This is a grid item in a `1fr` row of a container with an
* indefinite block size, so the row is sized from its items' max-content
* contributions and a definite length contributes itself: a sheet taller
* than the canvas makes the row — and the card — taller, and shrinks them
* again on close. That is the only way this layout can produce the
* full-screen panel Aramis asked for without going `position: fixed`, which
* lands behind the iOS keyboard (see the 3.7 rejection in
* docs/reviews/2026-08-20-ios-sheet-diagnosis.md). The canvas does NOT move
* while it happens — the row grows by adding empty space below a
* `fit-content` canvas — and capture.js scrolls the grown card back into
* view on open (revealSheet).
*/
height: var( --stp-sheet-size, 58vh );
height: var( --stp-sheet-size, 58svh );
overflow: hidden;
background: var( --stp-surface );
border-radius: var( --stp-radius-lg ) var( --stp-radius-lg ) 0 0;
box-shadow: 0 -6px 24px var( --stp-shade-16 );
/*
* Hidden by VISIBILITY as well as by the attribute: the panel is unhidden a
* frame before it is told to slide, so that the transition has a starting
* state to run from, and without this that frame would show the closed
* sheet sitting over the rail.
*/
visibility: hidden;
transform: translateY( 100% );
transition:
transform 0.24s ease-out,
height 0.18s ease-out;
}
/*
* A height being DRIVEN BY A FINGER is not animated: the panel has to sit under
* the grip, not chase it. capture.js adds this for the length of the drag only.
*/
.stp-capture__sheet.is-resizing {
transition: none;
}
.stp-capture__sheet[hidden] {
display: none;
}
.stp-capture__sheet.is-open {
visibility: visible;
transform: translateY( 0 );
}
.stp-capture__sheet:focus {
outline: none;
}
/* Affordance only — it says the panel came up from the bottom. The close button
* and Escape are the two ways out, and both are real controls. */
/*
* The grip: a real resize control, and sized like one.
*
* The BAR is 40×4; the TARGET is the full width of the sheet and 28px tall,
* because this is the first thing a thumb reaches for when the panel is too
* short and it used to be a 4px decal that did nothing. The bar itself is the
* pseudo-element, so the target can be finger-sized without drawing a
* finger-sized slab across the top of the editor.
*
* `touch-action: none` because the gesture IS the resize — without it the
* browser takes the vertical drag for a page scroll before the first
* pointermove arrives.
*/
.stp-capture__sheet-grip {
position: relative;
flex: 0 0 auto;
width: 100%;
height: 28px;
touch-action: none;
cursor: row-resize;
}
.stp-capture__sheet-grip::before {
content: "";
position: absolute;
top: 10px;
left: 50%;
width: 40px;
height: 4px;
margin-left: -20px;
background: var( --stp-border-strong );
border-radius: 999px;
}
/* Bigger and darker while it is being used, so the bar reads as the thing the
* finger has hold of. */
.stp-capture__sheet-grip:active::before,
.stp-capture__sheet-grip:focus-visible::before {
width: 56px;
margin-left: -28px;
background: var( --stp-ink-muted );
}
.stp-capture__sheet-grip:focus-visible {
outline: 2px solid var( --stp-accent );
outline-offset: -4px;
border-radius: var( --stp-radius-sm );
}
/*
* The desktop drawer is full height already — there is no vertical size to
* choose, and capture.js declines to write one there (isSheetResizable).
*/
@media ( min-width: 720px ) {
.stp-capture__sheet-grip {
display: none;
}
}
.stp-capture__sheet-head {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: space-between;
gap: var( --stp-gap-sm );
padding: 4px var( --stp-gap ) 8px;
border-bottom: 1px solid var( --stp-border );
}
.stp-capture__sheet-title {
margin: 0;
overflow: hidden;
font-size: 0.9375em;
font-weight: 700;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
.stp-capture__sheet-close {
flex: 0 0 auto;
width: 36px;
height: 36px;
padding: 0;
font-size: 22px;
line-height: 1;
color: var( --stp-ink-muted );
background: transparent;
border: 1px solid transparent;
border-radius: var( --stp-radius-sm );
cursor: pointer;
}
.stp-capture__sheet-close:hover {
color: var( --stp-ink );
border-color: var( --stp-border );
}
/* The panel scrolls INSIDE itself; the stage behind it never moves. */
.stp-capture__sheet-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: var( --stp-gap );
}
.stp-capture__sheet-body > .stp-capture__panel {
width: 100%;
}
/*
* A zone's editor body arrives without the section that framed it, so the
* padding and the rule that separated it from its own heading go with the
* frame. The node itself is untouched.
*/
.stp-capture__sheet-body > .stp-capture__editor-body {
padding: 0;
border-top: 0;
}
/* -------------------------------------------------------------------------
* Studio: list panels (Elements, and the "which area?" chooser)
* ---------------------------------------------------------------------- */
.stp-capture__stack {
display: flex;
flex-direction: column;
gap: var( --stp-gap-sm );
}
.stp-capture__empty {
margin: 0;
padding: var( --stp-gap ) 0;
color: var( --stp-ink-muted );
font-size: 0.875em;
text-align: center;
}
.stp-capture__row {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 6px 4px 0;
background: var( --stp-surface );
border: 1px solid var( --stp-border );
border-radius: var( --stp-radius-lg );
}
/* The row for the decoration the stage has selected — the same state the ring
* on the garment is showing, said twice so the two surfaces agree. */
.stp-capture__row.is-on {
border-color: var( --stp-accent );
}
.stp-capture__row-pick {
display: flex;
flex: 1 1 auto;
align-items: center;
gap: var( --stp-gap-sm );
min-width: 0;
min-height: 44px;
padding: 6px 10px;
font: inherit;
text-align: left;
color: var( --stp-ink );
background: transparent;
border: 0;
border-radius: var( --stp-radius-lg );
cursor: pointer;
}
.stp-capture__row-pick--zone {
width: 100%;
background: var( --stp-surface );
border: 1px solid var( --stp-border );
}
/* At its cap and everything in it decorated. Still openable — editing what is
* there is a reasonable thing to want — but not offered as if it were empty. */
.stp-capture__row-pick--zone.is-full {
opacity: 0.72;
}
.stp-capture__row-icon {
flex: 0 0 auto;
width: 18px;
height: 18px;
color: var( --stp-ink-muted );
}
/* The area picker's thumbnail: the garment, with THIS area lit on it.
*
* TWO boxes, and the split is load-bearing.
*
* The TILE is fixed, so four rows put their four labels at the same x. Sizing
* each tile to its own view's aspect (a cap front is 546x540, its back 926x716)
* left the column ragged, which is the opposite of the point.
*
* The FIT is the image's own box, sized by JS (`sizeRowThumb`) to a contain-fit
* inside the tile. The highlight lives in there and NOT in the tile, because
* the zone rect is a percentage OF THE IMAGE: measured against a padded tile it
* would land off the area, subtly and differently for every view.
*
* `object-fit: contain` cannot do this job — it fits the picture but leaves the
* letterbox inside the element, so percentages still resolve against the padded
* box. Nor can the CSS-only `height:100%; width:auto`: that is circular, and
* browsers resolve it by contributing the image's NATURAL width to the
* shrink-to-fit parent. Measured here before it was fixed: 546, 926 and 1000px
* wide tiles inside a 44px row, the overflow merely hidden.
*
* 44px is the row's own min-height, so the picture rides inside the row the
* customer already had rather than making the sheet taller. This list is the
* first thing on a phone and its height is the whole reason it works there.
*
* ⚠ 64 and 44 are `ROW_THUMB_W` and `ROW_THUMB_H` in capture.js. They must
* move together.
*/
.stp-capture__row-thumb {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 64px;
height: 44px;
overflow: hidden;
background: var( --stp-surface-alt );
border-radius: var( --stp-radius-sm );
}
/* Before the image resolves this has no size, and the tile's own background is
* what shows: a tidy blank chip rather than a collapsed sliver. */
.stp-capture__row-thumb-fit {
position: relative;
display: block;
}
.stp-capture__row-thumb-img {
display: block;
width: 100%;
height: 100%;
}
/* Lit, and ringed in the same white the stage rings its zones with.
*
* The stage draws a zone as `2px dashed var( --stp-zone-outline )`. At 44px a
* dashed 2px border is mush, so the patch is filled with the accent and keeps
* the WHITE EDGE — the part of that language that survives the size, and the
* same token, so a shop that recolors its zone outline recolors this too.
*
* box-shadow rather than a border: the ring must not grow the patch. A 1px
* border on each side is two pixels at a size where two pixels is a visible
* lie about where the area sits on the garment.
*/
.stp-capture__row-thumb-zone {
position: absolute;
background: var( --stp-accent );
box-shadow: 0 0 0 1px var( --stp-zone-outline );
opacity: 0.55;
}
@media ( forced-colors: active ) {
/* The wash is a color the mode drops. An outline is the one thing it keeps,
* and at that point the two-pixel growth is the lesser wrong. */
.stp-capture__row-thumb-zone {
background: transparent;
border: 1px solid CanvasText;
box-shadow: none;
opacity: 1;
}
}
.stp-capture__row-text {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-width: 0;
}
.stp-capture__row-zone {
overflow: hidden;
font-size: 0.875em;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
.stp-capture__row-summary {
overflow: hidden;
color: var( --stp-ink-muted );
font-size: 0.8125em;
text-overflow: ellipsis;
white-space: nowrap;
}
.stp-capture__row-summary:empty {
display: none;
}
/* Tabular figures so a column of layer numbers does not jitter at 9 to 10. */
.stp-capture__row-layer {
flex: 0 0 auto;
min-width: 2.5ch;
color: var( --stp-ink-muted );
font-size: 0.75em;
font-variant-numeric: tabular-nums;
text-align: right;
}
.stp-capture__row-acts {
display: flex;
flex: 0 0 auto;
gap: 4px;
}
/* -------------------------------------------------------------------------
* Tablet and up
* ---------------------------------------------------------------------- */
@media ( min-width: 720px ) {
.stp-capture__overlay {
align-items: center;
padding: 24px;
}
.stp-capture__dialog {
max-height: calc( 100vh - 48px );
border-radius: var( --stp-radius );
}
.stp-capture__body {
flex-direction: row;
align-items: flex-start;
}
.stp-capture__stage {
flex: 1 1 45%;
position: sticky;
top: 0;
min-width: 0;
}
.stp-capture__panel {
flex: 1 1 55%;
min-width: 0;
}
/* ---------------------------------------------------------------------
* Studio at desktop width: the rail stands up on the left and the panel
* becomes a drawer beside the canvas instead of a sheet under it.
* ------------------------------------------------------------------ */
.stp-capture.is-studio .stp-capture__body {
grid-template-columns: auto 1fr;
grid-template-rows: 1fr;
grid-template-areas: "rail stage";
}
/*
* The tool bar stands up into a left column and keeps the dark skin — the
* top bar still spans the card above it, so the two read as one frame around
* the garment rather than as a bar and a sidebar.
*/
.stp-capture.is-studio .stp-capture__rail {
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 4px;
/* Wider than it was: 26px icons over a full label. */
width: 94px;
padding: var( --stp-gap-sm );
overflow-x: hidden;
overflow-y: auto;
border-top: 0;
border-right: 1px solid var( --stp-light-12 );
}
/*
* The horizontal scroll affordance goes with the horizontal scroll. The rail
* is a column here and overflows downwards, where the fade would be a 28px
* band across the middle of the last tool — an artefact, not an affordance.
*/
.stp-capture.is-studio .stp-capture__rail::after {
display: none;
}
.stp-capture.is-studio .stp-capture__rail-button {
flex: 0 0 auto;
min-width: 0;
min-height: 66px;
font-size: 11px;
}
/*
* STILL AN OVERLAY. "Beside the canvas" describes where it reads from, not
* a column the canvas gives up: the drawer shares the stage's grid area and
* slides in over it, so the canvas box is the same size open or closed. A
* drawer that took a column would resize the canvas, and every fitted text
* size on the stage is measured against that box.
*/
.stp-capture.is-studio .stp-capture__sheet {
align-self: stretch;
justify-self: start;
width: var( --stp-drawer-w, 320px );
max-width: 100%;
height: auto;
max-height: none;
border-right: 1px solid var( --stp-border );
border-radius: 0;
box-shadow: 6px 0 24px var( --stp-shade-14 );
transform: translateX( -100% );
}
.stp-capture.is-studio .stp-capture__sheet.is-open {
transform: translateX( 0 );
}
/* A drawer does not come up from anywhere, so it has nothing to grip. */
.stp-capture.is-studio .stp-capture__sheet-grip {
display: none;
}
/*
* ...and the grip was carrying the panel's top spacing. On a phone it
* contributes 14px (8px margin, a 4px bar, 2px more) above a head whose own
* top padding is 4px. Hiding it here left the heading 13px from the drawer's
* top edge — and that edge sits flush against the mode-pill row, both
* surfaces white, the drawer's shadow horizontal only, so "Which area?" read
* as tucked up under the pills rather than as the title of the panel below
* them. Measured, not guessed: the gap between the two boxes is 0.
*
* The head takes the spacing back, at the same 16px the drawer already uses
* horizontally, so the heading sits inside a consistent inset instead of
* against the join.
*/
.stp-capture.is-studio .stp-capture__sheet-head {
padding-top: var( --stp-gap );
}
.stp-capture.is-studio .stp-capture__stage {
padding: var( --stp-gap );
}
}
/* -------------------------------------------------------------------------
* Motion + contrast preferences
* ---------------------------------------------------------------------- */
@media ( prefers-reduced-motion: reduce ) {
.stp-capture *,
.stp-capture *::before,
.stp-capture *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
/*
* The panel does not slide. With the duration flattened above, a transform
* that still ran would be a jump from off-screen to in-place — the worst of
* both. Dropping the transform entirely leaves the visibility flip, which is
* the panel simply being there: no travel, no motion to sit through.
*/
.stp-capture__sheet {
transform: none !important;
}
/*
* The zone pulse does not run at all. capture.js already declines to add the
* class under this preference — a 1.2s introduction flattened to a
* one-frame flash is worse for the people the setting is for than no
* introduction — and this is the belt to that braces: a class arriving from
* anywhere else still animates nothing.
*
* The zones themselves are unaffected. They are still shown on hover, on
* focus, while a gesture runs and while the Areas panel is open; only the
* unprompted movement is gone.
*/
.stp-capture.is-visual.is-zones-pulse .stp-capture__zone::after {
display: none;
animation: none !important;
}
}
@media ( forced-colors: active ) {
.stp-capture__zone,
.stp-capture__swatch,
.stp-capture__pill,
.stp-capture__tool,
.stp-capture__rail-button,
.stp-capture__sheet,
.stp-capture__row,
.stp-capture__row-pick--zone,
.stp-capture__chrome-button,
.stp-capture__pager-button {
border: 1px solid CanvasText;
}
/*
* Forced colors drop --stp-chrome-bg and --stp-chrome-ink both: the bars
* become Canvas with CanvasText on them, which is right — the dark chrome
* was contrast, and this mode supplies its own. What they lose with it is the
* edge that separated them from the canvas, so it is drawn explicitly.
*/
.stp-capture__topbar,
.stp-capture__rail,
.stp-capture__pager,
.stp-capture__dialog.is-inline {
border: 1px solid CanvasText;
}
.stp-capture__chrome-button.is-on {
outline: 2px solid Highlight;
outline-offset: -1px;
}
/*
* ZONES ARE VISIBLE HERE, and deliberately so. Hiding them at rest is a
* decorative choice made against a photograph; forced colors is a
* declaration that decoration is not what this user is here for, so every
* outline and every label comes back. Nothing about where they are or what
* they do changes.
*
* THE SELECTOR HAS TO MATCH THE HIDING RULE'S, EXACTLY. The bare
* `.stp-capture__zone` in the border block above is one class; the rule that
* paints the outlines out at rest is a PAIR of selectors —
* `.stp-capture.is-visual .stp-capture__zone` (two classes) and
* `.stp-capture.is-visual .stp-capture__zone.is-filled` (three) — and
* specificity is not something a media query changes. So the restore silently
* lost, in the one mode where it mattered, and a forced-colors user in visual
* capture was looking at a garment with no visible targets on it at all:
* `border-color: transparent` is one of the few colors forced colors leaves
* alone.
*
* Both selectors are repeated here rather than just the shorter one, because
* dropping the `.is-filled` half would have left exactly the zones that
* already HAVE a decoration in them invisible — the worst half to lose.
* Matched at the same specificity and placed later in the file, this wins on
* source order, which is where a deliberate override belongs.
*
* Preview is still excepted — `.is-visual.is-preview` is three classes on the
* ancestor and still outranks both of these — because a proof with the
* apparatus drawn back over it is not a proof.
*/
.stp-capture.is-visual .stp-capture__zone,
.stp-capture.is-visual .stp-capture__zone.is-filled {
border: 1px solid CanvasText;
}
.stp-capture.is-visual .stp-capture__zone-label,
.stp-capture.is-visual .stp-capture__zone-count {
opacity: 1;
}
/*
* The rail's scroll fade is a gradient, and a gradient in forced colors is
* either ignored or painted as a flat system color over the tools it was
* meant to hint at. The overflow is still there and still scrollable; this
* mode has its own scrollbars to say so.
*/
.stp-capture__rail::after {
display: none;
}
/*
* Forced colors drop the accent, so the open tool and the selected row are
* told apart by the system highlight — the same substitution the pressed
* parity tool makes below.
*/
.stp-capture__rail-button.is-on,
.stp-capture__row.is-on {
outline: 2px solid Highlight;
outline-offset: -1px;
}
/*
* THE BAR IS THE DECAL; THE GRIP IS THE TARGET.
*
* This rule was written when the grip WAS the 40x4 bar. It is now a
* full-width, 28px-tall hit target with the bar as its ::before, so painting
* the container CanvasText drew a solid slab across the whole top of the
* sheet with the bar invisible inside it (9th review round, MINOR 11). The
* fill belongs on the pseudo-element that is meant to be seen; the target
* stays transparent, exactly as it is outside forced colors.
*/
.stp-capture__sheet-grip {
background: transparent;
}
.stp-capture__sheet-grip::before {
background: CanvasText;
forced-color-adjust: none;
}
/*
* Forced colors drop the accent, so a pressed tool is told apart by its
* border and its system highlight rather than by a fill nobody will see.
*/
.stp-capture__tool[aria-pressed="true"] {
outline: 2px solid Highlight;
outline-offset: 1px;
}
.stp-capture__zone-count {
color: CanvasText;
background: Canvas;
border-color: CanvasText;
forced-color-adjust: none;
}
.stp-capture__swatch.is-on {
outline: 3px solid Highlight;
outline-offset: 1px;
}
/*
* Forced colors drop the accent and the halo both, so the stage
* affordances are redrawn in system colors: the frame in CanvasText, the
* handles filled with Highlight so the two things you can grab are the two
* things that stand out.
*/
.stp-capture__item::before {
border-color: CanvasText;
box-shadow: none;
}
.stp-capture__item:focus-visible::before,
.stp-capture__item.is-selected::before,
.stp-capture__item.is-active::before {
border-color: Highlight;
box-shadow: none;
}
.stp-capture__handle::after {
background: Highlight;
border-color: CanvasText;
forced-color-adjust: none;
}
.stp-capture__handle--rotate::before {
background: CanvasText;
box-shadow: none;
forced-color-adjust: none;
}
}
/* Drawn size (wave 3): the read-only line that replaces the size menu when the
drag decides the size. Same box as a field value so the panel does not jump. */
.stp-capture .stp-capture__size-drawn {
display: block;
padding: 0.5em 0;
font-size: 16px;
line-height: 1.4;
}
.stp-capture .stp-capture__size-drawn[hidden] {
display: none;
}
/* ==========================================================================
* Free placement (template setting `placement: free`, 1.0.0-rc4)
*
* No zone boxes at rest. One transparent button covers the garment; the
* template's zones become soft areas that appear only while a decoration is
* being dragged (.is-free-dragging), the nearest one lit; a vertical centre
* guide shows while the drag is snapped to it; a quiet status line says when
* the selected decoration is outside every usual area. Tokens only.
* ======================================================================= */
.stp-capture__free {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
min-height: 0;
padding: 0;
margin: 0;
background: transparent;
border: 0;
border-radius: 0;
cursor: crosshair;
-webkit-tap-highlight-color: transparent;
}
.stp-capture__free:focus-visible {
outline: 2px solid var( --stp-focus );
outline-offset: -2px;
}
.stp-capture__area {
position: absolute;
z-index: 2;
pointer-events: none;
background: var( --stp-accent-tint-06 );
border: 1px solid transparent;
border-radius: var( --stp-radius-sm );
opacity: 0;
transition: opacity 0.15s ease;
}
.stp-capture.is-free-dragging .stp-capture__area {
opacity: 1;
}
.stp-capture.is-free-dragging .stp-capture__area.is-near {
background: var( --stp-accent-tint-14 );
border-color: var( --stp-accent );
}
.stp-capture__guide {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
z-index: 3;
width: 0;
pointer-events: none;
border-left: 1px solid var( --stp-accent );
opacity: 0;
}
.stp-capture.is-free-snapped .stp-capture__guide {
opacity: 0.9;
}
.stp-capture__free-hint {
position: absolute;
top: 8px;
left: 50%;
z-index: 4;
max-width: calc( 100% - 24px );
margin: 0;
padding: 6px 10px;
font-family: var( --stp-font-ui );
font-size: 13px;
line-height: 1.35;
color: var( --stp-ink );
text-align: center;
pointer-events: none;
background: var( --stp-light-95 );
border: 1px solid var( --stp-notice-edge );
border-radius: var( --stp-radius );
box-shadow: var( --stp-shadow );
transform: translateX( -50% );
}
.stp-capture__free-hint[hidden] {
display: none;
}
.stp-capture.is-preview .stp-capture__free,
.stp-capture.is-preview .stp-capture__free-hint {
display: none;
}
@media ( prefers-reduced-motion: reduce ) {
.stp-capture__area {
transition: none;
}
}
/* ==========================================================================
* Gallery presentation (1.0.0-rc4): the designer in the product gallery's slot.
* The gallery element keeps its place in the layout; while it holds the
* designer its own size limits are lifted so the card is never clipped.
* ======================================================================= */
.stp-gallery-swapped {
/* A sticky media column (common in product themes) taller than the window
would pin the designer's top out of reach; the swapped gallery scrolls
with the page instead. */
position: relative !important;
top: auto !important;
height: auto !important;
max-height: none !important;
min-height: 0 !important;
aspect-ratio: auto !important;
overflow: visible !important;
opacity: 1 !important;
}
.stp-gallery-swapped > :not( .stp-capture-gallery ) {
display: none !important;
}
.stp-capture-gallery {
position: relative;
display: block;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.stp-capture-gallery[hidden] {
display: none;
}
.stp-capture__gallery-back {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
margin: 0 0 8px;
padding: 8px 14px;
font-family: var( --stp-font-ui );
font-size: 16px;
line-height: 1.2;
color: var( --stp-ink );
cursor: pointer;
background: var( --stp-surface );
border: 1px solid var( --stp-border-strong );
border-radius: var( --stp-radius );
}
.stp-capture__gallery-back::before {
content: "\2039";
font-size: 20px;
line-height: 1;
}
.stp-capture__gallery-back:focus-visible {
outline: 2px solid var( --stp-focus );
outline-offset: 2px;
}
.stp-capture__thumbs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
}
.stp-capture__thumb {
width: 64px;
height: 64px;
padding: 2px;
cursor: pointer;
background: var( --stp-surface );
border: 2px solid var( --stp-border );
border-radius: var( --stp-radius-sm );
}
.stp-capture__thumb[aria-pressed="true"] {
border-color: var( --stp-accent );
}
.stp-capture__thumb:focus-visible {
outline: 2px solid var( --stp-focus );
outline-offset: 2px;
}
.stp-capture__thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.stp-capture-gallery.has-thumbs .stp-capture__pager {
display: none;
}
/* =========================================================================
* DESIGNER UX 1.1 (2026-10-08, owner feedback on the Hat Store clone)
*
* One section for the four things the owner reported: the panel covered the
* garment, the upload row overlapped the Size label, the summary under the
* designer was crowded and unaligned, and the price and Add to cart sat below
* the fold. Spacing in this section uses one scale: 4, 8, 12, 16, 24 px
* (--stp-gap-sm is 8, --stp-gap is 16). Every control a finger uses is at
* least 44px tall (--stp-handle-hit). Merge note: docs/DESIGNER-UX.md.
* ====================================================================== */
/* -------------------------------------------------------------------------
* The footer: one map for every mode.
*
* price ................................ [! 2 things to check >]
* [- 1 +] [ Add to cart ]
* Added at checkout. The shop confirms ... Details v
* (Details open: the full price note, disclaimer, trust line, then
* Save design · Start over in one row)
*
* The four columns are: quantity, two spacer tracks, and the button / pill.
* Every child is placed by name, so a node the JS hides costs no row and a
* node it adds cannot fall into an unplanned cell (the old maps shifted every
* row by one when the warning strip appeared; this one does not need to).
* ---------------------------------------------------------------------- */
.stp-capture .stp-capture__dialog > .stp-capture__footer {
display: grid;
grid-template-columns: auto auto minmax( 0, 1fr ) auto;
grid-template-areas:
"price price price warn"
"facts facts facts facts"
"qty buy buy buy"
"proof proof proof proof"
"note note note note"
"fine fine fine fine"
"pnote pnote pnote pnote"
"disc disc disc disc"
"trust trust trust trust"
"acts acts acts acts";
align-items: center;
gap: var( --stp-gap-sm ) 12px;
padding: 12px var( --stp-gap );
}
.stp-capture__footer > .stp-capture__warnstrip { grid-area: warn; }
.stp-capture__footer > .stp-capture__price { grid-area: price; }
.stp-capture__footer > .stp-capture__facts-region { grid-area: facts; }
.stp-capture__footer > .stp-capture__field--qty { grid-area: qty; }
.stp-capture__footer > .stp-capture__submit { grid-area: buy; }
.stp-capture__footer > .stp-capture__field--proof { grid-area: proof; }
.stp-capture__footer > .stp-capture__field--note { grid-area: note; }
.stp-capture__footer > .stp-capture__fine { grid-area: fine; }
.stp-capture__footer > .stp-capture__price-note { grid-area: pnote; }
.stp-capture__footer > .stp-capture__disclaimer { grid-area: disc; }
.stp-capture__footer > .stp-capture__trust { grid-area: trust; }
.stp-capture__footer > .stp-capture__actions { grid-area: acts; }
/* The price row: the estimate, its chevron, and setup on the same line. */
.stp-capture .stp-capture__footer > .stp-capture__price {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 12px;
min-width: 0;
margin: 0;
text-align: left;
}
.stp-capture .stp-capture__footer > .stp-capture__price[hidden] {
display: none;
}
.stp-capture .stp-capture__footer .stp-capture__price-value {
font-size: 1em;
text-align: left;
}
.stp-capture .stp-capture__footer > .stp-capture__price > * {
flex: 0 1 auto;
min-width: 0;
}
.stp-capture .stp-capture__footer .stp-capture__price-value--button {
min-height: 44px;
}
.stp-capture .stp-capture__footer .stp-capture__price-setup {
color: var( --stp-ink-muted );
font-size: 0.8125em;
}
/* The warning strip becomes a pill at the end of the price row. */
.stp-capture .stp-capture__footer > .stp-capture__warnstrip {
justify-self: end;
width: auto;
max-width: 100%;
min-height: 44px;
padding: 4px 12px;
font-size: 0.8125em;
border: 1px solid var( --stp-notice-edge );
border-radius: 999px;
white-space: nowrap;
}
.stp-capture .stp-capture__footer > .stp-capture__warnstrip[hidden] {
display: none;
}
.stp-capture__warnstrip-count {
display: none;
font-weight: 700;
}
/*
* The pill shows its count; the sentence stays for screen readers and as the
* tooltip. A full sentence beside the price pushed the estimate and its setup
* fee onto two lines in a 560px gallery column.
*/
.stp-capture .stp-capture__footer > .stp-capture__warnstrip .stp-capture__warnstrip-label {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect( 0, 0, 0, 0 );
white-space: nowrap;
}
.stp-capture .stp-capture__footer > .stp-capture__warnstrip .stp-capture__warnstrip-count {
display: inline;
}
.stp-capture.is-narrow .stp-capture__footer > .stp-capture__warnstrip {
gap: 6px;
padding: 4px 10px;
}
.stp-capture.is-narrow .stp-capture__footer > .stp-capture__warnstrip .stp-capture__warnstrip-chevron {
display: none;
}
/* Quantity: a stepper on the left, its label kept for screen readers. */
.stp-capture .stp-capture__footer > .stp-capture__field--qty {
display: block;
margin: 0;
}
.stp-capture .stp-capture__footer > .stp-capture__field--qty[hidden] {
display: none;
}
.stp-capture .stp-capture__footer > .stp-capture__field--qty > .stp-capture__label {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect( 0, 0, 0, 0 );
white-space: nowrap;
}
.stp-capture__stepper {
display: inline-flex;
align-items: stretch;
height: 48px;
background: var( --stp-surface );
border: 1px solid var( --stp-border-strong );
border-radius: var( --stp-radius );
overflow: hidden;
}
.stp-capture__stepper-button {
flex: 0 0 auto;
width: 44px;
padding: 0;
font: inherit;
font-size: 1.25em;
line-height: 1;
color: var( --stp-ink );
background: transparent;
border: 0;
cursor: pointer;
}
.stp-capture__stepper-button:hover {
background: var( --stp-surface-alt );
}
.stp-capture__stepper-button:focus-visible {
outline: none;
box-shadow: inset var( --stp-focus );
}
.stp-capture .stp-capture__stepper .stp-capture__qty {
width: 3.25em;
min-height: 0;
height: auto;
margin: 0;
padding: 0 4px;
text-align: center;
border: 0;
border-left: 1px solid var( --stp-border );
border-right: 1px solid var( --stp-border );
border-radius: 0;
-moz-appearance: textfield;
}
.stp-capture .stp-capture__stepper .stp-capture__qty::-webkit-outer-spin-button,
.stp-capture .stp-capture__stepper .stp-capture__qty::-webkit-inner-spin-button {
margin: 0;
-webkit-appearance: none;
}
/* Add to cart: right-aligned on the quantity row; fills the row on a phone. */
.stp-capture .stp-capture__footer > .stp-capture__submit {
justify-self: end;
width: auto;
min-width: 10em;
min-height: 48px;
margin: 0;
padding: 12px 24px;
}
.stp-capture.is-narrow .stp-capture__footer > .stp-capture__submit {
justify-self: stretch;
min-width: 0;
}
/* The fine print: one line and a Details toggle, left-aligned with the price. */
.stp-capture__fine {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-width: 0;
}
.stp-capture__fine-line {
flex: 1 1 auto;
min-width: 0;
margin: 0;
color: var( --stp-ink-muted );
font-size: 0.8125em;
line-height: 1.4;
text-align: left;
}
.stp-capture__fine-toggle {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 4px;
font: inherit;
font-size: 0.8125em;
font-weight: 600;
color: var( --stp-accent-ink );
background: none;
border: 0;
cursor: pointer;
}
.stp-capture__fine-toggle:focus-visible {
outline: none;
box-shadow: var( --stp-focus );
border-radius: var( --stp-radius-sm );
}
.stp-capture__fine-chevron {
width: 7px;
height: 7px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY( -2px ) rotate( 45deg );
}
.stp-capture__fine-toggle[aria-expanded="true"] .stp-capture__fine-chevron {
transform: translateY( 2px ) rotate( -135deg );
}
.stp-capture .stp-capture__footer > .stp-capture__price-note,
.stp-capture .stp-capture__footer > .stp-capture__disclaimer,
.stp-capture .stp-capture__footer > .stp-capture__trust,
.stp-capture .stp-capture__footer > .stp-capture__actions {
display: none;
margin: 0;
text-align: left;
}
.stp-capture .stp-capture__footer.is-details-open > .stp-capture__price-note,
.stp-capture .stp-capture__footer.is-details-open > .stp-capture__disclaimer:not( [hidden] ),
.stp-capture .stp-capture__footer.is-details-open > .stp-capture__trust:not( [hidden] ) {
display: block;
color: var( --stp-ink-muted );
font-size: 0.8125em;
line-height: 1.45;
}
.stp-capture .stp-capture__footer.is-details-open > .stp-capture__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 24px;
}
.stp-capture .stp-capture__actions > .stp-capture__link {
min-height: 44px;
margin: 0;
padding: 0;
text-align: left;
}
.stp-capture .stp-capture__actions > .stp-capture__link[hidden] {
display: none;
}
/* -------------------------------------------------------------------------
* The upload row: thumbnail, file name (one line, ellipsis), Remove.
* ---------------------------------------------------------------------- */
.stp-capture__upload-result {
display: flex;
align-items: center;
gap: 12px;
margin-top: 12px;
padding: 8px 8px 8px 12px;
background: var( --stp-surface-alt );
border: 1px solid var( --stp-border );
border-radius: var( --stp-radius );
}
.stp-capture__upload-result:empty {
display: none;
}
.stp-capture__upload-result .stp-capture__thumb-image {
flex: 0 0 auto;
width: 44px;
height: 44px;
}
.stp-capture__upload-name {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
font-size: 0.875em;
text-overflow: ellipsis;
white-space: nowrap;
}
.stp-capture__upload-result .stp-capture__link {
flex: 0 0 auto;
min-height: 44px;
padding: 0 8px;
}
/* Done: closes the panel and selects the decoration (studio only). */
.stp-capture__done {
display: none;
}
.stp-capture.is-studio .stp-capture__sheet .stp-capture__done {
display: block;
width: 100%;
min-height: 48px;
margin: var( --stp-gap ) 0 0;
padding: 12px 16px;
font: inherit;
font-weight: 600;
color: var( --stp-accent-contrast );
background: var( --stp-accent );
border: 0;
border-radius: var( --stp-radius-sm );
cursor: pointer;
}
.stp-capture.is-studio .stp-capture__sheet .stp-capture__done:focus-visible {
outline: none;
box-shadow: var( --stp-focus );
}
/* -------------------------------------------------------------------------
* The item bar: floats next to the selected decoration on the stage.
* ---------------------------------------------------------------------- */
.stp-capture__itembar {
position: absolute;
z-index: 40;
display: flex;
align-items: center;
gap: 4px;
padding: 4px;
white-space: nowrap;
pointer-events: auto;
background: var( --stp-surface );
border: 1px solid var( --stp-border );
border-radius: var( --stp-radius-lg );
box-shadow: 0 6px 20px var( --stp-shade-16 );
}
.stp-capture__itembar[hidden],
.stp-capture__itembar-size[hidden],
.stp-capture__itembar-button[hidden] {
display: none;
}
.stp-capture.is-preview .stp-capture__itembar {
display: none;
}
.stp-capture__itembar-size {
display: block;
margin: 0;
}
.stp-capture .stp-capture__itembar-select {
height: 44px;
min-height: 44px;
max-width: 10em;
margin: 0;
padding: 0 28px 0 12px;
font: inherit;
font-size: 0.875em;
color: var( --stp-ink );
background-color: var( --stp-surface );
border: 1px solid var( --stp-border );
border-radius: var( --stp-radius-sm );
}
.stp-capture__itembar-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 44px;
height: 44px;
padding: 0 12px;
font: inherit;
font-size: 0.875em;
font-weight: 600;
color: var( --stp-ink );
background: transparent;
border: 0;
border-radius: var( --stp-radius-sm );
cursor: pointer;
}
.stp-capture__itembar-button:hover {
background: var( --stp-surface-alt );
}
.stp-capture__itembar-button:focus-visible,
.stp-capture .stp-capture__itembar-select:focus-visible {
outline: none;
box-shadow: var( --stp-focus );
}
.stp-capture__itembar-button[aria-pressed="true"] {
background: var( --stp-accent-tint-14 );
}
.stp-capture__itembar-button--delete {
color: var( --stp-danger );
}
.stp-capture__itembar-button--flip,
.stp-capture__itembar-button--delete {
padding: 0;
}
/* The three extra resize corners show on the selected decoration only. */
.stp-capture__handle--nw,
.stp-capture__handle--ne,
.stp-capture__handle--sw {
display: none;
}
.stp-capture__handle--nw {
top: calc( var( --stp-handle-hit ) / -2 );
right: auto;
bottom: auto;
left: calc( var( --stp-handle-hit ) / -2 );
cursor: nwse-resize;
}
.stp-capture__handle--ne {
top: calc( var( --stp-handle-hit ) / -2 );
right: calc( var( --stp-handle-hit ) / -2 );
bottom: auto;
left: auto;
cursor: nesw-resize;
}
.stp-capture__handle--sw {
top: auto;
right: auto;
bottom: calc( var( --stp-handle-hit ) / -2 );
left: calc( var( --stp-handle-hit ) / -2 );
cursor: nesw-resize;
}
.stp-capture.is-studio:not( .is-preview ) .stp-capture__item.is-selected > .stp-capture__handle--nw,
.stp-capture.is-studio:not( .is-preview ) .stp-capture__item.is-selected > .stp-capture__handle--ne,
.stp-capture.is-studio:not( .is-preview ) .stp-capture__item.is-selected > .stp-capture__handle--sw {
display: block;
}
/* -------------------------------------------------------------------------
* Under the garment: view thumbnails, then the garment colour (gallery mode).
* ---------------------------------------------------------------------- */
.stp-capture__understage {
display: flex;
align-items: center;
gap: var( --stp-gap-sm );
margin-top: var( --stp-gap-sm );
}
.stp-capture__understage > .stp-capture__thumbs {
flex: 0 1 auto;
flex-wrap: nowrap;
gap: 8px;
min-width: 0;
margin: 0;
overflow-x: auto;
}
.stp-capture__understage .stp-capture__thumb {
flex: 0 0 auto;
width: 52px;
height: 52px;
}
/*
* The garment colour control (owner round 2, 2026-10-08: "the round circles
* around the colours look bad"). No rings: the trigger is a small square
* swatch and the name; the list is a tight grid of 44px square swatches with
* a 1px hairline, the chosen one outlined 2px in the accent with a check. The
* colour name is a caption line inside the list (hovered, focused or chosen),
* never a floating tooltip over the garment. The list opens upward from the
* trigger, right-aligned with the end of the thumbnail row.
*/
.stp-capture__colour {
position: relative;
flex: 0 0 auto;
margin-left: auto;
}
.stp-capture__colour[hidden] {
display: none;
}
.stp-capture__colour-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
max-width: 15em;
min-height: 44px;
padding: 4px 12px 4px 8px;
font: inherit;
font-size: 0.875em;
font-weight: 600;
color: var( --stp-ink );
background: var( --stp-surface );
border: 1px solid var( --stp-border );
border-radius: var( --stp-radius );
cursor: pointer;
}
.stp-capture__colour-toggle:hover {
border-color: var( --stp-border-strong );
}
.stp-capture__colour-toggle:focus-visible {
outline: none;
box-shadow: var( --stp-focus );
}
.stp-capture__colour-dot {
flex: 0 0 auto;
width: 24px;
height: 24px;
background-color: var( --stp-surface-alt );
background-position: center;
background-size: cover;
border: 1px solid var( --stp-border );
border-radius: var( --stp-radius-sm );
}
.stp-capture__colour-dot[hidden] {
display: none;
}
.stp-capture__colour-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.stp-capture.is-narrow .stp-capture__colour-name {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect( 0, 0, 0, 0 );
}
.stp-capture.is-narrow .stp-capture__colour-dot[hidden] + .stp-capture__colour-name {
position: static;
width: auto;
height: auto;
margin: 0;
clip: auto;
}
.stp-capture__colour-chevron {
flex: 0 0 auto;
width: 7px;
height: 7px;
margin: 0 2px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY( 2px ) rotate( -135deg );
}
.stp-capture__colour-toggle[aria-expanded="false"] .stp-capture__colour-chevron {
transform: translateY( -2px ) rotate( 45deg );
}
.stp-capture__colours {
position: absolute;
right: 0;
bottom: calc( 100% + 8px );
z-index: 45;
width: max-content;
max-width: min( 300px, 86vw );
padding: 8px;
background: var( --stp-surface );
border: 1px solid var( --stp-border );
border-radius: var( --stp-radius );
box-shadow: 0 8px 24px var( --stp-shade-16 );
}
.stp-capture__colours[hidden] {
display: none;
}
.stp-capture__colours-caption {
display: block;
min-height: 1.4em;
margin: 0 0 8px;
overflow: hidden;
font-size: 0.8125em;
font-weight: 600;
line-height: 1.4;
color: var( --stp-ink );
text-overflow: ellipsis;
white-space: nowrap;
}
.stp-capture__colours-grid {
display: grid;
grid-template-columns: repeat( 6, 44px );
gap: 4px;
max-height: 196px;
overflow-y: auto;
}
.stp-capture__colours-grid.has-text {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
width: 260px;
max-width: 100%;
}
.stp-capture__colour-option {
position: relative;
width: 44px;
height: 44px;
padding: 0;
background: none;
border: 0;
border-radius: var( --stp-radius-sm );
cursor: pointer;
}
.stp-capture__colour-swatch {
display: block;
width: 100%;
height: 100%;
background-color: var( --stp-surface-alt );
background-position: center;
background-size: cover;
border: 1px solid var( --stp-border );
border-radius: var( --stp-radius-sm );
}
.stp-capture__colour-option:hover .stp-capture__colour-swatch {
border-color: var( --stp-border-strong );
}
.stp-capture__colour-option[aria-pressed="true"] .stp-capture__colour-swatch {
outline: 2px solid var( --stp-accent );
outline-offset: 1px;
}
/* The check: a small accent badge in the corner of the chosen swatch. */
.stp-capture__colour-option[aria-pressed="true"]::after {
content: "";
position: absolute;
right: -3px;
bottom: -3px;
width: 16px;
height: 16px;
background: var( --stp-accent ) no-repeat center / 10px 10px url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2l2.2 2.2 4.8-4.8' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
border: 2px solid var( --stp-surface );
border-radius: 50%;
}
.stp-capture__colour-option:focus-visible {
outline: none;
box-shadow: var( --stp-focus );
}
.stp-capture__colour-option.is-text {
width: auto;
min-height: 44px;
height: auto;
padding: 0 12px;
font: inherit;
font-size: 0.8125em;
text-align: left;
color: var( --stp-ink );
border: 1px solid var( --stp-border );
}
.stp-capture__colour-option.is-text .stp-capture__colour-swatch {
width: auto;
height: auto;
background: none;
border: 0;
}
.stp-capture__colour-option.is-text[aria-pressed="true"] {
outline: 2px solid var( --stp-accent );
outline-offset: 1px;
}
.stp-capture__colour-option.is-text[aria-pressed="true"] .stp-capture__colour-swatch {
outline: 0;
}
/* The theme's own colour row, while the designer carries the control. */
.stp-attr-in-designer {
display: none !important;
}
/* -------------------------------------------------------------------------
* The panel never covers the garment (720px and up).
*
* The drawer was an overlay on the stage. It is now a COLUMN of the body
* grid: open, the body is "panel stage" with the stage keeping 55% of the
* card; a roomy card (900px+, e.g. the modal) keeps the tool rail too. The
* rail steps aside in a narrow card because a 560px gallery column cannot
* hold rail + panel + a 55% stage; the panel's own close button and the
* Text / Artwork switch inside it cover what the rail offered meanwhile.
*
* The stage shrinking is safe: the image ResizeObserver re-lays every item
* from its stored percentages (capture-integrity rule: geometry lives in the
* data, the stage only draws it). The panel contributes no height to the row
* (contain: size), so its content scrolls inside it instead of stretching
* the card.
* ---------------------------------------------------------------------- */
@media ( min-width: 720px ) {
.stp-capture.is-studio.is-sheet-open .stp-capture__body {
grid-template-columns: minmax( 0, 45fr ) minmax( 0, 55fr );
grid-template-areas: "panel stage";
min-height: 440px;
}
.stp-capture.is-studio.is-sheet-open:not( .is-roomy ) .stp-capture__rail {
display: none;
}
.stp-capture.is-studio.is-roomy.is-sheet-open .stp-capture__body {
grid-template-columns: auto minmax( 280px, 340px ) minmax( 0, 1fr );
grid-template-areas: "rail panel stage";
}
.stp-capture.is-studio .stp-capture__sheet.is-open {
grid-area: panel;
align-self: stretch;
justify-self: stretch;
width: auto;
max-width: none;
height: auto;
contain: size;
border-right: 1px solid var( --stp-border );
border-radius: 0;
box-shadow: none;
transform: none;
transition: none;
}
.stp-capture.is-studio .stp-capture__sheet.is-open .stp-capture__sheet-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
}
/* -------------------------------------------------------------------------
* A smaller view-tab and thumbnail footprint, so the garment gets the height.
* ---------------------------------------------------------------------- */
.stp-capture.is-studio .stp-capture__stage {
padding-bottom: 12px;
}
@media ( prefers-reduced-motion: reduce ) {
.stp-capture__fine-chevron,
.stp-capture__colour-chevron {
transition: none;
}
}
/* -------------------------------------------------------------------------
* Tap targets: 44px for every control a finger uses in the designer.
* ---------------------------------------------------------------------- */
.stp-capture .stp-capture__pill {
min-height: 44px;
padding: 8px 16px;
}
.stp-capture .stp-capture__sheet-close,
.stp-capture .stp-capture__tool {
width: 44px;
height: 44px;
}
.stp-capture .stp-capture__input,
.stp-capture .stp-capture__select,
.stp-capture .stp-capture__drop-button {
min-height: 44px;
}
.stp-capture .stp-capture__sheet-grip {
height: 44px;
}
/*
* The mouse-sized floors (34px swatches, 36px buttons) were kept for desktop
* pointers by an earlier round. The owner's brief for this pass is 44px for
* every control, on every pointer: a 768px tablet reports a fine pointer in
* some browsers, and the swatch chart is now inside a panel that has room.
*/
.stp-capture .stp-capture__swatches {
--stp-swatch-size: 44px;
}
.stp-capture .stp-capture__invite-button,
.stp-capture .stp-capture__view,
.stp-capture .stp-capture__link,
.stp-capture .stp-capture__editor-toggle {
min-height: 44px;
}
.stp-capture .stp-capture__sheet-grip::before {
top: 20px;
}
.stp-capture .stp-capture__editor-actions .stp-capture__link,
.stp-capture .stp-capture__add {
display: inline-flex;
align-items: center;
min-height: 44px;
}
/* -------------------------------------------------------------------------
* Back to photos, in the top bar (gallery mode).
* ---------------------------------------------------------------------- */
.stp-capture .stp-capture__topbar .stp-capture__gallery-back {
margin: 0;
padding: 4px 12px 4px 6px;
font-family: inherit;
font-size: inherit;
color: var( --stp-chrome-ink );
background: transparent;
border: 0;
border-radius: var( --stp-radius-sm );
}
.stp-capture .stp-capture__topbar .stp-capture__gallery-back::before {
content: none;
}
.stp-capture.is-narrow .stp-capture__chrome-button--preview .stp-capture__chrome-label,
.stp-capture.is-narrow .stp-capture__chrome-button--info .stp-capture__chrome-label {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect( 0, 0, 0, 0 );
white-space: nowrap;
}
/* A narrow stage keeps the thumbnails and shows the colour as a dot. */
.stp-capture__understage {
container-type: inline-size;
}
@container ( max-width: 400px ) {
.stp-capture__understage .stp-capture__thumb {
width: 46px;
height: 46px;
}
.stp-capture__understage > .stp-capture__thumbs {
gap: 6px;
}
.stp-capture__colour-dot:not( [hidden] ) + .stp-capture__colour-name {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect( 0, 0, 0, 0 );
}
}
/* -------------------------------------------------------------------------
* The launcher: one primary button (Customize) and an optional Quick setup
* button beside it, both styled by the theme's own `.button` / `.button.alt`.
* A theme button named in the hand-over setting replaces them.
* ---------------------------------------------------------------------- */
.stp-capture-launcher__buttons {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
.stp-capture-launcher__button[hidden],
.stp-capture-launcher__button--handed-over {
display: none !important;
}
/* -------------------------------------------------------------------------
* The invitation, under the garment (owner round 2): nothing but the
* customer's own decorations sits on the photo.
* ---------------------------------------------------------------------- */
.stp-capture.is-studio.is-empty-design .stp-capture__stage > .stp-capture__invite {
position: static;
z-index: auto;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 8px 12px;
max-width: none;
margin: 12px 0 0;
padding: 0;
background: none;
border: 0;
box-shadow: none;
transform: none;
pointer-events: auto;
}
.stp-capture.is-studio .stp-capture__stage > .stp-capture__invite .stp-capture__invite-lead {
font-size: 0.875em;
}
.stp-capture.is-studio .stp-capture__stage > .stp-capture__invite .stp-capture__invite-actions {
flex-wrap: nowrap;
gap: 8px;
}
.stp-capture.is-studio .stp-capture__stage > .stp-capture__invite .stp-capture__invite-button {
min-height: 44px;
padding: 8px 16px;
}
/* -------------------------------------------------------------------------
* Quick setup / Place it yourself: a segmented switch in the top bar.
* ---------------------------------------------------------------------- */
.stp-capture .stp-capture__topbar > .stp-capture__capture-modes {
flex: 0 0 auto;
flex-wrap: nowrap;
justify-content: center;
gap: 0;
padding: 0;
background: var( --stp-light-12 );
border-radius: 999px;
}
.stp-capture .stp-capture__topbar > .stp-capture__capture-modes[hidden] {
display: none;
}
.stp-capture .stp-capture__topbar .stp-capture__mode {
min-height: 44px;
padding: 0 12px;
font-size: 0.8125em;
font-weight: 600;
white-space: nowrap;
color: var( --stp-chrome-ink );
background: transparent;
border: 0;
border-radius: 999px;
}
.stp-capture .stp-capture__topbar .stp-capture__mode[aria-pressed="true"] {
color: var( --stp-accent-contrast );
background: var( --stp-accent );
}
.stp-capture .stp-capture__topbar .stp-capture__mode:hover:not( [aria-pressed="true"] ) {
background: var( --stp-light-14 );
}
/* Compact card: icon-only Preview, Info and Back, so the switch fits. */
.stp-capture.is-compact .stp-capture__topbar .stp-capture__chrome-label {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect( 0, 0, 0, 0 );
white-space: nowrap;
}
.stp-capture.is-compact .stp-capture__topbar .stp-capture__gallery-back {
padding: 4px 8px;
}
/* Narrow card: only the OTHER mode shows, as a switch button. */
.stp-capture.is-narrow .stp-capture__topbar .stp-capture__mode[aria-pressed="true"] {
display: none;
}
.stp-capture.is-narrow .stp-capture__topbar .stp-capture__mode::before {
content: "\21C4";
margin-right: 6px;
font-weight: 400;
}
/* The top bar's hidden tools (Quick setup hides Preview, undo/redo, Info). */
.stp-capture .stp-capture__topbar > [hidden],
.stp-capture .stp-capture__topbar .stp-capture__chrome-button[hidden] {
display: none;
}
/* -------------------------------------------------------------------------
* Quick setup, guided (owner round 2): one question per step, a step bar,
* Back top-left, the step's next action at the bottom of the panel, Add to
* cart in the footer as always. Same spacing scale as the studio panel.
* ---------------------------------------------------------------------- */
.stp-capture__qs,
.stp-capture__qs-nav {
display: none;
}
.stp-capture.is-guided .stp-capture__qs {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0 0 var( --stp-gap );
}
.stp-capture.is-guided .stp-capture__qs[hidden],
.stp-capture.is-guided .stp-capture__qs-nav[hidden] {
display: none;
}
.stp-capture__qs-head {
display: flex;
align-items: center;
gap: 8px;
min-height: 44px;
}
.stp-capture__qs-back {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 4px;
min-height: 44px;
padding: 0 8px 0 4px;
font: inherit;
font-size: 0.875em;
font-weight: 600;
color: var( --stp-ink );
background: none;
border: 0;
border-radius: var( --stp-radius-sm );
cursor: pointer;
}
.stp-capture__qs-back[hidden] {
display: none;
}
.stp-capture__qs-back:focus-visible {
outline: none;
box-shadow: var( --stp-focus );
}
.stp-capture__steps {
display: flex;
flex: 1 1 auto;
gap: 4px;
min-width: 0;
margin: 0;
padding: 0;
list-style: none;
}
.stp-capture__step {
display: flex;
flex: 1 1 0;
flex-direction: column;
gap: 4px;
min-width: 0;
margin: 0;
font-size: 0.75em;
color: var( --stp-ink-muted );
}
.stp-capture__step::before {
content: "";
display: block;
height: 4px;
background: var( --stp-border );
border-radius: 2px;
}
.stp-capture__step.is-done::before,
.stp-capture__step.is-current::before {
background: var( --stp-accent );
}
.stp-capture__step.is-current {
font-weight: 700;
color: var( --stp-ink );
}
.stp-capture__step-n {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect( 0, 0, 0, 0 );
}
.stp-capture__step-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.stp-capture__qs-question {
margin: 0;
font-size: 1.0625em;
font-weight: 700;
line-height: 1.3;
color: var( --stp-ink );
}
.stp-capture__qs-question:focus {
outline: none;
}
.stp-capture__qs-choices {
display: grid;
grid-template-columns: repeat( auto-fit, minmax( 140px, 1fr ) );
gap: 12px;
}
.stp-capture__qs-choice {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 96px;
padding: 16px;
font: inherit;
font-weight: 600;
color: var( --stp-ink );
background: var( --stp-surface );
border: 1px solid var( --stp-border );
border-radius: var( --stp-radius );
cursor: pointer;
}
.stp-capture__qs-choice:hover,
.stp-capture__qs-choice[aria-pressed="true"] {
border-color: var( --stp-accent );
background: var( --stp-accent-tint-06 );
}
.stp-capture__qs-choice:focus-visible {
outline: none;
box-shadow: var( --stp-focus );
}
.stp-capture__qs-choice .stp-capture__tool-icon {
width: 28px;
height: 28px;
}
.stp-capture__qs-zones {
display: flex;
flex-direction: column;
gap: 8px;
}
.stp-capture .stp-capture__qs-zone {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
min-height: 56px;
padding: 6px 12px 6px 6px;
text-align: left;
}
.stp-capture__qs-zone-thumb {
flex: 0 0 auto;
width: 44px;
height: 44px;
object-fit: contain;
background: var( --stp-surface-alt );
border-radius: var( --stp-radius-sm );
}
.stp-capture__qs-zone-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.stp-capture__qs-zone-name {
font-weight: 600;
}
.stp-capture__qs-zone-status {
overflow: hidden;
font-size: 0.8125em;
color: var( --stp-ink-muted );
text-overflow: ellipsis;
white-space: nowrap;
}
.stp-capture__qs-edits {
display: flex;
flex-wrap: wrap;
gap: 0 16px;
margin-top: 12px;
}
.stp-capture.is-guided .stp-capture__qs-nav {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 16px;
margin-top: var( --stp-gap );
padding-top: var( --stp-gap );
border-top: 1px solid var( --stp-border );
}
.stp-capture__qs-next {
min-height: 48px;
padding: 12px 20px;
font: inherit;
font-weight: 600;
color: var( --stp-ink );
background: var( --stp-surface );
border: 1px solid var( --stp-border-strong );
border-radius: var( --stp-radius-sm );
cursor: pointer;
}
.stp-capture__qs-next:focus-visible {
outline: none;
box-shadow: var( --stp-focus );
}
/* Steps show one thing: no editors before Details, one editor at Details. */
.stp-capture.is-guided .stp-capture__panel:not( [data-quick-step="details"] ) > .stp-capture__editors {
display: none;
}
.stp-capture.is-guided .stp-capture__editor:not( .is-open ),
.stp-capture.is-guided .stp-capture__editor-heading {
display: none;
}
.stp-capture.is-guided .stp-capture__editor {
border: 0;
}
.stp-capture.is-guided .stp-capture__editor-body {
padding: 0;
}
.stp-capture.is-guided .stp-capture__stage .stp-capture__hint {
display: none;
}
/* Proof and note live in the Review step in the guide. */
.stp-capture.is-guided .stp-capture__footer > .stp-capture__field--proof,
.stp-capture.is-guided .stp-capture__footer > .stp-capture__field--note {
display: none;
}
/* A compact card stacks: the garment as a preview on top, the step below. */
.stp-capture.is-guided.is-compact .stp-capture__body {
flex-direction: column;
align-items: stretch;
}
.stp-capture.is-guided.is-compact .stp-capture__stage {
position: static;
flex: 0 0 auto;
}
.stp-capture.is-guided .stp-capture__canvas {
width: -webkit-fit-content;
width: fit-content;
max-width: 100%;
margin: 0 auto;
}
.stp-capture.is-guided .stp-capture__image {
width: auto;
max-width: 100%;
max-height: 32vh;
}
.stp-capture.is-guided.is-compact .stp-capture__panel {
flex: 0 0 auto;
padding: var( --stp-gap );
}
/* Guided Quick setup: Add to cart stays in view (the card is sized to the
* screen like the studio and the step scrolls inside it), the gallery's
* thumbnails replace the view tabs, and the garment preview is smaller. */
.stp-capture.is-guided .stp-capture__dialog.is-inline > .stp-capture__body {
max-height: max( 320px, calc( 100vh - var( --stp-chrome-h, 260px ) ) );
max-height: max( 320px, calc( 100svh - var( --stp-chrome-h, 260px ) ) );
overflow-y: auto;
}
.stp-capture.is-guided.has-thumbs .stp-capture__views {
display: none;
}
.stp-capture.is-guided .stp-capture__image {
max-height: 26vh;
}
/* A checkbox is tapped through its whole label. */
.stp-capture .stp-capture__checkbox {
display: flex;
align-items: center;
gap: 12px;
min-height: 44px;
}
.stp-capture .stp-capture__checkbox input {
flex: 0 0 auto;
width: 20px;
height: 20px;
margin: 0;
}
/* The What step owns the text-or-logo choice in the guide. */
.stp-capture.is-guided .stp-capture__element > .stp-capture__modes {
display: none;
}
/* Narrow card: the quantity row keeps Add to cart on one line. */
.stp-capture.is-narrow .stp-capture__dialog > .stp-capture__footer {
column-gap: 8px;
}
.stp-capture.is-narrow .stp-capture__footer > .stp-capture__submit {
padding: 12px 16px;
white-space: nowrap;
}
.stp-capture.is-narrow .stp-capture__stepper .stp-capture__qty {
width: 2.75em;
}