/* Mobile-first visual shell over the verified editor. Placement and order logic stay in the baseline. */ @layer studio-clear-stage { #customizerModal .arctic-simple[data-simple-step="0"] #designerStage{touch-action:pan-y!important} #customizerModal .arctic-simple[data-simple-step="0"] :is(#simpleRightPanel,#simpleRightContent){height:auto!important;max-height:none!important;overflow:visible!important} #studioStageControls{display:none} #customizerModal .arctic-simple[data-simple-step="0"] #studioStageControls{ display:flex!important;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:8px;background:#fff; } #customizerModal .arctic-simple #studioStageControls :is(#stageAddLogo,#toggleGuides,.designer-zoom-tools,#mobileStageExpand){ position:static!important;inset:auto!important;transform:none!important;margin:0!important;box-shadow:none!important; } #customizerModal .arctic-simple #studioStageControls #mobileStageExpand{display:none!important} @media(min-width:781px){ #customizerModal .arctic-simple[data-simple-step="0"] .designer-wrap:has(#studioStageControls){grid-template-rows:auto minmax(400px,64dvh) auto auto!important} #customizerModal .arctic-simple[data-simple-step="0"] #studioStageControls{grid-area:3 / 1!important} #customizerModal .arctic-simple[data-simple-step="0"] .designer-wrap:has(#studioStageControls) #simpleAreas{grid-area:4 / 1!important} #customizerModal .arctic-simple[data-simple-step="0"] .designer-wrap:has(#studioStageControls) #simpleRightPanel{grid-row:2 / 5!important} } @media(max-width:780px){ #customizerModal .mobile-studio #studioStageControls{order:3!important;flex:none} #customizerModal .mobile-studio #studioStageControls #mobileStageExpand{display:block!important;font-size:11px;min-height:40px} #customizerModal .mobile-studio[data-simple-step="0"] #simpleAreas{order:4!important} #customizerModal .mobile-studio[data-simple-step="0"] #simpleRightPanel{order:5!important} #customizerModal .mobile-studio[data-simple-step="0"] #editorSuggestions img{height:64px} #customizerModal .mobile-studio[data-simple-step="0"] #editorSuggestions strong{font-size:10px;max-height:2.5em;overflow:hidden} #customizerModal .mobile-studio.mobile-stage-expanded .designer-wrap > :not(#designerStage,#studioStageControls){display:none!important} #customizerModal .mobile-studio.mobile-stage-expanded .designer-wrap{display:flex!important;height:100%!important} #customizerModal .mobile-studio.mobile-stage-expanded[data-simple-step="0"] #designerStage{flex:1 1 0!important;height:auto!important;min-height:0!important} #customizerModal .mobile-studio.mobile-stage-expanded[data-simple-step="0"] #designerStage{touch-action:none!important} } } #editorEntryStatus{display:none} .editor-entry-loading #editorEntryStatus{display:grid;position:fixed;inset:0;place-items:center;margin:0;background:#f6f8f5;color:#1f3d2f;font-weight:600;z-index:50000} .editor-entry-loading #productView,.editor-entry-loading #catalogView{visibility:hidden} @layer studio-embed { #editorEmbedIntro { display: none; } #customizerModal .studio-embedded:not(.studio-embed-tools)[data-simple-step="0"] > :not(.customizer-layout), #customizerModal .studio-embedded:not(.studio-embed-tools)[data-simple-step="0"] .customizer-layout > :not(.designer-wrap), #customizerModal .studio-embedded:not(.studio-embed-tools)[data-simple-step="0"] .designer-wrap > :not(#editorEmbedIntro, #designerStage), #customizerModal .studio-embedded:not(.studio-embed-tools) :is(#stageAddLogo, #mobileStageExpand, .designer-zoom-tools, #toggleGuides) { display: none !important; } #customizerModal .studio-embedded:not(.studio-embed-tools)[data-simple-step="0"] .customizer-layout { padding: 0 !important; overflow: auto !important; } #customizerModal .studio-embedded:not(.studio-embed-tools)[data-simple-step="0"] .designer-wrap { display: grid !important; grid-template: minmax(0, 1fr) / minmax(240px, .8fr) minmax(0, 1.2fr) !important; width: 100% !important; height: 100% !important; min-height: 0 !important; padding: 0 !important; gap: 0 !important; background: #fafbf8; overflow: visible !important; } #customizerModal .studio-embedded:not(.studio-embed-tools)[data-simple-step="0"] #designerStage { grid-area: 1 / 2 !important; width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: none !important; border-radius: 0 !important; background: #eef1ed !important; } #customizerModal .studio-embedded:not(.studio-embed-tools)[data-simple-step="0"] #editorEmbedIntro { display: flex; grid-area: 1 / 1; flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px; padding: clamp(20px, 5vw, 78px); color: #1f3d2f; } #editorEmbedIntro h2 { margin: 0; max-width: 15ch; font-size: clamp(24px, 4vw, 54px); line-height: 1.05; letter-spacing: -.025em; } #editorEmbedProduct { margin: 0; font-size: 13px; } .editor-embed-badge { font-size: 11px; font-weight: 700; letter-spacing: .14em; } .editor-embed-actions, .editor-embed-choices { display: flex; flex-wrap: wrap; gap: 8px; } #editorEmbedIntro button { min-height: 40px; padding: 6px 12px; border: 1px solid #cdd9d0; border-radius: 999px; background: #fff; color: #1f3d2f; font: inherit; font-size: 13px; cursor: pointer; } #editorEmbedIntro button[aria-pressed="true"] { background: #e5eee7; border-color: #779583; } #editorEmbedIntro .editor-embed-upload { background: #1f3d2f; border-color: #1f3d2f; color: white; } @media (max-width: 600px) { #customizerModal .studio-embedded:not(.studio-embed-tools)[data-simple-step="0"] .designer-wrap { grid-template: auto minmax(220px, 1fr) / minmax(0, 1fr) !important; } #customizerModal .studio-embedded:not(.studio-embed-tools)[data-simple-step="0"] #designerStage { grid-area: 2 / 1 !important; } #customizerModal .studio-embedded:not(.studio-embed-tools)[data-simple-step="0"] #editorEmbedIntro { gap: 8px; padding: 14px; } #editorEmbedIntro h2 { max-width: none; } } } /* Desktop design step. Layer priority keeps older square-stage rules out of this layout. */ @layer studio-desktop-design { @media (min-width: 781px) { #customizerModal .arctic-simple[data-simple-step="0"] .customizer-layout { flex: 1 1 0; min-height: 0 !important; overflow: auto !important; padding: 10px clamp(12px, 2vw, 28px) 16px !important; } #customizerModal .arctic-simple[data-simple-step="0"] .designer-wrap { display: grid !important; grid-template-columns: minmax(0, 1fr) clamp(270px, 29vw, 410px) !important; grid-template-rows: minmax(clamp(400px, 64dvh, 720px), 1fr) auto !important; justify-content: stretch !important; gap: 10px 20px !important; width: 100% !important; height: 100% !important; min-height: 0 !important; overflow: visible !important; } #customizerModal .arctic-simple[data-simple-step="0"] #designerStage { grid-area: 1 / 1 !important; width: 100% !important; height: 100% !important; min-height: 0 !important; aspect-ratio: auto !important; background: #f4f5f3 !important; } #customizerModal .arctic-simple[data-simple-step="0"] #simpleAreas { grid-area: 2 / 1 !important; max-width: none !important; width: 100% !important; } #customizerModal .arctic-simple[data-simple-step="0"] #simpleAreas.is-collapsed .simple-area-picker { display: none !important; } #customizerModal .arctic-simple[data-simple-step="0"] #simpleRightPanel { grid-area: 1 / 2 / 3 / 3 !important; min-height: 0 !important; } #customizerModal .arctic-simple[data-simple-step="0"] .designer-wrap:has(#editorSuggestions:not([hidden])) { grid-template-rows: auto minmax(clamp(400px, 64dvh, 720px), 1fr) auto !important; } #customizerModal .arctic-simple[data-simple-step="0"] #editorSuggestions { grid-area: 1 / 1 / 2 / 3; } #customizerModal .arctic-simple[data-simple-step="0"] .designer-wrap:has(#editorSuggestions:not([hidden])) #designerStage { grid-row: 2 !important; } #customizerModal .arctic-simple[data-simple-step="0"] .designer-wrap:has(#editorSuggestions:not([hidden])) #simpleAreas { grid-row: 3 !important; } #customizerModal .arctic-simple[data-simple-step="0"] .designer-wrap:has(#editorSuggestions:not([hidden])) #simpleRightPanel { grid-row: 2 / 4 !important; } } #customizerModal .arctic-simple[data-simple-step="0"] #printAreaBox #designerEmptyState { inset: 50% auto auto 50% !important; width: max-content !important; max-width: calc(100% - 8px) !important; min-height: 28px !important; padding: 4px 9px !important; gap: 0; border: 1px solid #cbd8cf; background: #fbfdfb; box-shadow: 0 1px 6px #172b2126; } #customizerModal .arctic-simple[data-simple-step="0"] #designerEmptyState strong { font-size: 11px !important; font-weight: 600; line-height: 1.2; white-space: nowrap !important; } #customizerModal .arctic-simple[data-simple-step="0"] #designerEmptyState strong::before { display: none !important; } } #editorSuggestions { min-width: 0; padding: 6px 0; color: #1f3d2f; } #editorSuggestions > summary{display:flex;align-items:center;justify-content:space-between;min-height:40px;padding:6px 12px;list-style:none;border:1px solid #d6dfd9;border-radius:10px;background:#fff;font-size:13px;font-weight:600;cursor:pointer} #editorSuggestions > summary::-webkit-details-marker{display:none} #editorSuggestions > summary::after{content:'⌄';font-size:18px} #editorSuggestions[open] > summary::after{content:'⌃'} .arctic-simple:not([data-simple-step="0"]) #editorSuggestions { display: none; } #editorSuggestions header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; } #editorSuggestions h2 { margin: 0; font-size: 15px; } #editorSuggestions button { color: inherit; cursor: pointer; } #editorSuggestions header button { border: 0; background: transparent; padding: 6px 2px; font-size: 12px; text-decoration: underline; } .editor-suggestion-track { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scroll-snap-type: x proximity; } .editor-suggestion-track button { flex: 0 0 clamp(104px, 9vw, 140px); min-width: 0; padding: 5px; border: 1px solid #d6dfd9; border-radius: 10px; background: white; scroll-snap-align: start; } .editor-suggestion-track button:hover { border-color: #648778; } .editor-suggestion-track img { display: block; width: 100%; height: clamp(66px, 11dvh, 102px); object-fit: contain; background: #f4f5f3; border-radius: 6px; } .editor-suggestion-track strong { display: block; margin-top: 4px; font-size: 11px; line-height: 1.25; } @media (max-width: 780px) { #customizerModal #editorSuggestions { order: 1; padding: 8px 12px; } #customizerModal .mobile-keyboard #editorSuggestions { display: none !important; } } #editorProductBar{display:flex;align-items:center;gap:16px;padding:8px 16px;border-bottom:1px solid #e5e7eb;flex-shrink:0;background:white}#editorProductBar button,#editorProductPicker button{min-height:44px;border:1px solid #d6dfd9;border-radius:10px;padding:8px 14px;background:white;color:#1f3d2f;cursor:pointer}#editorProductBar span{font-size:12px;color:#53665c}#editorProductPicker{z-index:30000;width:min(1000px,94vw);max-height:90dvh;border:1px solid #d6dfd9;border-radius:18px;padding:20px;color:#1f3d2f;background:#fafcfb}#editorProductPicker::backdrop{background:#11251b99}#editorProductPicker header{display:flex;justify-content:space-between;align-items:center;gap:12px}#editorProductPicker nav{display:flex;gap:8px;overflow:auto;padding:12px 0}#editorProductPicker nav button{white-space:nowrap}#editorProductPicker button[aria-pressed=true]{background:#1f3d2f;color:white}#editorProductPicker form{display:flex;gap:8px}#editorProductPicker input{min-width:0;flex:1;padding:12px;font-size:16px;border:1px solid #d6dfd9;border-radius:10px}.editor-product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0}.editor-product-grid button{display:flex;flex-direction:column;gap:10px;text-align:left}.editor-product-grid img{width:100%;height:170px;object-fit:contain}.editor-product-grid strong{font-size:13px}@media(max-width:780px){#editorProductBar span{display:none}#editorProductPicker{padding:12px}.editor-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.editor-product-grid img{height:135px}} :root{--arctic-green:#1f3d2f;--arctic-stage:#ebebea;--arctic-line:#e5e7eb} #editorProductBar{flex-wrap:wrap;gap:6px!important}#editorProductBar button{font-size:13px;min-height:40px!important}#editorAddToCart{background:#1f3d2f!important;color:white!important}#editorCart{z-index:30000;width:min(850px,94vw);max-height:90dvh;overflow:auto;border:1px solid #d6dfd9;border-radius:18px;padding:24px;color:#1f3d2f;background:#fafcfb}#editorCart::backdrop{background:#11251b99}#editorCart header,#editorCart footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}#editorCart button{min-height:44px;border:1px solid #d6dfd9;border-radius:10px;padding:10px 14px;background:white;color:#1f3d2f;cursor:pointer}#editorCart button:disabled{opacity:.5}.editor-cart-row{display:flex;gap:20px;border-top:1px solid #d6dfd9;padding:18px 0}.editor-cart-row img{width:140px;height:140px;object-fit:contain;background:#edf1ee;border-radius:12px}.editor-cart-row h3{margin:4px 0}.editor-cart-row button{margin:4px 6px 0 0}#editorCart footer{border-top:1px solid #d6dfd9;padding-top:18px}@media(max-width:600px){#editorProductBar{padding:5px 8px!important}#editorProductBar button{font-size:11px;padding:6px 8px!important}#editorCart{padding:16px}.editor-cart-row{gap:10px}.editor-cart-row img{width:85px;height:100px}.editor-cart-row h3{font-size:15px}} body.studio-open{overflow:hidden} body.editor-restoring .customizer-card{pointer-events:none}body.editor-restoring #editorProductBar::after{content:'Endurheimti hönnun…';font-size:12px;color:#53665c} body.editor-cart-saving .customizer-card{pointer-events:none}body.editor-cart-saving #editorProductBar::after{content:'Undirbý vöruna í körfuna…';font-size:12px;color:#53665c} body.studio-open #sizeModal:not(.is-hidden),body.studio-open #inquiryModal:not(.is-hidden),body.studio-open #resultViewer:not(.is-hidden),body.studio-open #backgroundRemovalOverlay:not(.is-hidden){z-index:20000!important} #customizerModal .arctic-simple{position:relative;width:100vw!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;background:#fff;color:#171a18;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif} #customizerModal .arctic-simple .studio-head{height:56px!important;min-height:56px!important;padding:8px 16px!important;display:grid!important;grid-template-columns:44px 1fr 44px;align-items:center;border:0!important;background:#fff;flex:none} #customizerModal .arctic-simple .studio-back-button{width:44px;height:44px;border:0;background:transparent;font-size:25px;color:#111} #customizerModal .arctic-simple .studio-title{text-align:center;min-width:0}.arctic-simple .studio-title .kicker,.arctic-simple .wizard-head-help{display:none!important} #customizerModal .arctic-simple .studio-title h2{margin:0!important;font-size:17px!important;font-weight:500!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#171a18} #customizerModal .arctic-simple .head-actions{display:block!important}.arctic-simple .head-actions>*:not(#closeCustomizer){display:none!important} #customizerModal .arctic-simple #closeCustomizer{display:grid!important;place-items:center;width:32px!important;height:32px!important;min-height:32px!important;margin:auto;border:0!important;border-radius:50%!important;background:#f0f1ef!important;color:#222!important;font-size:23px!important;line-height:1} #customizerModal .arctic-simple #simpleProgress{height:4px;margin:0 16px 8px;border-radius:99px;background:#e5e7eb;overflow:hidden;flex:none} #customizerModal .arctic-simple #simpleProgress i{display:block;width:var(--progress,20%);height:100%;border-radius:inherit;background:var(--arctic-green);transition:width .2s ease} #customizerModal .arctic-simple .studio-mode-switch,#customizerModal .arctic-simple #simpleWizard,#customizerModal .arctic-simple #wizardStepCopy,#customizerModal .arctic-simple #toggleSettings,#customizerModal .arctic-simple #skodaCartBar,#customizerModal .arctic-simple .studio-canvas-head,#customizerModal .arctic-simple #mobileEditPanel,#customizerModal .arctic-simple #mobileEditorNav,#customizerModal .arctic-simple .studio-actions,#customizerModal .arctic-simple #studioLogoExample,#customizerModal .arctic-simple #mobileColorsPanel,#customizerModal .arctic-simple [data-wizard-section="7"],#customizerModal .arctic-simple .designer-zoom-tools,#customizerModal .arctic-simple #wizardProgress,#customizerModal .arctic-simple #studioSaveDraft{display:none!important} #customizerModal .customizer-card.arctic-simple .studio-tool-rail,#customizerModal .customizer-card.arctic-simple:not(.settings-hidden) .studio-tool-rail,#customizerModal .customizer-card.arctic-simple #studioSettings,#customizerModal .customizer-card.arctic-simple:not(.settings-hidden) #studioSettings,#customizerModal .customizer-card.arctic-simple #studioContextPanel,#customizerModal .customizer-card.arctic-simple:not(.settings-hidden) #studioContextPanel{display:none!important} #customizerModal .arctic-simple .customizer-layout{display:block!important;flex:1!important;min-height:0!important;overflow:auto!important;padding:0!important;background:#fff} #customizerModal .arctic-simple .designer-wrap{display:flex!important;flex-direction:column!important;padding:0!important;width:100%!important;max-width:none!important;min-height:100%;overflow:visible!important} #customizerModal .arctic-simple #designerStage{order:1!important;position:relative;width:100%!important;height:clamp(390px,58dvh,560px)!important;min-height:390px!important;max-height:none!important;border:0!important;border-radius:0!important;background:var(--arctic-stage)!important;overflow:hidden} #customizerModal .arctic-simple #designerViewport{inset:0!important;width:100%!important;height:100%!important} #customizerModal .arctic-simple .simple-guide-toggle{display:flex!important;position:absolute;z-index:20;top:12px;right:12px;align-items:center;gap:8px;min-height:36px!important;padding:5px 7px 5px 12px!important;border:0!important;border-radius:999px!important;background:#fff!important;box-shadow:0 2px 12px #1112;color:#222!important;font-size:12px!important;font-weight:500} #customizerModal .arctic-simple #toggleGuides::after{content:none!important;display:none!important} #customizerModal .arctic-simple .simple-guide-toggle i{width:34px;height:20px;border-radius:99px;background:#cfd3d0;position:relative;transition:.2s}.arctic-simple .simple-guide-toggle i:after{content:"";position:absolute;width:16px;height:16px;left:2px;top:2px;background:white;border-radius:50%;box-shadow:0 1px 3px #0004;transition:.2s} #customizerModal .arctic-simple .simple-guide-toggle[aria-pressed="true"] i{background:var(--arctic-green)}#customizerModal .arctic-simple .simple-guide-toggle[aria-pressed="true"] i:after{transform:translateX(14px)} #customizerModal .arctic-simple #printAreaBox{border:1px dashed #3a7d44!important;background:transparent!important}#customizerModal .arctic-simple #printAreaBox.guides-hidden{border-color:transparent!important} #customizerModal .arctic-simple #printAreaLabel{display:none!important}#customizerModal .arctic-simple .print-area-measure{width:auto!important;height:auto!important;min-width:0!important;min-height:0!important;font-size:10px!important;line-height:1.2!important;font-weight:400!important;color:#68736d!important;opacity:.8;background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;box-shadow:none!important;letter-spacing:0!important;white-space:nowrap} #customizerModal .arctic-simple #printAreaHeightMeasure,#customizerModal .arctic-simple #printAreaBox.guides-hidden~.print-area-measure{display:none!important;visibility:hidden!important;border:0!important}#customizerModal .arctic-simple .print-area-measure:before,#customizerModal .arctic-simple .print-area-measure:after{content:none!important;display:none!important} #customizerModal .arctic-simple .logo-layer-frame{border:1px solid #1f3d2f!important}.arctic-simple .logo-layer-frame:not(.active){border-color:transparent!important} #customizerModal .arctic-simple .logo-layer-frame.active:after{content:"";display:none}#customizerModal .arctic-simple .logo-layer-frame.active.is-transforming:after{content:attr(data-cm);display:block;position:absolute;left:50%;top:calc(100% + 5px);transform:translateX(-50%);white-space:nowrap;padding:0;background:transparent;color:#68736d;font-size:10px;line-height:12px;font-weight:400;pointer-events:none} #customizerModal .arctic-simple .logo-resize-handle,#customizerModal .arctic-simple .logo-rotate-handle{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;border:0!important;background:transparent!important;font-size:0!important;padding:0!important;transform:translate(50%,-50%)} #customizerModal .arctic-simple .logo-resize-handle:after,#customizerModal .arctic-simple .logo-rotate-handle:after{content:"";position:absolute;width:var(--handle-size,16px);height:var(--handle-size,16px);max-width:20px;max-height:20px;left:50%;top:50%;transform:translate(-50%,-50%);box-sizing:border-box;border:2px solid #fff;border-radius:50%;background:var(--arctic-green);box-shadow:0 1px 4px #0005} #customizerModal .arctic-simple .logo-rotate-handle{transform:translate(-50%,-50%)} #customizerModal .arctic-simple #designerEmptyState{display:flex!important;position:absolute;z-index:9;left:50%;top:50%;transform:translate(-50%,-50%);width:min(72%,260px);min-height:112px;align-items:center;justify-content:center;border:1.5px dashed #3a7d44;border-radius:14px;background:#ffffffd9;color:var(--arctic-green);cursor:pointer;text-align:center;padding:20px} #customizerModal .arctic-simple #designerEmptyState strong{font-size:18px}#customizerModal .arctic-simple #designerEmptyState span,#customizerModal .arctic-simple #designerEmptyState small{display:none}.arctic-simple #designerEmptyState strong:before{content:"＋ ";font-size:22px} #customizerModal .arctic-simple #designerEmptyState.is-hidden{display:none!important} #customizerModal .arctic-simple #simpleUpload{display:none;order:2;padding:10px 16px;align-items:center;justify-content:center;gap:10px;background:#fff}#customizerModal .arctic-simple[data-simple-step="1"] #simpleUpload{display:flex!important}#customizerModal .arctic-simple #simpleUpload>label{margin:0!important;min-height:44px}#customizerModal .arctic-simple #simpleUpload .sample-choice{display:flex;align-items:center;gap:7px;font-size:12px;color:#52665b}#customizerModal .arctic-simple #simpleSample{min-height:44px;border:1px solid var(--arctic-line);border-radius:10px;background:#fff;padding:0 8px;color:#1f3d2f} #customizerModal .arctic-simple #simpleTools{order:2;position:relative;padding:12px 16px 6px;background:#fff} #customizerModal .arctic-simple .simple-tool-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 52px;gap:8px} #customizerModal .arctic-simple .simple-tool-row button{height:64px;min-width:0;padding:7px 2px;border:1px solid var(--arctic-line);border-radius:12px;background:#fff;color:#262a27;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px} #customizerModal .arctic-simple .simple-tool-row button>span{font-size:20px;line-height:22px}.arctic-simple .simple-tool-row button>b{font-size:12px;font-weight:500}.arctic-simple .simple-tool-row button.active{border-color:var(--arctic-green);background:#eef4ef;color:var(--arctic-green)} #customizerModal .arctic-simple #simpleTools>.transform-size-control{display:block!important;margin:14px 0 0!important;padding:0 2px}.arctic-simple #simpleTools>.transform-size-control span{display:flex;justify-content:space-between;font-size:14px}.arctic-simple #logoScaleOutput{font-size:17px;color:var(--arctic-green);font-weight:700} #customizerModal .arctic-simple #simpleTools input[type="range"]{width:100%;height:28px;accent-color:var(--arctic-green)} #customizerModal .arctic-simple .simple-quick{display:none}#customizerModal .arctic-simple #simpleMore{display:none;position:absolute;z-index:60;left:12px;right:12px;bottom:calc(100% + 8px);max-height:min(440px,calc(100dvh - 100px));overflow:auto;margin:0;padding:12px;border:1px solid var(--arctic-line);border-radius:12px;background:#fff;box-shadow:0 8px 30px #0003}#customizerModal .arctic-simple #simpleMore[open]{display:grid;gap:10px}#customizerModal .arctic-simple #simpleMore summary{display:none}.arctic-simple #simpleMore button{min-height:44px;border:1px solid var(--arctic-line);border-radius:10px;background:#fff;color:#222}.arctic-simple #simpleMore .simple-quick{display:flex;gap:8px}.arctic-simple #simpleMore .fine-control,.arctic-simple #simpleMore .rotation-presets,.arctic-simple #simpleMore .editor-layer-list{display:block!important} #customizerModal .arctic-simple #simpleBackground{display:flex;align-items:center;gap:9px;min-height:44px;font-size:13px}#customizerModal .arctic-simple #simpleBgStatus{margin:0;color:#52665b;font-size:11px} #customizerModal .arctic-simple #simpleContext #studioColorBar{display:none!important;margin:14px 0 0;padding:10px;border:1px solid var(--arctic-line);border-radius:12px}#customizerModal .arctic-simple #simpleTools[data-active="Color"] #simpleContext #studioColorBar{display:flex!important;visibility:visible!important;height:auto!important;opacity:1!important} #customizerModal .arctic-simple #wizardFooter{order:9;position:sticky!important;bottom:0!important;display:flex!important;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom))!important;margin-top:auto!important;width:100%!important;border:0!important;background:#fff!important;z-index:30!important} #customizerModal .arctic-simple #wizardFooter>*:not(#wizardNext):not(#wizardPrev){display:none!important}#customizerModal .arctic-simple #wizardPrev{display:block!important;min-width:104px;min-height:44px!important;margin:0!important;border:1px solid #cbd4cf!important;border-radius:11px!important;background:#fff!important;color:var(--arctic-green)!important;font-weight:600}#customizerModal .arctic-simple[data-simple-step="0"] #wizardPrev{display:none!important}#customizerModal .arctic-simple #wizardNext{display:block!important;flex:1;width:auto;min-height:50px!important;margin:0!important;border:0!important;border-radius:11px!important;background:#111!important;color:white!important;font-size:17px!important;font-weight:500}#customizerModal .arctic-simple #wizardNext:after{content:none!important} #customizerModal .arctic-simple #simpleAreas{padding:12px 0}.arctic-simple .simple-methods{display:flex;gap:10px}.arctic-simple .simple-methods button,.arctic-simple .simple-area-grid button{border:1px solid var(--arctic-line);border-radius:14px;background:#fff;padding:12px}.arctic-simple .simple-area-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.arctic-simple .simple-area-grid svg{width:100%;height:110px}.arctic-simple .provider-print-area{stroke:#3a7d44;fill:none;stroke-dasharray:7 5}.arctic-simple .recommended{display:block;color:var(--arctic-green);font-size:10px} #customizerModal .arctic-simple #simplePreviewControls{display:none;order:3;padding:10px 16px;background:#fff;gap:10px;align-items:center}#customizerModal .arctic-simple[data-simple-step="3"] #simplePreviewControls{display:flex!important;flex-direction:column}#customizerModal .arctic-simple #simplePreviewControls #studioColorBar{display:flex!important;visibility:visible!important;width:100%;height:auto!important;opacity:1!important;margin:0!important;padding:8px!important;border:1px solid var(--arctic-line);border-radius:12px}#customizerModal .arctic-simple #simplePreviewControls .simple-guide-toggle{display:flex!important;position:static!important;align-self:flex-end;min-height:44px!important;box-shadow:none;border:1px solid var(--arctic-line)!important} #customizerModal .arctic-simple #simpleQuantities{display:none;padding:16px}.arctic-simple[data-simple-step="0"] #simpleTools>*:not(#simpleAreas),.arctic-simple:not([data-simple-step="0"]) #simpleAreas{display:none!important}.arctic-simple[data-simple-step="3"] #designerStage,.arctic-simple[data-simple-step="4"] #designerStage,.arctic-simple[data-simple-step="3"] #simpleTools,.arctic-simple[data-simple-step="4"] #simpleTools{display:none!important}.arctic-simple[data-simple-step="4"] #simpleQuantities{display:block!important}.arctic-simple #mockupResults{display:none!important}.arctic-simple[data-simple-step="3"] #mockupResults{display:grid!important}.arctic-simple[data-simple-step="3"] #simpleProductMockup{display:block!important}.arctic-simple #simpleProductMockup{display:none!important} @media(min-width:1024px){#customizerModal .arctic-simple{width:min(1240px,96vw)!important;height:min(800px,94dvh)!important;max-height:94dvh!important;border-radius:18px!important}#customizerModal .arctic-simple .customizer-layout{display:block!important;padding:16px!important}#customizerModal .arctic-simple .designer-wrap{display:grid!important;grid-template-columns:minmax(0,1.9fr) minmax(300px,.8fr)!important;grid-template-rows:minmax(0,1fr) auto!important;gap:0 22px;width:100%!important}#customizerModal .arctic-simple #designerStage{display:block!important;grid-column:1!important;grid-row:1/3!important;height:auto!important;min-height:620px!important;border-radius:16px!important}#customizerModal .arctic-simple #simpleTools{display:block!important;grid-column:2!important;grid-row:1!important;padding:0!important;min-width:0}#customizerModal .arctic-simple #wizardFooter{grid-column:2!important;grid-row:2!important;padding:12px 0 0!important;position:relative!important}#customizerModal .arctic-simple .simple-tool-row{grid-template-columns:repeat(2,minmax(0,1fr)) 52px}#customizerModal .arctic-simple .simple-tool-row button{height:72px}#customizerModal .arctic-simple .simple-tool-row button:nth-child(5){grid-column:3;grid-row:1}#customizerModal .arctic-simple #simpleAreas{max-width:none;margin:0;padding:0}#customizerModal .arctic-simple .simple-area-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#customizerModal .arctic-simple #simpleMore{left:auto;right:0;top:80px;bottom:auto;width:min(380px,100%)}#customizerModal .arctic-simple #mobileEditPanel,#customizerModal .arctic-simple #mobileEditorNav,#customizerModal .arctic-simple .studio-actions{display:none!important}} #customizerModal .arctic-simple #stageNudgeReadout,#customizerModal .arctic-simple [data-editor-panel="position"],#customizerModal .arctic-simple .position-readout{display:none!important} #customizerModal .arctic-simple #simpleContext #textEditorPanel{display:none!important;margin-top:12px}#customizerModal .arctic-simple #simpleContext.show-text #textEditorPanel,#customizerModal .arctic-simple #simpleContext.show-text #textControls{display:block!important} @media(min-width:1024px){#customizerModal .customizer-card.arctic-simple .designer-wrap,#customizerModal .customizer-card.arctic-simple:not(.settings-hidden) .designer-wrap{display:grid!important;grid-template-columns:minmax(0,1fr) 260px!important;align-items:start!important;gap:12px!important;height:auto!important;min-height:0!important}#customizerModal .customizer-card.arctic-simple #designerStage,#customizerModal .customizer-card.arctic-simple:not(.settings-hidden) #designerStage{grid-column:1!important;grid-row:1/3!important;height:calc(min(800px,94dvh) - 200px)!important;min-height:0!important}#customizerModal .customizer-card.arctic-simple #simpleTools{grid-column:2!important;grid-row:1!important}#customizerModal .customizer-card.arctic-simple .customizer-layout{padding:8px 12px!important}} /* Restored 12.18 step 3-5 styles dropped in the redesign; desktop Skoða/Magn full width; hide sub-pixel colour-plate edge line */ body.studio-open #sizeModal:not(.is-hidden){z-index:20000!important} #customizerModal .customizer-card.arctic-simple #simpleSendPanel{display:none!important} #customizerModal .customizer-card.arctic-simple #simpleProductMockup{display:none!important;margin:8px 0 12px;background:#1F3D2F;color:#fff;border:0;border-radius:12px;min-height:44px;padding:10px 18px} #customizerModal .customizer-card.arctic-simple[data-simple-step="3"] #simpleProductMockup{display:block!important} #customizerModal .customizer-card.arctic-simple #simpleMore[open] .editor-layer-list{display:flex!important} #customizerModal .customizer-card.arctic-simple .simple-methods button[aria-pressed=true]{border:2px solid #245d45} #customizerModal .customizer-card.arctic-simple .simple-methods strong,#customizerModal .customizer-card.arctic-simple .simple-methods small{display:block} #customizerModal .customizer-card.arctic-simple .simple-methods small{color:#527364;margin-top:6px} #customizerModal .customizer-card.arctic-simple .simple-area-grid button[aria-pressed=true]{box-shadow:0 0 0 2px #32684e} #customizerModal .customizer-card.arctic-simple .simple-area-grid .provider-print-area{stroke:#00a673;stroke-width:5;fill:#07be8520;stroke-dasharray:12 8} #customizerModal .customizer-card.arctic-simple .simple-area-grid span{font-size:12px;color:#547360} #customizerModal .customizer-card.arctic-simple #simpleSizeGuide{min-height:44px;background:#e5f1ea;color:#24583e;border:1px solid #c5ded0;border-radius:10px;padding:10px 16px;margin-bottom:12px} #customizerModal .customizer-card.arctic-simple #quantityMatrix{display:block!important} #customizerModal .customizer-card.arctic-simple .quantity-color-rail{display:flex!important;gap:8px;overflow-x:auto!important} #customizerModal .customizer-card.arctic-simple .quantity-color-card{min-width:105px!important;min-height:54px!important;flex-shrink:0!important} #customizerModal .customizer-card.arctic-simple .quantity-color-card .quantity-product-thumb{display:none!important} #customizerModal .customizer-card.arctic-simple .quantity-product-thumb.large{position:relative;display:block!important;max-height:350px!important;height:34dvh!important;width:min(360px,100%)!important;background:#fff} #customizerModal .customizer-card.arctic-simple .quantity-product-thumb img{width:100%!important;height:100%!important;object-fit:contain!important} #customizerModal .customizer-card.arctic-simple .quantity-product-thumb small{position:absolute;bottom:8px;left:8px;background:#fff9;border-radius:8px;padding:4px 7px;font-size:10px;color:#345d45} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] #studioColorBar,#customizerModal .customizer-card.arctic-simple[data-simple-step="4"] #studioColorBar{display:none!important} #customizerModal .customizer-card.arctic-simple #mockupStatus:empty{display:none} #customizerModal .customizer-card.arctic-simple .preview-areas rect{fill:none;stroke:#1F3D2F;stroke-opacity:.55;stroke-width:4;stroke-dasharray:14 10} @media(max-width:780px){#customizerModal .customizer-card.arctic-simple .quantity-active-panel{display:flex!important;flex-direction:column!important}#customizerModal .customizer-card.arctic-simple .quantity-active-product{width:100%!important}#customizerModal .customizer-card.arctic-simple .quantity-product-thumb.large{height:28dvh!important}#customizerModal .customizer-card.arctic-simple .quantity-size-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}} @media(min-width:1024px){#customizerModal .customizer-card.arctic-simple[data-simple-step="3"] #simpleTools,#customizerModal .customizer-card.arctic-simple[data-simple-step="4"] #simpleTools{display:none!important}#customizerModal .customizer-card.arctic-simple[data-simple-step="3"] .designer-wrap,#customizerModal .customizer-card.arctic-simple[data-simple-step="4"] .designer-wrap{grid-template-columns:minmax(0,1fr)!important}#customizerModal .customizer-card.arctic-simple[data-simple-step="3"] .designer-wrap>*,#customizerModal .customizer-card.arctic-simple[data-simple-step="4"] .designer-wrap>*{grid-column:1/-1!important}} #customizerModal .customizer-card.arctic-simple #templateColorPlate{clip-path:inset(1px)} /* Manual fix: Skoða colour/print-area controls above the preview (not under the sticky footer); desktop sample row wraps inside the tools column */ #customizerModal .customizer-card.arctic-simple[data-simple-step="3"] #simplePreviewControls{order:-1!important;flex-direction:row!important;flex-wrap:wrap} @media(min-width:1024px){#customizerModal .customizer-card.arctic-simple #simpleUpload{grid-column:2!important;flex-wrap:wrap!important;justify-content:flex-start!important;padding:8px 0!important}#customizerModal .customizer-card.arctic-simple #simpleUpload select{max-width:100%}} @media(max-width:1023px){#customizerModal .customizer-card.arctic-simple[data-simple-step="3"] .designer-wrap{display:flex!important;flex-direction:column!important}} /* 12.20 integration: the redesign owns the editor; 12.19 colour comparison + checkout (Yfirlit, Verkbeiðni, Staðfesta, Mitt svæði) kept. */ #customizerModal .customizer-card.arctic-simple.arctic-comfortable #comfortableColourPanel{display:none} #customizerModal .customizer-card.arctic-simple.arctic-comfortable[data-simple-step="4"] #comfortableColourPanel{display:block} #customizerModal .customizer-card.arctic-simple.arctic-comfortable #comfortableColourPanel p,#customizerModal .customizer-card.arctic-simple.arctic-comfortable #comfortableQuantityHead p{font-size:13px;line-height:1.6;color:#5c7467;margin:6px 0 12px} .comfortable-section-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.comfortable-section-head h3,#comfortableQuantityHead h3{margin:4px 0;font-size:21px}.comfortable-section-head button{min-height:44px;padding:8px 12px;background:#fff;border:1px solid #cbddd2;border-radius:10px;color:#245d43;font-size:12px} #comfortableColours{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;padding:6px 1px 12px;min-width:0} .comfortable-colour{min-width:0;border:1px solid #d1dfd6;border-radius:12px;background:#fff;text-align:center;padding:5px}.comfortable-colour.active{border:2px solid #2e684c;padding:4px} .comfortable-colour button{border:0;background:transparent;width:100%;min-height:70px;display:flex;flex-direction:column;align-items:center;gap:5px;color:#1e4030}.comfortable-colour button i{width:32px;height:32px;border:1px solid #ccd6cf;border-radius:50%;box-shadow:inset 0 0 0 3px white}.comfortable-colour button span{font-size:11px;font-weight:700;overflow-wrap:anywhere}.comfortable-colour label{display:flex;gap:4px;align-items:center;justify-content:center;min-height:40px;font-size:10px;color:#537362}.comfortable-colour input{width:18px;height:18px;accent-color:#22583e}.comfortable-colour .comfortable-card-pick{display:block;min-height:40px;border:1px solid #1f523b;border-radius:9px;background:#fff;color:#1f523b;font-size:10px;font-weight:700}.comfortable-colour .comfortable-card-pick[aria-pressed="true"]{background:#1f523b;color:#fff} .comfortable-gallery-rail{display:flex;width:100%;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;border:1px solid #d6e3da;border-radius:18px;background:#fff} .comfortable-gallery-slide{position:relative;flex:0 0 100%;min-width:0;scroll-snap-align:start;background:#fff;border:0;padding:10px;min-height:320px;cursor:zoom-in;color:#416650}.comfortable-gallery-slide img{display:block;width:100%;height:clamp(280px,40dvh,550px);object-fit:contain}.comfortable-gallery-slide span{display:block;font-size:11px;padding:8px 0;color:#536f61} .comfortable-gallery-nav{display:flex;align-items:center;justify-content:space-between;margin:6px 0}.comfortable-gallery-nav button{min-height:44px;border:0;background:transparent;color:#2b593f;font-size:12px}.comfortable-gallery-nav span{font-size:12px;color:#718677} .comfortable-mockup-actions{display:flex;gap:8px;flex-wrap:wrap}.comfortable-mockup-actions button{flex:1;min-height:46px;background:#1b5038;color:white;padding:10px 14px;border:0;border-radius:12px;font-weight:700}.comfortable-mockup-actions button:disabled{opacity:.5}.comfortable-mockup-actions button[hidden]{display:none} #comfortableMockupStatus{min-height:20px}.comfortable-gallery-note{font-size:11px!important} #customizerModal .customizer-card.arctic-simple.arctic-comfortable .quantity-size-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))!important} #customizerModal .customizer-card.arctic-simple.arctic-comfortable .qty-stepper{display:flex!important;gap:4px!important}.arctic-comfortable .qty-stepper button{min-height:44px!important;min-width:36px!important}.arctic-comfortable .qty-stepper input{min-width:0!important;width:100%!important;max-width:none!important;font-size:16px!important;min-height:44px!important} #inquiryModal .comfortable-inquiry{display:flex;flex-direction:column;width:min(820px,100%);height:min(880px,98dvh);max-height:98dvh!important;padding:18px!important;overflow:hidden!important;background:#f7faf9} #inquiryModal .comfortable-inquiry .modal-head{flex-shrink:0;gap:12px}#inquiryModal .comfortable-inquiry .modal-head h2{font-size:22px;margin:6px 0}#inquiryModal .comfortable-inquiry .modal-head small{font-size:12px;line-height:1.5;color:#5b7867} #comfortableCheckoutSteps{display:flex;gap:5px;padding:12px 0;overflow-x:auto;flex-shrink:0}#comfortableCheckoutSteps button{border:0;border-radius:10px;background:transparent;color:#657a6a;font-size:11px;white-space:nowrap;min-height:44px;padding:6px 10px}#comfortableCheckoutSteps button.active{background:#1d4c36;color:white}#comfortableCheckoutSteps button:disabled{opacity:.5} #inquiryModal .comfortable-inquiry #inquiryForm{display:flex;flex-direction:column;overflow-y:auto;min-height:0;flex:1;padding:0 3px;gap:14px} #inquiryModal .comfortable-inquiry #inquirySummary,#inquiryModal .comfortable-inquiry .add-product-note{display:none!important} #inquiryModal .comfortable-inquiry #comfortableReview h3{margin:8px 0;font-size:21px}.comfortable-review-image{width:100%;height:220px;object-fit:contain;border-radius:16px;background:white}.comfortable-review-lines{border:1px solid #d6e3da;border-radius:12px;overflow:hidden;background:white}.comfortable-review-lines div{display:grid;grid-template-columns:1fr 70px 60px;gap:8px;padding:14px;border-bottom:1px solid #e1eae5;font-size:13px}.comfortable-review-lines div:last-child{border:0}.comfortable-reassurance{font-size:12px;line-height:1.65;color:#5d7567} #inquiryModal .comfortable-inquiry .form-grid{grid-template-columns:1fr 1fr;gap:12px}#inquiryModal .comfortable-inquiry input:not([type=checkbox]),#inquiryModal .comfortable-inquiry textarea{width:100%;box-sizing:border-box;min-height:46px;font-size:16px;padding:12px;border:1px solid #ceddd3;border-radius:10px;background:white;color:#173e2d} .comfortable-check{display:flex;gap:12px;padding:14px;background:#fff;border:1px solid #d2e1d7;border-radius:12px;align-items:flex-start;font-size:14px;line-height:1.6}.comfortable-check input{width:22px;height:22px;flex-shrink:0;accent-color:#245c3e}.comfortable-check small{display:block;color:#68816f;font-size:12px} #inquiryModal .comfortable-inquiry label.comfortable-check{display:flex!important;gap:12px;align-items:flex-start;line-height:1.5} #inquiryModal .comfortable-inquiry[data-comfort-phase="4"] #comfortableReview h3{font-size:18px;margin:4px 0} #inquiryModal .comfortable-inquiry[data-comfort-phase="4"] .comfortable-review-lines div{padding:10px} #comfortableContactSummary h3{font-size:18px;margin:4px 0}#comfortableContactSummary p{font-size:13px;line-height:1.5;margin:6px 0} #comfortableConfirmation{display:flex;flex-direction:column;gap:12px}#comfortableSaveStatus{font-size:12px;line-height:1.5;color:#4c6a56;margin:0}#comfortableLogin{min-height:44px;padding:10px;border:1px solid #9bb8a6;border-radius:10px;background:#fff;color:#2a6043}#comfortableLogin[hidden]{display:none} #comfortableCheckoutFooter{display:flex;justify-content:space-between;gap:10px;background:#f7faf9;padding:12px 0;margin-top:auto;flex-shrink:0;border-top:1px solid #dce5df}#comfortableCheckoutFooter button{min-height:46px;border:1px solid #cddfd2;border-radius:12px;padding:10px 15px;background:#fff;color:#29543b}#comfortableCheckoutNext{background:#1f523b!important;color:white!important;margin-left:auto} #inquiryModal .comfortable-inquiry .inquiry-actions{display:flex;gap:8px;position:sticky;bottom:70px;padding:10px 0;background:#f7faf9}#inquiryModal .comfortable-inquiry .inquiry-actions button{min-height:46px;padding:10px 16px;font-size:13px} #inquiryModal .comfortable-inquiry:not([data-comfort-phase="2"]) #addAnotherProduct,#inquiryModal .comfortable-inquiry:not([data-comfort-phase="4"]) #submitInquiry{display:none!important} #inquiryModal .comfortable-inquiry:not([data-comfort-phase="3"]) .form-grid,#inquiryModal .comfortable-inquiry:not([data-comfort-phase="3"]) #inquiryForm>label{display:none!important} #inquiryModal .comfortable-inquiry:not([data-comfort-phase="4"]) #comfortableConfirmation,#inquiryModal .comfortable-inquiry[data-comfort-phase="3"] #comfortableReview{display:none!important} #inquiryModal .comfortable-inquiry[data-comfort-phase="4"] #comfortableCheckoutNext{display:none} #inquiryModal .comfortable-inquiry[data-comfort-phase="4"] #comfortableReview img,#inquiryModal .comfortable-inquiry[data-comfort-phase="4"] #comfortableReview .comfortable-reassurance{display:none} #inquiryModal .comfortable-inquiry #comfortableCheckoutFooter #submitInquiry{background:#1d5037;color:#fff;margin-left:auto;font-size:13px;max-width:260px} #inquiryModal .comfortable-inquiry #comfortableCheckoutFooter #submitInquiry:disabled{opacity:.45} #inquiryModal .comfortable-inquiry:not([data-comfort-phase="4"]) #comfortableCheckoutFooter #submitInquiry{display:none!important} #inquiryModal .comfortable-inquiry:not([data-comfort-phase="2"]) .inquiry-actions{display:none!important} #inquiryModal .comfortable-inquiry[data-comfort-phase="4"] .inquiry-actions{bottom:60px} @media(max-width:780px){ .comfortable-section-head h3,#comfortableQuantityHead h3{font-size:18px} .comfortable-gallery-slide{padding:8px;min-height:285px}.comfortable-gallery-slide img{height:32dvh;min-height:250px} #customizerModal .customizer-card.arctic-simple.arctic-comfortable .quantity-size-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important} #inquiryModal .comfortable-inquiry{height:100dvh!important;max-height:100dvh!important;border-radius:0!important;padding:12px!important} #inquiryModal .comfortable-inquiry .form-grid{grid-template-columns:1fr!important} #comfortableCheckoutSteps button:not(.active){display:none}#comfortableCheckoutSteps button.active{width:100%;text-align:left} #comfortableCheckoutFooter{padding-bottom:calc(12px + env(safe-area-inset-bottom))} } /* 12.23.6: step 2 is a two-column preview workspace; step 1 chips retain readable labels on phones. */ @media(min-width:781px){ #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-6{width:min(1440px,calc(100vw - 24px))!important;height:min(980px,calc(100dvh - 12px))!important;max-height:calc(100dvh - 12px)!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-6 .customizer-layout{display:block!important;min-height:0!important;padding:8px 14px 10px!important;overflow:hidden!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-6 .designer-wrap{display:grid!important;grid-template-columns:minmax(420px,1fr) clamp(340px,29vw,420px)!important;grid-template-rows:minmax(0,1fr) auto!important;align-items:stretch!important;gap:10px 18px!important;height:calc(100dvh - 132px)!important;min-height:0!important;overflow:hidden!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-6 #simpleSideTabs{grid-column:1!important;grid-row:1!important;position:absolute!important;z-index:8!important;margin:8px!important;background:transparent!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-6 #mockupResults{grid-column:1!important;grid-row:1/3!important;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;align-self:stretch!important;border-radius:14px!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-6 #comfortableColourPanel{grid-column:2!important;grid-row:1!important;align-self:start!important;max-height:calc(100dvh - 220px)!important;padding:12px!important;overflow:auto!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-6 #wizardFooter{grid-column:2!important;grid-row:2!important;display:flex!important;justify-content:space-between!important;gap:10px!important;width:100%!important;min-height:0!important;margin:0!important;padding:0!important;background:transparent!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-6 #wizardPrev{flex:0 0 auto!important;width:auto!important;min-width:96px!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-6 #wizardNext{flex:1 1 auto!important;width:auto!important;max-width:360px!important} } @media(max-width:780px){ #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1[data-simple-step="0"] .simple-area-grid{display:flex!important;flex-wrap:nowrap!important;gap:6px!important;overflow-x:auto!important;overflow-y:hidden!important;padding:3px 0 5px!important;scrollbar-width:none!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1[data-simple-step="0"] .simple-area-chip{flex:0 0 auto!important;width:auto!important;max-width:none!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1[data-simple-step="0"] .simple-area-chip>button:first-child{display:grid!important;grid-template-columns:32px minmax(max-content,1fr) 18px!important;align-items:center!important;gap:6px!important;width:auto!important;max-width:none!important;height:44px!important;min-height:44px!important;padding:4px 7px!important;border-radius:10px!important;text-align:left!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1[data-simple-step="0"] .simple-area-grid svg{grid-column:1!important;width:32px!important;height:32px!important;flex:none!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1[data-simple-step="0"] .simple-area-copy{grid-column:2!important;display:block!important;min-width:0!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1[data-simple-step="0"] .simple-area-copy strong{display:block!important;font-size:12px!important;line-height:1.2!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1[data-simple-step="0"] .simple-area-copy small{display:none!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1[data-simple-step="0"] .simple-area-grid button>i{position:static!important;grid-column:3!important;width:18px!important;height:18px!important} } /* 12.20 manual fix: desktop Litur og magn content (colour comparison + quantities) scrolls inside the editor instead of spilling under the footer */ #customizerModal .customizer-card.arctic-simple .customizer-layout{overflow-y:auto!important;overflow-x:hidden!important;min-height:0!important} @media(min-width:1024px){#customizerModal .customizer-card.arctic-simple{margin-left:auto!important;margin-right:auto!important}} /* 12.20.1 — sample-logo chips (Svæði + Lógó steps) */ #customizerModal .arctic-simple #simpleSampleChips{display:none;order:2;padding:8px 12px 4px;background:#fff} #customizerModal .arctic-simple[data-simple-step="0"] #simpleSampleChips,#customizerModal .arctic-simple[data-simple-step="1"] #simpleSampleChips{display:block} #customizerModal .arctic-simple .sample-chips-label{display:block;font-size:12px;color:#527364;margin:0 0 6px} #customizerModal .arctic-simple .sample-chips-row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;-webkit-overflow-scrolling:touch} #customizerModal .arctic-simple .sample-chips-row::-webkit-scrollbar{display:none} #customizerModal .arctic-simple #simpleSampleChips button{flex:0 0 auto;display:flex;align-items:center;gap:6px;min-height:44px;padding:4px 10px 4px 4px;border:1px solid #d3e2db;border-radius:999px;background:#f7faf9;color:#1e4030;font-size:12px;font-weight:600} #customizerModal .arctic-simple #simpleSampleChips button[aria-pressed=true]{border:2px solid #245d45;background:#e5f1ea} #customizerModal .arctic-simple #simpleSampleChips img{width:36px;height:36px;border-radius:50%;object-fit:contain;background:#fff} #customizerModal .arctic-simple .sample-choice{display:none!important} @media(min-width:1024px){#customizerModal .customizer-card.arctic-simple #simpleSampleChips{grid-column:2!important;grid-row:auto!important;padding:8px 0!important}#customizerModal .customizer-card.arctic-simple .sample-chips-row{flex-wrap:wrap}} /* 12.20.1 — cm label sits inside the print-area corner instead of over the garment */ #customizerModal .arctic-simple #printAreaWidthMeasure{transform:translate(4px,28px);background:rgba(255,255,255,.88)!important;color:#2f4a3c!important;opacity:1;padding:1px 6px!important;border-radius:6px!important;width:auto!important;max-width:calc(100% - 8px)} /* 12.20.1 — true full-screen editor on phones (iOS Safari) */ #customizerModal .customizer-card.arctic-simple{padding-bottom:0!important} @media(max-width:1023px){ #customizerModal.studio-modal,#customizerModal{position:fixed!important;inset:0!important;height:100%!important} #customizerModal .customizer-card.arctic-simple{position:absolute!important;inset:0!important;height:100vh!important;height:-webkit-fill-available!important;height:100dvh!important;max-height:none!important;margin:0!important} #customizerModal .customizer-card.arctic-simple .studio-head{padding-top:max(6px,env(safe-area-inset-top))!important} #customizerModal .customizer-card.arctic-simple .customizer-layout{flex:1 1 auto!important;min-height:0!important} #customizerModal .customizer-card.arctic-simple #wizardFooter{position:relative!important;flex:0 0 auto!important;margin-top:0!important;padding-bottom:max(10px,env(safe-area-inset-bottom))!important;box-shadow:0 -6px 16px rgba(20,40,30,.06)} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] #designerStage{height:clamp(220px,calc(100dvh - 360px - env(safe-area-inset-bottom)),560px)!important;min-height:220px!important} #customizerModal .customizer-card.arctic-simple[data-simple-step="1"] #designerStage{height:clamp(260px,calc(100dvh - 300px - env(safe-area-inset-bottom)),620px)!important;min-height:260px!important} #customizerModal .customizer-card.arctic-simple[data-simple-step="2"] #designerStage{height:clamp(280px,calc(100dvh - 290px - env(safe-area-inset-bottom)),640px)!important;min-height:280px!important} } /* 12.22 — three-step customer flow. */ #customizerModal .arctic-simple[data-simple-step="0"] #simpleUpload{display:flex!important} #customizerModal .arctic-simple[data-simple-step="0"] #simpleTools>*{display:revert!important} #customizerModal .arctic-simple[data-simple-step="0"] #simpleAreas{display:block!important;order:-2} #customizerModal .arctic-simple[data-simple-step="1"] #designerStage,#customizerModal .arctic-simple[data-simple-step="2"] #designerStage,#customizerModal .arctic-simple[data-simple-step="1"] #simpleTools,#customizerModal .arctic-simple[data-simple-step="2"] #simpleTools,#customizerModal .arctic-simple[data-simple-step="1"] #simpleUpload,#customizerModal .arctic-simple[data-simple-step="2"] #simpleUpload,#customizerModal .arctic-simple[data-simple-step="1"] #simpleSampleChips,#customizerModal .arctic-simple[data-simple-step="2"] #simpleSampleChips{display:none!important} #customizerModal .arctic-simple.arctic-comfortable[data-simple-step="1"] #comfortableColourPanel{display:block!important;padding:16px} #customizerModal .arctic-simple[data-simple-step="2"] #simpleQuantities{display:block!important} #customizerModal .arctic-simple[data-simple-step="1"] .designer-wrap,#customizerModal .arctic-simple[data-simple-step="2"] .designer-wrap{display:block!important} @media(min-width:1024px){ #customizerModal .customizer-card.arctic-simple[data-simple-step="1"] .designer-wrap,#customizerModal .customizer-card.arctic-simple[data-simple-step="2"] .designer-wrap{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(360px,.85fr)!important;grid-template-rows:auto minmax(0,1fr) auto!important;gap:0 18px!important} #customizerModal .customizer-card.arctic-simple[data-simple-step="1"] #designerStage,#customizerModal .customizer-card.arctic-simple[data-simple-step="2"] #designerStage{display:block!important;grid-column:1!important;grid-row:2/4!important;min-height:520px!important} #customizerModal .customizer-card.arctic-simple[data-simple-step="1"] #simpleSideTabs{grid-column:1!important;grid-row:1!important} #customizerModal .customizer-card.arctic-simple[data-simple-step="1"] #comfortableColourPanel,#customizerModal .customizer-card.arctic-simple[data-simple-step="2"] #simpleQuantities{grid-column:2!important;grid-row:1/3!important;min-width:0!important} #customizerModal .customizer-card.arctic-simple[data-simple-step="1"] #wizardFooter,#customizerModal .customizer-card.arctic-simple[data-simple-step="2"] #wizardFooter{grid-column:2!important;grid-row:3!important} #customizerModal .customizer-card.arctic-simple[data-simple-step="1"] #simpleStagePreview,#customizerModal .customizer-card.arctic-simple[data-simple-step="2"] #simpleStagePreview{display:grid;position:absolute;inset:0;z-index:20;margin:0;padding:24px;place-items:center;background:#f4f5f3} #customizerModal .customizer-card.arctic-simple #simpleStagePreview[hidden]{display:none!important} #customizerModal .customizer-card.arctic-simple #simpleStagePreview img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain} } #comfortableColourProgress{display:flex;gap:7px;flex-wrap:wrap;margin:8px 0}.colour-progress{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:999px;background:#eef3f0;color:#496557;font-size:11px}.colour-progress i{width:7px;height:7px;border-radius:50%;background:#91a69b}.colour-progress.tilbúið i{background:#2d8052}.colour-progress.villa i{background:#b54242} .comfortable-gallery-group{margin:14px 0 22px}.comfortable-gallery-group h4{margin:0 0 7px}.comfortable-pick-colour{width:100%;min-height:46px;margin-top:8px;border:1px solid #1f523b;border-radius:12px;background:#fff;color:#1f523b;font-weight:700}.comfortable-pick-colour[aria-pressed="true"]{background:#1f523b;color:#fff} @media(min-width:781px){#comfortableGallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}.comfortable-gallery-group{min-width:0}.comfortable-gallery-slide{min-height:260px}.comfortable-gallery-slide img{height:300px}} #customizerModal .arctic-simple #simpleSteps{display:flex!important;flex:none;justify-content:center;gap:4px;padding:0 12px 8px;overflow-x:auto;background:#fff}#customizerModal .arctic-simple #simpleSteps button{min-height:38px;padding:6px 10px;border:0;border-radius:999px;background:transparent;color:#617268;font-size:12px;white-space:nowrap}#customizerModal .arctic-simple #simpleSteps button.active{background:#1f3d2f;color:#fff}#customizerModal .arctic-simple #simpleAreas{order:0;padding:10px 16px!important}#customizerModal .arctic-simple #simpleUpload{order:1}#customizerModal .arctic-simple #designerStage{order:2!important}#customizerModal .arctic-simple #simpleSampleChips,#customizerModal .arctic-simple #simpleTools{order:3!important} .simple-selected-area{display:none;align-items:center;min-width:0;padding:10px 12px;border:1px solid #d3e2db;border-radius:12px;background:#f7faf9;font-size:13px;color:#1e4030}.simple-selected-area strong,.simple-selected-area span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.simple-selected-area button{margin-left:auto;min-width:68px;min-height:44px;border:0;background:transparent;color:#1f523b;font-weight:700} #customizerModal .arctic-simple .mockup-failure button.primary,#customizerModal .arctic-simple .mockup-failure button.secondary,#customizerModal .arctic-simple .mockup-processing-actions button.secondary{border:1px solid #bfcfc5!important;border-radius:11px!important;background:#fff!important;color:#1f523b!important;font-weight:700!important;min-height:44px!important;padding:11px 16px!important} @media(max-width:780px){ #customizerModal .arctic-simple #simpleSteps{width:100%;min-width:0;overflow:hidden;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))} #customizerModal .arctic-simple #simpleSteps button{min-width:0;padding:6px 4px;overflow:hidden;text-overflow:ellipsis} #customizerModal .arctic-simple #simpleAreas.is-collapsed .simple-selected-area{display:flex} #customizerModal .arctic-simple #simpleAreas.is-collapsed .simple-area-picker{display:none} #comfortableGallery,.comfortable-gallery-group,.comfortable-gallery-rail{min-width:0;max-width:100%} .comfortable-gallery-slide{flex:0 0 100%;min-width:0} #comfortableColours{grid-template-columns:repeat(2,minmax(0,1fr))} #customizerModal .arctic-simple #simpleSteps{position:relative!important;z-index:1!important;flex:0 0 auto!important;margin:0!important} #customizerModal .arctic-simple[data-simple-step="0"] #simpleAreas{position:relative!important;z-index:0!important;flex:0 0 auto!important;margin:0!important} #customizerModal .arctic-simple[data-simple-step="0"] .customizer-layout{scroll-padding-bottom:16px!important} #customizerModal .arctic-simple[data-simple-step="0"] #simpleSampleChips{position:relative!important;flex:0 0 auto!important;margin:0 0 12px!important;padding-bottom:8px!important;z-index:2!important} #customizerModal .arctic-simple[data-simple-step="0"] #wizardFooter{position:relative!important;z-index:3!important;flex:0 0 auto!important} } /* 12.22 polish: step 2 (Mockup) */ #customizerModal .customizer-card.arctic-simple[data-simple-step="1"] #mockupResults{min-height:0!important} #customizerModal .customizer-card.arctic-simple[data-simple-step="1"] #mockupResults:not(:has(img,canvas,svg,.mockup-failure)){display:none} #customizerModal:has(.customizer-card.arctic-simple) #skodaCartBar{display:none!important} /* one source of truth: the colour cards' "Fer áfram" toggles */ @media (max-width:760px){ #customizerModal .customizer-card.arctic-simple #comfortableColours{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:46vh;overflow-y:auto;overscroll-behavior:contain;padding-bottom:4px} } /* 12.23 — phone-first step 1: the garment remains the main canvas. */ @media (max-width:760px){ #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] .studio-head{padding:4px 10px!important;min-height:36px!important} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] #simpleSteps{padding:2px 8px 4px!important} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] .customizer-layout{padding:0!important;overflow:hidden!important} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] .designer-wrap{height:100%;display:flex!important;flex-direction:column!important;position:relative} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] #designerStage{order:0!important;flex:1 1 auto!important;height:auto!important;min-height:58dvh!important;margin:0!important} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] #simpleAreas{order:1!important;padding:3px 8px!important;background:#fff} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] .simple-selected-area{display:flex;min-height:38px;padding:2px 8px;border-radius:9px;font-size:11px} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] .simple-selected-area button{min-width:auto;min-height:34px;padding:2px 6px;font-size:10px;color:inherit} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] #simpleUpload{display:none!important} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] #simpleSampleChips{display:none!important} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] #simpleTools{order:2!important;padding:2px 8px 4px!important;background:#fff} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] .simple-tool-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] .simple-tool-row button{height:44px;min-height:44px;padding:2px 0;border:0;border-radius:8px;color:inherit} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] .simple-tool-row button>span{font-size:15px;line-height:16px} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] .simple-tool-row button>b{font-size:9px} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] #simpleTools>.transform-size-control{display:flex!important;align-items:center;gap:6px;margin:2px 0!important;min-height:36px} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] #simpleTools>.transform-size-control>span{font-size:10px;white-space:nowrap} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] #logoScale{min-width:0;flex:1} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] .simple-quick{display:flex!important;gap:2px} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] .simple-quick button{width:34px;min-width:34px;min-height:34px;padding:2px;font-size:0;color:inherit} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] .simple-quick button .simple-action-icon{font-size:15px} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] #simpleBackground{min-height:34px;font-size:10px;margin:0} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] #simpleBgStatus{display:none} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] #simpleContext #studioColorBar{flex-wrap:nowrap!important;overflow-x:auto!important;gap:4px!important;margin:2px 0!important;padding:3px!important;scrollbar-width:none} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] #simpleContext #studioColorBar button{flex:0 0 32px!important;width:32px!important;height:32px!important;min-height:32px!important;padding:0!important} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] #simpleContext #studioColorBar label,#customizerModal .customizer-card.arctic-simple[data-simple-step="0"] #simpleContext #studioColorBar>span:first-child{display:none!important} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] .simple-area-picker{max-height:35dvh;overflow:auto;padding:5px;border:1px solid #d3e2db;border-radius:12px;background:#fff} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] .simple-methods{display:inline-flex;gap:2px;padding:2px;border-radius:9px;background:#edf2ef} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] .simple-methods button{min-height:32px;padding:4px 9px;border:0;border-radius:7px;color:#17352a!important;font-size:10px} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] .simple-methods button[aria-pressed="true"]{border:0;background:#fff;box-shadow:0 1px 3px #0002} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] .simple-methods small{display:none} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] .simple-area-grid{display:flex;gap:5px;overflow-x:auto;padding-top:5px;scrollbar-width:none} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] .simple-area-grid button{flex:0 0 88px;min-height:64px;padding:4px;color:inherit;border-radius:9px} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] .simple-area-grid svg{width:42px;height:38px;float:left} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] .simple-area-grid strong{display:block;font-size:10px} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] .simple-area-grid span{display:none} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] .simple-area-grid .recommended{font-size:8px} } /* 12.23 multi-placement editor and unobtrusive edge resizing. */ #customizerModal .arctic-simple #simpleSideTabs{display:flex;gap:6px;overflow-x:auto;padding:6px 10px;background:#fff;scrollbar-width:none;flex:none} #customizerModal .arctic-simple #simpleSideTabs[hidden]{display:none} #customizerModal .arctic-simple #simpleSideTabs button{display:flex;align-items:center;gap:5px;flex:0 0 auto;min-height:36px;padding:3px 9px;border:1px solid #cfddd5;border-radius:999px;background:#fff;color:#1f3d33;font-size:11px;font-weight:700} #customizerModal .arctic-simple #simpleSideTabs button[aria-pressed="true"]{border-color:#1f523b;background:#e9f2ed;box-shadow:inset 0 0 0 1px #1f523b} #customizerModal .arctic-simple #simpleSideTabs svg{width:25px;height:25px} #customizerModal .arctic-simple .quantity-colour-choice{position:relative;display:flex;flex:0 0 auto}.quantity-colour-choice .quantity-color-card{padding-right:34px!important}.quantity-remove-colour{display:grid;place-items:center;width:28px;height:28px;min-width:28px!important;min-height:28px!important;padding:0!important;border:1px solid #c9d6cf!important;border-radius:50%!important;background:#fff!important;color:#264d3a!important;font-size:18px;line-height:1}.quantity-colour-choice>.quantity-remove-colour{position:absolute;z-index:2;right:5px;top:50%;transform:translateY(-50%)}.quantity-active-product h3{display:flex;align-items:center;gap:8px}.quantity-active-product .quantity-remove-colour{display:inline-grid;vertical-align:middle} #customizerModal .arctic-simple .simple-methods button,#customizerModal .arctic-simple .simple-methods button:link,#customizerModal .arctic-simple .simple-methods button:visited{color:#1f3d33!important;text-decoration:none!important} #customizerModal .arctic-simple .simple-area-grid button{position:relative;color:#1f3d33} #customizerModal .arctic-simple .simple-area-grid button>i{position:absolute;right:5px;top:5px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#edf3ef;color:#1f523b;font-style:normal;font-size:12px} #customizerModal .arctic-simple .simple-area-grid button.is-selected{border-color:#1f523b;background:#edf5f0;box-shadow:inset 0 0 0 1px #1f523b} #customizerModal .arctic-simple .logo-resize-handle,#customizerModal .arctic-simple .logo-rotate-handle{display:none!important} #customizerModal .arctic-simple .logo-layer-frame{touch-action:none} #customizerModal .arctic-simple .logo-edge-handle{position:absolute!important;z-index:5;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;touch-action:none} #customizerModal .arctic-simple .logo-edge-handle:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);box-sizing:border-box;border:1px solid #1f523b;border-radius:999px;background:#fff;box-shadow:0 1px 4px rgba(20,55,40,.25)} #customizerModal .arctic-simple .logo-edge-top{left:50%;top:0;transform:translate(-50%,-50%)} #customizerModal .arctic-simple .logo-edge-bottom{left:50%;bottom:0;transform:translate(-50%,50%)} #customizerModal .arctic-simple .logo-edge-left{left:0;top:50%;transform:translate(-50%,-50%)} #customizerModal .arctic-simple .logo-edge-right{right:0;top:50%;transform:translate(50%,-50%)} #customizerModal .arctic-simple .logo-layer-frame.is-small-layer .logo-edge-top{top:-22px} #customizerModal .arctic-simple .logo-layer-frame.is-small-layer .logo-edge-bottom{bottom:-22px} #customizerModal .arctic-simple .logo-layer-frame.is-small-layer .logo-edge-left{left:-22px} #customizerModal .arctic-simple .logo-layer-frame.is-small-layer .logo-edge-right{right:-22px} #customizerModal .arctic-simple .logo-edge-top:after,#customizerModal .arctic-simple .logo-edge-bottom:after{width:18px;height:4px} #customizerModal .arctic-simple .logo-edge-left:after,#customizerModal .arctic-simple .logo-edge-right:after{width:4px;height:18px} .comfortable-placement-surcharge{display:flex;justify-content:space-between;padding:10px 12px;border-radius:10px;background:#f0f5f2;color:#1f3d33} @media(max-width:760px){ #customizerModal .arctic-simple #simpleSideTabs{position:sticky;top:0;z-index:25;order:-1;padding:3px 7px;min-height:40px;background:#fff;box-sizing:border-box} #customizerModal .arctic-simple #simpleSideTabs button{min-height:34px;padding:2px 7px} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] .simple-area-picker{max-height:none;overflow:visible} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] .simple-area-grid{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;padding:5px 0 1px;scrollbar-width:none} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] .simple-area-grid button{display:grid;grid-template-columns:28px minmax(0,1fr) 18px;align-items:center;gap:6px;flex:0 0 min(210px,72vw);width:min(210px,72vw);height:48px;min-height:48px;padding:5px 7px;border-radius:999px;text-align:left;overflow:hidden} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] .simple-area-grid svg{grid-column:1;width:28px;height:28px;float:none} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] .simple-area-grid strong{grid-column:2;display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] .simple-area-grid span,#customizerModal .customizer-card.arctic-simple[data-simple-step="0"] .simple-area-grid .recommended{display:none} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] .simple-area-grid button>i{position:static;grid-column:3;width:18px;height:18px} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] .simple-methods{display:inline-flex;min-height:28px} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] .simple-methods button{min-height:28px;padding:3px 9px} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] #designerEmptyState{width:auto;min-width:0;min-height:38px;padding:8px 14px;border-radius:999px;white-space:nowrap} } /* 12.23 mobile: editor column scrolls instead of clipping; compact side chips. */ @media(max-width:760px){ #customizerModal .customizer-card.arctic-simple .designer-wrap{max-height:100%!important;overflow-y:auto!important;overscroll-behavior:contain} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] #simpleAreas:not(.is-collapsed)~#designerStage,#customizerModal .customizer-card.arctic-simple[data-simple-step="0"] #designerStage{max-height:56vh} #customizerModal .arctic-simple .simple-area-picker{max-height:none!important;overflow:visible!important} #customizerModal .arctic-simple .simple-area-grid{display:flex!important;gap:6px;overflow-x:auto;height:auto!important;padding:2px 0 4px;scrollbar-width:none} #customizerModal .arctic-simple .simple-area-grid button{flex:0 0 auto;width:auto!important;max-width:150px;min-height:44px;height:44px;display:flex!important;align-items:center;gap:6px;padding:4px 26px 4px 6px!important;overflow:hidden} #customizerModal .arctic-simple .simple-area-grid button svg{width:28px;height:28px;flex:none} #customizerModal .arctic-simple .simple-area-grid button strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0} #customizerModal .arctic-simple .simple-area-grid button span,#customizerModal .arctic-simple .simple-area-grid button .recommended{display:none} #customizerModal .arctic-simple .simple-methods button{min-height:32px;padding:4px 10px} #customizerModal .arctic-simple .simple-methods small{display:none} #customizerModal .arctic-simple #simpleMore .simple-quick{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} #customizerModal .arctic-simple #simpleMore .simple-quick button{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:40px!important;padding:5px!important;white-space:nowrap;font-size:13px} #customizerModal .arctic-simple #simpleMore .simple-quick button span{display:inline;line-height:1} #customizerModal .arctic-simple #simpleMore .rotation-presets{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px} #customizerModal .arctic-simple #simpleMore .rotation-presets button{min-width:0;min-height:40px;padding:4px;font-size:13px} #customizerModal .arctic-simple #simpleMore .rotation-number-input{display:none!important} } #customizerModal#customizerModal .customizer-card.arctic-simple #simpleMore:not([open]){display:none!important} /* 12.23 slim tool bar: one row of icon buttons on every viewport. */ #customizerModal#customizerModal .customizer-card.arctic-simple .simple-tool-row{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;grid-auto-flow:column;gap:6px!important;width:100%} #customizerModal#customizerModal .customizer-card.arctic-simple .simple-tool-row button{height:44px!important;min-height:44px;grid-column:auto!important;grid-row:auto!important;flex-direction:column;gap:1px;padding:3px 2px!important;border-radius:10px} #customizerModal#customizerModal .customizer-card.arctic-simple .simple-tool-row button>span{font-size:15px!important;line-height:16px!important} #customizerModal#customizerModal .customizer-card.arctic-simple .simple-tool-row button>b{font-size:10px!important} @media(min-width:761px){#customizerModal .arctic-simple .simple-methods small{display:none}#customizerModal .arctic-simple .simple-methods button{min-height:36px;padding:6px 12px}} /* 12.23.0 recording fixes: non-blocking controls and compact placement chips. */ #customizerModal .arctic-simple .simple-area-chip{position:relative;min-width:0} #customizerModal .arctic-simple .simple-area-chip>button:first-child{width:100%} #customizerModal .arctic-simple .simple-area-remove{position:absolute;z-index:3;right:3px;top:3px;width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important;padding:0!important;border-radius:50%!important} #customizerModal .arctic-simple #simpleMoreClose{position:absolute;right:10px;top:10px;width:34px;min-height:34px;padding:0;font-size:22px} #customizerModal .arctic-simple .simple-more-handle{display:none} .comfortable-gallery-skeleton{display:grid;place-items:center;min-height:150px;min-width:150px;border-radius:12px;background:linear-gradient(100deg,#eef2ef 30%,#f8faf9 50%,#eef2ef 70%);background-size:250% 100%;animation:skeleton 1.4s infinite;color:#53695f;font-size:12px} .comfortable-review-lines section{position:relative;display:grid;gap:4px;padding:12px 42px 12px 12px;border-bottom:1px solid #dfe7e5}.comfortable-review-lines section button{position:absolute;right:8px;top:8px;width:32px;height:32px;border-radius:50%;border:1px solid #ccd8d1;background:white} #customizerModal .arctic-simple #simpleSampleNote{margin:4px 0;padding:6px 9px;border:0;border-radius:7px;background:#fff8dd;color:#665924;font-size:11px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#customizerModal .arctic-simple #simpleSampleNote button{display:inline;border:0;background:none;color:#1f6047;text-decoration:underline;padding:0;font:inherit;font-weight:700} @media(max-width:760px){ #customizerModal .arctic-simple #simpleMore{position:fixed!important;z-index:90!important;left:0!important;right:0!important;bottom:var(--wizard-footer-height,72px)!important;top:auto!important;width:100%!important;max-height:40vh!important;border-radius:18px 18px 0 0!important;padding:28px 14px 14px!important} #customizerModal .arctic-simple .simple-more-handle{display:block;position:absolute;top:8px;left:50%;width:42px;height:4px;transform:translateX(-50%);border-radius:9px;background:#aebbb4} #customizerModal .arctic-simple[data-simple-step="0"] #designerStage{min-height:220px!important} } @media(min-width:761px){#customizerModal .arctic-simple #simpleMore{left:auto!important;right:0!important;top:52px!important;bottom:auto!important;width:340px!important;max-height:440px!important}} /* 12.23.1: step 2 is one product stage followed by one compact colour rail. */ #customizerModal .customizer-card.arctic-simple[data-simple-step="1"] #designerStage{display:block!important;background:#f4f5f3} #customizerModal .arctic-simple #comfortableColourPanel{min-width:0;padding:14px 16px!important;background:#fff} #customizerModal .arctic-simple #comfortableColours{display:flex!important;grid-template-columns:none!important;gap:8px;max-height:none!important;overflow-x:auto;overflow-y:hidden;padding:4px 1px 8px;scroll-snap-type:x proximity;scrollbar-width:thin} #customizerModal .arctic-simple .comfortable-swatch{position:relative;display:grid;place-items:center;flex:0 0 52px;width:52px;min-width:44px;min-height:62px;padding:4px 4px 2px;border:0;border-radius:12px;background:transparent;color:#284b39;scroll-snap-align:start} #customizerModal .arctic-simple .comfortable-swatch>i{display:block;width:36px;height:36px;border:1px solid #c8d5cd;border-radius:50%;box-shadow:inset 0 0 0 3px #fff} #customizerModal .arctic-simple .comfortable-swatch.active>i{outline:2px solid #1f5a3e;outline-offset:2px} #customizerModal .arctic-simple .comfortable-swatch-tick{position:absolute;right:3px;top:1px;display:grid;place-items:center;width:17px;height:17px;border:1.5px solid #8aa597;border-radius:50%;background:#fff;color:#8aa59755;font-size:11px;font-weight:800;box-shadow:0 1px 3px #1738291f} #customizerModal .arctic-simple .comfortable-swatch[aria-pressed="true"] .comfortable-swatch-tick{border-color:#1f523b;background:#1f523b;color:#fff} #customizerModal .arctic-simple .comfortable-swatch.is-busy .comfortable-swatch-tick{color:transparent;border:2px solid #b9c9bf;border-top-color:#1f5a3e;background:#fff;animation:comfortable-spin .8s linear infinite} #customizerModal .arctic-simple .comfortable-swatch-name{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;font-weight:700} #comfortableColourSummary{margin:3px 0 9px!important;font-size:12px!important;color:#496557!important} #comfortableGallery{display:none!important}.comfortable-gallery-nav{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center}.comfortable-gallery-nav button{min-width:44px;min-height:40px;font-size:24px}.comfortable-gallery-nav span{text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .comfortable-gallery-dots{display:flex;justify-content:center;gap:5px}.comfortable-gallery-dots button{width:7px;height:7px;min-width:7px;min-height:7px;padding:0;border:0;border-radius:50%;background:#c7d4cd}.comfortable-gallery-dots button.active{background:#245d43} #customizerModal .arctic-simple #designerStage.is-colour-loading #simpleStagePreview:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,#ffffff66 48%,transparent 61%);background-size:220% 100%;animation:skeleton 1.2s linear infinite;pointer-events:none} @keyframes comfortable-spin{to{transform:rotate(360deg)}} #customizerModal .arctic-simple #simpleMore .simple-quick{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} #customizerModal .arctic-simple #simpleMore .simple-quick>button{display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;width:100%!important;min-width:0!important;min-height:40px!important;padding:6px!important;border:1px solid #d6e2db!important;border-radius:10px!important;background:#fff!important;font-size:12px!important} #customizerModal .arctic-simple #simpleMore .simple-quick>button.simple-action-delete{color:#b4232f!important} #customizerModal .arctic-simple #simpleMore .simple-quick>button:before,#customizerModal .arctic-simple #simpleMore .simple-quick>button:after{content:none!important;display:none!important} #customizerModal .arctic-simple .simple-quick-originals{display:none!important} @media(max-width:760px){ #customizerModal .customizer-card.arctic-simple[data-simple-step="1"] .designer-wrap{display:flex!important;flex-direction:column!important;overflow-y:auto!important} #customizerModal .customizer-card.arctic-simple[data-simple-step="1"] #designerStage{order:1!important;width:100%;height:clamp(320px,52dvh,620px)!important;min-height:320px!important} #customizerModal .customizer-card.arctic-simple[data-simple-step="1"] #comfortableColourPanel{display:block!important;order:2!important;width:100%;box-sizing:border-box} #customizerModal .customizer-card.arctic-simple[data-simple-step="1"] #wizardFooter{order:3!important} } /* 12.23 step 2: the big view is the colour preview/mockup, in the same spot and size as the step-1 stage. */ #customizerModal .customizer-card.arctic-simple[data-simple-step="1"] #mockupStatus{display:none!important} #customizerModal .customizer-card.arctic-simple[data-simple-step="1"] #mockupResults{position:relative!important;padding:0!important;background:#f3f4f1;isolation:isolate} #customizerModal .arctic-simple .comfortable-big-preview{position:absolute;inset:0;overflow:hidden;background:#f3f4f1;touch-action:pan-y} #customizerModal .arctic-simple .comfortable-big-preview>img{display:block;width:100%!important;height:100%!important;object-fit:contain} #customizerModal .arctic-simple .comfortable-big-preview.is-generating:after{content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(105deg,transparent 34%,#fff7 48%,transparent 62%);background-size:220% 100%;animation:skeleton 1.25s linear infinite;pointer-events:none} #customizerModal .arctic-simple .comfortable-preview-pill{position:absolute;z-index:5;top:12px;left:50%;width:auto!important;height:auto!important;transform:translateX(-50%);padding:7px 12px;border:1px solid #d7e1db;border-radius:999px;background:#fffffff2;color:#365647;font-size:12px;font-weight:750;line-height:1.2;white-space:nowrap;box-shadow:0 2px 8px #183a2920} #customizerModal .arctic-simple button.comfortable-preview-pill.is-retry{border-color:#e2c2c2;color:#8b2929;cursor:pointer} #customizerModal .arctic-simple .comfortable-big-preview .comfortable-gallery-nav{position:absolute;z-index:4;right:10px;bottom:17px;left:10px;height:46px!important;width:auto!important;border-radius:13px;background:#173c2edb;color:#fff;backdrop-filter:blur(8px)} #customizerModal .arctic-simple .comfortable-big-preview .comfortable-gallery-nav button{width:44px!important;height:44px!important;padding:0;border:0;background:transparent;color:#fff} #customizerModal .arctic-simple .comfortable-big-preview .comfortable-gallery-dots{position:absolute;z-index:5;bottom:10px;left:50%;width:auto!important;height:7px!important;transform:translateX(-50%)} #customizerModal .arctic-simple .comfortable-big-preview .comfortable-gallery-dots button{width:7px!important;height:7px!important;background:#ffffff80}.comfortable-big-preview .comfortable-gallery-dots button.active{background:#fff!important} #customizerModal .arctic-simple #comfortableMockupStatus{max-width:100%;overflow:visible;white-space:normal;font-size:13px!important;line-height:1.5!important;color:#496557!important} @media(min-width:1024px){ #customizerModal .customizer-card.arctic-simple[data-simple-step="1"] .designer-wrap{display:grid!important;grid-template-columns:minmax(420px,560px) minmax(360px,1fr)!important;grid-template-rows:auto minmax(0,1fr) auto!important;justify-content:center;gap:0 20px!important} #customizerModal .customizer-card.arctic-simple[data-simple-step="1"] #designerStage{display:none!important} #customizerModal .customizer-card.arctic-simple[data-simple-step="1"] #simpleSideTabs{grid-column:1!important;grid-row:1!important} #customizerModal .customizer-card.arctic-simple[data-simple-step="1"] #mockupResults{display:block!important;grid-column:1!important;grid-row:2/4!important;width:min(70vh,560px);max-width:100%;height:min(70vh,560px)!important;min-height:420px!important;align-self:start;overflow:hidden} #customizerModal .customizer-card.arctic-simple[data-simple-step="1"] #comfortableColourPanel{display:block!important;grid-column:2!important;grid-row:1/3!important;align-self:start;padding:16px!important} #customizerModal .customizer-card.arctic-simple[data-simple-step="1"] #wizardFooter{grid-column:2!important;grid-row:3!important} #customizerModal .customizer-card.arctic-simple[data-simple-step="1"] #comfortableColours{display:grid!important;grid-template-columns:repeat(auto-fill,52px)!important;grid-auto-rows:58px;gap:5px 8px;max-height:232px!important;overflow-x:hidden;overflow-y:auto;align-content:start} #customizerModal .customizer-card.arctic-simple[data-simple-step="1"] .comfortable-swatch{width:52px;min-height:56px;flex:none} } @media(max-width:1023px){ #customizerModal#customizerModal .customizer-card.arctic-simple[data-simple-step="1"] #designerStage{display:none!important} #customizerModal#customizerModal .customizer-card.arctic-simple[data-simple-step="1"] .designer-wrap{display:flex!important;flex-direction:column} #customizerModal#customizerModal .customizer-card.arctic-simple[data-simple-step="1"] #simpleSideTabs{order:-3} #customizerModal#customizerModal .customizer-card.arctic-simple[data-simple-step="1"] #mockupResults{display:block!important;order:-2;flex:none;height:min(52vh,460px)!important;min-height:0!important;overflow:hidden;background:#f3f4f1} #customizerModal#customizerModal .customizer-card.arctic-simple[data-simple-step="1"] #comfortableColourPanel{order:5!important} #customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple[data-simple-step="1"] #mockupResults{order:-2!important}#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple[data-simple-step="1"] #simpleSideTabs{order:-3!important} } #customizerModal .customizer-card.arctic-simple #mockupResults .comfortable-gallery-nav{position:absolute;left:10px;right:10px;bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:8px;height:auto!important;width:auto!important;background:none;pointer-events:none} #customizerModal .customizer-card.arctic-simple #mockupResults .comfortable-gallery-nav button{pointer-events:auto;width:36px!important;height:36px!important;min-height:0;border-radius:50%;background:rgba(255,255,255,.92)!important;color:#1f3d33!important;border:1px solid #d6e2db;box-shadow:0 1px 4px rgba(0,0,0,.12);padding:0} #customizerModal .customizer-card.arctic-simple #mockupResults .comfortable-gallery-nav :is(span,strong,p){display:inline-block!important;pointer-events:none;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.92);color:#1f3d33;font-size:12px;font-weight:700} @media(max-width:430px){ #customizerModal .customizer-card.arctic-simple #mockupResults .comfortable-gallery-nav{inset:0!important;display:block!important} #customizerModal .customizer-card.arctic-simple #mockupResults .comfortable-gallery-nav button{position:absolute;top:50%;transform:translateY(-50%);z-index:2} #customizerModal .customizer-card.arctic-simple #mockupResults .comfortable-gallery-nav button:first-child{left:10px} #customizerModal .customizer-card.arctic-simple #mockupResults .comfortable-gallery-nav button:last-child{right:10px} #customizerModal .customizer-card.arctic-simple #mockupResults .comfortable-gallery-nav span{position:absolute;right:48px;bottom:14px;left:48px;text-align:center} } @media(min-width:1024px){ #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] .designer-wrap{grid-template-rows:auto minmax(0,1fr) auto!important} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] #simpleSideTabs{grid-column:1!important;grid-row:1!important;position:relative;z-index:25} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] #designerStage{grid-column:1!important;grid-row:2/4!important} #customizerModal .customizer-card.arctic-simple[data-simple-step="0"] #simpleTools{grid-column:2!important;grid-row:1/3!important} } #customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple #mockupResults .comfortable-gallery-nav > button{display:grid!important;place-items:center;position:absolute;top:50%;transform:translateY(-50%);width:36px!important;height:36px!important;z-index:3}#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple #mockupResults .comfortable-gallery-nav > button:first-child{left:8px;right:auto}#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple #mockupResults .comfortable-gallery-nav > button:last-child{right:8px;left:auto} /* Keep the caption in its own column at every viewport width. */ #customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple #mockupResults .comfortable-gallery-nav{inset:auto 10px 14px!important;display:grid!important;grid-template-columns:36px minmax(0,1fr) 36px;gap:8px;align-items:center;height:auto!important} #customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple #mockupResults .comfortable-gallery-nav > button{position:static;transform:none;min-width:0} #customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple #mockupResults .comfortable-gallery-nav > span{position:static;min-width:0;max-width:100%;box-sizing:border-box;text-align:center;white-space:normal;overflow-wrap:anywhere} @media(min-width:1024px){ #customizerModal .customizer-card.arctic-simple[data-simple-step="1"] .designer-wrap{grid-template-rows:auto minmax(0,1fr) auto!important;overflow-anchor:none} #customizerModal .customizer-card.arctic-simple[data-simple-step="1"] #simpleSideTabs{position:sticky;top:0;z-index:25;background:#fff} #customizerModal .customizer-card.arctic-simple[data-simple-step="1"] #mockupResults{height:min(560px,calc(100dvh - 260px))!important;min-height:0!important;width:min(560px,calc(100dvh - 260px));max-height:100%} } #customizerModal .arctic-simple .comfortable-swatch-choice{position:relative;display:block;flex:0 0 52px} #customizerModal .arctic-simple .comfortable-swatch-choice>.comfortable-swatch-tick{right:0;top:1px;padding:0;z-index:2} #customizerModal .arctic-simple .comfortable-swatch-choice>.comfortable-swatch-tick[aria-pressed="true"]{border-color:#1f523b;background:#1f523b;color:#fff} #customizerModal .arctic-simple #simpleSideTabs img{display:block;width:52px;height:52px;object-fit:contain;border-radius:8px;background:#eef2f0} /* 12.23.3 desktop step 1: real runtime classes; the garment owns the canvas. */ @media(min-width:781px){ #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1{position:relative;width:min(1400px,calc(100vw - 32px))!important;height:min(940px,100dvh)!important;max-height:100dvh!important} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .studio-head{min-height:52px!important;height:52px!important} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleSteps{min-height:40px!important;height:40px!important} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .customizer-layout{display:block!important;min-height:0!important;padding:8px 14px 10px!important;overflow:auto!important} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .designer-wrap{display:grid!important;grid-template-columns:minmax(0,1fr) clamp(280px,22vw,320px)!important;grid-template-rows:auto auto minmax(480px,1fr) auto auto!important;align-items:start!important;gap:8px 18px!important;width:100%!important;min-height:calc(100dvh - 170px)!important;overflow:visible!important} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleAreas{grid-column:1!important;grid-row:1!important;min-width:0;margin:0;padding:0!important} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleSideTabs{grid-column:1!important;grid-row:2!important;padding:0!important} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #designerStage{grid-column:1!important;grid-row:3/6!important;width:100%!important;height:clamp(480px,calc(100dvh - 290px),850px)!important;min-height:60dvh!important;max-height:none!important;border-radius:14px!important} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleTools{position:relative!important;grid-column:2!important;grid-row:1!important;align-self:start!important;margin:0!important;padding:0!important;border:0!important;background:#fff!important} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleUpload{grid-column:2!important;grid-row:2!important;align-self:start!important;width:100%!important;margin:0!important;padding:0!important;gap:8px!important} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleSampleChips{display:block!important;grid-column:2!important;grid-row:3!important;align-self:start!important;width:100%!important;margin:0!important;padding:0!important} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #wizardFooter{position:absolute!important;right:14px!important;bottom:10px!important;left:auto!important;z-index:30!important;width:clamp(280px,22vw,320px)!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;background:transparent!important} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #wizardNext{width:100%!important;max-width:360px!important;min-height:46px!important} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .simple-area-picker{max-height:none!important;overflow:visible!important;padding:0!important;border:0!important;background:transparent!important} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .simple-methods{display:inline-flex!important;flex-direction:row!important;gap:2px!important;height:32px!important;margin:0 0 5px!important;padding:2px!important;border-radius:9px!important;background:#edf2ef!important} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .simple-methods button{height:28px!important;min-height:28px!important;padding:2px 11px!important;border:0!important;border-radius:7px!important;font-size:11px!important} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .simple-methods button[aria-pressed="true"]{background:#fff!important;box-shadow:0 1px 3px #0002!important} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .simple-methods small{display:none!important} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .simple-area-grid{display:flex!important;grid-template-columns:none!important;flex-wrap:nowrap!important;gap:6px!important;overflow-x:auto!important;overflow-y:hidden!important;width:100%!important;padding:0 0 3px!important;scrollbar-width:thin} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .simple-area-chip{flex:0 0 auto!important;width:auto!important;max-width:220px!important} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .simple-area-chip>button:first-child{display:grid!important;grid-template-columns:40px minmax(78px,1fr) 18px!important;align-items:center!important;gap:7px!important;width:auto!important;min-width:145px!important;max-width:220px!important;height:50px!important;min-height:50px!important;padding:4px 7px 4px 5px!important;border-radius:11px!important;text-align:left!important;overflow:hidden!important} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .simple-area-chip.is-selected>button{border-color:#1f523b!important;background:#edf7f1!important;box-shadow:inset 0 0 0 1px #1f523b!important} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .simple-area-grid svg{grid-column:1!important;width:40px!important;height:40px!important;float:none!important} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .simple-area-copy{grid-column:2!important;display:block!important;min-width:0!important;line-height:1.15!important} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .simple-area-copy strong,#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .simple-area-copy small{display:block!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .simple-area-copy strong{font-size:12px!important} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .simple-area-copy small{margin-top:3px!important;color:#60766b!important;font-size:9px!important;font-weight:500!important} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .simple-area-grid button>i{position:static!important;grid-column:3!important;width:18px!important;height:18px!important} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .recommended{display:none!important} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .sample-chips-row{gap:6px!important;max-height:190px!important;overflow:auto!important} } /* 12.23.3 desktop step 1: stage starts right under the side chips; right column stacks from the top. */ @media(min-width:781px){ #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .designer-wrap{grid-template-rows:auto auto auto auto auto minmax(0,1fr)!important;min-height:0!important;align-content:start!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleAreas{grid-row:1!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleSideTabs{display:none!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #designerStage{grid-row:2/7!important;align-self:start!important;height:max(420px,calc(100dvh - 300px))!important;min-height:420px!important;max-height:860px!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleTools{grid-row:1/3!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleUpload{grid-column:2!important;grid-row:3!important;align-self:start!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleSampleChips{grid-column:2!important;grid-row:4!important;align-self:start!important;max-height:none!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #templateImage[data-product-photo-fallback="true"]{object-fit:contain!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #designerViewport:has(#templateImage[data-product-photo-fallback="true"]) #templateColorPlate{display:none!important} } /* 12.23.6 desktop step 1: the stage hugs the product (square), the controls sit right next to it, the guide toggle is an overlay pill. */ @media(min-width:781px){ #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .designer-wrap{grid-template-columns:minmax(0,auto) clamp(280px,22vw,320px)!important;justify-content:center!important;column-gap:14px!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleAreas{max-width:calc(100dvh - 300px)!important;min-width:0!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #designerStage{width:auto!important;aspect-ratio:1/1!important;height:max(420px,calc(100dvh - 300px))!important;max-width:100%!important;background:#fff!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #designerStage #toggleGuides{position:absolute!important;top:10px!important;right:10px!important;left:auto!important;z-index:5!important;min-height:30px!important;padding:4px 8px!important;font-size:11px!important;background:#ffffffe6!important;box-shadow:0 1px 4px #0002!important} } #customizerModal#customizerModal#customizerModal .arctic-simple .comfortable-big-preview .comfortable-instant{position:absolute;inset:0;display:flex;align-items:center;justify-content:center} #customizerModal#customizerModal#customizerModal .arctic-simple .comfortable-big-preview .comfortable-instant-box{position:relative;height:100%;max-width:100%;max-height:100%} #customizerModal#customizerModal#customizerModal .arctic-simple .comfortable-big-preview .comfortable-instant-box>img:first-child{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:fill} #customizerModal#customizerModal#customizerModal .arctic-simple .comfortable-big-preview .comfortable-instant-logo{position:absolute;object-fit:contain;pointer-events:none} #customizerModal#customizerModal#customizerModal#customizerModal .arctic-simple .comfortable-big-preview .comfortable-instant-box img{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important} /* 12.23.6: decoded-image gate. Never reveal partially decoded supplier strips. */ #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .is-image-loading{position:relative!important;background:#ecefed!important;overflow:hidden!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .is-image-loading:before{content:""!important;display:block!important;position:absolute!important;z-index:1!important;inset:6%!important;border-radius:18px!important;background:linear-gradient(105deg,#e3e7e4 30%,#f5f7f5 45%,#e3e7e4 60%)!important;background-size:220% 100%!important;animation:skeleton 1.15s linear infinite!important;pointer-events:none!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .is-image-loading #templateImage,#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .comfortable-big-preview.is-image-loading>img,#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .comfortable-big-preview.is-image-loading .comfortable-instant-box>img:first-child,#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal #simpleStagePreview.is-image-loading>img{opacity:0!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .is-image-ready #templateImage,#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .comfortable-big-preview.is-image-ready>img,#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .comfortable-big-preview.is-image-ready .comfortable-instant-box>img:first-child,#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal #simpleStagePreview.is-image-ready>img{opacity:1!important;transition:opacity 150ms ease!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal #designerStage.is-image-loading #templateColorPlate{visibility:hidden!important} @media(min-width:781px){ #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .designer-wrap{grid-template-rows:auto auto minmax(0,1fr) auto auto!important;height:calc(100dvh - 170px)!important;max-height:770px!important;align-items:stretch!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #designerStage{height:100%!important;min-height:420px!important;align-self:stretch!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleTools{grid-row:1!important;align-self:start!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleUpload{grid-row:2!important;align-self:start!important;margin-top:14px!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleSampleChips{grid-row:3!important;align-self:start!important;min-height:0!important;margin-top:14px!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #wizardFooter{bottom:10px!important;align-self:end!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-6 .designer-wrap{display:grid!important;grid-template-columns:minmax(360px,auto) clamp(360px,29vw,420px)!important;grid-template-rows:minmax(0,1fr) auto!important;justify-content:center!important;align-items:stretch!important;column-gap:16px!important;height:calc(100dvh - 180px)!important;max-height:760px!important;min-height:440px!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-6 #simpleSideTabs{display:none!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-6 #mockupResults{grid-column:1!important;grid-row:1!important;display:block!important;align-self:stretch!important;height:100%!important;width:100%!important;max-width:100%!important;min-width:0!important;min-height:0!important;margin:0!important;background:transparent!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-6 #comfortableColourPanel{grid-column:2!important;grid-row:1!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important;align-self:stretch!important;width:100%!important;height:100%!important;box-sizing:border-box!important;padding:16px!important;border:1px solid #e2e7e4!important;border-radius:14px!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-6 #comfortableGallery{display:block!important;flex:1 1 auto!important;min-height:16px!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-6 .comfortable-mockup-actions{margin-top:auto!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-6 #wizardFooter{grid-column:1/3!important;grid-row:2!important;position:relative!important;display:grid!important;grid-template-columns:auto 1fr minmax(240px,360px)!important;width:100%!important;margin:12px 0 0!important;padding:0!important;background:transparent!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-6 #wizardPrev{grid-column:1!important;width:auto!important;min-width:96px!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-6 #wizardNext{grid-column:3!important;width:100%!important;max-width:360px!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .designer-wrap{grid-template-rows:auto auto auto auto minmax(0,1fr) auto!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleAreas{grid-row:1!important;align-self:start!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .simple-area-picker{display:flex!important;align-items:center!important;gap:10px!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .simple-methods{flex:none!important;margin:0!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .simple-area-grid{flex:1 1 auto!important;min-width:0!important;margin:0!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #designerStage{grid-row:2/7!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleTools{grid-row:1/3!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleUpload{grid-row:3!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleSampleChips{grid-row:4!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #wizardNext{width:100%!important} } #customizerModal#customizerModal#customizerModal#customizerModal .arctic-simple .comfortable-big-preview .comfortable-instant-hint{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:5;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.94);box-shadow:0 1px 4px rgba(0,0,0,.12);color:#1f3d33;font-size:12px;font-weight:600;white-space:nowrap;pointer-events:none} /* 12.24.2: step 3 has one heading; size chart is an inline link. */ #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple .quantity-picker-heading{display:none!important} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple #comfortableQuantityHead h3{margin:0 0 4px!important} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple #comfortableQuantityHead p{margin:0 0 12px!important;color:#4b6358} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple #comfortableQuantityHead #simpleSizeGuide{display:inline!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;background:none!important;color:#1f523b!important;font:inherit!important;font-weight:600!important;text-decoration:underline!important;text-underline-offset:3px;cursor:pointer} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple .quantity-active-product .quantity-product-thumb{position:relative;overflow:hidden;background:#f3f4f2} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple .quantity-active-product .quantity-product-thumb img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 30%!important} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple .quantity-active-product .quantity-product-thumb small{position:absolute;left:8px;right:8px;bottom:8px;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.92);font-size:11px;text-align:center} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple .quantity-active-product .quantity-product-thumb i{display:none} /* 12.24.2: mobile step-1 polish. */ #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple #studioColorBar{display:flex!important;align-items:center!important;gap:10px!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:8px 10px!important} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple #studioColorBar::-webkit-scrollbar{display:none} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple #studioColorBar>strong{flex:none!important;font-size:12px!important;font-weight:600!important;color:#4b6358!important;margin:0!important;padding:0!important;border:0!important;background:none!important} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple #studioColorBar .swatch{flex:0 0 34px!important;width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;max-width:34px!important;aspect-ratio:1/1!important;padding:0!important;border-radius:50%!important;box-sizing:border-box!important} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple #studioColorBar .swatch.active{box-shadow:0 0 0 2px #fff,0 0 0 4px #1f523b!important} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple .transform-size-control>span{display:flex!important;align-items:baseline!important;justify-content:space-between!important;gap:12px!important;margin-bottom:6px!important} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple #logoScaleOutput{font-size:15px!important;line-height:1.2!important} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple #logoScale{-webkit-appearance:none!important;appearance:none!important;height:6px!important;min-height:0!important;padding:0!important;border-radius:999px;background:#d9e3dd;accent-color:#1f523b} #customizerModal .customizer-card.arctic-simple #logoScale::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:#1f523b;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3)} #customizerModal .customizer-card.arctic-simple #logoScale::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#1f523b;border:3px solid #fff} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple #wizardNext:not(:disabled){background:#1f523b!important;color:#fff!important} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple #wizardNext:disabled[data-reason]{background:#e6ece8!important;color:#4b6358!important} @media(max-width:780px){#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple #wizardFooter{box-shadow:0 -1px 0 #e2e7e4!important;background:#fff!important}#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple #wizardFooter::before,#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple #wizardFooter::after{display:none!important}} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple #wizardNextReason:not([hidden]){display:block!important;width:100%;margin:0 0 6px;text-align:center;font-size:13px;font-weight:600;color:#4b6358}#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple #wizardNextReason[hidden]{display:none!important} #customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple #wizardFooter{flex-wrap:wrap!important}#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple #wizardNextReason{flex:1 0 100%!important;order:-1} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple #wizardFooter:has(#wizardNextReason:not([hidden])){height:auto!important;min-height:0!important} @media (min-width:700px){#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple #wizardNextReason:not([hidden]){text-align:right!important;padding-right:8px}} @media (max-width:699px){#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #designerStage{height:min(100vw,400px)!important;min-height:min(100vw,400px)!important;max-height:none!important;flex:none!important}} @media (min-width:700px){#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple #wizardFooter:has(#wizardNextReason:not([hidden])){flex-wrap:nowrap!important;align-items:center!important}#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple #wizardNextReason:not([hidden]){flex:0 1 auto!important;order:0!important;width:auto!important;margin:0 12px 0 auto!important;padding:0!important;text-align:right!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-6.wizard-step-6 #comfortableColourPanel{height:auto!important;align-self:start!important}#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-6.wizard-step-6 #comfortableColourPanel .comfortable-mockup-actions{margin-top:16px!important}} #sizeModal#sizeModal .modal-card.size-card{max-width:calc(100vw - 24px)!important;box-sizing:border-box!important;margin-inline:auto!important}#sizeModal#sizeModal .size-guide-block{min-width:0!important;max-width:100%!important}#sizeModal#sizeModal .size-guide-table-wrap{max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch} /* 12.25.2: one viewport-sized editor with a fitted stage and one compact control panel. */ html.is-embedded #customizerModal .customizer-card.arctic-simple{margin:0!important;border-radius:0!important} #customizerModal .customizer-card.arctic-simple{height:100vh!important;height:100dvh!important;max-height:100vh!important;max-height:100dvh!important} #customizerModal .customizer-card.arctic-simple #templateImage{object-fit:contain!important} #customizerModal .customizer-card.arctic-simple #simpleRightPanel{min-width:0;min-height:0;background:#fff} #customizerModal .customizer-card.arctic-simple #simpleRightContent{min-width:0;min-height:0} #customizerModal .customizer-card.arctic-simple #simpleRightPanel.needs-upload #simpleUpload{border-radius:10px;box-shadow:0 0 0 3px #1f523b55} #customizerModal .customizer-card.arctic-simple #designerEmptyState{top:34px!important;bottom:auto!important;width:auto!important;max-width:calc(100% - 16px);min-height:36px!important;padding:7px 12px!important;border-radius:999px!important} #customizerModal .customizer-card.arctic-simple #designerEmptyState strong{font-size:12px!important} #customizerModal .customizer-card.arctic-simple #printAreaWidthMeasure{transform:translate(4px,-20px)!important;z-index:12!important;background:#fffffff2!important} #customizerModal .customizer-card.arctic-simple #wizardNext,#customizerModal .customizer-card.arctic-simple #wizardNext:disabled{background:#1f523b!important;color:#fff!important;opacity:1!important;cursor:pointer!important} #customizerModal .customizer-card.arctic-simple #wizardNextReason:not([hidden]){font-size:11px!important;font-weight:500!important} @media(min-width:781px){ #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1{inset:0!important;width:100vw!important;height:100vh!important;height:100dvh!important;max-height:none!important;margin:0!important;border-radius:0!important} #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .studio-head{height:40px!important;min-height:40px!important;padding:2px 10px!important} #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleProgress{height:3px!important;margin:0 10px 3px!important} #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleSteps{height:32px!important;min-height:32px!important;padding:0 8px 3px!important} #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleSteps button{min-height:28px!important;padding:3px 8px!important} #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .customizer-layout{height:auto!important;min-height:0!important;overflow:hidden!important;padding:6px 10px 8px!important} #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .designer-wrap{display:grid!important;grid-template-columns:minmax(0,1fr) clamp(270px,30vw,360px)!important;grid-template-rows:auto minmax(0,1fr)!important;gap:6px 12px!important;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;overflow:hidden!important;padding:0!important} #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleAreas{grid-column:1!important;grid-row:1!important;width:100%!important;max-width:none!important;min-width:0!important;padding:0!important} #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .simple-area-picker{display:flex!important;align-items:center!important;gap:6px!important;min-width:0!important;overflow:hidden!important} #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .simple-methods{flex:none!important;margin:0!important} #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .simple-area-grid{display:flex!important;flex:1 1 auto!important;flex-wrap:wrap!important;gap:4px!important;min-width:0!important;max-height:76px!important;overflow:hidden!important;padding:0!important} #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .simple-area-chip{flex:0 1 auto!important;max-width:160px!important} #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .simple-area-chip>button:first-child{grid-template-columns:28px minmax(58px,1fr) 16px!important;min-width:112px!important;max-width:160px!important;height:36px!important;min-height:36px!important;padding:2px 5px!important} #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .simple-area-grid svg{width:28px!important;height:28px!important} #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .simple-area-copy small{display:none!important} #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #designerStage{grid-column:1!important;grid-row:2!important;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important;align-self:stretch!important;border-radius:12px!important;background:#f4f5f3!important} #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleRightPanel{grid-column:2!important;grid-row:1/3!important;display:flex!important;flex-direction:column!important;height:100%!important;min-height:0!important;overflow:hidden!important} #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleRightContent{flex:1 1 auto!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;padding:0 3px!important} #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleTools{display:flex!important;flex-direction:column!important;position:relative!important;width:100%!important;margin:0!important;padding:0!important} #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .simple-tool-row{gap:3px!important;order:0} #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .simple-tool-row button{height:38px!important;min-height:38px!important;padding:1px!important} #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleContext{order:1} #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleContext #studioColorBar{display:flex!important;visibility:visible!important;order:1;height:auto!important;opacity:1!important;margin:3px 0!important;padding:4px 2px!important;gap:7px!important;flex-wrap:wrap!important;overflow:visible!important;border:0!important} #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #studioColorBar .swatch{flex-basis:28px!important;width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important} #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleTools>.transform-size-control{order:2;margin:3px 0!important;min-height:32px!important} #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleMore{order:3} #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleUpload{display:flex!important;width:100%!important;margin:4px 0!important;padding:0!important;justify-content:flex-start!important} #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleUpload>label:first-child{display:flex!important;min-height:38px!important;padding:7px 10px!important} #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleSampleChips{display:block!important;width:100%!important;max-height:none!important;margin:2px 0 0!important;padding:0!important} #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .sample-chips-label{margin-bottom:3px!important;font-size:10px!important} #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .sample-chips-row{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:4px!important;max-height:none!important;overflow:visible!important} #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleSampleChips button{min-width:0!important;min-height:38px!important;padding:2px!important;justify-content:center!important} #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleSampleChips img{width:32px!important;height:32px!important} #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleSampleChips button span{display:none!important} #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #wizardFooter{position:relative!important;inset:auto!important;display:flex!important;flex:none!important;width:100%!important;margin:0!important;padding:6px 3px 0!important;background:#fff!important} #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #wizardNext{max-width:none!important;min-height:42px!important;font-size:14px!important} } @media(max-width:780px){ #customizerModal .customizer-card.arctic-simple{position:absolute!important;inset:0!important;width:100vw!important;margin:0!important;border-radius:0!important} #customizerModal .customizer-card.arctic-simple .studio-head{height:42px!important;min-height:42px!important;padding:2px 8px!important} #customizerModal .customizer-card.arctic-simple #simpleProgress{margin:0 8px 3px!important} #customizerModal .customizer-card.arctic-simple #simpleSteps{padding-bottom:3px!important} #customizerModal .customizer-card.arctic-simple .customizer-layout{overflow-y:auto!important;overflow-x:hidden!important} #customizerModal .customizer-card.arctic-simple .designer-wrap{min-height:0!important;overflow:visible!important} #customizerModal .customizer-card.arctic-simple #simpleRightPanel{display:flex;flex-direction:column;overflow:visible} #customizerModal .customizer-card.arctic-simple #simpleRightContent{overflow:visible} #customizerModal .customizer-card.arctic-simple #simpleContext #studioColorBar{display:flex!important;visibility:visible!important;height:auto!important;opacity:1!important;flex-wrap:wrap!important;overflow:visible!important} #customizerModal .customizer-card.arctic-simple #simpleUpload{display:flex!important} #customizerModal .customizer-card.arctic-simple #simpleSampleChips{display:block!important} #customizerModal .customizer-card.arctic-simple .sample-chips-row{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible!important} #customizerModal .customizer-card.arctic-simple #simpleSampleChips button{min-width:0;padding:3px;justify-content:center} #customizerModal .customizer-card.arctic-simple #simpleSampleChips button span{display:none} #customizerModal .customizer-card.arctic-simple #wizardFooter{position:sticky!important;bottom:0!important;margin:0!important;background:#fff!important} } /* 12.25.2 review: content-driven right panel (no empty band), wrapping swatches, chips that fit narrow iframes. */ @media(min-width:781px){ #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleRightContent{flex:0 1 auto!important} #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #wizardFooter{margin-top:10px!important} #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleContext #studioColorBar{flex-wrap:wrap!important;overflow:visible!important} #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .simple-area-chip,#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .simple-area-chip>button:first-child{min-width:0!important;max-width:150px!important} #customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .simple-area-chip{flex:0 1 150px!important} } /* 12.25.2 gap round: override the older repeated-ID desktop rules at their actual specificity. The right rail is content-sized until it needs to scroll; its action bar is always the final, non-scrolling flex item. */ @media(min-width:781px){ #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleRightPanel{display:flex!important;flex-direction:column!important;height:100%!important;max-height:100%!important;min-height:0!important;overflow:hidden!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleRightContent{flex:0 1 auto!important;min-height:0!important;overflow-x:hidden!important;overflow-y:auto!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #wizardFooter{position:static!important;inset:auto!important;flex:none!important;align-self:auto!important;width:100%!important;margin:10px 0 0!important;padding:0 3px!important;background:#fff!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .simple-area-grid{flex-wrap:wrap!important;overflow:hidden!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .simple-area-chip{flex:1 1 112px!important;width:auto!important;min-width:0!important;max-width:150px!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .simple-area-chip>button:first-child{grid-template-columns:28px minmax(0,1fr) 16px!important;width:100%!important;min-width:0!important;max-width:150px!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .simple-area-copy strong{overflow:visible!important;text-overflow:clip!important;white-space:nowrap!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleContext #studioColorBar{display:flex!important;flex-wrap:wrap!important;width:100%!important;max-width:100%!important;overflow:visible!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #studioColorBar .swatch{flex:0 0 28px!important} } @media(min-width:781px){#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #simpleContext #studioColorBar{flex-wrap:wrap!important;overflow:visible!important;max-width:100%!important;width:100%!important;height:auto!important;max-height:none!important;row-gap:6px!important}} @media(min-width:781px){#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #studioColorSwatches{flex-wrap:wrap!important;overflow:visible!important;max-width:100%!important;height:auto!important;max-height:none!important;row-gap:6px!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .simple-area-grid{max-height:none!important;overflow:visible!important}} @media(min-width:781px){#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1{width:100vw!important;max-width:100vw!important;left:0!important;right:0!important;margin:0!important}} @media(min-width:781px){#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 .designer-wrap{height:100%!important;max-height:none!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple.wizard-step-1 #designerStage{max-height:none!important}} /* 12.26.5: phone step 2/3 — action bar is fixed to the bottom and the content reserves its height, so colour/finish choices are never under the buttons. */ @media(max-width:780px){ #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple:not(.wizard-step-1) #wizardFooter{position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;transform:none!important;z-index:60!important;margin:0!important;padding:8px 12px calc(8px + env(safe-area-inset-bottom))!important;background:#fff!important;box-shadow:0 -6px 18px #0000001a!important} #customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal#customizerModal .customizer-card.arctic-simple:not(.wizard-step-1) .customizer-layout{padding-bottom:calc(120px + env(safe-area-inset-bottom))!important} } @layer studio-layers { #customizerModal .arctic-simple #simpleLayers{display:block!important;order:3!important;margin:10px 0 0!important;padding:0!important;border:1px solid #d9e3dd;border-radius:10px;background:#fff;color:#1f3d2f} #customizerModal .arctic-simple #simpleLayers[hidden]{display:none!important} #customizerModal .arctic-simple #simpleLayers>summary{display:flex!important;align-items:center;justify-content:space-between;min-height:44px;padding:8px 12px;cursor:pointer;font-size:13px;font-weight:600;list-style:none} #customizerModal .arctic-simple #simpleLayers>summary::after{content:'＋';margin-left:auto;padding-left:10px} #customizerModal .arctic-simple #simpleLayers[open]>summary::after{content:'−'} #customizerModal .arctic-simple #simpleLayerCount{margin-left:8px;color:#617268;font-weight:400} #customizerModal .arctic-simple #simpleLayers>p{margin:0;padding:0 10px 8px;color:#617268;font-size:11px;line-height:1.4} #customizerModal .arctic-simple #simpleLayers #editorLayerList{display:flex!important;flex-direction:column!important;gap:4px;max-height:160px!important;overflow-y:auto!important;margin:0!important;padding:0 8px 8px!important} #customizerModal .arctic-simple #simpleLayers .editor-layer-choice{display:flex!important;justify-content:space-between;align-items:center;gap:8px;width:100%;min-height:44px!important;margin:0!important;padding:7px 9px!important;border:1px solid #e1e8e3;border-radius:8px;background:#fff;color:#263d30;text-align:left;font-size:12px} #customizerModal .arctic-simple #simpleLayers .editor-layer-choice span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #customizerModal .arctic-simple #simpleLayers .editor-layer-choice small{flex:none;color:#617268;font-size:10px} #customizerModal .arctic-simple #simpleLayers .editor-layer-choice.active{background:#edf5ef;border-color:#34684d} #customizerModal .arctic-simple .simple-layer-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:0 8px 8px} #customizerModal .arctic-simple .simple-layer-actions button{display:flex!important;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:44px!important;padding:6px!important;border:1px solid #d9e3dd;border-radius:8px;background:#fff;color:#1f3d2f;font-size:12px} #customizerModal .arctic-simple .simple-layer-actions button:disabled{opacity:.4} #customizerModal .arctic-simple .simple-layer-actions #quickDeleteLayer{color:#983b35} #customizerModal .arctic-simple .simple-layer-actions .simple-action-icon{font-size:16px} #customizerModal .mobile-studio.mobile-keyboard #simpleLayers{display:none!important} } /* One placement picker for desktop and phone. Layered important rules retire the old thumbnail/ellipsis overrides without increasing selector specificity. */ @layer studio-placements { #customizerModal .arctic-simple[data-simple-step="0"] .simple-area-picker{display:block!important;max-height:none!important;overflow:visible!important;min-width:0!important;padding:10px 0 12px!important;border:0!important;border-radius:0!important;background:transparent!important} #customizerModal .arctic-simple .simple-area-heading{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;min-height:24px!important;margin:0 0 9px!important} #customizerModal .arctic-simple .simple-area-heading>strong{font-size:13px!important;line-height:1.4!important;font-weight:600!important;color:#43564a!important;letter-spacing:.01em!important} #customizerModal .arctic-simple .simple-methods{display:inline-flex!important;align-items:center!important;flex:none!important;height:auto!important;gap:2px!important;margin:0!important;padding:2px!important;border:1px solid #dce2dd!important;border-radius:10px!important;background:#edf1ed!important} #customizerModal .arctic-simple .simple-methods[data-single-method="true"]{display:none!important} #customizerModal .arctic-simple .simple-methods button{height:auto!important;min-height:40px!important;padding:7px 13px!important;border:0!important;border-radius:8px!important;background:transparent!important;color:#43564a!important;font:inherit!important;font-size:13px!important;font-weight:500!important;box-shadow:none!important} #customizerModal .arctic-simple .simple-methods button[aria-pressed="true"]{background:#fff!important;color:#233e2d!important;box-shadow:0 1px 3px #20332a12!important} #customizerModal .arctic-simple .simple-methods small{display:none!important} #customizerModal .arctic-simple .simple-area-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,128px),1fr))!important;gap:8px!important;flex:none!important;width:100%!important;min-width:0!important;height:auto!important;max-height:none!important;margin:0!important;padding:0!important;overflow:visible!important} #customizerModal .arctic-simple .simple-area-chip{display:block!important;flex:none!important;width:auto!important;min-width:0!important;max-width:none!important;margin:0!important} #customizerModal .arctic-simple .simple-area-chip>button:first-child{display:grid!important;grid-template-columns:minmax(0,1fr) 18px!important;align-items:center!important;gap:8px!important;width:100%!important;min-width:0!important;max-width:none!important;height:auto!important;min-height:64px!important;margin:0!important;padding:11px 12px!important;border:1px solid #dce2dd!important;border-radius:11px!important;background:#fff!important;color:#263b2e!important;font:inherit!important;text-align:left!important;overflow:visible!important;box-shadow:none!important;transition:background-color .15s,border-color .15s!important} #customizerModal .arctic-simple .simple-area-chip>button:first-child:hover{border-color:#a3b1a7!important;background:#f8faf7!important} #customizerModal .arctic-simple .simple-area-chip.is-selected>button:first-child{border-color:#8a9f90!important;background:#f1f5ef!important;box-shadow:none!important} #customizerModal .arctic-simple .simple-area-chip>button:first-child:focus-visible{outline:2px solid #244d38!important;outline-offset:3px!important} #customizerModal .arctic-simple .simple-area-copy{display:block!important;grid-column:1!important;min-width:0!important;width:auto!important;margin:0!important;line-height:1.35!important} #customizerModal .arctic-simple .simple-area-copy strong{display:block!important;margin:0!important;font-size:14px!important;line-height:1.35!important;font-weight:600!important;white-space:normal!important;overflow-wrap:anywhere!important;overflow:visible!important;text-overflow:clip!important} #customizerModal .arctic-simple .simple-area-copy small{display:block!important;margin:4px 0 0!important;font-size:11px!important;line-height:1.4!important;font-weight:400!important;color:#657268!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important} #customizerModal .arctic-simple .simple-area-grid button>i{display:grid!important;position:static!important;grid-column:2!important;place-items:center!important;width:18px!important;height:18px!important;margin:0!important;border:1px solid #cad3cb!important;border-radius:50%!important;background:transparent!important;color:transparent!important;font-style:normal!important;font-size:11px!important;line-height:1!important} #customizerModal .arctic-simple .simple-area-chip.is-selected>button>i{border-color:#35563f!important;background:#35563f!important;color:#fff!important} @media(max-width:1439px){ #customizerModal .arctic-simple .simple-area-grid[data-area-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr))!important} } @media(max-width:780px){ #customizerModal .arctic-simple #simpleAreas.is-collapsed .simple-area-picker{display:none!important} } @media(max-width:480px){ #customizerModal .arctic-simple .simple-area-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important} #customizerModal .arctic-simple[data-simple-step="0"] .simple-area-picker{padding-top:4px!important} } }