/* Owner comments 2026-10-26 — companion to studio-comment-ui.js. Comment IDs in brackets. */

/* [uQ] A width-contained legacy photo can be shorter than the open sheet's preview band.
   Dock the whole canvas to that band's bottom; do not crop, stretch, or replace its pixels.
   Official bundle framing is already correct and keeps its own geometry. Inline preview
   pan/zoom transforms remain authoritative; this is only the unzoomed CSS fallback. */
@media(max-width:699px),(max-width:1024px) and (orientation:portrait){
 html[data-artizia-studio] body.az-journey-active.in-preview.imp-sheet-raised:not(.imp-designer):not(.pc-official-bundle) .preview-panel .canvas-stage #tag-mockup{top:auto!important;bottom:0!important;transform:translateX(-50%)}
}

/* [Lmo, _mree] Header + overflow menu: Artizia fonts, one icon family, icon + text in the menu. */
html[data-artizia-studio] #imp-cluster,
html[data-artizia-studio] #imp-cluster :is(button,summary,a,span),
html[data-artizia-studio] #az-header-menu :is(button,a,span,div){font-family:ArtiziaStudioOutfit,ArtiziaStudioAlexandria,Arial,sans-serif!important}
html[data-artizia-studio][lang="ar"] #imp-cluster :is(button,summary,a,span),
html[data-artizia-studio][lang="ar"] #az-header-menu :is(button,a,span,div){font-family:ArtiziaStudioAlexandria,Arial,sans-serif!important}
html[data-artizia-studio] #imp-cluster svg[data-az-ic]{width:22px;height:22px;flex:none}
html[data-artizia-studio] #az-header-menu :is(button,a,#az-save-status):has(> svg[data-az-ic]){display:flex!important;align-items:center;justify-content:flex-start;gap:10px;width:100%;min-height:44px;text-align:start}
html[data-artizia-studio] #az-header-menu svg[data-az-ic]{width:20px;height:20px;color:#5701EF}
html[data-artizia-studio] #az-header-menu[dir="rtl"] svg[data-az-ic="back"]{transform:scaleX(-1)}

/* [Re] No show/hide cube: the thumbnail rail is always open, same thumbnail size, swipes sideways. */
html[data-artizia-studio] #az-angle-toggle,
html[data-artizia-studio] #mk-dots .az-rail-lobe{display:none!important}
html[data-artizia-studio] #mk-dots .az-rail-plate{inset:0}
html[data-artizia-studio] body.imp-configurator #mk-dots{padding-top:8px!important}
html[data-artizia-studio] body.imp-configurator #mk-dots-row{overflow-x:auto!important;overscroll-behavior-x:contain;touch-action:pan-x;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
html[data-artizia-studio] body.imp-configurator #mk-dots-row .mk-thumb{scroll-snap-align:center}

/* [Pn, b13] The rail sits directly on the layer dock (or the open controls), never floating above it. */
html[data-artizia-studio] body.imp-configurator #mk-dots[data-az-edge][style*="--az-dock-bottom"]{bottom:var(--az-dock-bottom)!important}

/* [pbo] Draggable bar + X replace the expand chevron, for customers and designers. */
html[data-artizia-studio] #controls-panel #sheet-topbar.sheet-topbar > .az-sheet-expand.az-sheet-expand:not(#sheet-prompt){display:none!important}
html[data-artizia-studio] body.imp-configurator #controls-panel #sheet-topbar.sheet-topbar > .az-sheet-grab.az-sheet-grab{display:flex!important;position:absolute!important;top:0;left:50%;transform:translateX(-50%);width:88px;height:22px;align-items:center;justify-content:center;cursor:grab;touch-action:none;z-index:48;border-radius:11px}
html[data-artizia-studio] #sheet-topbar > .az-sheet-grab > span{display:block;width:44px;height:5px;border-radius:3px;background:#C9C3E3}
html[data-artizia-studio] #sheet-topbar > .az-sheet-grab:active{cursor:grabbing}
html[data-artizia-studio] #sheet-topbar > :is(.az-sheet-grab,.az-sheet-close):focus-visible{outline:3px solid #0048FD;outline-offset:2px}
html[data-artizia-studio] body.imp-configurator #controls-panel #sheet-topbar.sheet-topbar > .az-sheet-close.az-sheet-close{display:inline-flex!important;position:absolute!important;top:6px;left:8px;right:auto;z-index:48;flex:none;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;min-height:44px;padding:0!important;border:1px solid #DED9F1!important;border-radius:12px!important;background:#F8F7FF!important;color:#14122B!important}
html[data-artizia-studio] .controls-panel.az-sheet-settling{transition:max-height .26s cubic-bezier(.2,.7,.2,1),height .26s cubic-bezier(.2,.7,.2,1)!important;overflow:hidden!important}
@media(prefers-reduced-motion:reduce){html[data-artizia-studio] .controls-panel.az-sheet-settling{transition:none!important}}
@media(min-width:700px) and (orientation:landscape){
  html[data-artizia-studio] body.imp-configurator #controls-panel #sheet-topbar.sheet-topbar > .az-sheet-grab.az-sheet-grab{display:none!important}
}

/* [bN, lG] Two equal columns, icon + text, every image/graphic layer. */
html[data-artizia-studio] .az-smart-source-actions.az-source-pair{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}
html[data-artizia-studio] .az-source-pair > button{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:48px;padding:10px 12px!important;border:1px solid #DED9F1!important;border-radius:14px!important;background:#F8F7FF!important;color:#5701EF!important;font:600 14px/1.25 ArtiziaStudioOutfit,ArtiziaStudioAlexandria,Arial,sans-serif!important;text-align:center;white-space:normal}
html[data-artizia-studio][lang="ar"] .az-source-pair > button{font-family:ArtiziaStudioAlexandria,Arial,sans-serif!important}
html[data-artizia-studio] .az-source-pair > button svg{flex:none}

/* [Wly] Loading: one line of rotating copy; the film, the line and the bar hold fixed slots. */
html[data-artizia-studio] #imp-full-loader{--az-ld-film:240px}
@media(min-width:768px){html[data-artizia-studio] #imp-full-loader{--az-ld-film:280px}}
html[data-artizia-studio] #imp-full-loader .imp-boot{position:absolute!important;left:50%;top:50%;transform:translate(-50%,-50%);display:block!important;width:min(320px,80vw);height:calc(var(--az-ld-film) + 62px);margin:0!important}
html[data-artizia-studio] #imp-full-loader .imp-boot > .az-motion-loader{position:absolute!important;top:0;left:50%;transform:translateX(-50%);width:var(--az-ld-film)!important;height:var(--az-ld-film)!important;max-width:72vw;margin:0!important}
html[data-artizia-studio] #imp-full-loader .imp-boot-row{position:absolute!important;top:calc(var(--az-ld-film) + 18px);left:0;right:0;height:22px;display:block!important;margin:0!important}
html[data-artizia-studio] #imp-full-loader .imp-boot-row .cfg-loader-text{display:block;height:22px;min-height:0!important;margin:0;font-size:14px!important;line-height:22px!important;text-align:center!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-artizia-studio] #imp-full-loader .imp-boot-pct{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap}
html[data-artizia-studio] #imp-full-loader .imp-boot-bar{position:absolute!important;top:calc(var(--az-ld-film) + 52px);left:0;right:0;margin:0!important}
/* The full sheet must keep the same view navigation available as the peek sheet. */
html[data-artizia-studio] body.imp-configurator.az-sheet-expanded #mk-dots{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
html[data-artizia-studio] body.imp-configurator #mk-dots.mk-hide{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
@media(max-width:699px), (max-width:1024px) and (orientation:portrait){
 html[data-artizia-studio] body.az-journey-active.imp-configurator .controls-panel{bottom:var(--az-tools-bottom,76px)!important}
 html[data-artizia-studio] body.imp-configurator #mk-dots[data-az-edge]{top:auto!important}
}

/* [EndL] X sits on the physical left edge in both languages; the title starts after it. */
html[data-artizia-studio] body.imp-configurator #controls-panel #sheet-topbar:has(> .az-sheet-close) #imp-sheet-editor-title{left:60px!important;padding-left:48px!important;box-sizing:border-box}

/* [z-I] Customers close with X, which commits (one Undo step). The Apply/Cancel row keeps
   its DOM for the commit path but takes no space, focus or taps. The edit session writes
   display/position/width inline with !important, so collapse it with properties it leaves alone. */
html[data-artizia-studio] body.imp-configurator :is(#sheet-topbar,#cutout-overlay .cutout-head) > .imp-bag-header-actions{visibility:hidden!important;max-width:0!important;max-height:0!important;flex:0 0 0!important;overflow:hidden!important;margin:0!important;padding:0!important;border:0!important;pointer-events:none!important}

/* [pIM] Screen rung: the sheet reaches the header and covers the mockup; the rail steps aside. */
@media(max-width:699px), (max-width:1024px) and (orientation:portrait){
 html[data-artizia-studio] body.az-journey-active.az-sheet-expanded.az-sheet-screen .controls-panel{height:calc(100dvh - var(--az-header,72px) - var(--az-tools-bottom,76px))!important;max-height:calc(100dvh - var(--az-header,72px) - var(--az-tools-bottom,76px))!important}
 html[data-artizia-studio] body.imp-configurator.az-sheet-expanded.az-sheet-screen #mk-dots{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
 /* [uQ] With the sheet up, the photo's budget ends at the sheet: the dock is 76px (not the old
    132px Buy footer) and the rail rides on the sheet, so its 56px reserve was the empty band.
    Width-only, as before: the photo keeps its aspect, bitmap and source coordinates. */
 html[data-artizia-studio] body.az-journey-active.in-preview.imp-sheet-raised:not(.imp-designer) #tag-mockup{width:min(100vw,max(80px,calc(100dvh - var(--az-header,72px) - var(--az-tools-bottom,76px) - var(--az-active-sheet,0px))))!important}
}

/* [yLM] Edit picture: one centred column, a preview sized to the viewport, compact tools. */
html[data-artizia-studio] body.imp-configurator:not(.imp-designer) #cutout-overlay.open .cutout-panel{display:flex!important;flex-direction:column!important;box-sizing:border-box;width:min(100%,560px)!important;max-width:none!important;min-height:100%!important;height:auto!important;max-height:none!important;margin:0 auto!important;border:0!important;border-radius:0!important;box-shadow:none!important}
html[data-artizia-studio] body.imp-configurator:not(.imp-designer) #cutout-overlay .cutout-body{display:flex!important;flex-direction:column;flex:1 1 auto;gap:10px;padding:8px 16px max(16px,env(safe-area-inset-bottom))!important}
html[data-artizia-studio] body.imp-configurator:not(.imp-designer) #cutout-overlay .cutout-body > *{flex:0 0 auto}
html[data-artizia-studio] body.imp-configurator:not(.imp-designer) #cutout-overlay .cutout-preview-wrap{height:clamp(160px,46dvh,480px)!important;flex:0 0 clamp(160px,46dvh,480px)!important;min-height:0!important;border-color:#DED9F1!important;border-radius:16px!important}
html[data-artizia-studio] body.imp-configurator:not(.imp-designer) #cutout-overlay #cut-toggles{justify-content:center;gap:16px!important;margin:0!important;padding:4px 0!important}
html[data-artizia-studio] body.imp-configurator:not(.imp-designer) #cutout-overlay .cut-tool-section-title{margin:0!important;font:600 13px/1.4 ArtiziaStudioOutfit,ArtiziaStudioAlexandria,Arial,sans-serif!important;color:#514B68!important}
html[data-artizia-studio][lang="ar"] body.imp-configurator:not(.imp-designer) #cutout-overlay .cut-tool-section-title{font-family:ArtiziaStudioAlexandria,Arial,sans-serif!important}
@media(max-height:620px){html[data-artizia-studio] body.imp-configurator:not(.imp-designer) #cutout-overlay .cutout-preview-wrap{height:clamp(120px,40dvh,240px)!important;flex-basis:clamp(120px,40dvh,240px)!important}}

/* The legacy bag customer route uses the same X-only auto-commit interaction. */
html[data-artizia-studio] body.imp-configurator.imp-tpl-bag:not(.imp-designer) #cutout-overlay .cutout-head > .cutout-close{display:inline-flex!important;visibility:visible!important;pointer-events:auto!important}

/* Both authoring roles use the same close-and-commit picture control. */
html[data-artizia-studio] body.imp-configurator #cutout-overlay .cutout-head > .cutout-close{display:inline-flex!important;visibility:visible!important;pointer-events:auto!important}

/* The Templates panel uses the same persistent top-left X as other tools. */
html[data-artizia-studio] #dtpl-embed > button[onclick*="ArtiziaEditSession.cancel"]{display:none!important}
/* Legacy button styles explicitly restore visibility, so suppress the children too.
   display:none removes keyboard/AX targets while programmatic Apply remains callable. */
html[data-artizia-studio] body.imp-configurator :is(#controls-panel #sheet-topbar.sheet-topbar,#cutout-overlay .cutout-head) > .imp-bag-header-actions.imp-bag-header-actions > button{display:none!important;visibility:hidden!important;pointer-events:none!important}
/* The legacy mobile rule also targets the action-row ID; use its full path. */
html[data-artizia-studio] body.imp-configurator #controls-panel #sheet-topbar #imp-bag-sheet-actions > button{display:none!important;visibility:hidden!important;pointer-events:none!important}

/* Picture tools keep the same physical-left close target in both languages. */
html[data-artizia-studio] body.imp-configurator #cutout-overlay .cutout-head{position:relative!important;padding-left:64px!important;min-height:52px!important}
html[data-artizia-studio] body.imp-configurator #cutout-overlay .cutout-head > .cutout-close{position:absolute!important;left:8px!important;right:auto!important;top:4px!important;width:44px!important;height:44px!important}

/* Keep the complete public designer name readable on narrow bilingual cards. */
html[data-artizia-studio] :is(#dtpl-embed,#dtpl-overlay) .dtpl-dz-name{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere;line-height:1.4}