@font-face{font-family:"Presta Extended";src:url("assets/PrestaExtendedItalic.otf") format("opentype");font-weight:400 950;font-style:italic;font-display:swap}
:root{--accent:#1f7cff;--main-print:#ffffff;--logo-color:#ffffff;--side-road-color:#ffffff;--side-road-letter-color:#1f7cff;--sleeve-name-color:#ffffff;--sleeve-icon-color:#ffffff;--front-name-color:#1f7cff;--back-city-color:#1f7cff;--back-name-color:#1f7cff;--back-icon-color:#ffffff;--hoodie-color:#050505;--hoodie-tint-opacity:0;--print-shift-left:3.5%;--logo-front-left:31%;--logo-front-top:13.8%;--logo-front-width:9.4%;--logo-front-height:12.6%;--logo-back-left:65.4%;--logo-back-top:12.5%;--logo-back-width:21.4%;--logo-back-height:24.8%;--sleeve-road-left:28.5%;--sleeve-road-top:64.2%;--sleeve-road-rotate:174deg;--sleeve-right-left:72.2%;--sleeve-right-mettmann-left:73.3%;--sleeve-right-top:63.6%;--sleeve-right-rotate:189deg;--sleeve-right-gap:.42em;--front-name-left:35.7%;--front-name-top:22.1%;--back-city-left:76.1%;--back-city-top:29.8%;--back-name-left:76.7%;--back-name-top:34.2%;--site-font:Arial,Helvetica,sans-serif;--print-font:"Presta Extended",Arial,Helvetica,sans-serif;--bg:#0b0c0e;--panel:#151617;--line:rgba(255,255,255,.1)}
*{box-sizing:border-box;margin:0;padding:0}
body{min-height:100vh;background:var(--bg);color:white;font-family:var(--site-font);overflow:hidden}
button,input,select{font-family:var(--site-font)}
.filter-defs{position:absolute;width:0;height:0;overflow:hidden}
.order-form{display:none}
.topbar{height:76px;display:grid;grid-template-columns:260px 1fr 330px;align-items:center;border-bottom:1px solid var(--line);background:#0d0e10;padding:0 28px}
.brand{display:flex;align-items:center;gap:12px}.brand-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#202225;border:1px solid var(--line);overflow:hidden}.brand-icon img{width:100%;height:100%;object-fit:cover}.brand-text{font-size:28px;font-weight:900;letter-spacing:0}
nav{display:flex;justify-content:center;gap:46px;height:100%;align-items:center}nav a{color:#eee;text-decoration:none;font-weight:800;font-size:15px;height:100%;display:flex;align-items:center;opacity:.9}nav a.active{position:relative;color:white}nav a.active:after{content:"";position:absolute;bottom:0;left:50%;width:50px;height:4px;background:var(--accent);transform:translateX(-50%);border-radius:3px 3px 0 0}
.top-actions{display:flex;justify-content:flex-end;gap:12px}.reset{background:transparent;border:0;color:white;font-weight:800;cursor:pointer}.cart-small{background:var(--accent);color:white;border:0;border-radius:5px;padding:12px 18px;font-weight:900;cursor:pointer}
.layout{height:calc(100vh - 76px);display:grid;grid-template-columns:1fr 440px}.preview{position:relative;background:radial-gradient(circle at 45% 35%,#343638 0,#171819 42%,#0b0c0e 100%);border-right:1px solid var(--line);overflow:hidden}
.hoodie-stage{position:absolute;left:50%;top:8%;height:78%;aspect-ratio:701/561;transform:translateX(-50%)}
.hoodie-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 22px 35px rgba(0,0,0,.55))}
.hoodie-tint{position:absolute;inset:0;z-index:1;background:var(--hoodie-color);opacity:var(--hoodie-tint-opacity);mix-blend-mode:color;pointer-events:none}
.logo-print{position:absolute;z-index:5;background:url("assets/roadlions-logo-white.png") center/contain no-repeat;pointer-events:none;filter:url("#logoTintFilter") drop-shadow(0 2px 2px rgba(0,0,0,.65))}
.logo-front{left:calc(var(--logo-front-left) - var(--print-shift-left));top:var(--logo-front-top);width:var(--logo-front-width);height:var(--logo-front-height)}
.logo-back{left:calc(var(--logo-back-left) - var(--print-shift-left));top:var(--logo-back-top);width:var(--logo-back-width);height:var(--logo-back-height)}
.print{position:absolute;z-index:2;font-family:var(--print-font);font-weight:950;letter-spacing:0;text-shadow:0 1px 1px rgba(0,0,0,.35);line-height:1;white-space:nowrap}.accent{color:var(--accent)}
.main-print{color:var(--main-print)}
.sleeve-road span{color:var(--side-road-letter-color);font-size:1.42em}
.editable,.editable-white{cursor:text;outline:none;border:1px dashed transparent;border-radius:6px;padding:3px 6px;min-width:28px;pointer-events:auto;text-transform:uppercase}
.editable:hover,.editable:focus,.editable-white:hover,.editable-white:focus{border-color:rgba(255,255,255,.8);background:rgba(0,0,0,.35);box-shadow:0 0 0 3px rgba(31,124,255,.22)}
.print-initial,.back-city:first-letter{font-size:1.22em}
.sleeve-right-group .print-initial{font-size:1.42em}
.fixed-print{pointer-events:none}
.sleeve-road{color:var(--side-road-color);font-size:clamp(10px,1.3vh,17px);writing-mode:vertical-rl;transform:rotate(180deg)}
.sleeve-road-front{left:calc(14.1% - var(--print-shift-left));top:19.2%}
.sleeve-road-side{left:calc(var(--sleeve-road-left) - var(--print-shift-left));top:var(--sleeve-road-top);transform:rotate(var(--sleeve-road-rotate));transform-origin:center}
.sleeve-right-group{left:calc(var(--sleeve-right-left) - var(--print-shift-left));top:var(--sleeve-right-top);font-size:clamp(9px,1.2vh,15px);color:var(--sleeve-name-color);writing-mode:vertical-rl;transform:rotate(var(--sleeve-right-rotate));transform-origin:center;display:inline-flex;align-items:center;gap:var(--sleeve-right-gap);pointer-events:none}
.sleeve-right-group.is-mettmann{left:calc(var(--sleeve-right-mettmann-left) - var(--print-shift-left))}
.sleeve-right-name{color:var(--sleeve-name-color)}
.sleeve-social-icon{position:relative;width:1.55em;height:1.55em;color:var(--sleeve-icon-color);fill:currentColor;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35));transform:rotate(90deg);transform-origin:center;pointer-events:none;flex:0 0 auto}
html[data-product="tshirt"] .sleeve-road-side,html[data-product="tshirt"] .sleeve-right-group,html[data-product="tshirt"] .sleeve-config{display:none}
.front-name{left:calc(var(--front-name-left) - var(--print-shift-left));top:var(--front-name-top);transform:translateX(-50%);font-family:var(--print-font);font-size:clamp(5px,.72vh,9px);color:var(--front-name-color);word-spacing:0}
.back-city{left:calc(var(--back-city-left) - var(--print-shift-left));top:var(--back-city-top);transform:translateX(-50%);font-size:clamp(9px,1.18vh,15px);color:var(--back-city-color)}
.back-name{left:calc(var(--back-name-left) - var(--print-shift-left));top:var(--back-name-top);transform:translateX(-50%);font-size:clamp(7px,.92vh,11px);color:var(--back-name-color);display:flex;align-items:center;gap:0}
.back-name #backName{margin-left:-.08em}
.back-name .social-icon{color:var(--back-icon-color)}
.social-icon{width:1.55em;height:1.55em;flex:0 0 auto;display:block;fill:currentColor;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.social-icon.hidden,.sleeve-social-icon.hidden{display:none}
.helper{position:absolute;top:18px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.55);border:1px solid var(--line);border-radius:8px;padding:10px 16px;font-size:13px;color:#ddd}
.viewbar{position:absolute;left:5.5%;bottom:28px;width:430px;height:88px;background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:9px;display:grid;grid-template-columns:repeat(4,1fr)}
.view{color:#ddd;background:transparent;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;cursor:pointer;position:relative}.view.active:after{content:"";position:absolute;bottom:0;height:4px;width:70px;background:var(--accent);border-radius:4px 4px 0 0}.view span{font-size:14px;font-weight:700}
.notice{position:absolute;bottom:28px;left:45%;width:410px;min-height:88px;padding:25px 30px;background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:9px;color:#d8d8d8;font-size:13px;line-height:1.45}
.panel{background:linear-gradient(180deg,#151617,#111214);padding:26px 24px;overflow:auto}.panel h1{font-size:17px;letter-spacing:.02em;margin-bottom:22px}.block{border:1px solid var(--line);border-left:0;border-right:0;border-top:0;padding:24px 0 26px}.product-block{padding-top:0}.block h2{font-size:14px;margin-bottom:22px;font-weight:900}
label{display:block;color:#c8c8c8;font-size:13px;margin-bottom:10px}select,.input-wrap{width:100%;height:46px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,#2b2d2f,#232426);border-radius:5px;color:white;margin-bottom:18px}select{padding:0 15px;font-weight:800}.input-wrap{display:flex;align-items:center;padding:0 12px}input{flex:1;background:transparent;color:white;border:0;outline:0;font-weight:900;text-transform:uppercase}.input-wrap span{color:#c9c9c9;font-size:12px}small{display:block;color:#bcbcbc;font-size:12px;margin-top:-8px}
.product-tabs{height:46px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:4px}.product-tab{border:1px solid rgba(255,255,255,.1);border-radius:5px;background:#232426;color:#d8d8d8;font-size:13px;font-weight:900;cursor:pointer}.product-tab:hover,.product-tab:focus-visible{border-color:rgba(255,255,255,.45);outline:none}.product-tab.active{background:var(--accent);border-color:var(--accent);color:white}
.color-row{min-height:46px;display:flex;align-items:center;gap:12px;margin-bottom:18px}.color-palette{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.color-swatch{width:28px;height:28px;flex:0 0 auto;border:2px solid rgba(255,255,255,.2);border-radius:50%;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);transition:transform .15s,border-color .15s,box-shadow .15s}.color-swatch[data-color="#ffffff"]{background:#fff!important;border-color:#2a2c30;box-shadow:0 0 0 1px rgba(255,255,255,.72)}.color-swatch:hover,.color-swatch:focus-visible{transform:translateY(-1px);border-color:rgba(255,255,255,.65);outline:none}.color-swatch.active{border-color:#fff;box-shadow:0 0 0 3px rgba(31,124,255,.28),inset 0 0 0 1px rgba(0,0,0,.25)}.color-swatch[data-color="#ffffff"].active{border-color:#2a2c30;box-shadow:0 0 0 3px rgba(31,124,255,.36),0 0 0 1px rgba(255,255,255,.72)}.color-row span{color:#ddd;font-size:13px;font-weight:800}
.toggle-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;font-size:14px;font-weight:800}.switch input{display:none}.switch i{width:42px;height:24px;background:#3b3d40;border-radius:20px;display:block;position:relative;cursor:pointer}.switch i:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;background:white;border-radius:50%;transition:.2s}.switch input:checked + i{background:var(--accent)}.switch input:checked + i:after{left:21px}
.pricebox{padding-top:24px}.pricebox .input-wrap{margin-bottom:16px}.order-error{min-height:18px;margin:-4px 0 14px;color:#ff6b6b;font-weight:800}.order-note{margin:0 0 14px;color:#d7dbe0;font-size:12px;line-height:1.4;font-weight:800}.cart{height:54px;width:100%;border:0;border-radius:5px;background:var(--accent);color:white;font-weight:950;cursor:pointer}.cart:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:1100px){body{overflow:auto}.topbar{grid-template-columns:1fr;gap:10px;height:auto;padding:18px}nav{display:none}.top-actions{display:none}.layout{display:block;height:auto}.preview{height:clamp(350px,82vw,640px);border-right:0;border-bottom:1px solid var(--line)}.hoodie-stage{top:50%;width:min(98vw,760px);height:auto;transform:translate(-50%,-50%)}.sleeve-road{font-size:clamp(5px,1vw,10px)}.sleeve-right-group{font-size:clamp(5px,1vw,10px)}.sleeve-right-group .sleeve-social-icon{top:1.1em;left:auto;right:auto;width:1.45em;height:1.45em;margin-left:1.15em;margin-right:-1.15em;margin-top:0;transform:rotate(90deg)}.front-name{transform:translateX(-50%) scaleX(.56);font-size:clamp(4px,.42vw,4.6px)}.back-city{font-size:clamp(5px,.88vw,9px)}.back-name{font-size:clamp(4px,.7vw,8px)}.panel{min-height:600px}}