:root{--step-brand: #2C2E32;--step-brand-hover: #444749;--step-bg: #ffffff;--step-border: #e8e8e8;--step-text: #2C2E32;--step-text-muted: #888888;--step-success: #4a9e6b;--step-radius: 10px;--step-radius-sm: 8px;--step-transition: .22s ease}step-block{display:block;width:100%;font-family:inherit}.step-progress{display:flex;align-items:flex-start;gap:0;margin:0 0 28px;padding:0;list-style:none;counter-reset:step-counter}.step-process{display:flex;flex-direction:column;align-items:center;flex:1;position:relative}.step-process:before{content:"";position:absolute;top:14px;left:calc(-50% + 14px);right:calc(50% + 14px);height:2px;background:var(--step-border);transition:background .4s ease;z-index:0}.step-process:first-child:before{display:none}.step-process.active:before,.step-process.current:before{background:var(--step-brand)}.step-dot{width:28px;height:28px;border-radius:50%;border:2px solid var(--step-border);background:#fff;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;transition:all .3s ease}.step-num{font-size:10px;font-weight:700;color:var(--step-text-muted);transition:color .3s ease}.step-process.active .step-dot{background:var(--step-brand);border-color:var(--step-brand)}.step-process.active .step-num{display:none}.step-process.active .step-dot:after{content:"";display:block;width:8px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}.step-process.current .step-dot{border-color:var(--step-brand);animation:stepPulse 2s ease-in-out infinite}.step-process.current .step-num{color:var(--step-brand);font-weight:700}@keyframes stepPulse{0%{box-shadow:0 0 #2c2e3240}50%{box-shadow:0 0 0 6px #2c2e3200}to{box-shadow:0 0 #2c2e3200}}.step-label{font-size:9px;font-weight:600;color:var(--step-text-muted);margin-top:5px;text-transform:uppercase;letter-spacing:.05em;transition:color .3s ease;white-space:nowrap}.step-process.active .step-label,.step-process.current .step-label{color:var(--step-brand)}.step-panel{display:none;animation:stepFadeIn .28s ease}.step-panel.visible{display:block}@keyframes stepFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.step-panel-header{margin-bottom:16px}.step-panel-title{font-size:16px;font-weight:700;color:var(--step-text);margin:0 0 3px;letter-spacing:-.02em}.step-panel-subtitle{font-size:13px;color:var(--step-text-muted);margin:0}.option-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:9px;margin-bottom:4px}.pets-grid{grid-template-columns:repeat(2,1fr)}@media(min-width:480px){.pets-grid{grid-template-columns:repeat(4,1fr)}}option-item{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px 10px;border:2px solid var(--step-border);border-radius:var(--step-radius-sm);cursor:pointer;transition:all var(--step-transition);background:#fff;position:relative;text-align:center;min-height:60px;-webkit-user-select:none;user-select:none}option-item:hover{border-color:#aaa;transform:translateY(-1px);box-shadow:0 3px 10px #00000012}option-item.selected{border-color:var(--step-brand);background:var(--step-brand);color:#fff;transform:translateY(-1px);box-shadow:0 4px 14px #2c2e322e}option-item.selected .option-label,option-item.selected .option-sublabel,option-item.selected .frame-label,option-item.selected .frame-type{color:#fff}option-item.selected .option-price-delta{color:#ffffffb3}option-item.selected:after{content:"";position:absolute;top:6px;right:6px;width:15px;height:15px;border-radius:50%;background-color:#fff3;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5l2.5 2.5 4-4' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:9px;background-repeat:no-repeat;background-position:center}.option-label{font-size:13px;font-weight:600;color:var(--step-text);line-height:1.2}.option-sublabel{font-size:11px;color:var(--step-text-muted);margin-top:2px}.option-price-delta{font-size:11px;color:var(--step-text-muted);margin-top:3px}.option-icon,.pet-emoji{font-size:20px;margin-bottom:6px;display:block;line-height:1}.frame-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:9px;margin-bottom:4px}.frame-grid option-item{padding:12px 8px;min-height:90px}.frame-swatch{width:44px;height:44px;border-radius:6px;margin-bottom:8px;border:1px solid rgba(0,0,0,.1);flex-shrink:0}.frame-swatch.black{background:linear-gradient(135deg,#1a1a1a,#333,#1a1a1a)}.frame-swatch.oak{background:linear-gradient(135deg,#e4cdab,#c8aa7e,#e4cdab)}.frame-swatch.chestnut{background:linear-gradient(135deg,#3f230e,#6b3a18,#3f230e)}.frame-swatch.white{background:linear-gradient(135deg,#fff,#e8e8e8,#fff);border:1px solid #ddd}.frame-swatch.metal-black{background:linear-gradient(135deg,#2a2a2a,#555,#1a1a1a,#444,#111)}.frame-swatch.no-frame{background:transparent;border:2px dashed #ddd}.frame-label{font-size:12px;font-weight:600;color:var(--step-text)}.frame-type{font-size:10px;color:var(--step-text-muted);margin-top:1px}.frame-group-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--step-text-muted);margin:14px 0 6px}.frame-group-label:first-child{margin-top:0}.bg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px}.bg-grid option-item{padding:4px;min-height:54px;border-radius:var(--step-radius-sm)}.bg-grid option-item.selected{background:transparent;border-color:var(--step-brand);box-shadow:0 0 0 3px #2c2e321f}.bg-grid option-item.selected:after{top:3px;right:3px;width:13px;height:13px;background-color:var(--step-brand);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5l2.5 2.5 4-4' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:8px;background-repeat:no-repeat;background-position:center}.color-swatch{width:100%;aspect-ratio:1;border-radius:5px;border:1px solid rgba(0,0,0,.08)}.bg-grid .option-label{font-size:9px;color:var(--step-text-muted);margin-top:3px;font-weight:500}.bg-grid option-item.selected .option-label{color:var(--step-brand)}.color-swatch.apricot{background:#d4b6a5}.color-swatch.chestnut{background:#ccbbae}.color-swatch.red{background:#b46261}.color-swatch.orange{background:#c6876b}.color-swatch.yellow{background:#f5f5dd;border:1px solid #e8e8d0}.color-swatch.green{background:#9bc393}.color-swatch.sage{background:#aca797}.color-swatch.light-blue{background:#d7f1fd;border:1px solid #c0e4f5}.color-swatch.blue{background:#bbd4ed}.color-swatch.navy{background:#285e9c}.color-swatch.purple{background:#2596be}.color-swatch.violet{background:#dac6e1}.color-swatch.pink{background:#f6c9dd}.color-swatch.black{background:#1a1a1a}.color-swatch.white{background:#fff;border:1px solid #ddd}.color-swatch.rainbow{background:#fff;border:3px solid transparent;background-image:linear-gradient(#fff,#fff),linear-gradient(135deg,#ff6b6b,#ffd93d,#6bcb77,#4d96ff,#c77dff);background-origin:border-box;background-clip:padding-box,border-box}.upload-step-inner{background:#fafafa;border:2px dashed var(--step-border);border-radius:var(--step-radius);padding:28px 20px;text-align:center;transition:border-color var(--step-transition)}.upload-step-inner:hover{border-color:#aaa}.uploadkit-button{background:var(--step-brand)!important;color:#fff!important;border:none!important;border-radius:var(--step-radius-sm)!important;padding:14px 28px!important;font-size:15px!important;font-weight:600!important;cursor:pointer!important;width:100%!important;margin-top:8px!important}.uploadkit-button:hover{background:var(--step-brand-hover)!important}.uploadkit label{font-size:13px!important;color:var(--step-text-muted)!important;font-weight:500!important}.uploadkit{width:100%}.upload-icon{width:46px;height:46px;margin:0 auto 12px;color:var(--step-text-muted)}.upload-title{font-size:15px;font-weight:600;margin:0 0 5px;color:var(--step-text)}.upload-hint{font-size:12px;color:var(--step-text-muted);margin:0 0 16px}.pet_name_wrap{margin-top:16px;text-align:left}.pet_name_wrap label{display:block;font-size:11px;font-weight:700;color:var(--step-text);margin-bottom:5px;text-transform:uppercase;letter-spacing:.05em}.pet-name{width:100%;padding:10px 14px;border:1.5px solid var(--step-border);border-radius:var(--step-radius-sm);font-size:14px;color:var(--step-text);background:#fff;transition:border-color var(--step-transition);box-sizing:border-box}.pet-name:focus{outline:none;border-color:var(--step-brand)}.upload-error{display:none;background:#fef2f2;border:1px solid #fca5a5;color:#991b1b;border-radius:var(--step-radius-sm);padding:10px 14px;font-size:13px;margin-top:12px;text-align:left}.mug-locked{display:flex;align-items:center;gap:12px;padding:14px 16px;border:2px dashed var(--step-border);border-radius:var(--step-radius);opacity:.5;-webkit-user-select:none;user-select:none}.extras-grid{display:flex;flex-direction:column;gap:10px}extra-add{display:flex;align-items:center;gap:12px;padding:14px 16px;border:2px solid var(--step-border);border-radius:var(--step-radius);cursor:pointer;transition:all var(--step-transition);background:#fff;-webkit-user-select:none;user-select:none}extra-add:hover{border-color:#aaa}extra-add.added{border-color:var(--step-brand);background:#fafafa}extra-add.hidden{display:none}.extra-icon{width:38px;height:38px;border-radius:8px;background:#f3f3f3;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:17px}.extra-info{flex:1}.extra-name{font-size:14px;font-weight:600;color:var(--step-text);margin:0 0 2px}.extra-desc{font-size:12px;color:var(--step-text-muted);margin:0}.extra-price{font-size:13px;font-weight:600;color:var(--step-text);white-space:nowrap}.extra-toggle{width:24px;height:24px;border-radius:50%;border:2px solid var(--step-border);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;color:var(--step-text-muted);transition:all var(--step-transition);font-weight:300;line-height:1}extra-add.added .extra-toggle{background:var(--step-brand);border-color:var(--step-brand);color:#fff;content:"\2713"}.step-summary-bar{margin-top:22px;padding-top:16px;border-top:1px solid var(--step-border)}.step-freeshipping{font-size:12px;color:var(--step-text-muted);margin-bottom:10px;padding:8px 12px;background:#f8f8f8;border-radius:var(--step-radius-sm);line-height:1.4}.step-freeshipping strong{color:var(--step-success)}.subtotal-row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}.subtotal-label{font-size:13px;color:var(--step-text-muted);font-weight:500}.subtotal-prices{display:flex;align-items:baseline;gap:8px}.subtotal .money{font-size:20px;font-weight:700;color:var(--step-text)}.subtotal-compare{font-size:14px;color:var(--step-text-muted);text-decoration:line-through}.step-nav{display:flex;gap:0;align-items:stretch}before-btn{display:block;overflow:hidden;transition:width .25s ease,padding .25s ease,margin .25s ease;flex-shrink:0}next-btn{display:block;flex:1}.btn-before{display:flex;align-items:center;justify-content:center;gap:5px;padding:14px 16px;margin-right:10px;border:1.5px solid var(--step-border);border-radius:var(--step-radius-sm);background:#fff;color:var(--step-text);font-size:13px;font-weight:500;cursor:pointer;transition:all var(--step-transition);white-space:nowrap}.btn-before:hover{border-color:var(--step-brand);background:#fafafa}.btn-next{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:15px 24px;background:var(--step-brand);color:#fff;border:none;border-radius:var(--step-radius-sm);font-size:15px;font-weight:700;cursor:pointer;transition:background var(--step-transition);letter-spacing:.03em}.btn-next:hover{background:var(--step-brand-hover, #444)}.btn-next-text{position:relative;z-index:1}.btn-next-arrows{display:flex;align-items:center;gap:1px}.arrow{font-size:18px;font-weight:300;opacity:.3;line-height:1}.arrow-1{animation:arrowWave 3s ease-in-out infinite;animation-delay:0s}.arrow-2{animation:arrowWave 3s ease-in-out infinite;animation-delay:.15s}.arrow-3{animation:arrowWave 3s ease-in-out infinite;animation-delay:.3s}@keyframes arrowWave{0%,60%,to{opacity:.3;transform:translate(0)}20%{opacity:1;transform:translate(4px)}}.atc-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 24px;background:var(--step-brand);color:#fff;border:none;border-radius:var(--step-radius-sm);font-size:16px;font-weight:700;cursor:pointer;transition:all var(--step-transition);letter-spacing:.02em}.atc-btn:hover{background:#444}.atc-btn.loading{opacity:.7;pointer-events:none}.atc-btn.loading:after{content:"";width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;margin-left:8px}@keyframes spin{to{transform:rotate(360deg)}}.step-trust{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:24px;padding-top:20px;border-top:1px solid var(--step-border)}.trust-item{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--step-text-muted);font-weight:500}.trust-item svg{flex-shrink:0;opacity:.6}@media(max-width:640px){.option-grid,.frame-grid{grid-template-columns:repeat(2,1fr)}.bg-grid{grid-template-columns:repeat(5,1fr)}.step-label{font-size:8px}}#mug-extra{display:none}#mug-extra.unlocked{display:flex!important;flex-direction:row;align-items:center;gap:12px;padding:14px 16px;border:2px solid var(--step-brand);border-radius:var(--step-radius);background:#f9fffe}
/*# sourceMappingURL=/cdn/shop/t/18/assets/step-block.css.map */