/*! Copyright (c) 2026 StickerMint LLC. All rights reserved. Proprietary software. See LICENSE.txt. Third-party components retain their respective licenses. */
/* Illustrated material choices reuse the merchant's enabled catalog and the
   local material library. These styles do not enable stock or set its price. */
#stickerStudio .tm-material-picker{width:100%;min-width:0;padding:4px 0 0}
#stickerStudio .tm-material-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-height:none;overflow:visible;padding:2px 3px 3px}
#stickerStudio .tm-material-choices .tm-material-card{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:8px;min-width:0;min-height:52px;margin:0;padding:7px;border:1px solid var(--tm-brand-dce5f0,#dce5f0);border-radius:9px;background:#fff;color:var(--tm-brand-203e61,#203e61);font:400 14px/1.4 Inter,Arial,sans-serif;text-align:left;cursor:pointer;box-shadow:none;transition:border-color .15s,background .15s}
#stickerStudio .tm-material-card .tm-material-sample{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;width:36px;height:36px;border:1px solid var(--tm-brand-edf1f7,#edf1f7);border-radius:7px;background:var(--tm-brand-f3f6fa,#f3f6fa);overflow:hidden}
#stickerStudio .tm-material-card .tm-material-sample img{display:block;width:36px;height:36px;max-width:100%;object-fit:contain}
#stickerStudio .tm-material-card[data-material-appearance=vinyl][data-material-finish=glossy] .tm-material-sample:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 34%,rgba(255,255,255,.82) 49%,transparent 65%)}
#stickerStudio .tm-material-card .tm-material-copy{display:block;min-width:0;padding:0}
#stickerStudio .tm-material-card .tm-material-name{display:block;min-width:0;font-size:13px;font-weight:650;line-height:1.3;letter-spacing:0;color:var(--tm-brand-203e61,#203e61);overflow-wrap:anywhere}
/* Descriptions remain available to assistive technology through aria-describedby.
   A swatch and full material name make the compact choice easier to scan. */
#stickerStudio .tm-material-card .tm-material-description{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#stickerStudio .tm-material-card .tm-material-description:empty{display:none}
#stickerStudio .tm-material-card .tm-material-check{position:absolute;top:3px;left:31px;display:grid;place-items:center;width:16px;height:16px;border:1px solid #fff;border-radius:50%;background:#fff;color:transparent;pointer-events:none;opacity:0}
#stickerStudio .tm-material-card .tm-material-check svg{display:block;width:11px;height:11px}
#stickerStudio .tm-material-choices .tm-material-card[aria-pressed=true]{border-color:var(--tm-brand-78a7e9,#78a7e9);background:var(--tm-brand-f0f6ff,#f0f6ff);box-shadow:inset 0 0 0 1px var(--tm-brand-78a7e9,#78a7e9)}
#stickerStudio .tm-material-choices .tm-material-card[aria-pressed=true] .tm-material-check{background:var(--tm-brand-2878df,#2878df);color:var(--tm-on-2878df,white);opacity:1}
#stickerStudio .tm-material-choices .tm-material-card[aria-pressed=true] .tm-material-name{color:var(--tm-brand-1b61ba,#1b61ba)}
#stickerStudio .tm-material-picker :focus-visible{outline:2px solid var(--tm-brand-2878df,#2878df);outline-offset:2px}
#stickerStudio .tm-material-choices [hidden]{display:none!important}
#stickerStudio .tm-material-note{color:#60758e;font:12px/1.5 Inter,Arial,sans-serif;margin:10px 0 0;padding:0 3px}
@media(hover:hover){#stickerStudio .tm-material-choices .tm-material-card:hover{border-color:var(--tm-brand-94b8e8,#94b8e8);background:var(--tm-brand-f5f9ff,#f5f9ff)}}
@media(min-width:769px){
 .sm-codex #stickerStudio .sm-spec-options:has(.tm-material-picker){left:auto!important;right:0!important;width:min(420px,calc(100vw - 32px))!important;padding:14px!important;max-height:calc(100dvh - 126px);overflow-x:hidden;overflow-y:auto}
}
@media(max-width:768px){
 #stickerStudio .tm-material-choices{padding:2px}
 #stickerStudio .tm-material-choices .tm-material-card{grid-template-columns:32px minmax(0,1fr);gap:6px;padding:7px 6px}
 #stickerStudio .tm-material-card .tm-material-sample{width:32px;height:32px}
 #stickerStudio .tm-material-card .tm-material-sample img{width:32px;height:32px}
 #stickerStudio .tm-material-card .tm-material-name{font-size:12px}
 #stickerStudio .tm-material-card .tm-material-check{left:26px}
 #stickerStudio .tm-material-note{margin-top:9px;font-size:11px;padding:0 2px}
}
@media(prefers-reduced-motion:reduce){#stickerStudio .tm-material-choices .tm-material-card{transition:none}}

/* Raw stock surfaces are visual layers only. Pricing keeps its existing finish
   IDs, while the local surface follows the selected material's appearance.
   The engine supplies the cached contour mask; pointer movement only changes
   background-position on the existing substrate layer. */
#stickerStudio #stickerStage:not([data-material-mask-ready=true]) :is(#holoOverlay,#glossLayer,#glossOverlay,#vinylTexture,#vinylSpecular,#edgeRim,#stickerDepth){visibility:hidden!important}
#stickerStudio #stickerStage:not([data-material-mask-ready=true])[data-material-surface=true] canvas{mix-blend-mode:normal!important;filter:none!important}
#stickerStudio #stickerStage[data-material-surface=true] #holoOverlay{
 opacity:1;background-image:var(--tm-material-surface);background-size:var(--tm-material-size,100% 100%);background-repeat:no-repeat;
}
#stickerStudio #stickerStage[data-material-surface=true] canvas{
 position:relative;z-index:2;mix-blend-mode:multiply;filter:var(--tm-material-filter,none);
}
#stickerStudio #stickerStage[data-material-surface=true] .sms-vinyl-texture,
#stickerStudio #stickerStage[data-material-surface=true] .sms-vinyl-specular,
#stickerStudio #stickerStage[data-material-surface=true] .sms-edge-rim{opacity:0!important}
/* Keep the lightweight gloss reflections for gloss stock, without inheriting
   holographic/vinyl color filters or stacking a second substrate texture. */
#stickerStudio #stickerStage[data-material-surface=true] .sms-gloss-layer{opacity:0!important}
/* Gold uses one sharper reflected light over its moving metallic substrate.
   The existing cached cutline mask keeps this display layer inside the sticker. */
#stickerStudio #stickerStage[data-material-surface=true][data-material-appearance=gold-foil] #glossOverlay{
 z-index:3;background-image:linear-gradient(112deg,transparent 28%,rgba(255,248,209,.08) 39%,rgba(255,252,225,.55) 46%,rgba(255,255,244,.82) 49%,rgba(255,231,153,.12) 54%,transparent 64%);
 background-size:180% 180%;background-position:50% 50%;background-repeat:no-repeat;mix-blend-mode:screen;opacity:.68;
}
#stickerStudio #stickerStage[data-material-surface=true][data-material-appearance=kraft-paper] #glossOverlay,
#stickerStudio #stickerStage[data-material-surface=true][data-material-appearance=holographic] #glossOverlay{opacity:0!important}
#stickerStudio #stickerStage.sms-dragging[data-material-surface=true] #holoOverlay,
#stickerStudio #stickerStage.sms-dragging[data-material-surface=true] #glossOverlay{display:none!important}
#stickerStudio #stickerStage.sms-dragging[data-material-surface=true] canvas{mix-blend-mode:normal!important;filter:none!important}

/* The blank screen is an upload welcome screen, so tint its sample sticker
   rather than putting a material rectangle behind its instructions. */
#stickerStudio #blankShape[data-material-surface=true] .sm-sample-main,
#stickerStudio #blankShape[data-material-surface=true]:not(:has(.sm-sticker-stack)){
 background-image:var(--tm-material-surface)!important;background-size:var(--tm-material-size,100% 100%)!important;background-position:center!important;background-repeat:no-repeat!important;
}
#stickerStudio #blankShape[data-material-surface=true]{filter:none}
#stickerStudio .sm-finish-preview[data-material-surface=true]{
 background-image:var(--tm-material-surface)!important;background-size:var(--tm-material-size,100% 100%)!important;background-position:center!important;background-repeat:no-repeat!important;
}

/* Proof simulations are restricted to the Material preview tab. The Artwork
   tab and all downloaded source/production files retain the original pixels. */
#sl2-proof-ol .sl2-proof[data-preview=material] .sl2-proof-img-wrap[data-material-surface=true] .sl2-proof-finish-bg{
 display:block;background-image:var(--tm-material-surface);background-size:var(--tm-material-size,100% 100%);background-position:center;background-repeat:no-repeat;
}
#sl2-proof-ol .sl2-proof[data-preview=material] .sl2-proof-img-wrap[data-material-surface=true] .sl2-proof-img{
 mix-blend-mode:multiply;filter:var(--tm-material-filter,none);
}
#sl2-proof-ol .sl2-proof[data-preview=material] .sl2-proof-img-wrap[data-material-surface=true] .sl2-proof-finish-ovr{display:none}
#sl2-proof-ol .sl2-proof[data-preview=material] .sl2-proof-img-wrap[data-material-surface=true].finish-glossy:not([data-material-appearance=kraft-paper]):not([data-material-appearance=holographic]) .sl2-proof-finish-ovr{display:block;opacity:.4}