:root{
  /* Use site purple variables when available; fall back to sensible defaults */
  --wclp-accent: var(--wclvac-purple, #6827d1);
  --wclp-ghost:  var(--wclvac-purple-ghost, rgba(104,39,209,.25));
  --wclp-hot:    var(--wclvac-purple, #6827d1);
  --wclp-border:#ececec;
  --wclp-muted:#667085;
  --wclp-bg:#fff;
  --wclp-shadow:0 16px 40px rgba(2,8,23,.16);
}
#wclp-drawer *{box-sizing:border-box}
.wclp-fab{position:fixed;top:120px;left:0;z-index:9999;background:var(--wclp-hot);color:#fff;display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-top-right-radius:12px;border-bottom-right-radius:12px;cursor:pointer;box-shadow:var(--wclp-shadow);font-weight:700;letter-spacing:.2px}
.wclp-fab .wclp-fab-arrow{transform:rotate(180deg);font-size:20px;line-height:1}
.wclp-overlay{position:fixed;inset:0;background:rgba(2,8,23,.5);z-index:9997}
.wclp-drawer{position:fixed;inset:0 auto 0 0;width:min(420px,93vw);background:var(--wclp-bg);box-shadow:var(--wclp-shadow);transform:translateX(-105%);transition:transform .25s ease;z-index:9998;display:flex;flex-direction:column;border-right:1px solid var(--wclp-border)}
.wclp-drawer.open{transform:translateX(0)}
.wclp-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--wclp-border);font-weight:800}
.wclp-close{border:0;background:transparent;font-size:28px;cursor:pointer;color:#0b0f1a}
.wclp-search-wrap{padding:12px 14px;border-bottom:1px solid var(--wclp-border)}
#wclp-search{width:100%;padding:12px 14px;border:1px solid var(--wclp-border);border-radius:12px;background:#fafafa}
.wclp-list{overflow:auto;height:100%;padding:8px 0 120px}
.wclp-group-title{font-weight:800;font-size:12px;color:#9c5810;padding:10px 16px;position:sticky;top:0;background:linear-gradient(180deg,#fff 70%,rgba(255,255,255,0));backdrop-filter:saturate(120%)}
.wclp-item{display:grid;grid-template-columns:56px 1fr auto;gap:12px;padding:12px 16px;border-bottom:1px dashed var(--wclp-border)}
.wclp-thumb img{width:56px;height:56px;object-fit:cover;border-radius:10px;border:1px solid #f0f0f0}
.wclp-title{font-size:14px;font-weight:800;margin:0 0 2px}
.wclp-title a{color:inherit;text-decoration:none}
.wclp-title a:hover{text-decoration:underline}
.wclp-price{font-size:12px;color:var(--wclp-muted)}
.wclp-actions{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.wclp-qty{display:flex;align-items:center;gap:8px;background:transparent}
.wclp-qty button{border:0;background:var(--wclp-accent);width:37px;height:37px;border-radius:8px;font-size:23px;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s ease;line-height:0}
.wclp-qty button:hover{box-shadow:0 6px 14px var(--wclp-ghost)}
.wclp-qty input{width:44px;height:37px;border:1px solid var(--wclp-border);border-radius:8px;text-align:center;background:#fff}
.wclp-add{background:#fff;color:var(--wclp-accent);border:2px solid var(--wclp-accent);padding:.45rem .9rem;border-radius:12px;cursor:pointer;font-weight:700;transition:.15s ease;box-shadow:0 6px 14px var(--wclp-ghost)}
.wclp-add:hover{background:var(--wclp-accent);color:#fff;box-shadow:0 8px 18px var(--wclp-ghost)}
.wclp-add[disabled]{opacity:.6;cursor:not-allowed}
/* footer */
.wclp-footer{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:10px;padding:14px 16px;background:#fff;border-top:1px solid var(--wclp-border)}
#wclp-subtotal{font-weight:800;color:#0b0f1a}
.wclp-checkout{background:var(--wclp-accent);color:#fff;padding:10px 18px;border-radius:12px;font-weight:900;border:0;cursor:pointer;box-shadow:0 6px 14px var(--wclp-ghost)}
/* variation pills */
.wclp-attrs{grid-column:1/-1;padding-left:70px;margin-top:-4px}
.wclp-attr-row{display:flex;flex-wrap:wrap;gap:10px}
.wclp-pill{border:2px solid var(--wclp-accent);color:var(--wclp-accent);background:#fff;border-radius:12px;padding:.45rem .9rem;font-weight:700;cursor:pointer;transition:.15s ease;box-shadow:0 6px 14px var(--wclp-ghost)}
.wclp-pill.active{background:var(--wclp-accent);color:#fff;box-shadow:0 8px 18px var(--wclp-ghost)}
.wclp-variant-price{font-size:12px;color:var(--wclp-muted);margin-top:4px}
@media (max-width:480px){.wclp-fab{top:auto;bottom:24px}.wclp-attrs{padding-left:0}}