#cmpk-open{position:fixed;left:18px;bottom:22px;z-index:99990;margin:0;border:0;border-radius:999px;padding:13px 18px;background:#222;color:#fff;font-weight:900;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.22);animation:cmpkPulse 2.2s infinite}
@keyframes cmpkPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
#cmpk-open:hover{background:#f28c00}#cmpk-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.62)!important;z-index:999999;padding:20px;overflow:auto}
#cmpk-modal[hidden]{display:none!important}#cmpk-modal.on:not([hidden]){display:block}.cmpk-panel{position:relative;max-width:1050px;margin:20px auto;background:#fff!important;opacity:1!important;border-radius:20px;padding:24px;box-shadow:0 25px 90px #0005}
.cmpk-head{display:flex;justify-content:space-between;gap:15px}.cmpk-head small{color:#f28c00;font-weight:900;letter-spacing:1px}.cmpk-head h3{font-size:28px;margin:3px 0}.cmpk-head p{margin:0;color:#777}
#cmpk-x{border:0;background:none;font-size:34px;cursor:pointer}.cmpk-top{display:flex;align-items:center;gap:10px;margin:20px 0}.cmpk-size{border:1px solid #ddd;background:#fff;padding:9px 15px;border-radius:9px;font-weight:800;cursor:pointer}.cmpk-size.active{background:#222;color:#fff}
.cmpk-progress{margin-left:auto;min-width:180px}.cmpk-progress span{font-weight:900}.cmpk-progress i{display:block;height:7px;background:#eee;border-radius:10px;margin-top:5px;overflow:hidden}.cmpk-progress b{display:block;width:0;height:100%;background:#f28c00;transition:.25s}
.cmpk-current{display:flex;align-items:center;gap:12px;background:#fff7ed;border:1px solid #ffe1bb;border-radius:14px;padding:12px}.cmpk-thumb{width:70px}.cmpk-thumb img{width:100%;height:70px;object-fit:contain}.cmpk-current div:nth-child(2){display:flex;flex-direction:column;flex:1}.cmpk-current-add,.cmpk-add{border:0;background:#f28c00;color:#fff;border-radius:8px;padding:9px 12px;font-weight:800;cursor:pointer}
.cmpk-tools{display:grid;grid-template-columns:1fr 220px;gap:10px;align-items:center;margin:18px 0 4px}.cmpk-searchwrap{position:relative;margin:0}.cmpk-searchwrap input{width:100%;padding:13px 42px 13px 14px;border:2px solid #eee;border-radius:11px;font-size:15px}.cmpk-searchwrap input:focus{border-color:#f28c00;outline:0}.cmpk-searchwrap span{position:absolute;right:14px;top:11px;font-size:19px}.cmpk-catwrap{position:relative}#cmpk-catbtn{width:100%;padding:13px 14px;border:2px solid #f28c00;background:#fff7ed;color:#222;border-radius:11px;font-weight:900;cursor:pointer;text-align:left}#cmpk-catbtn b{float:right;color:#f28c00}#cmpk-catmenu{display:none;position:absolute;right:0;top:52px;width:250px;max-height:300px;overflow:auto;background:#fff;border:1px solid #eee;border-radius:12px;padding:7px;box-shadow:0 15px 40px #0002;z-index:50}#cmpk-catmenu.on{display:block}#cmpk-catmenu button{display:block;width:100%;border:0;background:#fff;text-align:left;padding:10px 11px;border-radius:8px;cursor:pointer;font-weight:700}#cmpk-catmenu button:hover,#cmpk-catmenu button.active{background:#fff1df;color:#e47d00}.cmpk-panel h4{margin:16px 0 10px}.cmpk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.cmpk-card{border:1px solid #e8e8e8;border-radius:13px;padding:10px;display:flex;flex-direction:column;gap:7px;background:#fff!important;opacity:1!important}.cmpk-card.selected{border:2px solid #19a64a;background:#f4fff7}.cmpk-img img{width:100%;height:150px;object-fit:contain}.cmpk-card strong{font-size:13px;line-height:1.3}.cmpk-price{font-weight:800}.cmpk-attr{width:100%;padding:7px;border:1px solid #ddd;border-radius:7px}
.cmpk-bottom{position:sticky;bottom:0;margin:20px -24px -24px;padding:15px 24px;background:#fff;border-top:1px solid #eee;display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:0 0 20px 20px}.cmpk-bottom div{display:flex;flex-direction:column}#cmpk-cart{border:0;border-radius:10px;background:#19a64a;color:#fff;padding:13px 20px;font-weight:900;cursor:pointer}#cmpk-cart:disabled{background:#bbb;cursor:not-allowed}
@media(max-width:760px){.cmpk-tools{grid-template-columns:1fr}.cmpk-catmenu{left:0;right:auto;width:100%}#cmpk-open{left:12px;bottom:14px;padding:11px 14px;font-size:13px}.cmpk-grid{grid-template-columns:repeat(2,1fr)}.cmpk-top{flex-wrap:wrap}.cmpk-progress{width:100%;margin-left:0}.cmpk-current{flex-wrap:wrap}.cmpk-current-add{width:100%}.cmpk-panel{padding:16px}.cmpk-bottom{margin:16px -16px -16px;padding:12px 16px}.cmpk-img img{height:120px}}

.cmpk-assistant{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 10px}.cmpk-assistant>div{border:1px solid #eee;border-radius:12px;padding:11px}.cmpk-assistant b{display:block;margin-bottom:8px}.cmpk-choice{display:flex;gap:6px;flex-wrap:wrap}.cmpk-choice button{border:1px solid #ddd;background:#f3f1f1;border-radius:8px;padding:8px 10px;cursor:pointer}.cmpk-choice button.on{background:#19a64a!important;color:#fff!important;border-color:#19a64a!important;box-shadow:0 3px 10px rgba(25,166,74,.22)}.cmpk-assistant select{width:100%;padding:9px;border:1px solid #ddd;border-radius:8px}#cmpk-smart-find{width:100%;border:0;border-radius:10px;background:#f28c00;color:#fff;padding:12px;font-weight:900;cursor:pointer;margin-bottom:4px}.cmpk-card{height:100%;box-sizing:border-box}.cmpk-card strong{min-height:52px}.cmpk-price{min-height:25px}.cmpk-add{margin-top:auto;background:#19a64a!important}.cmpk-add:hover{background:#13863b!important}.cmpk-price del{color:#999;font-weight:500}.cmpk-price ins{text-decoration:none;color:#f28c00}

@media(max-width:760px){.cmpk-assistant{grid-template-columns:1fr}}

#cmpk-modal .cmpk-panel,
#cmpk-modal .cmpk-assistant>div,
#cmpk-modal .cmpk-tools,
#cmpk-modal .cmpk-grid,
#cmpk-modal .cmpk-card,
#cmpk-modal .cmpk-bottom{opacity:1!important}
#cmpk-modal .cmpk-panel{isolation:isolate}


.cmpk-qty{display:grid;grid-template-columns:38px 1fr 38px;gap:6px;align-items:center;margin-top:auto}
.cmpk-qty button{height:38px;border:1px solid #ddd;background:#f7f7f7;border-radius:8px;font-size:20px;font-weight:900;cursor:pointer}
.cmpk-qty button:hover{border-color:#19a64a;color:#19a64a}
.cmpk-qtyval{width:100%;height:38px;text-align:center;border:1px solid #ddd;border-radius:8px;font-weight:900;box-sizing:border-box;-moz-appearance:textfield}
.cmpk-qtyval::-webkit-outer-spin-button,.cmpk-qtyval::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cmpk-card .cmpk-add{margin-top:0!important}