/* Connected Studio additions; the standalone prototype stays unchanged. */
/* Match the storefront header's 20px phone gutter and keep the intro compact. */
@media(max-width:640px){
 body main,body.pps-product-embedded main{padding:0 20px 16px}
 .steps>#step-artwork{padding-top:12px}
}
#library-dialog.is-saving,#library-dialog.is-saving *,#library-upload:disabled{cursor:default!important}
#library-upload[aria-busy=true]{opacity:1;background:#eaf0ef}
#library-status.is-working{display:flex;align-items:center;gap:8px;color:#526967}
#library-status.is-working:before{content:'';flex:none;width:12px;height:12px;border:2px solid #d5e1df;border-top-color:#00888b;border-radius:50%;animation:extras-total-spin .7s linear infinite}
@media(prefers-reduced-motion:reduce){#library-status.is-working:before{animation:none;border-color:#00888b}}
#add-to-cart.is-preparing{position:relative;overflow:hidden;opacity:1;background:#02383a;color:#fff;cursor:default}
#add-to-cart.is-preparing:before,#add-to-cart.is-preparing:after{content:'';position:absolute;bottom:0;left:0;height:3px;pointer-events:none}
#add-to-cart.is-preparing:before{width:100%;background:#ffffff26}
#add-to-cart.is-preparing:after{width:35%;background:#20b9ba;animation:prepare-order-progress 1.6s cubic-bezier(.45,0,.55,1) infinite}
@keyframes prepare-order-progress{from{transform:translateX(-105%)}to{transform:translateX(390%)}}
@media(prefers-reduced-motion:reduce){#add-to-cart.is-preparing:after{animation:none;transform:none}}
#step-artwork>.step-heading{align-items:center}
.back-to-product{margin-left:auto;flex-shrink:0;color:var(--muted);font-size:10px;font-weight:400;line-height:1.4;text-decoration:none;text-align:right}
.back-to-product:hover{text-decoration:underline;text-underline-offset:3px}
.mobile-preview-navigation{display:none}
@media(max-width:640px){
 .mobile-preview-navigation{display:flex;align-items:center;gap:12px;margin-bottom:16px}
 .mobile-preview-navigation .mobile-flow-tabs{margin:0;gap:16px;flex:none}
 .mobile-preview-navigation .back-to-product{max-width:none;white-space:nowrap;font-size:9px;margin-left:auto}
}

/* Optional services use the same restrained fields as the ordering steps. */
.studio-order-options{margin:0 0 18px;border:0;color:#526967;font-size:13px}
.studio-order-options>summary{display:flex;justify-content:space-between;align-items:center;min-height:40px;cursor:pointer;list-style:none;font-weight:400}
.studio-order-options>summary::-webkit-details-marker{display:none}
.studio-order-options summary small{margin-left:10px;font-size:11px;color:#768b8b;font-weight:400}
.studio-order-options.is-updating summary small{display:inline-flex;align-items:center;gap:6px;color:#526967}
.studio-order-options.is-updating summary small:before{content:'';width:10px;height:10px;border:1.5px solid #cbd8d7;border-top-color:#00888b;border-radius:50%;animation:extras-total-spin .7s linear infinite}
#cart-dialog button:disabled,#cart-dialog input:disabled,#cart-dialog textarea:disabled,#cart-dialog .order-option{cursor:default}
dialog{overscroll-behavior:contain;touch-action:pan-y}
dialog.pps-nested-dialog::backdrop{background:transparent;backdrop-filter:none}
@keyframes extras-total-spin{to{transform:rotate(360deg)}}
.library-loading{display:flex;align-items:center;gap:8px;min-height:56px;color:#708589;font-size:12px}
.library-loading-icon{width:12px;height:12px;flex:none;border:2px solid #d5e1df;border-top-color:#007e85;border-radius:50%;animation:extras-total-spin .7s linear infinite}
@media(prefers-reduced-motion:reduce){.library-loading-icon{animation:none}}
@media(prefers-reduced-motion:reduce){.studio-order-options.is-updating summary small:before{animation:none;border-color:#00888b}}
.studio-order-options .options-expand{font-size:18px;font-weight:400}
.studio-order-options[open] .options-expand{font-size:0}
.studio-order-options[open] .options-expand:after{content:'−';font-size:18px}
.order-options-list{display:grid;gap:8px;padding:8px 0 4px}
.order-option{display:flex;align-items:center;gap:12px;padding:12px;background:#f3f5f4;border-radius:6px;cursor:pointer;font-size:12px}
.order-option input{width:16px;height:16px;margin:0;accent-color:#02383a;flex:none}
.order-option>span:nth-child(2){flex:1;min-width:0}.order-option strong{display:block;color:#526967;font-size:12px;font-weight:600}
.order-option small{display:block;margin-top:4px;color:#768b8b;font-size:11px;line-height:1.5}
@media(prefers-reduced-motion:no-preference){.studio-order-options[open] .order-options-list{animation:order-options-enter .18s ease-out}@keyframes order-options-enter{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}}

/* Quiet feedback and a desktop inner-scroll cue. */
.saved-card:hover{outline:none!important;box-shadow:none!important}
.saved-name{display:block}
.library-rail .saved-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
#all-designs .saved-name{white-space:normal;overflow:visible;overflow-wrap:anywhere}
.saved-entry .saved-card{padding-right:34px}
.saved-entry .saved-remove{position:absolute;top:6px;right:6px;width:28px;height:28px;margin:0;padding:6px;align-self:auto}
.saved-entry .saved-remove svg{display:block;width:15.3px;height:15.3px}
.using-pointer .saved-card:focus{outline:none!important;box-shadow:none!important}
.artwork-activity{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:100;display:flex;align-items:center;gap:8px;max-width:calc(100vw - 32px);padding:11px 16px;background:#f3f5f5;color:#526967;border-radius:6px;font-size:11px;font-weight:600;box-shadow:0 3px 18px #082e3112;pointer-events:none}
.artwork-activity.is-working:before{content:'';width:12px;height:12px;flex:none;border:2px solid #d5e1df;border-top-color:#00888b;border-radius:50%;animation:extras-total-spin .7s linear infinite}
.steps-scroll-hint{display:none}
@media(min-width:901px){.workspace>.steps{grid-column:2;grid-row:1}.steps-scroll-hint{grid-column:2;grid-row:1;align-self:end;justify-self:center;z-index:4;display:block;margin-bottom:14px;padding:9px 13px;border-radius:6px;background:#f8f1eb;color:#526967;font-size:10px;font-weight:500;box-shadow:0 2px 12px #082e310a}.steps-scroll-hint:before{content:'';display:inline-block;width:4px;height:4px;border-radius:50%;background:#f18a4b;margin-right:7px}}
@media(prefers-reduced-motion:no-preference){.order-line.just-added{animation:artwork-row-added .35s ease-out}@keyframes artwork-row-added{from{opacity:.35;transform:translateY(5px)}to{opacity:1;transform:none}}}
@media(prefers-reduced-motion:reduce){.artwork-activity.is-working:before{animation:none}}

/* Keep feedback within the first visible part of the embedded builder. */
.artwork-activity{top:12px;bottom:auto;background:#fff4eb;color:#082e31;border-left:2px solid #f18a4b;font-size:12px}
.saved-card.is-adding{opacity:1;cursor:default}.saved-card small{display:flex;align-items:center;gap:6px}.saved-card small:before{content:'';width:10px;height:10px;flex:none;order:1;border:1.5px solid transparent;border-radius:50%;visibility:hidden}.saved-card.is-adding small:before{visibility:visible;border-color:#d5e1df;border-top-color:#007e85;animation:extras-total-spin .7s linear infinite}
@media(min-width:901px){#step-artwork>.step-heading{position:relative}.steps-scroll-hint{position:absolute;top:calc(100% + 9px);right:10px;bottom:auto;left:auto;margin:0;grid-column:auto;grid-row:auto;align-self:auto;justify-self:auto;font-size:11px;background:#fff4eb}}
@media(prefers-reduced-motion:reduce){.saved-card.is-adding small:before{animation:none}}

/* One natural document scroll, with reference rails beside the full steps. */
@media(min-width:901px){
 html:has(.steps),body:has(.steps){height:auto;overflow:visible}
 body:has(.steps){display:block;min-height:0}
 body:has(.steps) main{display:block;flex:none;min-height:0;overflow:visible}
 body:has(.steps) .workspace{height:auto;flex:none;overflow:visible;align-items:start}
 .workspace>.steps{height:auto;max-height:none;overflow:visible;scrollbar-gutter:auto;padding-bottom:20px}
 .workspace>.library-rail,.workspace>.checker-rail{position:sticky;top:16px;align-self:start;overflow:visible;min-height:0}
 .workspace>.checker-rail{height:var(--pps-rail-height,calc(100svh - 48px));max-height:780px}
 .checker-rail .checker-views{height:calc(100% - 100px);max-height:630px;min-height:200px}
 .steps-scroll-hint{display:none!important}
}

/* Reserve thumbnail space while private artwork loads. */
.saved-card img:not([src]){visibility:hidden}