:root{
--z-editor-canvas:100;--z-side-panel:500;--z-header:1000;--z-dropdown:2000;--z-modal:3000;--z-tooltip:4000;--z-local-underlay:-1;--z-local-base:0;--z-local-content:1;--z-local-raised:2;--z-local-control:3;--z-local-caption:4;--z-local-navigation:5;}
#builder{
display:grid!important;grid-template-columns:repeat(12, minmax(0, 1fr))!important;align-items:start!important;gap:16px!important;width:min(calc(100% - 24px), 1680px);min-width:0;margin-inline:auto;padding:14px 0 28px!important;}
#builder > :is(.left-panel, .center-stage, .right-panel){
grid-row:auto!important;min-width:0!important;max-width:100%!important;}
:root .topbar,
body.jewdiy-storefront .topbar{
z-index:var(--z-header)!important;background:#fffdf8!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
:root :is(.quick-directory, .material-popover, .contact-popover){
z-index:var(--z-dropdown)!important;}
:root .material-popover.pinned{
z-index:var(--z-modal)!important;}
:root :is(.cart-drawer, .share-preview-modal, .creative-pass-modal, .security-screen),
:root body.canvas-fullscreen-open .builder.builder-fullscreen{
z-index:var(--z-modal)!important;}
:root .site-loading-screen{
z-index:var(--z-modal)!important;}
:root :is(.toast, .design-companion, .builder-tour-card, .fullscreen-exit-button){
z-index:var(--z-tooltip)!important;}
:root :is(.drag-ghost, .cart-fly, .cart-success-burst){
z-index:var(--z-tooltip)!important;}
:root :is(.canvas-fullscreen-toggle, .fullscreen-exit-hint){
z-index:var(--z-local-control)!important;}
:root #builder :is(.canvas-status, .canvas-note, .canvas-fit-badge, .drop-hint, .canvas-watermark){
z-index:var(--z-local-content)!important;}
:root #builder :is(.canvas-zoom-pad, .detail-chip, .product-detail-chip, .product-size-badge){
z-index:var(--z-local-control)!important;}
:root #builder :is(.fullscreen-quick-actions, .mobile-builder-inline-cta){
z-index:var(--z-side-panel)!important;}
:root #builder :is(.canvas-card, .design-canvas, .bracelet-canvas){
z-index:var(--z-editor-canvas)!important;}
:root #builder .design-canvas{
background:
linear-gradient(rgba(255, 255, 255, 0.14), rgba(246, 240, 228, 0.18)),
url("../generated/jewdiy-editor-silk-tray-bg-20260609.jpg") center / cover no-repeat,
#f7f2e8!important;}
:root #builder :is(.left-panel, .right-panel, .bottom-tray){
z-index:var(--z-side-panel)!important;}
@media (max-width:540px){
#builder{
grid-template-columns:repeat(4, minmax(0, 1fr))!important;width:calc(100% - 12px)!important;margin-inline:auto!important;padding:6px 0 20px!important;gap:8px!important;overflow-x:clip!important;}
#builder > .left-panel{
display:none!important;}
#builder > :is(.center-stage, .right-panel){
display:block!important;grid-column:1 / -1!important;}
#builder > .center-stage{ order:1!important; }
#builder > .right-panel{
order:2!important;position:static!important;top:auto!important;width:100%!important;margin:0!important;overflow:visible!important;border-radius:8px!important;box-shadow:none!important;}
#builder .canvas-card{
display:flex!important;flex-direction:column!important;width:100%!important;min-width:0!important;padding:7px!important;gap:7px!important;border-radius:8px!important;box-shadow:none!important;}
#builder .canvas-toolbar{ order:1!important; }
#builder .preview-layout{
order:2!important;display:grid!important;grid-template-rows:clamp(258px, 72vw, 310px) auto!important;width:100%!important;min-width:0!important;gap:7px!important;}
#builder .design-canvas{
width:100%!important;min-width:0!important;min-height:clamp(258px, 72vw, 310px)!important;height:clamp(258px, 72vw, 310px)!important;max-height:310px!important;margin:0!important;border-radius:8px!important;}
#builder .canvas-zoom-pad button,
#builder .canvas-fullscreen-toggle{
min-width:44px!important;min-height:44px!important;}
#builder .canvas-zoom-pad button[data-canvas-fit]{
min-width:56px!important;}
#builder .bottom-tray{
display:grid!important;visibility:visible!important;opacity:1!important;position:relative!important;inset:auto!important;order:3!important;width:100%!important;height:var(--jewdiy-mobile-tray-height)!important;min-height:var(--jewdiy-mobile-tray-height)!important;max-height:var(--jewdiy-mobile-tray-height)!important;margin:0!important;padding:8px!important;grid-template-columns:minmax(0, 1fr)!important;grid-template-rows:44px minmax(0, 1fr)!important;gap:6px!important;max-width:100%!important;border-radius:6px!important;overflow:hidden!important;}
#builder .bottom-tray .bottom-tray-head{
display:none!important;}
#builder .bottom-tray .tray-tools{
display:grid!important;visibility:visible!important;grid-column:1!important;grid-row:1!important;grid-template-columns:48px minmax(0, 1fr) minmax(82px, auto)!important;align-items:center!important;width:100%!important;height:44px!important;min-height:44px!important;max-height:44px!important;padding:0!important;gap:6px!important;border:0!important;background:transparent!important;}
#builder .bottom-tray .tray-tools #mobileSmartComplete{
width:auto!important;min-width:82px!important;height:44px!important;min-height:44px!important;padding-inline:8px!important;white-space:nowrap!important;}
#builder .bottom-tray .tray-tools > span{
display:inline-flex!important;align-items:center!important;justify-content:center!important;width:48px!important;min-width:48px!important;max-width:48px!important;height:44px!important;min-height:44px!important;max-height:44px!important;padding:0!important;font-size:0!important;}
#builder .bottom-tray .tray-tools > span::after{
content:"mm";font-size:11px!important;font-weight:850!important;}
#builder .bottom-tray .tray-size-options{
display:flex!important;flex-wrap:nowrap!important;width:100%!important;min-width:0!important;max-width:none!important;height:44px!important;min-height:44px!important;max-height:44px!important;gap:4px!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important;}
#builder .bottom-tray .tray-size-options button{
flex:0 0 48px!important;width:48px!important;min-width:48px!important;max-width:48px!important;height:44px!important;min-height:44px!important;max-height:44px!important;padding-inline:4px!important;}
#builder .bottom-tray .tray-shell{
display:grid!important;visibility:visible!important;grid-column:1!important;grid-row:2!important;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;overflow:hidden!important;}
#builder .bottom-tray :is(.tray-size-options, .tray-rail)::-webkit-scrollbar{
display:none!important;}
#builder .bottom-tray .tray-rail-label{
display:none!important;}
#builder .bottom-tray .tray-scroll{
display:grid!important;min-width:0!important;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important;}
#builder .bottom-tray .tray-empty-state{
grid-column:1 / -1!important;display:grid!important;align-content:center!important;justify-items:center!important;min-height:100%!important;padding:14px 10px!important;gap:8px!important;text-align:center!important;background:#fffdf8!important;border:1px solid rgba(29,91,61,.14)!important;border-radius:6px!important;}
#builder .bottom-tray .tray-empty-state span{
font-size:11px!important;line-height:1.45!important;color:#667067!important;}
#builder .bottom-tray .tray-empty-state button{
min-width:112px!important;min-height:44px!important;}
#builder .bottom-tray .tray-item{
position:relative!important;display:grid!important;grid-template-columns:minmax(0, 1fr)!important;align-content:start!important;justify-items:center!important;width:100%!important;margin:0!important;gap:1px!important;overflow:hidden!important;}
#builder .bottom-tray .tray-item strong{
display:-webkit-box!important;width:100%!important;max-height:26px!important;margin:0!important;text-align:center!important;white-space:normal!important;overflow-wrap:anywhere!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;overflow:hidden!important;}
#builder .bottom-tray .tray-item .tray-price{
display:inline-flex!important;align-items:center!important;justify-content:center!important;height:16px!important;min-height:16px!important;max-height:16px!important;padding-inline:4px!important;font-size:9.5px!important;line-height:16px!important;white-space:nowrap!important;}
#builder .mobile-builder-inline-cta{
order:4!important;display:grid!important;grid-template-columns:minmax(0, 1fr)!important;grid-template-rows:auto auto!important;width:100%!important;height:auto!important;min-height:72px!important;max-height:none!important;margin:0!important;padding:8px!important;gap:6px!important;border-radius:6px!important;}
#builder .mobile-builder-inline-actions{
display:grid!important;grid-template-columns:44px minmax(74px, 0.7fr) minmax(120px, 1.3fr)!important;align-items:stretch!important;gap:6px!important;min-width:0!important;}
#builder .mobile-builder-inline-actions .pill-button{
width:100%!important;min-width:0!important;min-height:44px!important;padding-inline:6px!important;}
#builder .designer-sign-panel{
order:5!important;margin-top:0!important;border-radius:8px!important;box-shadow:none!important;}
#builder .quick-row{
grid-template-columns:repeat(2, minmax(0, 1fr))!important;gap:8px!important;}
#builder .right-panel .summary > :is(.eyebrow, h2, p),
#builder .right-panel :is(.quote-margin-note, .quote-flow, .value-stack){
display:none!important;}
#builder .right-panel .summary{
padding:12px!important;}
#builder .bottom-tray :is(.tray-size-options, .tray-rail) button{
min-height:44px!important;}
}
@media (min-width:541px) and (max-width:1180px){
:root #builder.builder{
grid-template-columns:repeat(8, minmax(0, 1fr))!important;grid-template-rows:auto auto auto!important;grid-auto-rows:auto!important;align-content:start!important;align-items:start!important;height:auto!important;min-height:0!important;max-height:none!important;overflow-x:clip!important;overflow-y:visible!important;}
:root #builder.builder > .center-stage{
grid-column:1 / -1!important;grid-row:1!important;height:auto!important;min-height:0!important;max-height:none!important;margin-top:0!important;overflow:visible!important;}
:root #builder.builder > .left-panel{
grid-column:1 / -1!important;grid-row:2!important;position:static!important;top:auto!important;height:auto!important;min-height:0!important;max-height:none!important;overflow-x:hidden!important;overflow-y:visible!important;}
:root #builder.builder > .right-panel{
grid-column:1 / -1!important;grid-row:3!important;position:static!important;top:auto!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;}
}
@media (min-width:861px) and (max-width:1180px){
:root #builder.builder > .left-panel{
grid-column:1 / span 5!important;grid-row:2!important;}
:root #builder.builder > .right-panel{
grid-column:6 / -1!important;grid-row:2!important;}
}
@media (max-width:540px){
:root body #builder.builder > .center-stage{
margin:0!important;}
:root body #builder.builder .canvas-card{
gap:6px!important;}
:root body #builder.builder .canvas-toolbar{
order:1!important;display:grid!important;align-items:stretch!important;width:100%!important;padding:0!important;overflow:hidden!important;}
:root body #builder.builder .canvas-toolbar > :not(.tool-actions):not(.builder-tour-button):not(.editor-more-toggle):not(.layout-toggle){
display:none!important;}
:root body #builder.builder .canvas-toolbar .tool-actions{
display:contents!important;}
:root body #builder.builder .canvas-toolbar .tool-actions > :not(.preset-picker):not(#removeSelected):not(#duplicateSelected):not(#undoDesign):not(#redoDesign):not(#clearDesign):not(#autoFill){
display:none!important;}
:root body #builder.builder :is(.preset-picker, .preset-picker select){
display:block!important;width:100%!important;min-width:0!important;height:44px!important;min-height:44px!important;max-height:44px!important;}
:root body #builder.builder .preset-picker{
min-width:0!important;max-width:100%!important;overflow:hidden!important;}
:root body #builder.builder .preset-picker select{
min-width:0!important;max-width:100%!important;padding-right:32px!important;text-overflow:ellipsis!important;}
:root body #builder.builder :is(#undoDesign, #redoDesign){
display:inline-flex!important;width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;padding:0!important;}
:root body #builder.builder .preview-layout{
grid-template-rows:224px auto!important;gap:5px!important;}
:root body #builder.builder .design-canvas{
min-height:224px!important;height:224px!important;max-height:224px!important;}
:root body #builder.builder .canvas-length-control{
display:grid!important;grid-template-columns:minmax(0, 1.35fr) minmax(104px, 0.85fr)!important;grid-template-rows:50px!important;align-items:center!important;min-height:58px!important;height:58px!important;max-height:58px!important;padding:4px 6px!important;gap:6px!important;overflow:hidden!important;}
:root body #builder.builder .canvas-net-wrist{
grid-column:1!important;grid-row:1!important;display:grid!important;grid-template-columns:minmax(0, 1fr) 58px!important;align-items:center!important;width:100%!important;min-width:0!important;gap:4px!important;}
:root body #builder.builder .wrist-field-copy em{
display:none!important;}
:root body #builder.builder .canvas-net-wrist input{
width:58px!important;min-width:58px!important;height:44px!important;min-height:44px!important;padding-inline:5px!important;font-size:12px!important;}
:root body #builder.builder .canvas-inner-label{
grid-column:2!important;grid-row:1!important;display:grid!important;grid-template-columns:minmax(0, 1fr)!important;grid-template-rows:auto auto!important;align-content:center!important;width:100%!important;min-width:0!important;min-height:44px!important;padding-left:8px!important;border-left:1px solid rgba(29, 91, 61, 0.14)!important;gap:1px!important;}
:root body #builder.builder .canvas-inner-label span,
:root body #builder.builder .canvas-inner-label strong{
min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
:root body #builder.builder .canvas-inner-label span{
display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;white-space:normal!important;font-size:9px!important;line-height:10px!important;}
:root body #builder.builder .canvas-inner-label strong{
font-size:13px!important;line-height:16px!important;}
:root body #builder.builder .canvas-length-row{
display:none!important;}
:root body #builder.builder .canvas-length-control .wrist-comfort-tip{
display:none!important;}
:root body.mobile-builder-empty #builder.builder .canvas-length-control{
display:none!important;}
:root body #builder.builder .mobile-builder-inline-cta{
order:5!important;display:grid!important;visibility:visible!important;grid-template-columns:minmax(72px, 0.62fr) minmax(0, 1.68fr)!important;grid-template-rows:44px!important;align-items:center!important;width:100%!important;min-height:60px!important;height:60px!important;max-height:60px!important;padding:8px!important;gap:6px!important;}
:root body.mobile-builder-active #builder.builder .mobile-builder-inline-cta,
:root body.mobile-builder-active #builder.builder .mobile-builder-inline-actions,
:root body.mobile-builder-active #builder.builder .mobile-builder-inline-actions .pill-button:not(:disabled){
pointer-events:auto!important;touch-action:manipulation!important;}
:root body.cart-open #builder.builder .mobile-builder-inline-cta{
display:none!important;pointer-events:none!important;}
:root body #builder.builder .mobile-builder-inline-cta > div:first-child{
display:grid!important;grid-template-columns:minmax(0, 1fr)!important;grid-template-rows:44px!important;align-items:center!important;align-content:stretch!important;min-width:0!important;gap:0!important;overflow:hidden!important;}
:root body #builder.builder #mobileBuilderInlineCtaLabel{
display:none!important;}
:root body #builder.builder #mobileBuilderInlineCtaPrice{
display:block!important;width:100%!important;min-width:0!important;padding-inline:4px!important;font-size:11px!important;line-height:14px!important;text-align:center!important;letter-spacing:0!important;font-variant-numeric:tabular-nums;white-space:nowrap!important;text-overflow:ellipsis!important;overflow:hidden!important;}
@media (max-width:340px){
:root body #builder.builder .mobile-builder-inline-cta{
grid-template-columns:minmax(80px, 0.7fr) minmax(0, 1.6fr)!important;}
:root body #builder.builder #mobileBuilderInlineCtaPrice{
padding-inline:0!important;}
:root body #builder.builder .mobile-builder-inline-cta .mobile-builder-inline-actions{
grid-template-columns:48px minmax(0, 1fr)!important;}
:root body #builder.builder .mobile-builder-inline-cta #mobileClearDesign{
width:48px!important;min-width:48px!important;}
}
:root body #builder.builder .mobile-builder-inline-actions{
grid-column:2!important;grid-row:1!important;grid-template-columns:54px minmax(0, 1fr)!important;width:100%!important;min-width:0!important;height:44px!important;gap:4px!important;}
:root body #builder.builder #mobileClearDesign{
display:inline-flex!important;align-items:center!important;justify-content:center!important;width:54px!important;min-width:54px!important;padding-inline:4px!important;}
:root body #builder.builder .designer-sign-panel{
order:4!important;display:block!important;visibility:visible!important;width:100%!important;min-height:44px!important;height:44px!important;max-height:44px!important;margin:0!important;padding:0!important;overflow:hidden!important;}
:root body.mobile-builder-empty #builder.builder .designer-sign-panel{
display:none!important;}
:root body.mobile-builder-active:not(.mobile-builder-empty) #builder.builder .designer-sign-panel{
display:block!important;}
:root body #builder.builder .designer-sign-panel > :not(.mobile-share-quick){
display:none!important;}
:root body #builder.builder .mobile-share-quick{
display:grid!important;visibility:visible!important;grid-template-columns:repeat(2, minmax(0, 1fr))!important;width:100%!important;height:44px!important;min-height:44px!important;gap:6px!important;}
:root body #builder.builder .mobile-share-quick > :is(#mobileShareDesign, #mobileSaveDesign){
display:inline-flex!important;visibility:visible!important;min-width:0!important;height:44px!important;min-height:44px!important;}
:root body #builder.builder #mobileGenerateRealshotPreview{
display:none!important;}
:root body #builder.builder .bottom-tray{
order:6!important;}
:root body.mobile-builder-active .design-companion.show{
top:auto!important;right:12px!important;bottom:calc(68px + env(safe-area-inset-bottom))!important;left:12px!important;width:auto!important;max-width:none!important;transform:none!important;}
:root body.mobile-builder-active .toast.show{
top:max(68px, calc(env(safe-area-inset-top) + 56px))!important;right:12px!important;bottom:auto!important;left:auto!important;width:max-content!important;max-width:min(258px, calc(100vw - 24px))!important;padding:8px 11px!important;border-radius:4px!important;font-size:11px!important;line-height:1.3!important;text-align:left!important;transform:none!important;}
:root body.mobile-builder-active #builder.builder .canvas-fit-badge.transient-notice{
display:flex!important;align-items:center!important;justify-content:center!important;left:8px!important;right:8px!important;top:8px!important;bottom:auto!important;width:auto!important;max-width:none!important;min-height:30px!important;max-height:44px!important;padding:7px 9px!important;overflow:hidden!important;color:#23583c!important;background:rgba(250, 253, 250, 0.96)!important;border:1px solid rgba(35, 88, 60, 0.24)!important;border-radius:4px!important;box-shadow:0 6px 16px rgba(18, 36, 25, 0.12)!important;font-size:11px!important;font-weight:750!important;line-height:1.3!important;text-align:center!important;}
}
@media (max-width:340px){
:root body #builder.builder .preview-layout{
grid-template-rows:220px auto!important;}
:root body #builder.builder .design-canvas{
min-height:220px!important;height:220px!important;max-height:220px!important;}
}
:root #builder .editor-more-toggle,
:root #builder .editor-mobile-tools{
display:none!important;}
:root #builder :is(#generateRealshotPreview, #mobileGenerateRealshotPreview, .ai-preview-button, .ai-preview-action){
display:none!important;}
@media (min-width:541px){
:root body #builder.builder .right-panel #exportBrief{
display:inline-flex!important;visibility:visible!important;}
}
@media (max-width:540px){
:root body #builder.builder .canvas-toolbar .tool-actions > #autoFill{
display:none!important;}
:root body #builder.builder .editor-more-toggle{
display:inline-flex!important;align-items:center!important;justify-content:center!important;width:100%!important;min-width:0!important;height:44px!important;min-height:44px!important;padding:0 4px!important;gap:3px!important;overflow:hidden!important;white-space:nowrap!important;}
:root body #builder.builder .editor-more-toggle svg{
width:18px!important;min-width:18px!important;height:18px!important;fill:currentColor!important;}
:root body #builder.builder .editor-more-toggle span{
display:none!important;}
:root body #builder.builder .editor-more-toggle[aria-expanded="true"]{
border-color:#173f2d!important;background:#173f2d!important;color:#fff!important;}
:root body #builder.builder .editor-mobile-tools[hidden]{
display:none!important;}
:root body #builder.builder .editor-mobile-tools:not([hidden]){
order:2!important;display:grid!important;width:100%!important;min-width:0!important;padding:10px 0 4px!important;border-top:1px solid rgba(23, 63, 45, 0.14)!important;border-bottom:1px solid rgba(23, 63, 45, 0.14)!important;background:#fff!important;gap:8px!important;}
:root body #builder.builder .preview-layout{
order:3!important;}
:root body #builder.builder .editor-mobile-tool-row{
display:grid!important;grid-template-columns:70px minmax(0, 1fr)!important;align-items:center!important;min-width:0!important;gap:8px!important;}
:root body #builder.builder .editor-mobile-tool-label{
color:#526259!important;font-size:12px!important;font-weight:800!important;line-height:1.25!important;}
:root body #builder.builder .editor-mobile-segmented{
display:grid!important;grid-template-columns:repeat(2, minmax(0, 1fr))!important;min-width:0!important;padding:3px!important;border:1px solid #d8dfda!important;border-radius:6px!important;background:#f3f5f3!important;gap:3px!important;}
:root body #builder.builder .editor-mobile-segmented button{
min-width:0!important;min-height:38px!important;padding:0 8px!important;border:0!important;border-radius:4px!important;background:transparent!important;color:#34463c!important;font-size:12px!important;font-weight:800!important;}
:root body #builder.builder .editor-mobile-segmented button[aria-pressed="true"]{
background:#fff!important;color:#173f2d!important;box-shadow:0 1px 3px rgba(17, 38, 27, 0.14)!important;}
:root body #builder.builder .editor-mobile-tool-grid{
display:grid!important;grid-template-columns:repeat(2, minmax(0, 1fr))!important;min-width:0!important;gap:6px!important;}
:root body #builder.builder :is(.editor-mobile-switch, .editor-mobile-command, .editor-details-toggle){
display:flex!important;align-items:center!important;min-width:0!important;min-height:44px!important;padding:0 10px!important;border:1px solid #d8dfda!important;border-radius:6px!important;background:#fff!important;color:#173f2d!important;font-size:12px!important;font-weight:800!important;line-height:1.2!important;text-align:left!important;gap:8px!important;}
:root body #builder.builder .editor-mobile-switch{
justify-content:space-between!important;}
:root body #builder.builder .editor-switch-indicator{
position:relative!important;flex:0 0 34px!important;width:34px!important;height:20px!important;border-radius:10px!important;background:#cfd7d2!important;transition:background-color 160ms ease!important;}
:root body #builder.builder .editor-switch-indicator::after{
position:absolute!important;top:3px!important;left:3px!important;width:14px!important;height:14px!important;border-radius:50%!important;background:#fff!important;box-shadow:0 1px 3px rgba(13, 33, 23, 0.22)!important;content:""!important;transition:transform 160ms ease!important;}
:root body #builder.builder .editor-mobile-switch[aria-checked="true"] .editor-switch-indicator{
background:#173f2d!important;}
:root body #builder.builder .editor-mobile-switch[aria-checked="true"] .editor-switch-indicator::after{
transform:translateX(14px)!important;}
:root body #builder.builder .editor-mobile-command{
justify-content:center!important;}
:root body #builder.builder .editor-mobile-command svg,
:root body #builder.builder .editor-details-toggle svg{
width:18px!important;min-width:18px!important;height:18px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important;}
:root body #builder.builder :is(.editor-mobile-command, .editor-mobile-switch):disabled{
cursor:default!important;opacity:0.45!important;}
:root body #builder.builder .editor-details-toggle{
justify-content:space-between!important;width:100%!important;}
:root body #builder.builder .editor-details-toggle svg{
transition:transform 160ms ease!important;}
:root body #builder.builder .editor-details-toggle[aria-expanded="true"] svg{
transform:rotate(90deg)!important;}
:root body.editor-details-open.mobile-builder-active #builder.builder .canvas-card .designer-sign-panel{
display:grid!important;grid-template-columns:minmax(0, 1fr)!important;width:100%!important;min-height:0!important;height:auto!important;max-height:none!important;padding:10px!important;gap:10px!important;overflow:visible!important;}
:root body.editor-details-open.mobile-builder-active #builder.builder .canvas-card .designer-sign-panel > :is(.signature-field, .share-card-options, .mobile-share-quick){
display:grid!important;visibility:visible!important;}
:root body.editor-details-open.mobile-builder-active #builder.builder .canvas-card .designer-sign-panel > :is(.share-buttons, .share-reward-tip){
display:none!important;}
:root body.editor-details-open.mobile-builder-active #builder.builder .canvas-card .share-card-options{
grid-template-columns:minmax(0, 1fr)!important;gap:8px!important;}
:root body.editor-details-open.mobile-builder-active #builder.builder .canvas-card .mobile-share-quick{
height:auto!important;min-height:44px!important;}
}
@media (min-width:541px){
:root #builder.builder :is(.share-style-field, .share-time-toggle){
height:44px!important;min-height:44px!important;}
:root #builder.builder .share-style-field select{
height:36px!important;min-height:36px!important;}
:root #builder.builder .share-time-toggle{
position:relative!important;}
:root #builder.builder .share-time-toggle input{
position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;}
:root #builder.builder .share-time-toggle::before{
flex:0 0 18px;width:18px;height:18px;border:1px solid #aebbb2;border-radius:4px;background:#fff;content:"";}
:root #builder.builder .share-time-toggle:has(input:checked)::before{
border-color:#2f744d;background:#2f744d;box-shadow:inset 0 0 0 4px #fff;}
:root #builder.builder .share-time-toggle:focus-within{
outline:2px solid rgba(47, 116, 77, 0.32);outline-offset:2px;}
}
@media (min-width:1181px){
:root #builder.builder{
grid-template-columns:repeat(12, minmax(0, 1fr))!important;grid-auto-rows:auto!important;gap:16px!important;padding-top:14px!important;}
:root #builder.builder > .left-panel{
grid-column:1 / span 3!important;grid-row:1!important;}
:root #builder.builder > .center-stage{
grid-column:4 / span 6!important;grid-row:1!important;height:auto!important;max-height:none!important;overflow:visible!important;}
:root #builder.builder > .right-panel{
grid-column:10 / span 3!important;grid-row:1!important;}
:root #builder.builder > :is(.left-panel, .right-panel){
top:98px!important;height:calc(100svh - 110px)!important;min-height:600px!important;max-height:calc(100svh - 110px)!important;overflow:hidden!important;scrollbar-gutter:auto!important;}
:root #builder.builder > .left-panel{
display:grid!important;grid-template-columns:minmax(0, 1fr)!important;grid-template-rows:auto auto auto auto auto minmax(0, 1fr)!important;align-content:stretch!important;}
:root #builder.builder .left-panel .panel-header{
grid-column:1!important;grid-row:1!important;padding:15px 14px 12px!important;}
:root #builder.builder .left-panel .panel-header .eyebrow,
:root #builder.builder .left-panel .panel-header p{
display:none!important;}
:root #builder.builder .left-panel .panel-header h2{
margin:0!important;font-size:18px!important;line-height:1.3!important;}
:root #builder.builder .left-panel .tabs{
grid-column:1!important;grid-row:2!important;flex-wrap:nowrap!important;gap:6px!important;padding:7px 10px!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important;}
:root #builder.builder .left-panel .tabs::-webkit-scrollbar,
:root #builder.builder .left-panel .taxonomy-pills::-webkit-scrollbar{
display:none!important;}
:root #builder.builder .left-panel .tab,
:root #builder.builder .left-panel .taxonomy-pills .filter{
flex:0 0 auto!important;width:auto!important;min-width:max(44px, max-content)!important;min-height:40px!important;padding:8px 11px!important;border-radius:6px!important;font-size:11px!important;line-height:1.2!important;}
:root #builder.builder .left-panel .material-taxonomy{
display:grid!important;grid-column:1!important;grid-row:3!important;grid-template-columns:minmax(0, 1fr)!important;gap:6px!important;max-height:none!important;padding:8px 10px!important;overflow:hidden!important;border-bottom:1px solid rgba(221, 226, 216, 0.8)!important;background:#f6f5f1!important;box-shadow:none!important;}
:root #builder.builder .left-panel .taxonomy-row,
:root #builder.builder .left-panel .taxonomy-row[data-taxonomy-row="children"]{
display:grid!important;grid-template-columns:46px minmax(0, 1fr)!important;align-items:center!important;width:100%!important;min-width:0!important;margin:0!important;padding:0!important;gap:7px!important;border:0!important;}
:root #builder.builder .left-panel .taxonomy-label,
:root #builder.builder .left-panel .taxonomy-row[data-taxonomy-row="children"] .taxonomy-label{
display:block!important;padding:0!important;color:#687168!important;font-size:10px!important;font-weight:800!important;letter-spacing:0!important;}
:root #builder.builder .left-panel .taxonomy-pills,
:root #builder.builder .left-panel .taxonomy-row[data-taxonomy-row="children"] .taxonomy-pills{
display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:5px!important;max-height:none!important;padding:0!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important;}
:root #builder.builder .left-panel .taxonomy-pills .filter{
position:static!important;border-color:#d8dfda!important;background:#fff!important;color:#4f5951!important;box-shadow:none!important;}
:root #builder.builder .left-panel .taxonomy-pills .filter.active,
:root #builder.builder .left-panel .taxonomy-pills .filter.is-expanded{
border-color:#173f2d!important;background:#173f2d!important;color:#fff!important;}
:root #builder.builder .left-panel .taxonomy-pills .filter::before,
:root #builder.builder .left-panel .taxonomy-pills .filter::after{
display:none!important;}
:root #builder.builder .left-panel .size-selector{
grid-column:1!important;grid-row:4!important;padding:7px 10px!important;}
:root #builder.builder .left-panel .size-selector-head{
gap:1px!important;min-width:56px!important;}
:root #builder.builder .left-panel .size-selector-head strong{
font-size:10px!important;white-space:nowrap!important;}
:root #builder.builder .left-panel .size-options{
min-width:0!important;scrollbar-width:none!important;}
:root #builder.builder .left-panel .size-options::-webkit-scrollbar{
display:none!important;}
:root #builder.builder .left-panel .size-options button{
height:34px!important;border-radius:6px!important;font-size:10px!important;}
:root #builder.builder .left-panel .search-bar{
grid-column:1!important;grid-row:5!important;padding:7px 10px!important;}
:root #builder.builder .left-panel .search-bar input{
height:38px!important;border-radius:6px!important;}
:root #builder.builder .left-panel .catalog{
display:grid!important;grid-column:1!important;grid-row:6!important;grid-template-columns:repeat(2, minmax(0, 1fr))!important;align-content:start!important;min-height:0!important;max-height:none!important;padding:8px!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important;}
:root #builder.builder .left-panel .catalog > .product-card{
border-radius:4px!important;}
@media (min-width:1366px){
:root #builder.builder .left-panel .catalog{
grid-template-columns:repeat(2, minmax(0, 1fr))!important;gap:8px!important;padding:10px!important;}
:root #builder.builder .left-panel .product-card-price{
font-size:11px!important;}
}
:root #builder.builder > .right-panel{
display:grid!important;grid-template-rows:auto minmax(0, 1fr) auto!important;align-content:stretch!important;}
:root #builder.builder .right-panel .homepage-config-storage{
display:none!important;}
:root #builder.builder .right-panel .summary{
padding:15px!important;}
:root #builder.builder .right-panel .summary > .eyebrow,
:root #builder.builder .right-panel .summary > p,
:root #builder.builder .right-panel .summary > .value-stack{
display:none!important;}
:root #builder.builder .right-panel .summary h2{
margin:0!important;font-size:18px!important;line-height:1.3!important;}
:root #builder.builder .right-panel .total{
align-items:center!important;margin-top:9px!important;}
:root #builder.builder .right-panel .total strong{
font-size:30px!important;}
:root #builder.builder .right-panel .quote-assurance{
gap:4px!important;margin-top:9px!important;}
:root #builder.builder .right-panel .quote-assurance span{
min-height:24px!important;height:auto!important;padding:4px 7px!important;border-radius:4px!important;font-size:10px!important;line-height:1.2!important;}
:root #builder.builder .right-panel .quote-flow{
gap:4px!important;margin-top:9px!important;padding:8px!important;border-radius:6px!important;font-size:10px!important;line-height:1.35!important;}
:root #builder.builder .right-panel .quote-flow strong{
font-size:11px!important;}
:root #builder.builder .right-panel .line-items{
min-height:0!important;padding:8px 12px!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important;}
:root #builder.builder .right-panel .checkout{
position:static!important;padding:10px 12px!important;}
}
@media (prefers-reduced-motion:reduce){
:root body #builder.builder :is(.editor-switch-indicator, .editor-switch-indicator::after, .editor-details-toggle svg){
transition:none!important;}
}

:root .mobile-nav-toggle{display:none!important;}
@media (max-width:860px){
:root .topbar .mobile-nav-toggle{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:44px!important;min-width:44px!important;max-width:44px!important;height:44px!important;min-height:44px!important;max-height:44px!important;padding:0!important;border:1px solid #d8dfda!important;border-radius:6px!important;background:#fff!important;color:#173f2d!important;touch-action:manipulation!important;}
:root .topbar .mobile-nav-toggle svg{width:20px!important;height:20px!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important;}
:root .topbar .mobile-nav-sheet{position:absolute!important;top:calc(100% + 6px)!important;left:10px!important;right:10px!important;z-index:var(--z-dropdown)!important;display:grid!important;gap:2px!important;padding:8px!important;border:1px solid rgba(29,91,61,.18)!important;border-radius:10px!important;background:#fffdf8!important;box-shadow:0 18px 40px rgba(18,36,25,.2)!important;}
:root .topbar .mobile-nav-sheet[hidden]{display:none!important;}
:root .topbar .mobile-nav-sheet a{display:flex!important;align-items:center!important;min-height:44px!important;padding:10px 14px!important;border-radius:6px!important;background:#fff!important;color:#173f2d!important;font-size:14px!important;font-weight:700!important;text-decoration:none!important;}
:root .topbar .mobile-nav-sheet a:active,:root .topbar .mobile-nav-sheet a:focus-visible{background:#eef3ee!important;outline:none!important;}
}
:root #builder.builder .left-panel .taxonomy-row[hidden]{
display:none!important;}
@media (min-width:1181px){
:root #builder.builder > :is(.left-panel, .right-panel),
:root #builder.builder .canvas-card,
:root #builder.builder .designer-sign-panel{
border-color:#dddeda!important;background:#fff!important;box-shadow:0 1px 0 rgba(23, 63, 45, 0.03)!important;}
:root #builder.builder .canvas-toolbar{
padding:0!important;border:0!important;background:transparent!important;}
:root #builder.builder .canvas-toolbar :is(button, select){
border-color:#d9ddd9!important;box-shadow:none!important;}
:root #builder.builder .canvas-toolbar :is(button, select):hover{
border-color:#9dad9f!important;}
:root body.mobile-builder-empty #builder.builder > .right-panel{
grid-template-rows:auto auto auto!important;align-content:start!important;}
:root body.mobile-builder-empty #builder.builder .right-panel .total strong{
max-width:160px!important;font-size:16px!important;line-height:1.3!important;text-align:right!important;}
:root body.mobile-builder-empty #builder.builder .right-panel .line-items{
display:flex!important;align-items:center!important;min-height:132px!important;overflow:visible!important;}
:root body.mobile-builder-empty #builder.builder .right-panel .line-item{
width:100%!important;padding-block:16px!important;}
}
@media (max-width:540px){
:root body.mobile-builder-active .top-actions{
flex:0 0 auto!important;min-width:0!important;}
:root body.mobile-builder-active .top-actions #topCart{
flex:0 0 auto!important;min-width:max-content!important;max-width:92px!important;padding-inline:8px!important;white-space:nowrap!important;}
:root body #builder.builder .canvas-toolbar{
grid-template-columns:minmax(0, 1fr) repeat(3, 44px)!important;grid-template-rows:44px!important;min-height:44px!important;height:44px!important;max-height:44px!important;gap:4px!important;}
:root body #builder.builder .canvas-toolbar .layout-toggle{
display:none!important;}
:root body #builder.builder .canvas-toolbar .layout-toggle button{
padding-inline:4px!important;font-size:10.5px!important;}
:root body #builder.builder .canvas-toolbar .preset-picker{
grid-column:1!important;grid-row:1!important;}
:root body #builder.builder .canvas-toolbar .preset-picker select{
padding:0 24px 0 8px!important;font-size:11px!important;}
:root body #builder.builder #builderTourOpen{
display:none!important;}
:root body #builder.builder .canvas-toolbar .tool-actions > :is(#removeSelected, #duplicateSelected, #clearDesign){
display:none!important;}
:root body #builder.builder .canvas-toolbar .tool-actions > :is(#undoDesign, #redoDesign){
display:inline-flex!important;grid-row:1!important;width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;padding:0!important;}
:root body #builder.builder .canvas-toolbar #undoDesign{ grid-column:2!important; }
:root body #builder.builder .canvas-toolbar #redoDesign{ grid-column:3!important; }
:root body #builder.builder .canvas-toolbar :is(#removeSelected, #duplicateSelected, #undoDesign, #redoDesign, #clearDesign) span{
display:none!important;}
:root body #builder.builder .editor-more-toggle{
grid-column:4!important;grid-row:1!important;}
:root body #builder.builder .bottom-tray{
--jewdiy-mobile-tray-height:300px;padding:8px!important;border:1px solid #dddeda!important;border-radius:8px!important;background:#f7f7f4!important;box-shadow:none!important;}
:root body #builder.builder .bottom-tray .tray-tools{
grid-template-columns:minmax(0, 1fr) 82px!important;column-gap:6px!important;}
:root body #builder.builder .bottom-tray .tray-tools > span{
display:none!important;}
:root body #builder.builder .bottom-tray .tray-size-options{
display:grid!important;grid-auto-flow:column!important;grid-auto-columns:calc((100% - 6px) / 4)!important;width:100%!important;min-width:0!important;max-width:none!important;gap:2px!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory!important;}
:root body #builder.builder .bottom-tray .tray-size-options button{
flex:none!important;width:100%!important;min-width:0!important;max-width:none!important;scroll-snap-align:start!important;}
:root body #builder.builder .bottom-tray .mobile-smart-complete{
grid-column:2!important;min-width:82px!important;max-width:82px!important;}
:root body #builder.builder .bottom-tray .tray-shell{
grid-template-columns:clamp(60px, 18vw, 72px) minmax(0, 1fr)!important;grid-template-rows:minmax(0, 1fr)!important;gap:6px!important;}
:root body #builder.builder .bottom-tray .tray-rail{
display:block!important;grid-column:1!important;grid-row:1!important;width:100%!important;min-width:0!important;max-width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;padding-right:2px!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important;scrollbar-width:none!important;}
:root body #builder.builder .bottom-tray .tray-rail-row,
:root body #builder.builder .bottom-tray .tray-rail-children{
display:flex!important;flex-direction:column!important;width:100%!important;gap:4px!important;}
:root body #builder.builder .bottom-tray .tray-rail button{
flex:0 0 44px!important;width:100%!important;min-width:0!important;max-width:100%!important;height:44px!important;min-height:44px!important;padding:4px 5px!important;border-color:#dde1dd!important;border-radius:6px!important;background:#fff!important;font-size:10px!important;line-height:1.15!important;white-space:normal!important;overflow-wrap:anywhere!important;}
:root body #builder.builder .bottom-tray .tray-rail button.active,
:root body #builder.builder .bottom-tray .tray-rail button.is-expanded{
border-color:#173f2d!important;background:#173f2d!important;color:#fff!important;}
:root body #builder.builder .bottom-tray .tray-scroll{
grid-column:2!important;grid-row:1!important;grid-template-columns:repeat(3, minmax(0, 1fr))!important;grid-auto-rows:134px!important;gap:6px!important;padding:0 2px 4px 0!important;}
:root body #builder.builder .bottom-tray .tray-item{
grid-template-rows:16px 58px minmax(30px, auto) 16px!important;min-height:134px!important;max-height:134px!important;padding:4px!important;border-radius:6px!important;background:#fff!important;}
:root body #builder.builder .bottom-tray .tray-item .mini-bead,
:root body #builder.builder .bottom-tray .tray-item .mini-bead:is(.realshot-library-photo, .realshot-library-macro){
width:clamp(48px, 15vw, 60px)!important;height:clamp(48px, 15vw, 60px)!important;max-width:60px!important;max-height:60px!important;border-radius:50%!important;box-shadow:0 4px 12px rgba(25, 35, 28, 0.1)!important;}
:root body #builder.builder .bottom-tray .tray-item strong{
font-size:10px!important;line-height:1.2!important;}
:root body #builder.builder .bottom-tray .tray-item .tray-price{
background:transparent!important;color:#265b3e!important;font-weight:800!important;}
:root body.mobile-builder-empty #builder.builder > .right-panel{
margin-top:0!important;}
:root body #builder.builder .right-panel .total{
display:grid!important;grid-template-columns:minmax(0, 1fr) 44px!important;align-items:center!important;margin:0!important;gap:8px!important;}
:root body #builder.builder .right-panel .total > div{
display:flex!important;align-items:center!important;justify-content:space-between!important;min-width:0!important;gap:8px!important;}
:root body #builder.builder .right-panel .total span{
flex:0 1 auto!important;font-size:10px!important;line-height:1.25!important;}
:root body #builder.builder .right-panel .total strong{
min-width:0!important;max-width:54%!important;font-size:21px!important;line-height:1.1!important;text-align:right!important;overflow-wrap:anywhere!important;}
:root body.mobile-builder-empty #builder.builder .right-panel .total strong{
font-size:16px!important;}
:root body.mobile-builder-empty #builder.builder .right-panel .quote-assurance{
display:none!important;}
}
@media (max-width:340px){
:root body #builder.builder .canvas-toolbar .layout-toggle button{
padding-inline:2px!important;font-size:9.5px!important;}
:root body #builder.builder .bottom-tray .tray-shell{
grid-template-columns:58px minmax(0, 1fr)!important;gap:5px!important;}
:root body #builder.builder .bottom-tray .tray-scroll{
gap:5px!important;}
:root body #builder.builder .bottom-tray .tray-rail button{
font-size:8.5px!important;word-break:normal!important;overflow-wrap:normal!important;hyphens:none!important;}
:root body #builder.builder .bottom-tray .tray-item{
grid-template-rows:15px 46px minmax(28px, auto) 16px!important;min-height:124px!important;max-height:124px!important;}
:root body #builder.builder .bottom-tray .tray-item .mini-bead,
:root body #builder.builder .bottom-tray .tray-item .mini-bead:is(.realshot-library-photo, .realshot-library-macro){
width:46px!important;height:46px!important;max-width:46px!important;max-height:46px!important;}
}
@media (min-width:721px) and (max-width:1180px){
:root #builder.builder .left-panel .taxonomy-pills .filter{
width:100%!important;min-width:0!important;max-width:none!important;height:auto!important;min-height:44px!important;padding:6px 8px!important;line-height:1.2!important;white-space:normal!important;overflow:visible!important;overflow-wrap:anywhere!important;text-overflow:clip!important;}
}
@media (max-width:720px){
:root body #builder.builder #copySku{
flex:0 0 44px!important;width:44px!important;min-width:44px!important;max-width:44px!important;height:44px!important;min-height:44px!important;max-height:44px!important;touch-action:manipulation!important;}
}
@media (min-width:541px){
:root #builder.builder .canvas-toolbar{
display:grid!important;grid-template-columns:minmax(140px, 1fr) 100px 100px 44px!important;grid-template-rows:44px 44px!important;align-items:stretch!important;width:100%!important;height:94px!important;min-height:94px!important;max-height:94px!important;padding:0!important;gap:6px!important;overflow:hidden!important;}
:root #builder.builder .canvas-toolbar :is(.mode-toggle, .zoom-controls, .editor-more-toggle){
display:none!important;}
:root #builder.builder .canvas-toolbar .layout-toggle{
display:grid!important;grid-column:1!important;grid-row:1!important;grid-template-columns:repeat(2, minmax(0, 1fr))!important;width:100%!important;min-width:0!important;height:44px!important;padding:3px!important;gap:3px!important;}
:root #builder.builder .canvas-toolbar .layout-toggle button{
min-width:0!important;height:38px!important;min-height:38px!important;padding:0 7px!important;font-size:12px!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
:root #builder.builder .canvas-toolbar #view3dToggle,
:root #builder.builder .canvas-toolbar #realScaleToggle{
width:100px!important;min-width:100px!important;max-width:100px!important;height:44px!important;min-height:44px!important;padding:0 7px!important;font-size:12px!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
:root #builder.builder .canvas-toolbar #view3dToggle{
grid-column:2!important;grid-row:1!important;}
:root #builder.builder .canvas-toolbar #realScaleToggle{
grid-column:3!important;grid-row:1!important;}
:root #builder.builder .canvas-toolbar .builder-tour-button{
display:inline-grid!important;grid-column:4!important;grid-row:1!important;place-items:center!important;width:44px!important;min-width:44px!important;max-width:44px!important;height:44px!important;min-height:44px!important;padding:0!important;font-size:0!important;}
:root #builder.builder .canvas-toolbar .builder-tour-button::before{
content:"?"!important;font-size:16px!important;font-weight:850!important;line-height:1!important;}
:root #builder.builder .canvas-toolbar .tool-actions{
display:grid!important;grid-column:1 / -1!important;grid-row:2!important;grid-template-columns:minmax(120px, 1fr) repeat(5, 44px) minmax(88px, 120px)!important;align-items:stretch!important;width:100%!important;min-width:0!important;height:44px!important;gap:4px!important;overflow:hidden!important;}
:root #builder.builder .canvas-toolbar :is(.preset-picker, #presetSelect){
grid-column:1!important;grid-row:1!important;width:100%!important;min-width:150px!important;max-width:100%!important;height:44px!important;min-height:44px!important;max-height:44px!important;font-size:12px!important;}
:root #builder.builder .canvas-toolbar .preset-picker{
padding:0!important;border:0!important;background:transparent!important;}
:root #builder.builder .canvas-toolbar .tool-icon-button{
display:inline-grid!important;place-items:center!important;width:44px!important;min-width:44px!important;max-width:44px!important;height:44px!important;min-height:44px!important;max-height:44px!important;padding:0!important;}
:root #builder.builder .canvas-toolbar .tool-icon-button span{
display:none!important;}
:root #builder.builder .canvas-toolbar #removeSelected{ grid-column:2!important; grid-row:1!important; }
:root #builder.builder .canvas-toolbar #duplicateSelected{ grid-column:3!important; grid-row:1!important; }
:root #builder.builder .canvas-toolbar #undoDesign{ grid-column:4!important; grid-row:1!important; }
:root #builder.builder .canvas-toolbar #redoDesign{ grid-column:5!important; grid-row:1!important; }
:root #builder.builder .canvas-toolbar #clearDesign{ grid-column:6!important; grid-row:1!important; }
:root #builder.builder .canvas-toolbar #autoFill{
grid-column:7!important;grid-row:1!important;width:100%!important;min-width:88px!important;max-width:120px!important;height:44px!important;min-height:44px!important;padding:0 10px!important;font-size:12px!important;white-space:nowrap!important;}
:root #builder.builder .left-panel .product-card .detail-chip{
top:6px!important;right:auto!important;bottom:auto!important;left:6px!important;display:inline-grid!important;place-items:center!important;width:32px!important;min-width:32px!important;max-width:32px!important;height:32px!important;min-height:32px!important;max-height:32px!important;padding:0!important;border-radius:50%!important;font-size:0!important;line-height:1!important;}
:root #builder.builder .left-panel .product-card .detail-chip::before{
content:"i"!important;font-family:Georgia, "Times New Roman", serif!important;font-size:14px!important;font-weight:800!important;line-height:1!important;}
:root #builder.builder .left-panel .size-selector{
grid-template-columns:minmax(0, 1fr)!important;align-items:stretch!important;}
:root #builder.builder .left-panel .size-selector-head{
display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;}
:root #builder.builder .left-panel .size-options{
display:grid!important;width:100%!important;overflow:visible!important;}
:root #builder.builder .left-panel .size-options button{
width:100%!important;min-width:0!important;}
}
@media (min-width:541px) and (max-width:1180px){
:root .topbar{
min-height:64px!important;padding:8px 12px!important;gap:10px!important;}
:root .topbar .brand{
min-width:0!important;gap:6px!important;}
:root .topbar .brand-mark{
width:34px!important;height:34px!important;}
:root .topbar .brand-wordmark{
width:112px!important;max-width:112px!important;}
:root .topbar .brand-lockup > span[data-i18n="tagline"]{
display:none!important;}
:root #builder.builder .left-panel .size-selector{
gap:6px!important;}
:root #builder.builder .left-panel .size-options{
grid-template-columns:repeat(4, minmax(0, 1fr))!important;gap:5px!important;}
}
@media (min-width:541px) and (max-width:1365px){
:root #builder.builder .left-panel .size-options{
grid-template-columns:repeat(4, minmax(0, 1fr))!important;gap:4px!important;}
:root #builder.builder .left-panel .catalog > .product-card{
height:148px!important;min-height:148px!important;max-height:148px!important;grid-template-rows:64px minmax(44px, 1fr) 16px!important;padding:5px!important;gap:2px!important;overflow:hidden!important;}
}
@media (min-width:1366px){
:root #builder.builder .left-panel .size-selector{
gap:5px!important;}
:root #builder.builder .left-panel .size-options{
grid-template-columns:repeat(3, minmax(0, 1fr))!important;gap:4px!important;}
:root #builder.builder .left-panel .catalog > .product-card{
overflow:hidden!important;}
}
@media (min-width:1366px){
:root #builder.builder .left-panel .catalog > .product-card{
height:144px!important;min-height:144px!important;max-height:144px!important;grid-template-rows:82px 28px 16px!important;padding:6px!important;gap:3px!important;}
:root #builder.builder .left-panel .product-art.photo-backed{
width:80px!important;min-width:80px!important;max-width:80px!important;height:80px!important;min-height:80px!important;max-height:80px!important;}
:root #builder.builder .left-panel .product-card h3{
max-height:28px!important;font-size:11px!important;line-height:1.2!important;}
}
@media (min-width:1680px){
:root #builder.builder .left-panel .catalog > .product-card{
height:156px!important;min-height:156px!important;max-height:156px!important;grid-template-rows:90px 32px 16px!important;}
:root #builder.builder .left-panel .product-art.photo-backed{
width:88px!important;min-width:88px!important;max-width:88px!important;height:88px!important;min-height:88px!important;max-height:88px!important;}
}

/* Tablet bead library density */
@media (min-width:541px) and (max-width:720px){
:root #builder.builder #zoomOut,
:root #builder.builder #zoomIn,
:root #builder.builder .canvas-zoom-pad button,
:root #builder.builder .canvas-length-row .length-step{
width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;touch-action:manipulation!important;}
:root #builder.builder .canvas-length-row input[type="range"]{
height:44px!important;min-height:44px!important;touch-action:manipulation!important;}
:root #builder.builder .canvas-length-row{
grid-template-columns:44px minmax(92px, 1fr) minmax(66px, 92px) 44px!important;}
}

@media (min-width:541px) and (max-width:860px){
:root #builder.builder .left-panel .catalog{
grid-template-columns:repeat(3, minmax(0, 1fr))!important;grid-auto-rows:148px!important;gap:8px!important;}
:root #builder.builder .left-panel .catalog > .product-card{
display:grid!important;grid-template-columns:minmax(0, 1fr)!important;grid-template-rows:64px minmax(44px, 1fr) 16px!important;align-items:start!important;justify-items:center!important;text-align:center!important;}
:root #builder.builder .left-panel .product-top{
grid-column:1!important;grid-row:1!important;align-self:start!important;justify-self:center!important;width:64px!important;min-width:64px!important;height:64px!important;}
:root #builder.builder .left-panel .product-info{
grid-column:1!important;grid-row:2!important;align-self:start!important;justify-self:stretch!important;width:100%!important;min-width:0!important;padding-inline:2px!important;gap:2px!important;text-align:center!important;}
:root #builder.builder .left-panel .product-card h3{
display:-webkit-box!important;width:100%!important;max-height:28px!important;margin:0!important;overflow:hidden!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;font-size:11.5px!important;line-height:1.2!important;overflow-wrap:anywhere!important;}
:root #builder.builder .left-panel .product-meta{
display:none!important;}
:root #builder.builder .left-panel .product-card-price{
margin-top:0!important;font-size:10.5px!important;line-height:1.2!important;}
:root #builder.builder .left-panel .price-line{
display:flex!important;grid-column:1!important;grid-row:3!important;align-self:end!important;justify-content:center!important;width:100%!important;min-height:16px!important;margin:0!important;font-size:9.5px!important;line-height:16px!important;}
:root #builder.builder .left-panel .price-line span{
display:none!important;}
:root #builder.builder .left-panel .product-size-badge{
display:inline-flex!important;top:5px!important;right:5px!important;left:auto!important;}
}

@media (min-width:721px) and (max-width:860px){
:root #builder.builder .left-panel .catalog{
grid-template-columns:repeat(4, minmax(0, 1fr))!important;}
}

/* Desktop completion guidance belongs to the quote flow */
@media (min-width:541px){
:root #builder.builder .right-panel .design-companion-inline .design-companion-text{
display:block!important;max-height:none!important;overflow:visible!important;text-overflow:clip!important;white-space:normal!important;-webkit-box-orient:initial!important;-webkit-line-clamp:unset!important;}
}

/* Localized first-visit actions must remain readable */
@media (max-width:540px){
:root .builder-tour .builder-tour-actions button{
white-space:normal!important;overflow-wrap:anywhere!important;line-height:1.08!important;letter-spacing:0!important;}
:root .builder-tour .builder-tour-primary{
background:#205b3d!important;background-image:none!important;}
}