/* ===== from website custom code block CLAUDE-CRITICAL-CSS ===== */
input.variant_custom_value[placeholder="Upload your design file"]{display:none!important}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) [data-attribute-name="Your design"]:not(:has(.cl-wrap))::after{content:"";display:block;height:250px;margin-top:6px;border-radius:12px;background:linear-gradient(90deg,#f4f4f2 25%,#ebebe8 50%,#f4f4f2 75%);background-size:200% 100%;animation:clsk 1.2s infinite linear}
@keyframes clsk{to{background-position:-200% 0}}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) :is([data-attribute-name="Color"],[data-attribute-name="Frame"]) ul{gap:8px!important}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) :is([data-attribute-name="Color"],[data-attribute-name="Frame"]) .form-check{padding:0!important;margin:0!important;min-height:0;position:relative;display:block}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) :is([data-attribute-name="Color"],[data-attribute-name="Frame"]) .form-check-input{position:absolute!important;opacity:0;width:1px;height:1px;margin:0}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) :is([data-attribute-name="Color"],[data-attribute-name="Frame"]) .radio_input_value,.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) :is([data-attribute-name="Color"],[data-attribute-name="Frame"]) .cl-dot,.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) :is([data-attribute-name="Color"],[data-attribute-name="Frame"]) .cl-cur{display:none!important}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) :is([data-attribute-name="Color"],[data-attribute-name="Frame"]) .form-check::after{content:"";display:block;width:30px;height:30px;border-radius:50%;border:1px solid rgba(0,0,0,.2);box-shadow:inset 0 0 0 2px #fff;cursor:pointer;background:var(--clsw,#ddd)}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) :is([data-attribute-name="Color"],[data-attribute-name="Frame"]) .form-check:has(:checked)::after{outline:2px solid #18211d;outline-offset:2px}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) :is([data-attribute-name="Color"],[data-attribute-name="Frame"]) .css_not_available .form-check::after{opacity:.3}
.form-check:has([data-value-name="white" i]){--clsw:#ffffff}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="white" i]:checked) .attribute_name::after{content:": White";font-weight:400;color:#6b6f6c}
.form-check:has([data-value-name="black" i]){--clsw:#25282a}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="black" i]:checked) .attribute_name::after{content:": Black";font-weight:400;color:#6b6f6c}
.form-check:has([data-value-name="navy" i]){--clsw:#1f2a44}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="navy" i]:checked) .attribute_name::after{content:": Navy";font-weight:400;color:#6b6f6c}
.form-check:has([data-value-name="sport grey" i]){--clsw:#97999b}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="sport grey" i]:checked) .attribute_name::after{content:": Sport Grey";font-weight:400;color:#6b6f6c}
.form-check:has([data-value-name="athletic heather" i]){--clsw:#acb1a6}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="athletic heather" i]:checked) .attribute_name::after{content:": Athletic Heather";font-weight:400;color:#6b6f6c}
.form-check:has([data-value-name="dark heather" i]){--clsw:#595a61}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="dark heather" i]:checked) .attribute_name::after{content:": Dark Heather";font-weight:400;color:#6b6f6c}
.form-check:has([data-value-name="heather navy" i]){--clsw:#52647c}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="heather navy" i]:checked) .attribute_name::after{content:": Heather Navy";font-weight:400;color:#6b6f6c}
.form-check:has([data-value-name="charcoal" i]){--clsw:#54585a}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="charcoal" i]:checked) .attribute_name::after{content:": Charcoal";font-weight:400;color:#6b6f6c}
.form-check:has([data-value-name="grey" i]){--clsw:#777573}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="grey" i]:checked) .attribute_name::after{content:": Grey";font-weight:400;color:#6b6f6c}
.form-check:has([data-value-name="red" i]){--clsw:#d50032}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="red" i]:checked) .attribute_name::after{content:": Red";font-weight:400;color:#6b6f6c}
.form-check:has([data-value-name="royal" i]){--clsw:#007ee0}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="royal" i]:checked) .attribute_name::after{content:": Royal";font-weight:400;color:#6b6f6c}
.form-check:has([data-value-name="true royal" i]){--clsw:#00337f}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="true royal" i]:checked) .attribute_name::after{content:": True Royal";font-weight:400;color:#6b6f6c}
.form-check:has([data-value-name="forest green" i]){--clsw:#273b33}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="forest green" i]:checked) .attribute_name::after{content:": Forest Green";font-weight:400;color:#6b6f6c}
.form-check:has([data-value-name="forest" i]){--clsw:#183028}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="forest" i]:checked) .attribute_name::after{content:": Forest";font-weight:400;color:#6b6f6c}
.form-check:has([data-value-name="kelly" i]){--clsw:#008264}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="kelly" i]:checked) .attribute_name::after{content:": Kelly";font-weight:400;color:#6b6f6c}
.form-check:has([data-value-name="maroon" i]){--clsw:#6f263d}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="maroon" i]:checked) .attribute_name::after{content:": Maroon";font-weight:400;color:#6b6f6c}
.form-check:has([data-value-name="light pink" i]){--clsw:#e4c6d4}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="light pink" i]:checked) .attribute_name::after{content:": Light Pink";font-weight:400;color:#6b6f6c}
.form-check:has([data-value-name="pink" i]){--clsw:#f7ced7}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="pink" i]:checked) .attribute_name::after{content:": Pink";font-weight:400;color:#6b6f6c}
.form-check:has([data-value-name="light blue" i]){--clsw:#9bb8d3}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="light blue" i]:checked) .attribute_name::after{content:": Light Blue";font-weight:400;color:#6b6f6c}
.form-check:has([data-value-name="sand" i]){--clsw:#dacec0}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="sand" i]:checked) .attribute_name::after{content:": Sand";font-weight:400;color:#6b6f6c}
.form-check:has([data-value-name="natural" i]){--clsw:#dfd1a7}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="natural" i]:checked) .attribute_name::after{content:": Natural";font-weight:400;color:#6b6f6c}
.form-check:has([data-value-name="butter" i]){--clsw:#fae6b5}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="butter" i]:checked) .attribute_name::after{content:": Butter";font-weight:400;color:#6b6f6c}
.form-check:has([data-value-name="purple" i]){--clsw:#4e008e}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="purple" i]:checked) .attribute_name::after{content:": Purple";font-weight:400;color:#6b6f6c}
.form-check:has([data-value-name="ivory" i]){--clsw:#e7ceb5}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="ivory" i]:checked) .attribute_name::after{content:": Ivory";font-weight:400;color:#6b6f6c}
.form-check:has([data-value-name="pepper" i]){--clsw:#4e4b4a}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="pepper" i]:checked) .attribute_name::after{content:": Pepper";font-weight:400;color:#6b6f6c}
.form-check:has([data-value-name="chambray" i]){--clsw:#b7d7e7}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="chambray" i]:checked) .attribute_name::after{content:": Chambray";font-weight:400;color:#6b6f6c}
.form-check:has([data-value-name="citrus" i]){--clsw:#ffc27b}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="citrus" i]:checked) .attribute_name::after{content:": Citrus";font-weight:400;color:#6b6f6c}
.form-check:has([data-value-name="ice blue" i]){--clsw:#d1dde6}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="ice blue" i]:checked) .attribute_name::after{content:": Ice Blue";font-weight:400;color:#6b6f6c}
.form-check:has([data-value-name="island reef" i]){--clsw:#b8ddb3}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="island reef" i]:checked) .attribute_name::after{content:": Island Reef";font-weight:400;color:#6b6f6c}
.form-check:has([data-value-name="ceramic white" i]){--clsw:#ffffff}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="ceramic white" i]:checked) .attribute_name::after{content:": Ceramic White";font-weight:400;color:#6b6f6c}
.form-check:has([data-value-name="ceramic black" i]){--clsw:#232323}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="ceramic black" i]:checked) .attribute_name::after{content:": Ceramic Black";font-weight:400;color:#6b6f6c}
.form-check:has([data-value-name="ceramic blue" i]){--clsw:#2f6fb5}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="ceramic blue" i]:checked) .attribute_name::after{content:": Ceramic Blue";font-weight:400;color:#6b6f6c}
.form-check:has([data-value-name="ceramic green" i]){--clsw:#3a8f4b}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="ceramic green" i]:checked) .attribute_name::after{content:": Ceramic Green";font-weight:400;color:#6b6f6c}
.form-check:has([data-value-name="ceramic pink" i]){--clsw:#f08fb0}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="ceramic pink" i]:checked) .attribute_name::after{content:": Ceramic Pink";font-weight:400;color:#6b6f6c}
.form-check:has([data-value-name="ceramic red" i]){--clsw:#c8102e}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="ceramic red" i]:checked) .attribute_name::after{content:": Ceramic Red";font-weight:400;color:#6b6f6c}
.form-check:has([data-value-name="ceramic yellow" i]){--clsw:#f2c230}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="ceramic yellow" i]:checked) .attribute_name::after{content:": Ceramic Yellow";font-weight:400;color:#6b6f6c}
.form-check:has([data-value-name="black frame" i]){--clsw:#222222}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="black frame" i]:checked) .attribute_name::after{content:": Black Frame";font-weight:400;color:#6b6f6c}
.form-check:has([data-value-name="white frame" i]){--clsw:#f3f3f1}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="white frame" i]:checked) .attribute_name::after{content:": White Frame";font-weight:400;color:#6b6f6c}
.form-check:has([data-value-name="wood frame" i]){--clsw:#c9a77c}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="wood frame" i]:checked) .attribute_name::after{content:": Wood Frame";font-weight:400;color:#6b6f6c}
.form-check:has([data-value-name="dark wood frame" i]){--clsw:#5b3d2a}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li:has([data-value-name="dark wood frame" i]:checked) .attribute_name::after{content:": Dark Wood Frame";font-weight:400;color:#6b6f6c}

/* ===== from website custom code block CLAUDE-PDP-LAYOUT ===== */
/* Decathlon-style buy box for personalised (Gelato) products */
form:has([data-attribute-name="Your design"]){display:flex;flex-direction:column}
form:has([data-attribute-name="Your design"]) .o_wsale_product_details_content_section_title{display:contents}
form:has([data-attribute-name="Your design"]) .o_wsale_product_details_content_section_title>*{order:2}
form:has([data-attribute-name="Your design"]) .o_wsale_product_details_content_section_title>h1{order:0}
form:has([data-attribute-name="Your design"]) .o_wsale_product_details_content_section_title>.flex-wrap{order:1}
form:has([data-attribute-name="Your design"]) .o_wsale_product_details_content_section_price{order:3;margin-bottom:1.25rem!important}
form:has([data-attribute-name="Your design"]) .o_wsale_product_details_content_section_attributes{order:4}
form:has([data-attribute-name="Your design"]) .o_wsale_product_details_content_section_cta{order:5}
form:has([data-attribute-name="Your design"]) .o_wsale_product_details_content_section_contact{order:7}
form:has([data-attribute-name="Your design"]) .o_wsale_product_details_content_section_price .oe_price{font-size:1.9rem;font-weight:800;color:#18211d!important;letter-spacing:-.01em}
/* product details accordion */
form:has([data-attribute-name="Your design"]) .o_wsale_product_details_content_section_title>.oe_structure.text-muted{order:6;position:relative;margin:0 0 1.5rem!important;padding:0 2px;border-top:1px solid #e3e3e0;border-bottom:1px solid #e3e3e0;max-height:56px;overflow:hidden;transition:max-height .45s cubic-bezier(.2,.8,.2,1);cursor:pointer;color:#4b4f4c!important;font-size:.92rem}
form:has([data-attribute-name="Your design"]) .o_wsale_product_details_content_section_title>.oe_structure.text-muted:before{content:"Product details";display:flex;align-items:center;height:56px;font-weight:700;font-size:1rem;color:#18211d;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='none' stroke='%2318211d' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") right 4px center/20px no-repeat;transition:background .3s}
html[lang^="de"] form:has([data-attribute-name="Your design"]) .o_wsale_product_details_content_section_title>.oe_structure.text-muted:before{content:"Produktdetails"}
form:has([data-attribute-name="Your design"]) .o_wsale_product_details_content_section_title>.oe_structure.text-muted.cl-open{max-height:1400px;cursor:default;padding-bottom:12px}
form:has([data-attribute-name="Your design"]) .o_wsale_product_details_content_section_title>.oe_structure.text-muted.cl-open:before{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='none' stroke='%2318211d' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")}
form:has([data-attribute-name="Your design"]) .o_wsale_product_details_content_section_title>.oe_structure.text-muted>*{opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .3s}
form:has([data-attribute-name="Your design"]) .o_wsale_product_details_content_section_title>.oe_structure.text-muted.cl-open>*{opacity:1;transform:none;transition-delay:.08s}
form:has([data-attribute-name="Your design"]) .o_wsale_product_details_content_section_title>.oe_structure.text-muted ul{padding-left:1.1rem;margin-bottom:.75rem}
/* attribute order: colour, size, text, design */
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) [data-attribute-name="Color"],.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) [data-attribute-name="Frame"]{order:1}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li.variant_attribute[data-attribute-name="Size"]{order:2}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) [data-attribute-name="Your text"]{order:3}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) [data-attribute-name="Your design"]{order:4}
/* size tiles */
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li[data-attribute-name="Size"] .badge *{color:inherit!important}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li.variant_attribute[data-attribute-name="Size"] ul.o_wsale_product_attribute{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px!important;max-width:460px}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li[data-attribute-name="Size"] .js_attribute_value label{display:block;width:100%;padding:0!important}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li[data-attribute-name="Size"] .form-check{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:50px;margin:0;padding:6px 4px!important;border:1px solid #cfd0cc;border-radius:4px;background:#fff;transition:border-color .15s,box-shadow .15s,transform .12s}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li[data-attribute-name="Size"] .form-check:hover{border-color:#18211d}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li[data-attribute-name="Size"] .form-check:active{transform:scale(.96)}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li[data-attribute-name="Size"] .form-check-input{position:absolute;inset:0;width:100%;height:100%;margin:0!important;opacity:0;cursor:pointer;z-index:1}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li[data-attribute-name="Size"] .radio_input_value{display:flex;flex-direction:column;align-items:center;gap:1px;padding:0;margin:0;font-weight:700;font-size:15px;color:#18211d;line-height:1.15}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li[data-attribute-name="Size"] .js_attribute_value:has(input:checked) .form-check{border:2px solid #18211d;padding:5px 3px!important;box-shadow:0 0 0 2px rgba(24,33,29,.08)}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li[data-attribute-name="Size"] .badge{background:none!important;border:0!important;box-shadow:none!important;color:#6b6f6c!important;font-size:10.5px;font-weight:500;padding:0;line-height:1.1;border-radius:0}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li[data-attribute-name="Size"] .css_not_available .form-check{background:#f5f5f3;border-style:dashed}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li[data-attribute-name="Size"] .css_not_available .radio_input_value>span:first-child{text-decoration:line-through;color:#9a9c99}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li[data-attribute-name="Size"] .js_attribute_value:has([data-value-name="XS"]){order:1}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li[data-attribute-name="Size"] .js_attribute_value:has([data-value-name="S"]){order:2}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li[data-attribute-name="Size"] .js_attribute_value:has([data-value-name="M"]){order:3}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li[data-attribute-name="Size"] .js_attribute_value:has([data-value-name="L"]){order:4}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li[data-attribute-name="Size"] .js_attribute_value:has([data-value-name="XL"]){order:5}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li[data-attribute-name="Size"] .js_attribute_value:has([data-value-name="2XL"]),.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li[data-attribute-name="Size"] .js_attribute_value:has([data-value-name="XXL"]){order:6}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li[data-attribute-name="Size"] .js_attribute_value:has([data-value-name="3XL"]){order:7}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li[data-attribute-name="Size"] .js_attribute_value:has([data-value-name="4XL"]){order:8}
.o_wsale_product_page_variants:has([data-attribute-name="Your design"]) li[data-attribute-name="Size"] .js_attribute_value:has([data-value-name="5XL"]){order:9}

/* ===== from website custom code block CLAUDE-DESIGN-UPLOAD ===== */
.cl-choice-h{font-size:13px;font-weight:600;margin:6px 0 6px}
.cl-choice{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.cl-opt{border:2px solid #d6d6de;border-radius:12px;padding:10px 12px;background:#fff;text-align:left;cursor:pointer;transition:.15s;font:inherit;color:#111;width:100%;line-height:1.25}
.cl-opt:hover{border-color:#111}
.cl-opt b{display:block;font-size:14px}
.cl-opt span{display:block;font-size:12px;opacity:.75;margin-top:3px}
.cl-opt.cl-on{border-color:#111;background:#111;color:#fff}
.cl-choice.cl-err .cl-opt{border-color:#d33;background:#fff3f3}
.cl-choice-msg{display:none;color:#d33;font-size:12px;margin:-4px 0 8px}
.cl-choice.cl-err + .cl-choice-msg{display:block}
@media(max-width:420px){.cl-choice{grid-template-columns:1fr}}
.cl-drop{border:2px dashed #b9b9c3;border-radius:12px;padding:22px 16px;text-align:center;cursor:pointer;background:#fafafb;transition:.15s;margin-top:6px}
.cl-drop:hover,.cl-drop.cl-over{border-color:#111;background:#f2f2f5}
.cl-drop .cl-ic{font-size:30px;line-height:1;margin-bottom:6px}
.cl-drop .cl-t{font-weight:600;font-size:15px}
.cl-drop .cl-s{font-size:12px;color:#777;margin-top:4px}
.cl-drop.cl-done{border-style:solid;border-color:#1a9c55;background:#effaf3}
.cl-drop.cl-err{border-color:#d33;background:#fff3f3}
.cl-drop img.cl-prev{max-height:150px;max-width:100%;margin:6px auto 6px;display:block;outline:1px dashed #888;outline-offset:2px;background:repeating-conic-gradient(#e9e9ee 0 25%,#fff 0 50%) 0 0/16px 16px}
.cl-drop .cl-fit{font-size:12px;margin-top:6px;color:#1a7f47}
.cl-drop .cl-fit.cl-warn{color:#b26b00}

/* ===== from website custom code block CLAUDE-DESIGN-EDITOR ===== */
@keyframes clBgIn{0%{background-color:transparent}to{background-color:#fff}}@keyframes clDown{0%{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}@keyframes clRight{0%{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}@keyframes clUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@keyframes clFade{0%{opacity:0}to{opacity:1}}@keyframes clPop{0%{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}@keyframes clSwap{0%{opacity:.25;transform:scale(.975)}to{opacity:1;transform:none}}@keyframes clOut{to{opacity:0}}@keyframes clPill{0%{opacity:0;transform:translate(-50%,18px) scale(.9)}to{opacity:1;transform:translate(-50%,0)}}@keyframes clShine{0%,72%{left:-60%}to{left:130%}}.cl-ed{display:none;position:fixed;inset:0;z-index:1100;background:#fff;color:#18211d;font-family:inherit;--line:#e6e6e3;--soft:#f4f4f2;--mut:#6b6f6c;--ink:#18211d;--acc:#18211d}body.cl-ed-open{overflow:hidden}body.cl-ed-open .cl-ed{display:flex;flex-direction:column}.cl-ed *{box-sizing:border-box}.cl-ed svg{display:block;flex:none}.cl-ed button{font:inherit;color:inherit}.cl-back,.cl-ed-head{display:flex;align-items:center;gap:8px}.cl-ed-head{height:60px;flex:none;padding:0 14px;border-bottom:1px solid var(--line);background:#fff}.cl-back{border:0;background:0 0;font-weight:600;font-size:14px;cursor:pointer;padding:8px 10px;border-radius:10px}.cl-back:hover,.cl-ib:hover{background:var(--soft)}.cl-ed-title{flex:1;min-width:0;font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:6px;border-left:1px solid var(--line)}.cl-ib{border:0;background:0 0;border-radius:9px;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;color:var(--ink)}.cl-ib.on{background:var(--ink);color:#fff}.cl-ib:disabled{opacity:.3;cursor:default;background:0 0}.cl-btn{border:1px solid var(--line);background:#fff;border-radius:10px;height:40px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-size:14px;font-weight:600;white-space:nowrap}.cl-btn.pri,.cl-btn:hover{border-color:var(--ink)}.cl-btn.pri{background:var(--ink);color:#fff}.cl-btn.pri:hover{opacity:.9}.cl-btn.sm{height:34px;padding:0 11px;font-size:13px}.cl-btn.on{background:var(--ink);border-color:var(--ink);color:#fff}.cl-btn.danger{color:#c0392b}.cl-btn.danger:hover{border-color:#c0392b}.cl-ed-msg{font-size:13px;max-width:320px;text-align:right}.cl-ed-msg.ok{color:#1a7f47}.cl-ed-msg.warn{color:#b26b00}.cl-ed-msg.err{color:#d33}.cl-ed-body{flex:1;display:flex;min-height:0}.cl-ed-rail{width:78px;flex:none;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:8px 0;gap:2px;overflow-y:auto;background:#fff}.cl-rail-b,.cl-tile span.nm{font-weight:600;color:var(--mut)}.cl-rail-b{border:0;background:0 0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 2px;font-size:11px;cursor:pointer;border-left:3px solid transparent}.cl-rail-b.on,.cl-rail-b:hover{color:var(--ink);background:var(--soft)}.cl-rail-b.on{border-left-color:var(--ink)}.cl-ed-panel{width:330px;flex:none;border-right:1px solid var(--line);overflow-y:auto;padding:16px;background:#fff}.cl-ph{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}.cl-ph b{font-size:17px}.cl-sec{font-size:12px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.05em;margin:18px 0 8px}.cl-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.cl-small{font-size:12px;color:var(--mut);line-height:1.45;margin-top:8px}.cl-big{width:100%;border:2px dashed #c9c9cf;border-radius:14px;background:var(--soft);padding:22px 10px;text-align:center;cursor:pointer;font-weight:600;font-size:14px;display:flex;flex-direction:column;align-items:center;gap:6px}.cl-big:hover{border-color:var(--ink)}.cl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.cl-grid.g2{grid-template-columns:repeat(2,1fr)}.cl-tile,.cl-tpre{border:1px solid var(--line);border-radius:12px;background:#fff;cursor:grab}.cl-tile{aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:6px;font-size:30px;position:relative}.cl-tile:hover{border-color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.06)}.cl-tile img{max-width:100%;max-height:100%;object-fit:contain;pointer-events:none}.cl-tile.tpl{padding:0;background:var(--soft)}.cl-tile span.nm{position:absolute;left:6px;bottom:5px;font-size:10px;background:rgba(255,255,255,.85);padding:1px 5px;border-radius:5px}.cl-tpre{width:100%;text-align:left;padding:12px 14px;margin-bottom:8px}.cl-tpre:hover{border-color:var(--ink)}.cl-col input,.cl-font{width:100%;cursor:pointer}.cl-font{border:0;border-bottom:1px solid var(--line);background:#fff;text-align:left;padding:10px 4px;font-size:18px}.cl-font.on,.cl-font:hover{background:var(--soft)}.cl-sws{display:flex;flex-wrap:wrap;gap:9px}.cl-swb{width:32px;height:32px;border-radius:50%;border:1px solid rgba(0,0,0,.18);box-shadow:inset 0 0 0 2px #fff;cursor:pointer;padding:0}.cl-swb.on{outline:2px solid var(--ink);outline-offset:2px}.cl-swb.sm{width:26px;height:26px}.cl-chips{display:flex;flex-wrap:wrap;gap:6px}.cl-chip,.cl-in{border:1px solid var(--line);background:#fff}.cl-chip{border-radius:9px;padding:7px 11px;font-size:13px;font-weight:600;cursor:pointer}.cl-chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}.cl-in{width:100%;border-radius:10px;padding:9px 11px;font:inherit;font-size:14px;color:var(--ink)}textarea.cl-in{min-height:64px;resize:vertical}select.cl-in{height:40px;padding:0 10px}.cl-num{width:70px!important;text-align:center}.cl-rng{display:flex;align-items:center;gap:10px}.cl-rng input[type=range]{flex:1;accent-color:var(--ink)}.cl-col{position:relative;width:32px;height:32px;border-radius:50%;overflow:hidden;cursor:pointer;display:inline-block;flex:none;border:1px solid rgba(0,0,0,.18);background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.cl-col input{position:absolute;inset:0;opacity:0;height:100%}.cl-lay,.cl-lo{border:1px solid var(--line);background:#fff;cursor:pointer;display:flex;align-items:center}.cl-lay{gap:8px;border-radius:11px;padding:6px 6px 6px 10px;margin-bottom:6px}.cl-lay.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}.cl-lay span{flex:1;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cl-lay .cl-ib{width:30px;height:30px}.cl-lo{border-radius:12px;padding:8px;flex-direction:column;gap:6px;font-size:12px;font-weight:600}.cl-lo:hover{border-color:var(--ink)}.cl-lo svg{width:64px;height:64px}.cl-ed-wrap{flex:1;min-width:0;position:relative;background:#f1f1ef;overflow:auto}.cl-ed-wrap.drag{outline:3px dashed var(--ink);outline-offset:-10px}.cl-ed-center{min-width:100%;min-height:100%;display:flex;padding:20px 20px 110px}.cl-ed-stage{margin:auto;position:relative;border-radius:6px}.cl-ed-load,.cl-float{position:absolute;display:flex;align-items:center}.cl-ed-load{inset:0;justify-content:center;font-size:14px;color:var(--mut);background:#f1f1ef;z-index:5}.cl-float{z-index:4;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.06)}.cl-ed-zoom{right:14px;bottom:14px}.cl-ed-q,.cl-ed-zoom span{font-size:12px;font-weight:600}.cl-ed-zoom span{min-width:46px;text-align:center}.cl-ed-q{left:14px;bottom:14px;padding:7px 11px;gap:6px;display:none}.cl-ed-q.good{color:#1a7f47}.cl-ed-q.ok{color:#8a6d00}.cl-ed-q.low{color:#c0392b}.cl-views{left:50%;bottom:12px;transform:translateX(-50%);padding:6px;gap:6px}.cl-edit-head,.cl-view{display:flex;align-items:center}.cl-view{border:2px solid transparent;border-radius:10px;background:#fff;cursor:pointer;padding:4px 4px 3px;flex-direction:column;gap:2px;font-size:11px;font-weight:600;color:var(--mut);position:relative;min-width:76px}.cl-view img{width:58px;height:58px;object-fit:contain;background:#f1f1ef;border-radius:7px}.cl-view.on{border-color:var(--ink);color:var(--ink)}.cl-view i{position:absolute;top:6px;right:8px;width:8px;height:8px;border-radius:50%;background:#1a9c55;display:none}.cl-view.has i{display:block}.cl-edit-head{gap:8px;margin-bottom:4px}.cl-edit-head b{flex:1;font-size:17px}.cl-acts,.cl-al{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}.cl-al .cl-ib{width:100%;border:1px solid var(--line)}.cl-acts{grid-template-columns:repeat(2,1fr);gap:6px}.cl-ed-open-btn,.cl-ed-pill{background:#18211d;color:#fff;border:0;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px}.cl-ed-open-btn{width:100%;justify-content:center;margin:2px 0 8px;padding:12px;border-radius:10px}.cl-ed-open-btn:hover{opacity:.92}.cl-ed-pill{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:5;border-radius:999px;padding:11px 20px;font:inherit;box-shadow:0 6px 18px rgba(0,0,0,.2);white-space:nowrap}.cl-swatches{gap:8px!important}.cl-swatches .form-check{padding:0!important;margin:0!important;min-height:0}.cl-swatches .form-check-input{position:absolute;opacity:0;width:1px;height:1px;margin:0}.cl-swatches .radio_input_value{display:none}.cl-dot{display:block;width:30px;height:30px;border-radius:50%;border:1px solid rgba(0,0,0,.2);box-shadow:inset 0 0 0 2px #fff;cursor:pointer}.cl-swatches .form-check-input:checked~.cl-dot{outline:2px solid #18211d;outline-offset:2px}.cl-swatches .css_not_available .cl-dot{opacity:.3}.cl-cur{font-weight:400;color:#6b6f6c}@media (max-width:820px){.cl-ed-head{height:56px;padding:0 8px;gap:4px}.cl-back span,.cl-ed-msg,.cl-ed-title{display:none}.cl-ed-head .cl-btn{height:36px;padding:0 12px}.cl-ed-body{flex-direction:column;position:relative}.cl-ed-rail{order:3;width:auto;flex-direction:row;border-right:0;border-top:1px solid var(--line);padding:0;overflow-x:auto}.cl-rail-b{flex:1;min-width:64px;border-left:0;border-top:3px solid transparent;padding:8px 2px}.cl-rail-b.on{border-top-color:var(--ink)}.cl-ed-panel{order:2;width:auto;max-height:42vh;border-right:0;border-top:1px solid var(--line);padding:12px}.cl-ed-panel:empty{display:none}.cl-ed-wrap{order:1}.cl-ed-center{padding:10px 10px 96px}.cl-view img{width:44px;height:44px}.cl-view{min-width:60px}}.cl-ed.cl-in{animation:clBgIn .38s ease both}.cl-ed.cl-in .cl-ed-head{animation:clDown .5s cubic-bezier(.2,.8,.2,1) .05s both}.cl-ed.cl-in .cl-ed-rail{animation:clRight .5s cubic-bezier(.2,.8,.2,1) .1s both}.cl-ed.cl-in .cl-rail-b{animation:clUp .42s cubic-bezier(.2,.8,.2,1) both}.cl-ed.cl-in .cl-rail-b:nth-child(1){animation-delay:.16s}.cl-ed.cl-in .cl-rail-b:nth-child(2){animation-delay:.2s}.cl-ed.cl-in .cl-rail-b:nth-child(3){animation-delay:.24s}.cl-ed.cl-in .cl-rail-b:nth-child(4){animation-delay:.28s}.cl-ed.cl-in .cl-rail-b:nth-child(5){animation-delay:.32s}.cl-ed.cl-in .cl-rail-b:nth-child(6){animation-delay:.36s}.cl-ed.cl-in .cl-rail-b:nth-child(7){animation-delay:.4s}.cl-ed.cl-in .cl-ed-panel{animation:clRight .55s cubic-bezier(.2,.8,.2,1) .18s both}.cl-ed.cl-in .cl-ed-wrap{animation:clFade .35s ease .05s both}.cl-ed.cl-in .cl-float{animation:clUp .45s cubic-bezier(.2,.8,.2,1) .5s both}.cl-ed.cl-flying .cl-ed-load,.cl-ed.cl-flying .cl-ed-stage{opacity:0}.cl-ed-stage{transition:opacity .28s ease}.cl-ed.cl-out{animation:clOut .3s ease both}.cl-ed.cl-out .cl-ed-panel,.cl-ed.cl-out .cl-ed-rail{transition:transform .3s ease;transform:translateX(-24px)}.cl-ed.cl-out .cl-ed-head{transition:transform .3s ease;transform:translateY(-14px)}.cl-ed.cl-out .cl-ed-stage{opacity:0}.cl-flip-img{position:fixed;mix-blend-mode:multiply;z-index:1200;object-fit:contain;transform-origin:0 0;pointer-events:none;will-change:transform;border-radius:6px;background:0 0}.cl-ed-panel.cl-anim>*{animation:clUp .32s cubic-bezier(.2,.8,.2,1) both}.cl-ed-panel.cl-anim>:nth-child(2){animation-delay:.03s}.cl-ed-panel.cl-anim>:nth-child(3){animation-delay:.06s}.cl-ed-panel.cl-anim>:nth-child(4){animation-delay:.09s}.cl-ed-panel.cl-anim>:nth-child(5){animation-delay:.12s}.cl-ed-panel.cl-anim>:nth-child(n+6){animation-delay:.15s}.cl-ed-panel.cl-anim .cl-grid>*{animation:clPop .36s cubic-bezier(.2,.8,.2,1) both}.cl-ed-panel.cl-anim .cl-grid>:nth-child(2){animation-delay:.04s}.cl-ed-panel.cl-anim .cl-grid>:nth-child(3){animation-delay:.08s}.cl-ed-panel.cl-anim .cl-grid>:nth-child(4){animation-delay:.12s}.cl-ed-panel.cl-anim .cl-grid>:nth-child(5){animation-delay:.16s}.cl-ed-panel.cl-anim .cl-grid>:nth-child(6){animation-delay:.2s}.cl-ed-panel.cl-anim .cl-grid>:nth-child(n+7){animation-delay:.24s}.cl-ed-stage.cl-swap{animation:clSwap .42s cubic-bezier(.2,.8,.2,1) both}.cl-big,.cl-btn,.cl-cat,.cl-chip,.cl-font,.cl-ib,.cl-lo,.cl-rail-b,.cl-swb,.cl-tile,.cl-tpre{transition:transform .16s ease,box-shadow .2s ease,background-color .2s ease,border-color .2s ease,color .2s ease}.cl-big:active,.cl-btn:active,.cl-cat:active,.cl-chip:active,.cl-font:active,.cl-ib:active,.cl-lo:active,.cl-rail-b:active,.cl-swb:active,.cl-tile:active,.cl-tpre:active{transform:scale(.94)}.cl-lo:hover,.cl-rail-b:hover svg,.cl-tile:hover{transform:translateY(-2px)}.cl-rail-b svg{transition:transform .2s cubic-bezier(.2,.8,.2,1)}.cl-rail-b.on svg{transform:scale(1.08)}.cl-cats{display:flex;gap:6px;overflow-x:auto;margin:-2px -2px 10px;padding:2px;scrollbar-width:none}.cl-cats::-webkit-scrollbar{display:none}.cl-cat{flex:none;border:1px solid var(--line);border-radius:999px;background:#fff;padding:6px 12px;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer;white-space:nowrap}.cl-cat.on,.cl-cat:hover{border-color:var(--ink)}.cl-cat.on{background:var(--ink);color:#fff}.cl-sty .cl-tile{aspect-ratio:auto;height:74px;font-size:21px;padding:4px 4px 16px;background:var(--soft);cursor:pointer}.cl-sty .cl-tile span:not(.nm){line-height:1.1;white-space:nowrap}.cl-sty .cl-tile svg{overflow:visible}.cl-ed-pill{animation:clPill .6s cubic-bezier(.2,.8,.2,1) .35s both;overflow:hidden;transition:box-shadow .2s ease,background-color .2s ease}.cl-ed-pill:hover{box-shadow:0 10px 26px rgba(0,0,0,.28);background:#000}.cl-ed-pill:after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);animation:clShine 4.5s ease-in-out 1.4s infinite;pointer-events:none}.cl-ed-open-btn{transition:transform .16s ease,box-shadow .2s ease}.cl-ed-open-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.14)}.cl-ed-open-btn:active{transform:scale(.97)}@media (prefers-reduced-motion:reduce){.cl-ed,.cl-ed *,.cl-ed-pill,.cl-ed-pill:after{animation:none!important;transition:none!important}}.cl-flip-img.back{mix-blend-mode:normal}.cl-gsearch svg,.cl-look{position:absolute;pointer-events:none}.cl-look{inset:0;z-index:2;background:#fff}.cl-look img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.cl-hide>.cl-look,.cl-hide>img{visibility:hidden}.cl-grid.g4{grid-template-columns:repeat(4,1fr);gap:6px}.cl-gsearch,.cl-tile.gfx{padding:7px;background:#fff}.cl-tile.gfx img{width:100%;height:100%;object-fit:contain}.cl-gsearch{position:sticky;top:-16px;z-index:3;padding:2px 0 10px;margin-top:-2px;display:flex;align-items:center}.cl-gsearch svg{left:12px;color:#6b6f6c}.cl-gsearch input{padding-left:36px!important;border-radius:10px!important;width:100%}.cl-gsec{background:var(--soft);border-radius:12px;padding:10px;margin-bottom:10px}.cl-gh{display:flex;align-items:center;justify-content:space-between;margin:0 2px 8px;font-size:13px}.cl-gback,.cl-gh button{border:0;background:0 0;font:inherit;font-weight:600;cursor:pointer}.cl-gh button{color:#2f6fdc;font-size:12.5px;padding:2px 4px}.cl-gh button:hover{text-decoration:underline}.cl-gback{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink);padding:4px 0 10px}.cl-gres{padding:10px 2px}