.csp-wrap{
  --csp-green-dark:#0f3b2e;
  --csp-green-mid:#1f5c44;
  --csp-bg:#f3f7f2;
  --csp-border:#d7e2d4;
  --csp-text:#13312a;
  --csp-muted:#5d7a6e;
  --csp-peach:#f4e9df;
  max-width:620px;
  margin:0 0 24px;
  font-family:inherit;
  color:var(--csp-text);
  background:var(--csp-bg);
  border:1px solid var(--csp-border);
  border-radius:16px;
  padding:24px;
  box-sizing:border-box;
}
.csp-wrap *{box-sizing:border-box;}
.csp-loading{color:var(--csp-muted);font-size:14px;padding:8px 0;}

.csp-group{margin-bottom:20px;}
.csp-label{
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--csp-muted);
  margin-bottom:10px;
}
.csp-pills{display:flex;gap:10px;flex-wrap:wrap;}
.csp-pill{
  border:1px solid var(--csp-border);
  background:#fff;
  color:var(--csp-text);
  padding:10px 18px;
  border-radius:10px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:all .15s ease;
}
.csp-pill:hover{border-color:var(--csp-green-mid);}
.csp-pill.is-active{
  background:var(--csp-green-dark);
  border-color:var(--csp-green-dark);
  color:#fff;
}
.csp-pill[disabled]{opacity:.4;cursor:not-allowed;}

.csp-qty{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--csp-border);
  border-radius:10px;
  background:#fff;
  overflow:hidden;
}
.csp-qty-btn{
  border:none;
  background:transparent;
  width:42px;
  height:42px;
  font-size:18px;
  cursor:pointer;
  color:var(--csp-text);
}
.csp-qty-btn:hover{background:#eef3ec;}
.csp-qty-val{
  min-width:36px;
  text-align:center;
  font-weight:700;
  font-size:14px;
}

.csp-table{
  width:100%;
  border-collapse:collapse;
  border:1px solid var(--csp-border);
  border-radius:12px;
  overflow:hidden;
  margin-bottom:20px;
  font-size:14px;
}
.csp-table thead th{
  background:#e8efe5;
  text-align:left;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--csp-muted);
  padding:10px 16px;
  font-weight:700;
}
.csp-table td{
  padding:14px 16px;
  border-top:1px solid var(--csp-border);
  background:#fff;
}
.csp-table tr.is-active td{background:#e8efe5;}
.csp-table td:last-child{text-align:right;color:var(--csp-muted);}
.csp-table td:first-child{font-weight:700;}
.csp-table td:nth-child(2){font-weight:700;}

.csp-summary{
  background:var(--csp-peach);
  border-radius:12px;
  padding:18px 18px 16px;
  margin-bottom:18px;
}
.csp-row{
  display:flex;
  justify-content:space-between;
  font-size:14px;
  color:var(--csp-muted);
  padding:4px 0;
}
.csp-hr{border:none;border-top:1px solid #e3d3c1;margin:10px 0;}
.csp-total{font-size:20px;font-weight:800;color:var(--csp-text);}
.csp-total span:first-child{
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:700;
  align-self:center;
}

.csp-actions{display:flex;gap:10px;flex-wrap:wrap;}
.csp-btn{
  flex:1 1 150px;
  padding:14px 16px;
  border-radius:10px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  border:1px solid transparent;
  transition:opacity .15s ease;
}
.csp-btn:hover{opacity:.85;}
.csp-btn:disabled{opacity:.5;cursor:not-allowed;}
.csp-btn-primary{background:var(--csp-green-dark);color:#fff;}
.csp-btn-outline{background:#fff;border-color:var(--csp-green-dark);color:var(--csp-green-dark);}
.csp-btn-ghost{background:#fff;border-color:var(--csp-border);color:var(--csp-text);}

.csp-msg{
  font-size:13px;
  margin-bottom:14px;
  padding:10px 12px;
  border-radius:8px;
}
.csp-msg.success{background:#e3f3e8;color:var(--csp-green-dark);}
.csp-msg.error{background:#fbe7e7;color:#8a2424;}

@media (max-width:480px){
  .csp-actions{flex-direction:column;}
}

/* Hide WooCommerce's native add-to-cart form (variations dropdown,
   quantity input, button) since our widget already includes its own
   working Add to Cart / Buy Now actions. Our widget is injected via
   woocommerce_before_add_to_cart_form, so it is always the immediate
   sibling rendered right before form.cart in the DOM. */
.csp-wrap ~ form.cart{
  display:none !important;
}