/* Customer Studio only; photography and export pixels remain engine-owned. */
html[data-artizia-studio] body.imp-configurator :is(.preview-panel,.canvas-stage,#tag-mockup){background:#fff!important;box-shadow:none!important;filter:none!important}
html[data-artizia-studio] body.imp-configurator #mk-dots-row.mk-thumbs{display:flex!important;max-width:min(560px,calc(100vw - 48px))!important;overflow-x:auto!important;gap:8px!important;padding:4px!important;border:0!important;border-radius:20px!important;background:transparent!important;box-shadow:none!important;scroll-snap-type:x proximity;scroll-padding-inline:8px}
html[data-artizia-studio] body.imp-configurator #mk-dots-row .mk-thumb{box-sizing:border-box!important;width:60px!important;height:60px!important;flex:0 0 60px!important;padding:2px!important;border:1px solid transparent!important;border-radius:14px!important;overflow:hidden!important;background:transparent!important;box-shadow:none!important;scroll-snap-align:center}
html[data-artizia-studio] body.imp-configurator #mk-dots-row .mk-thumb :is(img,.mk-thumb-ph){width:100%!important;height:100%!important;border-radius:10px!important;object-fit:cover!important;background:transparent!important}
html[data-artizia-studio] body.imp-configurator #mk-dots-row .mk-thumb.on{outline:0!important}
html[data-artizia-studio] body.imp-configurator #mk-dots-row .mk-ring{display:none!important}
html[data-artizia-studio] body.imp-configurator #mk-dots-row.mk-thumbs .mk-thumb.on{border:2px solid #5701ef!important;box-shadow:none!important;background:transparent!important;padding:1px!important}
html[data-artizia-studio] body.imp-configurator #mk-dots-row .imp-bag-view-label{font-family:inherit!important;color:#14122b!important;font-size:11px!important;line-height:16px!important;max-width:64px!important}
/* The temporary feedback/privacy launcher is separate from the persistent consent choice. */
html[data-artizia-studio] body.imp-configurator #az-privacy-launcher{display:none!important}
html[data-artizia-studio] .az-edit-apply{background:#0048FD!important;border-color:#0048FD!important;color:white!important}
html[data-artizia-studio] .az-edit-decision{max-width:min(360px,calc(100vw - 32px));border:1px solid #ded9f1;border-radius:20px;padding:20px;background:white;color:#14122b;font:inherit}
html[data-artizia-studio] .az-edit-decision button{display:block;width:100%;min-height:44px;margin-top:8px;border:1px solid #ded9f1;border-radius:10px;background:white;color:#14122b;font:inherit}
html[data-artizia-studio] .az-edit-decision button:first-of-type{background:#0048FD;color:white}
html[data-artizia-studio] .az-edit-decision::backdrop{background:#14122b55}
html[data-artizia-studio] body.imp-configurator #cutout-overlay{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-height:100dvh!important;z-index:100025!important;border-radius:0!important;overflow:auto!important;background:white!important}
html[data-artizia-studio] body.imp-configurator #cutout-overlay .cutout-head{position:sticky!important;top:0!important;z-index:3;background:white!important;flex-shrink:0}
html[data-artizia-studio] body.imp-configurator #cutout-overlay .cutout-foot{position:sticky!important;bottom:0!important;z-index:3;background:white!important;flex-shrink:0}
@media(prefers-reduced-motion:reduce){html[data-artizia-studio] :is(.mk-thumb,.controls-panel){transition:none!important}}
html[data-artizia-studio] body.imp-configurator .controls-panel .bg-sw-row{grid-template-rows:repeat(2,auto)!important;grid-auto-flow:column!important;grid-auto-columns:64px!important;gap:8px!important;align-items:start!important;padding:8px!important}
html[data-artizia-studio] body.imp-configurator .controls-panel .bg-sw-row>:nth-child(even),html[data-artizia-studio] body.imp-configurator[data-az-lang="ar"] .controls-panel .bg-sw-row>:nth-child(even){transform:none!important}
html[data-artizia-studio] body.imp-configurator .bg-sw.on{outline:3px solid #0048FD!important;outline-offset:3px!important;box-shadow:none!important}
html[data-artizia-studio] #az-studio-shortcuts{position:fixed;top:66px;inset-inline-end:12px;z-index:90;display:flex;gap:8px}
html[data-artizia-studio] #az-studio-shortcuts button{min-height:44px;padding:8px 12px;background:white;color:#14122b;border:1px solid #ded9f1;border-radius:12px;font:inherit;font-size:13px}
html[data-artizia-studio] #az-swipe-hint{position:absolute;bottom:110px;left:50%;transform:translateX(-50%);padding:8px 12px;border-radius:12px;background:#fff;color:#514b68;font-size:12px;white-space:nowrap;pointer-events:none}
html[data-artizia-studio] :is(#imp-full-loader,#dtpl-busy,.az-motion-loader){background:var(--az-loading-background,#F8F7FF)!important;color:#514B68!important}
html[data-artizia-studio] .az-edit-actions{display:flex;justify-content:flex-end;gap:8px;margin-inline-start:auto}
html[data-artizia-studio] .az-edit-actions button{min-height:44px;min-width:70px;border:1px solid #DED9F1;border-radius:12px;background:white;color:#14122B;font:inherit;font-size:13px;padding:8px 12px}
html[data-artizia-studio] #az-studio-shortcuts{top:116px}
html[data-artizia-studio] body.imp-configurator .controls-panel #imp-sheet-done{display:none!important}
html[data-artizia-studio] .fq-error{border:1px dashed #5701EF!important}
html[data-artizia-studio] .fq-error .opt-lbl::after{content:' ↻';color:#5701EF}
html[data-artizia-studio] body.imp-configurator.imp-kbtyping #sheet-topbar{display:flex!important;opacity:1!important;pointer-events:auto!important}
html[data-artizia-studio] body.imp-configurator .imp-words-done{background:#0048FD!important;color:white!important}
html[data-artizia-studio] body.imp-configurator #mk-dots{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
/* The angle rail also belongs to Edit. Desktop nests it in the otherwise
   Preview-only carousel; phones can leave it directly under body. */
html[data-artizia-studio] body.imp-configurator.imp-client.az-edit-angle-rail .canvas-stage.mode-2d #mockup-carousel{display:block!important}
html[data-artizia-studio] body.imp-configurator.imp-client.az-edit-angle-rail > #mk-dots{display:flex!important}
html[data-artizia-studio] body.imp-configurator .controls-panel .bg-hue{display:none!important}
html[data-artizia-studio] body.imp-configurator #imp-cl-gear,
html[data-artizia-studio] body.imp-configurator #imp-cl-set{display:none!important}
html[data-artizia-studio] body.imp-configurator #imp-cluster #az-studio-shortcuts{position:static;inset:auto;z-index:auto;display:flex;align-items:center;gap:6px;max-width:100%}
html[data-artizia-studio] body.imp-configurator #imp-cluster #az-studio-shortcuts button{white-space:nowrap;min-height:44px}
html[data-artizia-studio] body.imp-configurator #sheet-topbar{min-height:68px!important}
html[data-artizia-studio] body.imp-configurator #sheet-topbar>.az-edit-actions{display:flex!important;position:relative!important;z-index:45;margin-inline-start:auto;align-self:flex-start;padding-top:6px}
html[data-artizia-studio] body.imp-configurator #sheet-topbar>#imp-bag-sheet-actions{display:flex!important;position:absolute!important;top:8px!important;left:auto!important;right:12px!important;width:auto!important;z-index:45}
html[data-artizia-studio][dir="rtl"] body.imp-configurator #sheet-topbar>#imp-bag-sheet-actions{left:12px!important;right:auto!important}
/* The original desktop editor hides every non-title header child with an !important :not() rule. */
html[data-artizia-studio] body.imp-configurator.imp-editor-open #sheet-topbar.sheet-topbar>#imp-bag-sheet-actions.imp-bag-header-actions,
html[data-artizia-studio] body.imp-configurator.imp-sheet-solo #sheet-topbar.sheet-topbar>#imp-bag-sheet-actions.imp-bag-header-actions{display:flex!important;position:absolute!important;top:56px!important;left:12px!important;right:12px!important;width:auto!important;z-index:46!important;justify-content:stretch!important}
html[data-artizia-studio] body.imp-configurator.imp-editor-open #sheet-topbar.sheet-topbar,
html[data-artizia-studio] body.imp-configurator.imp-sheet-solo #sheet-topbar.sheet-topbar{min-height:120px!important}
html[data-artizia-studio] body.imp-configurator #sheet-topbar>#imp-bag-sheet-actions button{flex:1 1 0;min-width:0!important;min-height:44px!important;font-size:14px!important}
html[data-artizia-studio] body.imp-configurator #sheet-topbar #imp-sheet-editor-title{top:8px!important;inset-inline-start:12px!important;inset-inline-end:12px!important;max-width:none!important;height:40px!important}
html[data-artizia-studio] body.imp-configurator #cutout-overlay .cutout-head>.az-edit-actions{display:flex!important;position:relative!important;z-index:45}
html[data-artizia-studio] body.imp-configurator #cutout-overlay .cutout-head>.imp-bag-header-actions{display:flex!important;z-index:45}
@media(max-width:760px){
  html[data-artizia-studio] body.imp-configurator #imp-cluster #az-studio-shortcuts button{font-size:12px;padding-inline:7px}
  html[data-artizia-studio] body.imp-configurator #sheet-topbar>.az-edit-actions{padding-top:2px}
}
@media(max-width:699px), (max-width:1024px) and (orientation:portrait){
  html[data-artizia-studio] body.az-journey-active .controls-panel{max-height:min(calc((100dvh - var(--az-header) - 132px - env(safe-area-inset-bottom)) * .4),var(--az-keyboard-height,100dvh))!important}
  html[data-artizia-studio] body.az-journey-active.az-sheet-expanded .controls-panel{max-height:min(calc((100dvh - var(--az-header) - 132px - env(safe-area-inset-bottom)) * .75),var(--az-keyboard-height,100dvh))!important}
  html[data-artizia-studio] body.imp-configurator.imp-editor-open #sheet-topbar.sheet-topbar>.az-sheet-expand:not(#sheet-prompt){display:inline-flex!important;position:absolute!important;top:6px!important;left:12px!important;right:auto!important;z-index:47!important;align-items:center;justify-content:center;min-height:38px!important;padding:6px 12px!important;border:1px solid #ded9f1!important;border-radius:10px!important;background:#f8f7ff!important;color:#14122b!important;font:inherit!important;font-size:13px!important}
  html[data-artizia-studio] body.imp-configurator #sheet-topbar.sheet-topbar>.az-sheet-expand:focus-visible{outline:3px solid #0048fd!important;outline-offset:2px}
}
@media(max-width:699px), (max-width:1024px) and (orientation:portrait){
  /* Keep the visible language and Help controls inside the phone header. */
  html[data-artizia-studio] body.az-journey-active #imp-cluster #az-studio-shortcuts{grid-area:2/1/3/3;justify-self:start;width:max-content;max-width:100%;min-width:0}
  html[data-artizia-studio] body.az-journey-active #imp-cluster #az-share{grid-area:2/3/3/5}
  html[data-artizia-studio] body.az-journey-active #imp-cluster #az-save-status{grid-area:3/1/4/5;width:100%!important;max-width:100%!important;justify-content:center;text-align:center}
}
html[data-artizia-studio] #az-studio-shortcuts .az-help-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;min-width:44px;padding:8px}
html[data-artizia-studio] #sheet-topbar.sheet-topbar>.az-sheet-expand{display:inline-flex!important;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:1px solid #ded9f1;border-radius:12px;background:#f8f7ff;color:#5701ef;padding:6px}
html[data-artizia-studio] body.imp-configurator #imp-sheet-editor-title.imp-focus-landing{outline:none!important;box-shadow:none!important}
@media(max-width:699px), (max-width:1024px) and (orientation:portrait){
 html[data-artizia-studio] body.imp-configurator #mk-dots.mk-hide,
 html[data-artizia-studio] body.imp-configurator.az-sheet-expanded #mk-dots{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
}
/* At tablet landscape widths the desktop side pane replaces the mobile sheet.
   The legacy thumbnail rule still pinned the strip behind the header; centre it
   inside the remaining preview, including when the pane is open in RTL. */
@media(min-width:700px) and (max-width:1024px) and (orientation:landscape){
  html[data-artizia-studio] body.az-journey-active{--az-side-pane:0px}
  html[data-artizia-studio] body.az-journey-active.imp-sheet-raised{--az-side-pane:var(--az-pane)}
  html[data-artizia-studio] body.az-journey-active #mk-dots{top:auto!important;bottom:16px!important;left:calc(var(--az-rail) + var(--az-side-pane) + (100vw - var(--az-rail) - var(--az-side-pane))/2)!important;right:auto!important;transform:translateX(-50%)!important}
  html[data-artizia-studio] body.az-journey-active:has(#imp-cluster[dir="rtl"]) #mk-dots{left:calc((100vw - var(--az-rail) - var(--az-side-pane))/2)!important}
  html[data-artizia-studio] body.az-journey-active #mk-dots-row.mk-thumbs{max-width:calc(100vw - var(--az-rail) - var(--az-side-pane) - 24px)!important}
}
/* Customer phone sheets: a single 44px action row leaves both palette rows
   inside the bounded sheet, above the fixed tool/checkout rails. */
@media(max-width:699px), (max-width:1024px) and (orientation:portrait){
 html[data-artizia-studio] body.az-journey-active:not(.imp-designer) .controls-panel{padding:6px 12px 8px!important;bottom:calc(132px + env(safe-area-inset-bottom))!important;scroll-padding-block:56px 8px!important}
 html[data-artizia-studio] body.az-journey-active:not(.imp-designer).imp-editor-open #sheet-topbar.sheet-topbar,
 html[data-artizia-studio] body.az-journey-active:not(.imp-designer).imp-sheet-solo #sheet-topbar.sheet-topbar{display:grid!important;grid-template-columns:minmax(0,1fr) auto 44px!important;align-items:center!important;gap:6px!important;min-height:56px!important;height:56px!important;margin-inline:-12px!important;padding:6px 12px!important;top:-6px!important}
 html[data-artizia-studio] body.az-journey-active:not(.imp-designer) #sheet-topbar #imp-sheet-editor-title{grid-column:1!important;grid-row:1!important;min-width:0!important;max-width:100%!important;height:auto!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;font-size:15px!important;line-height:1.4!important}
 html[data-artizia-studio] body.az-journey-active:not(.imp-designer).imp-editor-open #sheet-topbar.sheet-topbar>#imp-bag-sheet-actions.imp-bag-header-actions,
 html[data-artizia-studio] body.az-journey-active:not(.imp-designer).imp-sheet-solo #sheet-topbar.sheet-topbar>#imp-bag-sheet-actions.imp-bag-header-actions{grid-column:2!important;grid-row:1!important;position:static!important;inset:auto!important;width:auto!important;margin:0!important;padding:0!important;gap:4px!important;align-self:center!important}
 html[data-artizia-studio] body.az-journey-active:not(.imp-designer) #sheet-topbar>#imp-bag-sheet-actions button{flex:none!important;min-width:60px!important;min-height:44px!important;padding:6px 8px!important;font-size:12px!important;white-space:nowrap!important}
 html[data-artizia-studio] body.az-journey-active:not(.imp-designer).imp-editor-open #sheet-topbar.sheet-topbar>.az-sheet-expand:not(#sheet-prompt){grid-column:3!important;grid-row:1!important;position:static!important;inset:auto!important;min-width:44px!important;width:44px!important;min-height:44px!important;padding:4px!important;font-size:22px!important}
 html[data-artizia-studio] body.az-journey-active:not(.imp-designer) .controls-panel .bg-sw-row{grid-template-rows:repeat(2,44px)!important;grid-auto-columns:44px!important;gap:6px!important;padding:3px!important;margin-block:0!important}
 html[data-artizia-studio] body.az-journey-active:not(.imp-designer) .controls-panel .bg-sw-row .bg-sw{box-sizing:border-box!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;max-width:44px!important;max-height:44px!important;margin:0!important}
 html[data-artizia-studio] body.az-journey-active:not(.imp-designer) .controls-panel .bg-toptabs{margin-block:0!important;min-height:44px!important}
}
@media(max-width:699px), (max-width:1024px) and (orientation:portrait){
 /* Legacy dismiss-button hiding must not hide the explicit Cancel checkpoint. */
 html[data-artizia-studio] body.az-journey-active:not(.imp-designer) #sheet-topbar.sheet-topbar>#imp-bag-sheet-actions.imp-bag-header-actions>button:not(.imp-bag-read){display:inline-flex!important;align-items:center!important;justify-content:center!important;visibility:visible!important;opacity:1!important}
 /* Remove inherited picker gutters rather than compressing the touch controls. */
 html[data-artizia-studio] body.az-journey-active:not(.imp-designer) .controls-panel #as-embed{margin-block:0!important;padding-block:0!important}
 html[data-artizia-studio] body.az-journey-active:not(.imp-designer) .controls-panel #as-embed #add-source-card{padding-block:0!important}
 html[data-artizia-studio] body.az-journey-active:not(.imp-designer) .controls-panel .bg-toptabs{padding-block:0!important;height:44px!important;min-height:44px!important;box-sizing:border-box!important;align-items:center!important}
 html[data-artizia-studio] body.az-journey-active:not(.imp-designer) .controls-panel .bg-toptabs .bg-toptab{min-height:44px!important;box-sizing:border-box!important}
 html[data-artizia-studio] body.az-journey-active:not(.imp-designer) .controls-panel #as-embed .bg-sw-row{margin-block:0!important;padding-block:3px!important}
}
@media(max-width:699px), (max-width:1024px) and (orientation:portrait){
 /* Layer colour pickers carry ID-scoped, runtime-injected full-bleed rules.
    Match their actual owner IDs so compact sizing wins after rerenders. */
 html[data-artizia-studio] body.az-journey-active:not(.imp-designer) #controls-panel #bag-artwork-section{padding-block:0!important;margin-block:0!important}
 html[data-artizia-studio] body.az-journey-active:not(.imp-designer) #controls-panel #bag-artwork-section :is(.layer-body,.bg-inline,[id^="bg-pick-"]){padding-block:0!important;margin-block:0!important}
 html[data-artizia-studio] body.az-journey-active:not(.imp-designer) #controls-panel #bag-artwork-section [id^="bg-pick-"] .bg-toptabs{padding:0!important;margin:0!important;height:44px!important;min-height:44px!important;box-sizing:border-box!important;align-items:center!important}
 html[data-artizia-studio] body.az-journey-active:not(.imp-designer) #controls-panel #bag-artwork-section [id^="bgi-shades-"]{padding:3px!important;margin:0!important;height:100px!important;min-height:100px!important;box-sizing:border-box!important;grid-template-rows:44px 44px!important;grid-auto-columns:44px!important;gap:6px!important}
}
@media(max-width:699px), (max-width:1024px) and (orientation:portrait){
 /* #layers-list has an inline 12px top margin; the solo editor needs no
    separation between its sticky header and its only expanded layer. */
 html[data-artizia-studio] body.az-journey-active:not(.imp-designer) #controls-panel #bag-artwork-section #layers-list{margin-block:0!important;padding-block:0!important;row-gap:0!important}
 html[data-artizia-studio] body.az-journey-active:not(.imp-designer) #controls-panel #bag-artwork-section [id^="bg-pick-"] .bgi-tabsec{padding-block:0!important;margin-block:0!important}
}
html[data-artizia-studio] .bgi-grad-editor .az-grad-preview{height:96px!important;min-height:96px!important;border-radius:12px!important;margin-bottom:12px!important}
html[data-artizia-studio] .az-grad-stop-list{display:grid;gap:8px;margin-block:12px}
html[data-artizia-studio] .az-grad-stop-row{display:grid;grid-template-columns:minmax(0,1fr) 90px auto;gap:8px;align-items:end}
html[data-artizia-studio] :is(.az-grad-stop-row,.az-grad-angle) label{display:grid;gap:4px;font-size:12px}
html[data-artizia-studio] :is(.az-grad-stop-row,.az-grad-angle) input,
html[data-artizia-studio] :is(.az-grad-stop-row button,.az-grad-add){min-height:44px!important;box-sizing:border-box;border:1px solid #ded9f1;border-radius:8px;padding:6px 8px;background:white;color:#14122b;font:inherit;min-width:0}
html[data-artizia-studio] .az-grad-stop-row .az-grad-colour{border-inline-start:12px solid var(--stop-colour)!important;text-align:start;font-size:12px}
html[data-artizia-studio] .az-grad-stop-row button:disabled{opacity:.45;cursor:not-allowed}
html[data-artizia-studio] .az-grad-add{width:100%;margin-bottom:12px}
html[data-artizia-studio] .az-grad-angle{display:grid;gap:4px;margin-block:8px;font-size:13px}