/* 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:min(320px,calc(100% - 128px));min-width:140px;height:48px;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:64px;height:6px;border-radius:3px;background:#AAA0C8;transition:background-color .16s ease}
html[data-artizia-studio] #sheet-topbar > .az-sheet-grab:active{cursor:grabbing}
html[data-artizia-studio] #sheet-topbar > .az-sheet-grab:is(:hover,:focus-visible,:active) > span{background:#5701EF}
@media(prefers-reduced-motion:reduce){html[data-artizia-studio] #sheet-topbar > .az-sheet-grab > span{transition:none}}
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 .32s cubic-bezier(.22,.75,.2,1),height .32s cubic-bezier(.22,.75,.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}

/* All Arabic UI, including body-level confirmation and portal dialogs, uses the brand face.
   The artwork canvas and authored typography retain their own drawing fonts. */
html[data-artizia-studio][lang="ar"] body :is(button,input,select,textarea,dialog,[role="dialog"],#imp-confirm,#pc-bundle-status){font-family:ArtiziaStudioAlexandria,Arial,sans-serif!important}

/* Template identities wrap; the public creator row retains its compact line. */
html[data-artizia-studio] :is(#dtpl-embed,#dtpl-overlay) .dtpl-name{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere;line-height:1.4}
html[data-artizia-studio] :is(#dtpl-embed,#dtpl-overlay) .dtpl-dz{display:flex!important;align-items:center;gap:6px;min-width:0}
html[data-artizia-studio] :is(#dtpl-embed,#dtpl-overlay) .dtpl-dz-name{min-width:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;flex:1}
html[data-artizia-studio] :is(#dtpl-embed,#dtpl-overlay) .dtpl-dz-follow{flex:none;width:auto!important;min-width:44px!important;padding-inline:8px!important}
html[data-artizia-studio] #imp-save-toast{top:max(16px,env(safe-area-inset-top))!important;bottom:auto!important;font-family:var(--imp-font)!important}

/* Fill choices share one circular target, spacing, and selected-ring language. */
html[data-artizia-studio] :is(.az-recent-fill,.bgvar-sw,.bgvar-shuffle){box-sizing:border-box;width:var(--imp-sw,54px);height:var(--imp-sw,54px);min-width:44px;min-height:44px;flex:none;border-radius:50%!important}
html[data-artizia-studio] .az-recent-fill>span{border-radius:50%!important}
html[data-artizia-studio] #az-pattern-recolor label{display:grid;grid-template-columns:minmax(80px,1fr) 48px;gap:8px;padding-block:8px}
html[data-artizia-studio] #az-pattern-recolor input[type=color]{width:44px;height:44px;padding:2px;min-height:44px}
html[data-artizia-studio] #az-pattern-recolor input[type=range]{grid-column:1/-1;width:100%;min-height:44px;accent-color:#5701EF}

/* Buy has room around both its WhatsApp mark and localized label. */
html[data-artizia-studio] body.az-six-header #imp-cluster.az-six-controls #az-continue{min-width:84px!important;padding-inline:14px!important;font-family:var(--imp-font)!important}
/* Text entry retains its focused field while temporary selection chrome steps aside. */
html[data-artizia-studio] body.imp-kbtyping #a2d-ctxbar{display:none!important;visibility:hidden!important;pointer-events:none!important}

@media (min-width: 1100px) {
 html[data-artizia-studio] body.imp-designer.az-designer-active.az-designer-controls-closed #controls-panel{display:none!important}
 /* Keep all existing editing doors reachable after dismissal or a mobile-to-
    desktop resize. The dock fits inside the dismissed authoring area;
    choosing a door explicitly reopens its editor, without reopening on resize. */
 html[data-artizia-studio] body.imp-designer.az-designer-active.az-designer-controls-closed #imp-doorbar{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;position:fixed!important;inset:auto 16px 16px auto!important;width:min(336px,calc(100vw - 32px))!important;height:auto!important;max-height:calc(100dvh - 104px)!important;overflow-y:auto!important;box-sizing:border-box!important;padding:6px!important;border:1px solid var(--azd-border)!important;border-radius:16px!important;z-index:82!important}
 html[data-artizia-studio] body.imp-designer.az-designer-active.az-designer-controls-closed #imp-doorbar > button{display:flex!important;flex-direction:column!important;align-items:center;justify-content:center;gap:4px!important;width:100%!important;min-width:0!important;min-height:56px!important;padding:6px!important;font-size:12px!important;white-space:normal!important}
 html[data-artizia-studio] body.imp-designer.az-designer-active.az-designer-controls-closed #imp-doorbar > #az-designer-tool{display:flex!important;grid-column:1/-1;flex-direction:row!important;align-items:center;gap:8px;min-height:44px!important;padding:8px 12px!important}
 html[data-artizia-studio] body.imp-designer.az-designer-active.az-designer-controls-closed #az-designer-tool:focus-visible{outline:3px solid var(--azd-blue);outline-offset:2px}
}

/* Template creators keep their names, larger avatars and readable Follow buttons. */
html[data-artizia-studio] :is(#dtpl-embed,#dtpl-overlay) .dtpl-wrap{position:relative}
html[data-artizia-studio] :is(#dtpl-embed,#dtpl-overlay) .dtpl-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important}
html[data-artizia-studio] :is(#dtpl-embed,#dtpl-overlay) .dtpl-dz-av{width:32px!important;height:32px!important}
html[data-artizia-studio] :is(#dtpl-embed,#dtpl-overlay) .dtpl-dz.dtpl-dz-featured{display:grid!important;grid-template-columns:32px minmax(0,1fr);grid-template-areas:"av name" "follow follow";gap:6px 8px!important;padding:8px!important}
html[data-artizia-studio] :is(#dtpl-embed,#dtpl-overlay) .dtpl-dz-featured > .dtpl-dz-av{grid-area:av!important}
html[data-artizia-studio] :is(#dtpl-embed,#dtpl-overlay) .dtpl-dz-featured > .dtpl-dz-name{grid-area:name!important;align-self:center}
html[data-artizia-studio] :is(#dtpl-embed,#dtpl-overlay) .dtpl-dz-featured > .dtpl-dz-follow{grid-area:follow!important}
html[data-artizia-studio] :is(#dtpl-embed,#dtpl-overlay) .dtpl-dz-follow{width:auto!important;min-width:76px!important;min-height:44px!important;padding:8px 12px!important;justify-self:stretch}
html[data-artizia-studio] :is(#dtpl-embed,#dtpl-overlay) .dtpl-dz-follow-label{display:inline!important}
html[data-artizia-studio] :is(#dtpl-embed,#dtpl-overlay) .dtpl-dz-follow-icon{display:none!important}
/* Creator strip without Follow: one row, so the portrait sits centred instead of above an empty
   second track; the name lines up beside its portrait in Arabic too (it keeps its own script
   direction); and the card's keyboard ring is no longer cut off by the card's own clipping. */
html[data-artizia-studio] :is(#dtpl-embed,#dtpl-overlay) .dtpl-dz.dtpl-dz-featured{grid-template-areas:"av name"}
html[data-artizia-studio] :is(#dtpl-embed,#dtpl-overlay) .dtpl-dz > .dtpl-dz-name{text-align:-webkit-match-parent;text-align:match-parent}
html[data-artizia-studio] :is(#dtpl-embed,#dtpl-overlay) .dtpl-wrap > .dtpl-card:focus-visible{outline-offset:-3px!important}
@supports selector(:has(*)){
 /* The cover paints over an inset ring, so where :has() exists the ring goes round the whole card. */
 html[data-artizia-studio] :is(#dtpl-embed,#dtpl-overlay) .dtpl-wrap:has(> .dtpl-card:focus-visible){outline:3px solid #0048FD;outline-offset:2px}
 html[data-artizia-studio] :is(#dtpl-embed,#dtpl-overlay) .dtpl-wrap:has(> .dtpl-card:focus-visible) > .dtpl-card:focus-visible{outline:none!important}
}
@media(max-width:699px){
 html[data-artizia-studio] #dtpl-embed{padding:8px!important}
}

/* A Font peek includes one complete choice; explicit full/screen rungs retain their own bounds. */
@media(max-width:699px), (max-width:1024px) and (orientation:portrait){
 html[data-artizia-studio] body.imp-configurator:not(.az-sheet-expanded):not(.imp-kbtyping) .controls-panel[data-az-font-opening]{max-height:min(max(calc((100dvh - var(--az-header,72px) - 132px - env(safe-area-inset-bottom)) * .4),var(--az-font-opening,0px)),60dvh,var(--az-keyboard-height,100dvh))!important}
}

/* Material palettes share the same cells as patterns/glitter and recents.
   The older compact phone rule still serves handle colour pickers outside
   bg-pick; font grids and named bag crayon cards keep their own geometry. */
html[data-artizia-studio] body:is(.az-journey-active,.az-designer-active) .controls-panel [id^="bg-pick-"] .bg-sw-row{grid-template-rows:repeat(2,max-content)!important;grid-auto-columns:max-content!important;gap:var(--hc-gap,6px 8px)!important}
html[data-artizia-studio] body:is(.az-journey-active,.az-designer-active) .controls-panel [id^="bg-pick-"] .bg-sw-row .bg-sw:not(.imp-bag-crayon):not(:has(> .imp-bag-simple-label)){box-sizing:border-box!important;width:max(44px,var(--hc-cell,var(--imp-sw,54px)))!important;height:max(44px,var(--hc-cell,var(--imp-sw,54px)))!important;min-width:max(44px,var(--hc-cell,var(--imp-sw,54px)))!important;min-height:max(44px,var(--hc-cell,var(--imp-sw,54px)))!important;max-width:max(44px,var(--hc-cell,var(--imp-sw,54px)))!important;max-height:max(44px,var(--hc-cell,var(--imp-sw,54px)))!important}

/* November interaction pass: a single direct upload action and readable creator controls. */
html[data-artizia-studio] .az-source-pair.az-source-single{grid-template-columns:minmax(0,1fr)!important}
html[data-artizia-studio] .az-upload-button{display:flex!important;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;padding:10px 14px!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;cursor:pointer;text-align:center}
html[data-artizia-studio][lang="ar"] .az-upload-button{font-family:ArtiziaStudioAlexandria,Arial,sans-serif!important}
html[data-artizia-studio] #imp-lib-device-dock{margin:0 0 14px}
html[data-artizia-studio] #imp-lib-device{margin-top:0!important}

html[data-artizia-studio] body.imp-configurator #imp-lib-ov.lib-embed #imp-lib-card.imp-lib-has-items #imp-lib-host{padding-bottom:0!important}
html[data-artizia-studio] body.imp-configurator #imp-lib-ov.lib-embed #imp-lib-card.imp-lib-has-items #imp-lib-device-dock{position:sticky;top:0;bottom:auto;padding:0 0 12px;background:var(--imp-surface,#fff)}

/* Colours and Elements reveal their first complete grid in both authoring roles.
   Manual rungs retire this measured allowance; the opening is capped at 60% of the viewport. */
@media(max-width:699px), (max-width:1024px) and (orientation:portrait){
 html[data-artizia-studio] body.imp-configurator:not(.az-sheet-expanded):not(.imp-kbtyping) .controls-panel[data-az-palette-opening]{max-height:min(var(--az-palette-opening),60dvh,var(--az-keyboard-height,100dvh))!important}
}

/* One close owner for every embedded Add picker, in both authoring roles.
   The original control remains available when the card is a standalone dialog. */
html[data-artizia-studio] body.imp-configurator .controls-panel:has(.az-sheet-close) #as-embed:has(#add-source-card) #add-source-x{display:none!important;visibility:hidden!important;pointer-events:none!important}
html[data-artizia-studio] body.imp-configurator .controls-panel:has(.az-sheet-close) #as-embed :is(.bg-toptabs,.opt-row[id^="pcat-"]){margin-inline-end:0!important}
/* A 44px target needs room for its border and keyboard ring inside a scroller. */
html[data-artizia-studio] body.imp-configurator:is(.az-journey-active,.az-designer-active) #controls-panel.controls-panel #bag-artwork-section [id^="bg-pick-"] .bg-toptabs,
html[data-artizia-studio] body.imp-configurator:is(.az-journey-active,.az-designer-active) #controls-panel.controls-panel .bg-toptabs{height:auto!important;min-height:52px!important;padding-block:4px!important;box-sizing:border-box!important;align-items:center!important;flex-shrink:0}
html[data-artizia-studio] body.imp-configurator:is(.az-journey-active,.az-designer-active) #controls-panel.controls-panel .bg-toptabs>.bg-toptab{box-sizing:border-box!important;min-height:44px!important;flex-shrink:0;white-space:nowrap}
/* The rail is a scroll box, so it clips anything outside a tab. Draw the keyboard ring inside the tab. */
html[data-artizia-studio] body.imp-configurator:is(.az-journey-active,.az-designer-active) #controls-panel.controls-panel .bg-toptabs>.bg-toptab:focus-visible{outline-offset:-3px!important}

/* Library cards keep offer identity readable and share the existing bounded cover loader. */
html[data-artizia-studio] :is(#dtpl-embed,#dtpl-overlay) .dtpl-wrap{position:relative;min-width:0}
html[data-artizia-studio] :is(#dtpl-embed,#dtpl-overlay) a.dtpl-card{display:block;box-sizing:border-box;text-decoration:none}
html[data-artizia-studio] :is(#dtpl-embed,#dtpl-overlay) :is(.dtpl-family-name,.dtpl-offer-name){display:block}
html[data-artizia-studio] :is(#dtpl-embed,#dtpl-overlay) .dtpl-offer-name{margin-top:3px;color:var(--imp-fg-2,#514B68);font-weight:500}
html[data-artizia-studio] :is(#dtpl-embed,#dtpl-overlay) .dtpl-cover[data-loading-label]{display:grid;place-items:center;color:var(--imp-fg-2,#514B68);font-size:12px;text-align:center}
html[data-artizia-studio] :is(#dtpl-embed,#dtpl-overlay) .dtpl-cover[data-loading-label] .dtpl-blank{font-size:12px;padding:12px;box-sizing:border-box;color:var(--imp-fg-2,#514B68)}
html[data-artizia-studio] :is(#dtpl-embed,#dtpl-overlay) .dtpl-cover-retry{display:block;box-sizing:border-box;width:calc(100% - 16px);min-height:44px;margin:0 8px 8px;border:1px solid var(--imp-border,#DED9F1);border-radius:10px;background:var(--imp-surface,#fff);color:var(--imp-fg,#14122B);font:inherit;font-size:12px;cursor:pointer}
html[data-artizia-studio] :is(#dtpl-embed,#dtpl-overlay) .dtpl-cover-retry[hidden]{display:none!important}

/* Both Add Elements and native graphic-layer Elements own this compact two-row scroller.
   Customer honeycomb and designer flat collection selectors both stay on one line.
   Direction remains inherited, while neither row receives a sideways stagger. */
html[data-artizia-studio] body.imp-configurator .controls-panel :is(#add-source-library,[id^="gfx-presets-sticker-"],[id^="gfx-presets-images-"],[id^="gfx-presets-shapes-"]) .preset-grid:not(.preset-grid-col) {
  --hc-cell:54px;
  display:grid!important;
  grid-auto-flow:column!important;
  grid-template-columns:none!important;
  grid-template-rows:repeat(2,54px)!important;
  grid-auto-columns:54px!important;
  gap:10px!important;
  justify-content:start;
  align-items:start;
  box-sizing:border-box;
  min-inline-size:0;
  max-inline-size:100%;
  height:auto!important;
  padding:6px!important;
  margin:6px 0!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
}
html[data-artizia-studio] body.imp-configurator .controls-panel :is(#add-source-library,[id^="gfx-presets-sticker-"],[id^="gfx-presets-images-"],[id^="gfx-presets-shapes-"]) .preset-grid:not(.preset-grid-col)>.preset-thumb {
  box-sizing:border-box!important;
  width:54px!important;
  height:54px!important;
  min-width:54px!important;
  min-height:54px!important;
  margin:0!important;
  transform:none!important;
}
html[data-artizia-studio] body.imp-configurator .controls-panel :is(#add-source-library,[id^="gfx-presets-sticker-"],[id^="gfx-presets-images-"],[id^="gfx-presets-shapes-"]) :is(.preset-cat-hive .bg-sw-row,.opt-row[id^="pcat-"]) {
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:8px!important;
  min-inline-size:0;
  max-inline-size:100%;
  margin:0!important;
  padding:6px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  mask-image:none!important;
  -webkit-mask-image:none!important;
}
html[data-artizia-studio] body.imp-configurator .controls-panel :is(#add-source-library,[id^="gfx-presets-sticker-"],[id^="gfx-presets-images-"],[id^="gfx-presets-shapes-"]) :is(.preset-cat-hive .bg-sw-row,.opt-row[id^="pcat-"])>.opt-cell {
  flex:0 0 64px!important;
  width:64px!important;
  margin:0!important;
  transform:none!important;
}

/* Wide designer layouts can still be bottom sheets. Runtime geometry opts
   them into the existing sheet layout instead of a translated full-height pane.
   Its old sheet-y bottom-padding reserve is not part of a bottom-anchored panel. */
@media (min-width:1025px), (min-width:700px) and (orientation:landscape){
 html[data-artizia-studio] body.imp-designer #controls-panel[data-az-bottom-sheet]{top:auto!important;bottom:0!important;height:max-content!important;max-height:40dvh!important;padding-bottom:max(16px,env(safe-area-inset-bottom))!important;transform:none!important}
 html[data-artizia-studio] body.imp-designer:not(.az-sheet-expanded):not(.imp-kbtyping) #controls-panel[data-az-bottom-sheet][data-az-palette-opening]{max-height:min(var(--az-palette-opening),45dvh,var(--az-keyboard-height,100dvh))!important}
 html[data-artizia-studio] body.imp-designer #controls-panel[data-az-bottom-sheet] #sheet-topbar.sheet-topbar{position:sticky!important;top:0!important;z-index:82!important;background:var(--azd-surface,#fff)!important;flex-shrink:0!important}
 html[data-artizia-studio] body.imp-designer #controls-panel[data-az-bottom-sheet] #sheet-topbar.sheet-topbar > .az-sheet-grab.az-sheet-grab{display:flex!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important}
 html[data-artizia-studio] body.imp-designer #controls-panel[data-az-bottom-sheet] #sheet-handle{display:none!important}
 html[data-artizia-studio] body.imp-designer.az-sheet-expanded #controls-panel[data-az-bottom-sheet]{max-height:75dvh!important}
 html[data-artizia-studio] body.imp-designer.az-sheet-screen #controls-panel[data-az-bottom-sheet]{max-height:calc(100dvh - var(--az-header,72px))!important}
}