.wcbb{width:100%;box-sizing:border-box}
.wcbb *,.wcbb *::before,.wcbb *::after{box-sizing:border-box}
.wcbb-row{display:flex;flex-wrap:wrap;flex-direction:row;gap:16px;align-items:stretch}

/* الكمية */
.wcbb-qty{display:flex;align-items:center;justify-content:center;flex:0 0 auto;height:56px;background:#f7f7f7;border:1px solid #e6e6e6;border-radius:14px;overflow:hidden}
.wcbb .wcbb-qinput{width:64px;height:100%;border:0;background:transparent;text-align:center;font-size:16px;color:#222;padding:0;margin:0;box-shadow:none;outline:0;border-radius:0;-moz-appearance:textfield;appearance:textfield}
.wcbb .wcbb-qinput::-webkit-outer-spin-button,.wcbb .wcbb-qinput::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.wcbb button.wcbb-qbtn{width:40px;height:100%;border:0;background:transparent;color:#222;font-size:20px;font-weight:700;line-height:1;cursor:pointer;padding:0;margin:0;border-radius:0;box-shadow:none}
.wcbb button.wcbb-qbtn:hover{background:rgba(0,0,0,.06);color:#222}

/* الأزرار */
.wcbb button.wcbb-btn{flex:1 1 auto;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 28px;margin:0;border:0;border-radius:999px;color:#fff;font-size:16px;font-weight:700;line-height:1.2;text-transform:none;letter-spacing:0;text-decoration:none;cursor:pointer;box-shadow:none;-webkit-appearance:none;appearance:none;transition:filter .2s,transform .2s,background-color .2s,color .2s,box-shadow .2s}
.wcbb button.wcbb-btn-add{background-color:#3b89e8}
.wcbb button.wcbb-btn-buy{background-color:#ff3b3b}
.wcbb button.wcbb-btn:hover{filter:brightness(.92);transform:translateY(-1px);color:#fff}
.wcbb button.wcbb-btn:focus-visible,.wcbb .wcbb-qinput:focus-visible{outline:2px solid #1d4ed8;outline-offset:2px}
.wcbb .wcbb-ico{display:inline-flex;align-items:center;line-height:1;font-size:18px}
.wcbb .wcbb-ico svg{width:18px;height:18px;fill:currentColor}
.wcbb button.wcbb-btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;filter:none}
.wcbb button.wcbb-btn.is-loading{pointer-events:none;opacity:.8}
.wcbb button.wcbb-btn.is-loading .wcbb-ico{display:none}
.wcbb button.wcbb-btn.is-loading::before{content:"";width:1em;height:1em;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:wcbb-spin .6s linear infinite}
@keyframes wcbb-spin{to{transform:rotate(360deg)}}

/* الخيارات (المنتج المتغيّر) */
.wcbb-attrs{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.wcbb-attr-wrap{flex:1 1 180px}
.wcbb-attr-wrap label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.wcbb .wcbb-attr{width:100%;height:46px;padding:0 12px;border:1px solid #e6e6e6;border-radius:10px;background:#fff;color:#222;font-size:15px;margin:0}
.wcbb .wcbb-attr.wcbb-invalid{border-color:#d63638}

/* الرسائل */
.wcbb-msg{display:none;margin-top:12px;font-size:14px;line-height:1.5}
.wcbb-msg.show{display:block}
.wcbb-msg.is-error{color:#d63638}
.wcbb-msg.is-ok{color:#1a7f37}
.wcbb-notice{padding:14px;border:1px dashed #cbd5e1;border-radius:8px;color:#475569;font-size:14px;text-align:center}

/* الموبايل: الأزرار تحت بعض افتراضياً */
@media (max-width:767px){
  .wcbb-row{flex-direction:column}
  .wcbb button.wcbb-btn{width:100%;min-height:52px}
  .wcbb-qty{height:52px}
}